Web Design + 3D

I’ve been playing around with a few different web design concepts that I’m not too sure I’ll have an immediate use for, but thought they were still turning out pretty cool and would be worth sharing here. Also partially hoping to throw these up somewhere so I can reference them again in the future!

Banner Animation

This small project originally started out with me wanting to create a parallax scroll scene, however after quickly skimming a tutorial before diving right into create it I quickly realized many of the illustrations I was using wouldn’t end up working for that particular idea. (Still planning to return to it, potentially with this same mountain scene.) So instead of simply starting over I decided to try to put my existing .svgs to use and create an animated banner for a website.

View a live version of this here.

This ended up borrowing a lot from concepts I’ve explored in the past too (like a gradient animated background and .svg/CSS animations) and brought them together to create what I think is a pretty neat banner that would definitely get user attention with all the motion.

Despite the motion of the “mountains” being very unrealistic I think it still works here due to the cartoon-style of the overall banner.

I have worked on improving how this displays on smaller screen sizes (down to about tablet ~768px screen width), but there is definitely room for improvement on smaller screen sizes. Part of the solution may include just displaying the animation and displaying a static banner especially considering iOS tends to struggle with animations or not render them at all in my experience.

Spline.design

This one is probably very much at the early stages, but using Spline has made me feel far more confident in my ability to generate 3d content than in the past when I had tried to use Blender a few times. Not trying to overly promote since I’m still relatively new, but the UI for Spline is incredibly intuitive coming from an Adobe/Figma background. Additionally the ability to export and display those 3d renders has been incredibly easy. I’m looking forward to messing around with triggering different animations/transitions using the emitEvent function in the future to see how complex these animation could become.

The export can be incredibly simple, like here where the preview can be rendered using their script and viewer. I don’t think these animations are lightweight enough for something like a loading state on a site, but I could stand to be corrected here.

As a project starting from scratch that seemed easy enough I thought I could tackle part of my logomark giving the “ZM” some depth by drawing rectangles over a picture of the logo. Then I was able to group them and add a gold material to it. Might not be the best method for creating this, but was what came easy and made sense as I was creating it!

View the current project file here.

This UI has been pretty easy to navigate once I got comfortable with working in a 3d interface. There’s also a huge community of created models to borrow or get inspiration from. The phone here was taken from the community which makes it super simple to create 3d product shots or even video. I know they also have AI functionality to generate models (locked behind a subscription wall) that I may want to explore although they seem to suffer from fuzziness/artifacts like are commonly seen in AI generated SVGs/illustrations. Still could be a convenient starting place when creating complex models from scratch.

Overall, looking forward to messing around with spline more and seeing if I can more reliably add 3d design to my skillset.