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 successfully getting to the goal and collaborating.

3D Stuff

To make our website even more recognizable, we modelled 3D rooms, instead of boring, scrollable section. We turned it into an interactive experience 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, bringing together our skills: web design, strategy, development, sound design and 3D stuff.

Sounds & music

We edited sounds in Audacity, creating 3 versions of hover "pop" sounds.

Toolkit

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

Research

We determined the target audience the product was directed torward. 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 stand out. We determined keywords and style. The orange color chosen in branding section is dynamic, symbolizes action. The website's role here is to sell, so we had a 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 variations, 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 an optimized WebGL gradient.

Toolkit

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

The idea

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

The 2 directions

In our mockups, there are 2 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 elements 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 (Fractional 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 the shadow layers has a different mouse tracking, so the furthest layers move fastest.

Liquid gradient

A liquid 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 they can be animated.

Soft metal

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

Organic cells

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