Research

We wanted something to reflect our brand's personality: the design is creative, navigation is unique and to make it an immersive experience we planned to add sounds and music.

Branding

Our studio focuses on successfuly getting to the goal and collaborating.

3D Stuff

To make our website even more reconizable, we modelled 3D rooms, instead of boring, scrollable section. We turned it into a interactive carousel with hotspots.

Web design

From the concept we knew our website can't be a normal, scrollable page. Instead, we wanted it to be unforgettable, and bringing together our skills: web design, strategy, development, sound design and 3D stuff.

Sounds & music

We used ElevenLabs to generate the base sounds, and then edited in Audacity, creating 3 versions of hover "pop" sounds.

Toolkit

This was our biggest project. We used Blender, Audacity, ElevenLabs, Affinity, Figma, VS Code and Jitter.video.

Research

We determinated the target audience the product was directed forward. These were web designers, students and brands that want to present their work in a truly exceptional way. The feel of the brand was designed to be bold and playful, to cut through the noise.

Branding

We focused on creating something playful, simple and letting the mockups speak for the brand.

Mockups

The most important thing to do was making the mockups of course. We plan to make 20 packs of 16 premium mockups. All of them are 6K, available in both Figma and Photoshop files. The library includes card, laptop and mobile mockups. Some of them have changeable backgrounds.

Web design

To attract customers and build trust, we needed a website. A playful and bold, to standout. We determinated keywords and style. The orange color choosen in branding section is dynamic, symbolizes action. The website's role here is to sell, so we had conversion-focused approach.

An important phase of designing are the animations and interactions. We believe that they tell a story.

Toolkit

As usual, we used Blender for mockups, Figma for design and visuals and Jitter.video for animations and motion graphics.

Exploration

We needed something that felt sharp, professional, and dynamic. We wanted to use animations and custom interactions.

Design system

We designed consistent font scaling system, which used Golden Ratio. We decided to explore some button varations, and we settled on the rounded one.

Branding

After building the website, we needed to develop a meaningful logo. We went with intelligence, integrity, motion and changes.

Web design

That's what Designify is about. We designed animations, landing page and "Join us" page. We also developed a optimized WebGL gradient.

Toolkit

We used Figma for design and Unicorn Studio for custom WebGL. Then, we used Blender and Wannathis.one to create premium mockups to present the designs.

The idea

Every great project deserves great presentation. That's why we made this collection. Stock templates are non-design-directed, don't have personality. But these are exceptional.

The 3 directions

In our mockups, there are 3 different styles: organic (our favourite!), and sharp.

Organic:

Sharp:

Figma plugin

To replace the screen, we started to develop a specialized Figma plugin.

Approach

We used a lot of guiding lines in the collection. Every composition needs them to guide the eye toward the design.

Toolkit

This project was Blender-only for the mockups, but we used Figma to make the screen and background customizable.

Digital painting

A creative effect made by using two layers: one is the colorful image, and the second one is the grayscale image, which appears as the default layer. On top of these, there's a shape mask distorted with FBM (Fractal Brownian Motion) noise, following the cursor.

3D distortion

A interactive text & 3D with SDF shape. There's the background gradient, the shape and text, animated white noise grain and a interactive layer of a second noise, but appearing where the cursor moves.

Interactive text

A interactive text shadow made with layering the same text and fading out. Each of shadow layers have different mouse tracking, so the furthest layers move fastest

Liquid gradient

A living gradient, which we developed while building Designify website. There are a lot of different variations of this, using different blur techniques and settings.

Rock & water

Animated video of a rock torus diappearing, revealing the water inside. A simple experiment, but we learned how the SDF nodes work, and how can they be animated.

Soft metal

A torus again, but with metal and a soft, rubber material. This was an experiment between shiny metals and soft materials.

Organic cells

Spheres that merge, creating a feeling of something fluid and organic. Inside, there are solid green cells.