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.
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.
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.
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.
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.