Dribbble Redesign Header

Dribbble Redesign

As a designer, I visit Dribbble several times a day for design inspiration just like many other designers. Dribbble has an amazing design community which I have been lucky to be a part of for many years now, but when they didn’t update the design in years it made me wonder what the website would look like with a new design. I wanted to improve the overall design of the website by updating the layout of the project thumbnails and creating a more consistent design for the website. I also wanted to redesign the profile page putting more focus on the person and their work especially since Dribbble is also a place where designers can showcase their work and use it as a portfolio. This project took one month to complete and since this was a redesign project, my role was to create the visual design.

Services
Web Design

Software
Sketch App

Client
Personal Project

Platform
Website

Project Date
August 2016


Home Page Preview Shot Page Preview Designer Page Preview Profile Page Preview

The Design Process

Dribbble hasn't updated the design of their website in a few years other than some minor changes. But, when they decided to change how the profile page looked by moving the information about the person from the top of the page to the left, it made a lot of users unhappy. Before starting this project, I did some research to see what other portfolio websites are doing and comparing them to Dribbble. I also decided to use my personal experience of using certain portfolio websites such as Behance and understanding the things that worked well and what didn't work. I took all this into consideration while I was creating a new design for Dribbble so that current and new users would be happy with the new updated design.

Home Page Wireframe Team Page Wireframe Profile Page Wireframe

The Final Solution

When starting this project I knew that I wanted to keep some things the same such as the navigation structure and the four column thumbnail grid. The first thing that I wanted to do was redesign the project thumbnails to make them more visually appealing and I did that by giving certain elements more space around them so they stand out more. The next thing that I wanted to change was the profile page, I wanted to have more of a focus on the person and their work. I did that by having an area at the top of the page that shows the person's profile picture, their name, and a description, but below that is a bar that shows the profile statistics such as followers and likes. I also wanted to include the follow and hire buttons to the right so that it would be easy for anyone to find them without distracting the user from the profile information. Below all of that, I decided to use the same layout as the home page with the four column thumbnail grid to make the overall design have a more consistent look. Overall my main goal was to create a new design that would look and feel new, but at the same time felt the same for existing users.

Home Page Shot Page Designers Page Teams Page Meetups Page Jobs Page Profile Page