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 old DesignBump

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

DesignBump logo sketches

DesignBump logo ideas

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.

DesignBump logo concepts

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.

The new DesignBump logo

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.

DesignBump icon designs

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.

DesignBump icon designs

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.

DesignBump icon designs

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.

DesignBump website design and layout

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.

DesignBump icons in place on the website design

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.

The Designbump colours are brought into the website design

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.

Design of the DesignBump user profiles

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.

DesignBump form and button styling

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.

Your site design is absolutely perfect. I love it. I can not wait to bring DB to the next level with this design. It really looks great.

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.

The new DesignBump

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!

Share on Pinterest
There are no images.
79 Comments submitted Add yours!
Subscribe receive Spoon Graphics newsletters

Subscribe to my newsletter to be the first to hear about new posts

79 Comments

  1. really cool stuff! I love the simplicity yet absolute effectiveness of the logo, and the arrow elements carried throughout the design.. :D

  2. Really great job! Thanks for shearing the process!!

    Also thanks for your tutorials!!

  3. It’s always really educational to hear about other designers and the process they use. Thanks!

  4. I really love the new design of designbump is really awesome, when i saw it first time i barely tough you made it but, when i see your interview in designbump blog, I was Impressed, because is completely your style.

  5. I’ve only recently found out that your responsible for the redesign and I must say that you did a fantastic job. The new design really has made Design Bump my favourite bookmarking service. It also inspired me to work on a new “submit and promote article” area on my blog.
    Congratulations Chris and thanks for the insight. FYI I bumped this post.

  6. I love this kind of article, you can really see what goes through the designer’s head, and learn from the whole process :)

    One thing thought.. it extremely hard to tell if you’ve bumped a link or not :[

  7. Congratulation Chris.
    You push the design to a very high level man !
    Now, I know why you’re so recognized by the design community.
    Great work, great post ;)

  8. Thank you for the great article. I was thoroughly impressed with your workflow and thought process. The new design looks awesome.

  9. It looks excellent. Very strong design.

    I don’t know if it’s worth noting – “description” is spelt wrong on submit a link. Just a heads up!

  10. Thanks for sharing the behind the scene process. It’s always interesting to read the article about your working process. And the new DesignBump design is absolutely better! =D

  11. I really, really like that design, the Artwork is impressive as usual! I really like the arrows on the logo!

  12. What a great demo of your work process.

    very inspirational I am ready to start designing now..

    thanks!


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  13. WAO! really great design job here! How long it took to make this project?
    Like somebody said up here, it has your style.
    Thanks for sharing the process!

  14. Talk about talent. You have talent AND vision.

    The redesign is more appealing and gives a feeling that the site is being bumped UP. Great redesign!

  15. Really love the icons. You did a great job without losing the integrity of the old site and incorporating more appealing calls to actions. Great overall design.

  16. Well done Chris, a huge improvement indeed! I like how the identity works across the whole site, buttons and all.

    The only nitpick I can pick out of the whole identity is that the wallpaper on the home page, the arrows go down? Doesn’t this go against the grain of the whole bump idea? Anyway, that’s just something small I noticed – it’s a great redesign and some of your best work in my opinion.

  17. I hadn’t noticed DB before the re-design and was surprised to find you were the creative genius behind it all. Very nice work Chris. :)

  18. Good work Chris, You should be very pleased with this, great colours, layout etc. and really conveys your design style. If only every client could give you the freedom that DB did.

    I’m always interested in seeing your latest ideas.

  19. hello nice job, Chris
    you always creates and presents the awesome technique also ur design style is outstanding and always give me an inspirations so thax for brings ur experience to share with other people.
    regards
    Kanya

  20. Amazing DesignBump redesign. I was admiring it a few days ago, and had no idea it was you behind it, Chris. Great job, the colour scheme is excellent, I must say 10/10, ★★★★★ and a free beer for that one ;)

  21. Very good looking design! I like the cleanness of it. The logo is perfect. Because of this design I signed up at Design Bump. :)

  22. Great redesign Chris. I knew OF Design Bump before, but always used Digg. Now that I’ve seen that your genius is behind the design, I’ve turned now to DB for inspiration as well.

    Thanks, keep up the good work.

  23. I just started a web design certificate and the instructor called up DB as a resource for us to use. When it popped on the projector I thought, “That reminds me a lot of Chris Spooner.” :) More than I thought! Good work.

  24. Wow, I wish I could design like you man, my websites suck because of the lame designs ]=

    Atleast you are here to give me help with tutorials though =D

    nice design though… so sleek

Comments are now closed