How to design this kind of stuff?

All my processes, A to Z

Hello fellow designers 👋

How I’ve designed this futuristic web hero section about Ethereum? Why this typeface? What software did I use for the 3D? A fast breakdown: Tips, Tools, and secret sauces.

1. Define your desired output

Why these words? Refer to what resonates with your targeted audience

The longer, more difficult, and more exciting step. According to the audience you want to talk to, define 3 keywords that you’ll stick to and that will guide you during all your design decisions.

• Tips: It’s not about your design client. It’s about your client’s audience.
• Tools: Your brain.
• Secret sauce: The more clear your desired mood is, the better the design will be. Embrace this.

2. Make 3D that catch the eyes

Clay render vs final render

The topic is Ethereum, so let's make some crystals. The big idea is the following: Make a 3D scene of a painting of a surreal scene of giant crystals floating in the air above an infinite calm sea.

So first, make the crystals scene itself.

Peaceful yeah?

• Tips: Use a lot of references and work on composition (basic but you won't regret it).
• Tools: Cinema 4D for modeling and Redshift for rendering.
• Secret sauce: Software doesn’t matter, you can do it in Blender. Magic is in basic visual principles and breaking them (lighting, composition, colors, spaces, and contrasts).

Now, how to make it pop. Paint over? Grab your digital brush and let’s go.

“Make it pop”, they said

• Tips: Not overthink your art, just make it, it will fail many times, don’t worry about that.
• Tools: Photoshop.
• Secret sauce: You have to surrender to creativity to unleash your creative juice. Forgot about clients, audience, user research, and be confident in the 3 words you have defined.

We have our painted crystals scene, now build the main scene.

The main scene

To make the main scene, I’ve done these few steps: Make a frame, add the wood material to it, embed my first scene which I’ve painted over inside the frame. Adding some blocks with twisted glass shaders and making a cracky paint texture.

• Tips: Find your own creative system, for me, I just can’t do this kind of the main step without music.
• Tools: Cinema 4D, Redshift, Photoshop.
• Secret sauce: Break designs principles if needed. Trust your eye, if something doesn’t seem cool, change it.

3. Merge 3D and web design

Typography is the N°1 point in web design for me

Now, we have to “use” our scene for the web design. I’ve decided to do a hero section, classic to present the design and the Art Direction.

• Tips: Focus on the typography. Why did you choose this typeface?
• Tools: Figma
• Secret sauce: Use your art soft power by keeping an eye on composition and coherence within the typeface, spacing, and layouts. And use an 8px grid.

Less is more, headline, CTA, and navigation. Nothing else

That's it! This design is a sample of what you can do with 3D in web design. If you have any questions about it I’d be happy to discuss this at duprez.hugo@gmail.com

Follow me for more case studies like this and don’t forget to surrender to creativity! :D