DESIGN
How did we combine two totally different brands into one design?
Dribbble’s annual Design Industry Trends Report was quite the challenge. The report explores the evolving landscape that design professionals face in the midst of changes in working conditions and lifestyles.
As a well established brand, Dribbble is known for their vivid color palette, clean and clear design and additional design features such as card usage and round corners. The latest report was promoted in partnership with Editor X, Wix’s advanced platform made with designers in mind.

Unlike Dribbble, Editor X's brand is dark, built on grids, and with a completely different set of design elements.
Naturally, our biggest hurdles in this project were to find a way to combine these two brands effectively and feature insights from the report in a way that would showcase Editor X’s capabilities.

After investigating different design options and layouts, we decided to create a single page website divided into different sections showing the report’s findings.
We used some of Editor X’s key features like stacking, hover interactions and scrolling animations to create interactive navigation while highlighting data from the report.
For the design language, we decided to take from Dribbble's brand identity, using their colors, cards and typography together with different design components like special sections, bubbles and other elements featured in Editor X.
The report gained a substantial amount of traction from design professionals that were curious about the approach of their peers and colleagues.

BUILDING INFRASTRUCTURE

Before diving into building the site, it’s important to take a closer look at the pages design and outline their sections (i.e: header, footer, welcome, blog, etc.)
Tip: List all sections on your design files
Take your design file and use a short title to describe each section.
It will help you to better prepare for the building process. Don’t be afraid to have too many sections, It would only make your life easier moving forward.
Mapping Sections
01

We used regular text element with a hyperlink, container with grids and interactions to animate the button.
Mapping Sections
01

We used regular text element with a hyperlink, container with grids and interactions to animate the button.
Mapping Sections
01

We used regular text element with a hyperlink, container with grids and interactions to animate the button.
Mapping Sections
01

Unlike Dribbble, Editor X's brand is dark, built on grids, and with a completely different set of design elements.
Naturally, our biggest hurdles in this project were to find a way to combine these two brands effectively and feature insights from the report in a way that would showcase Editor X’s capabilities.


After investigating different design options and layouts, we decided to create a single page website divided into different sections showing the report’s findings.
We used some of Editor X’s key features like stacking, hover interactions and scrolling animations to create interactive navigation while highlighting data from the report.
For the design language, we decided to take from Dribbble's brand identity, using their colors, cards and typography together with different design components like special sections, bubbles and other elements featured in Editor X.
The report gained a substantial amount of traction from design professionals that were curious about the approach of their peers and colleagues.


For years, OFFF brand was known for its eccentric content, promoting authentic creative freedom for and inspiring ten of thousands of creators around the world. It was time to bring this vision online.


For years, OFFF brand was known for its eccentric content, promoting authentic creative freedom for and inspiring ten of thousands of creators around the world. It was time to bring this vision online.



ELEMENTS
API'S
TECH DESIGNER
Matanya Dafani
PROJECT MANAGER
Michael Mishan
DESIGNER
Iryna Adamova
DESIGN
How did we combine two totally different brands into one design?
Dribbble’s annual Design Industry Trends Report was quite the challenge. The report explores the evolving landscape that design professionals face in the midst of changes in working conditions and lifestyles.
As a well established brand, Dribbble is known for their vivid color palette, clean and clear design and additional design features such as card usage and round corners. The latest report was promoted in partnership with Editor X, Wix’s advanced platform made with designers in mind.


Dribbble
A minisite featuring Dribbble’s 2021 Design Industry Trends Report, in partnership with Editor X.
WHAT WE DID
Design, Build, SEO, Velo
PRODUCTS USED
Created on Editor X

Dribbble, one of the biggest online communities for creators, partnered with Editor X to produce their 2021 trends report. We had the pleasure of designing the page that features the report’s top insights while displaying the cutting-edge capabilities of Editor X.
PROJECT OBJECTIVES
01. Publish industry data
02. Celebrate Dribbble and Editor X's partnership
03. Showcase Editor X's capabilities


