Dribbble Redesign header

Dribbble Redesign

Dribbble has the best online design community where designers can showcase their designs and get valuable feedback from other talented designers around the world. But when they didn’t update their website in years, it made me wonder what it would look like with a new design. I wanted to try something different and redesign the entire website with a modular approach while keeping everything familiar to existing users. The focus of this redesign project was to improve the design of the profile page by changing the overall layout and putting more emphasis on the user's information and their work since a lot of designers also use Dribbble for their portfolio.

Web Design
Sketch App
Project Date
August 2016
Dribbble Redesign - Shots Page
Dribbble Redesign - Shots Preview Page
Dribbble Redesign - Team Page
Dribbble Redesign - Profile Page

The Design Process

Dribbble hasn’t updated the design of their website in a few years, so when they decided to change the layout of the profile page, it made a lot of users frustrated. They moved the profile information from the top to the left which took some focus away from the work. Before starting this project, I did some research to see what other portfolio websites were doing and compared them to Dribbble. I also decided to use my personal experience of other portfolio websites to understand the best solution to redesign the profile page along with the rest of the website. I took all of this into consideration while creating the new design so that current and new users would be happy with the updated design.

Dribbble Redesign wireframe

Website Style Guide

The existing colour palette for Dribbble was already unique with the use of pink as an accent colour across the website. But I wanted to improve upon that and create a new palette the complimented the main brand colour by using a lavender purple and different shades of grey.

Dribbble Redesign style guide

Modular Design

When starting this project I knew that I wanted to try something different and go with a modular approach to the design. The benefit of having a modular design is that it can have a very consistent look and with Dribbble having so many elements I thought this would work perfectly.

Dribbble Redesign modular design

The Outcome

The design across the entire websites was improved by creating a modular design system that made all elements look and feel consistent. In the process, the spacing around elements increased to make things more visually appealing which also let certain content stand out more. The biggest improvement was the design of the profile page, the information is now at the top so there is a perfect balance between the person's information and their work. The profile buttons have also been moved to make it easier and faster for people to find which will increase follow rates across all profiles. The new modular design looks consistent across the website with an improved experience and still feels familiar to current users.

Dribbble Redesign - Shots Page
Dribbble Redesign - Shots Preview Page
Dribbble Redesign - Designers Page
Dribbble Redesign - Teams Page
Dribbble Redesign - Meetups Page
Dribbble Redesign - Jobs Page
Dribbble Redesign - Profile Page

Like what you see? Feel free to contact me

If you have a question, work inquiry or just want to connect then feel free to send me a message. I’m always interested to hear about your idea for a new and interesting project.

Get In Touch