3D Websites & Ascii Art
When to Use ThreeJS and ASCII Art on a Website
The ASCII filter on ThreeJS makes for an eye-catching design, and MidJourney, softGlossary, Opening Hours Studio, Aino and Acne Studios all use it, but it brings longer load times and a bigger learning curve. My website of the week, mokk.co, pulled in a 10% conversion rate with a 3-click checkout, and I'm using that stripped-down approach for a Shopify theme for clothing brands.
Gravel Week 2
Hey there, Blaze here.
This week I’ll be breaking down the design behind 3D websites to let you know when you should vs shouldn’t use them.
ASCII art has also been a trend coming back to life, and we’ll see how modern websites are using it with ThreeJS.
One more important highlight this week will be covering a new e-commerce store selling $5 mockups and how its design pulled in over $45,000 on launch for a small team of designers.
Website of the week
Yep, this simple website pulled in a 10% conversion rate by having a 3-click checkout.
The quantity of mockups bought was even further boosted through a “buy 3 get 1 free” incentive.
It's the most basic form of e-commerce available. As I’m looking to create better products under Shovel, this will be a strong reference for a future theme.
Yeezy was a clear inspiration for this build. They pioneered a stripped-down layout to sell clothing that was all priced at $20.
The difference with clothing compared to mockups is that they have a size selection needed to be made.
Below you’ll see some samples of what I’m working on. The goal is to create the most stripped-down UI needed for a clothing brand.
The result will be a Shopify theme available for purchase this year.
More details to come soon as more sections and branding are finalized.
ThreeJS & ASCII
ThreeJS = A JavaScript framework that allows you to render 3D models on websites
ASCII Art = A form of computer art that uses the American Standard Code for Information Interchange (ASCII) to create images. aka. text art
Maybe it’s just me, but the ASCII filter on ThreeJS makes for an eye-catching design.
MidJourney customized the characters to represent AI image prompts users would enter into their Discord.
softGlossary introduces a globe you can spin around with mouse clicks.
Opening Hours Studio uses a giant rose as their backdrop.
Aino makes text-ception with letter trails and shading.
Finally, Acne Studios is an e-commerce example of the effect on the landing section.
Downsides of ThreeJS:
- Longer load times due to more JavaScript and assets needed
- Bigger learning curve with more advanced functions
- 3D modeling experience is not necessary, but certainly helps
Acne used the effect in a 2021 redesign. It’s also very possible they used a video or GIF file to display the effect. Which is most ideal when there’s no interactivity introduced with mouse clicks and page scrolls.
When you should use ThreeJS:
- When an experimental design fits your brand
- When load speed isn’t a concern
- When you have 3D assets ready to go
- When you want a 3D model to react to user actions
What’s coming for Gravel?
I’m just posting about whatever I find interesting in the world of web design. You are welcome to reply with any topics you’d like to see covered.
Here’s some work I’m looking to implement into Gravel for the upcoming future:
- Brand identity
- Blog website
- Studio/agency/freelancer features
- Early and discounted products
That’s it for now! Again, if you have any questions or feedback on this newsletter, please reply to this email!
Thanks!
Blaze SmithWeb Designer
Milwaukee
Get Gravel in your inbox
Weekly notes on design, business, and building a studio.