Blog.SpoonGraphics

Behind the Scenes of the DesignBump Redesign

The eagle eyed amongst you might have noticed a revamp of the design specific bookmarking site DesignBump.com. John Campbell recently got in touch to ask if I’d be interested in helping out with the redesign. Being a site I’d been subscribed to since its launch I jumped at the opportunity. Here’s an overview of my design process for the project.

The Old DesignBump

The New DesignBump

DesignBump is a social bookmarking website aimed purely at the design and web community. It’s an extremely handy place to find both great new design content and to submit your own articles for votes. With DesignBump being one of my favourite sites, it was a pleasure to help out with the rebranding.

After checking out my work, John chose me specifically to work on his designs and gave me complete creative freedom (He’s a nice guy like that!). This allowed me to really go to town on the sketching process to develop an overhaul of DesignBump as if it was a site of my own. Since its launch the site has always used an arrow as part of its image, which fits in well with the nature of bumping an article up until it reaches the front page of the website. With this in mind I continued to draw out the logo concepts and looked for a unique way to display the arrows as some kind of graphical mark.

My final concept for the logo mark was the combination of three arrows flowing along a plane, each one changes direction and points upwards with some reaching higher than others. This metaphor translates to articles submission process on the website: An article is submitted and plods along in the upcoming section until it acquires enough votes, it then takes off and is promoted to the front page, resulting in some articles gaining higher votes than others.

A unique colour scheme was then chosen, and subtle effects added to the graphic to really spice it up and add depth. This added dimension does a great job in lifting the logo from the screen.

The project then moved onto the development of various icons and voting buttons. A range of graphics were developed to gain a feel for the shapes and dimensions, and how the colours could be incorporated to tie the icons in with the overall theme.

I narrowed down the design to the subtle grey button with the vertical arrows, which was then recreated in various sizes and includes everything from the 16px icons to the complete voting button.

The final voting button is a design I’m really happy with, it captures the branding of DesignBump with the coloured arrows and provides recognition when placed on various websites. The little 1px lines and subtle touches also help add depth to the graphic. The overall idea is to make it something that looks cool sat at the bottom of your blog posts.

The website design was created with a basic theme of white and subtle grey shadows, spread across a layout that adhered strictly to an underlying grid. A splash of the red, green and orange colours were added to the design in various places to draw attention to specific areas.

The voting buttons really came to life when listed alongside their stories on the homepage. A range of mini icons were also developed to spice up the various user tools.

A good example of how the three colours were implemented into the website is in the sidebar, where the three main titles of the various sections alternate between red, green and orange.

Once the homepage design was complete, the layout was tweaked to accommodate the new user profiles. The page was split up further according to the grid, creating a new left sidebar to house the user info and profile navigation tabs.

To finish off the design, a consistent style for the form inputs and buttons was developed, this should make it easy for the styles to be continued across the whole site, bringing all the elements together.

With the main graphic design all done and dusted, it was time to send John a bunch of PSDs. He then had the fun job of coding up the new image and plumb it all into the DesignBump engine.

Overall a hugely enjoyable project, and it was a pleasure working with John. I’m looking forward to seeing DesignBump develop as a primary source for design news. Remember to head over and create a profile, you can also add voting buttons to your own site!