PSDFan Extra

30 Minute Redesign: UncleDog

Week 63: UncleDog

This week I will be redesigning: UncleDog.

In the space of 5 minutes I can identify some of the key strengths and weaknesses of this design, and sketch out a mockup.

STRENGTHS:

  • The logo is eye catching, unique and relevant.
  • The design includes a band photo, which is very prominent, positioned in the header.
  • The dark page background suits the ‘rock band’ theme and the background photo montage is nice.
  • There’s good social media integration.

WEAKNESSES:

  • The main weakness is that this site is just so MESSY! It’s a major turn off for any visitor, and honestly if I wasn’t redesigning it I would leave the site instantly.
  • Continuing from my last point, the typography clashes and is inconsistent, content is strewn all over the page in no clear order, the menu overlaps onto two lines… There is no clear sense of design here.
  • There is a lack of visual hierarchy, there is nothing drawing the eye, just lots of things distracting it. For example… the menu uses a tiny font, and so doesn’t really get noticed, whilst the main blog post text is so bright that it detracts from the larger post titles.
  • The main purpose of the site is unclear, I don’t know if this band are trying to sell tickets, increase their audience, or provide articles on DIY guitar equipment. They need a clearer purpose, and need to portray this effectively through their site’s design.

My Redesign

As always, I was limited by the 30 minute time-frame, but I tried to improve upon several of UncleDog’s features, adding a few design flourishes and a clearer layout that promoted content over wasted space:

MY AIMS FOR THE REDESIGN:

  • I refined the entire design, making it simpler and giving it more purpose. I introduced an engaging welcome area introducing hte band and announcing their biggest upcoming shows.
  • I created a much more unified design, with consistent typography and colors. Design touches such as background details and buttons are subtle, yet professional and attractive.
  • I created much more of a visual hierarchy, drawing the user’s eye down the page, and giving each piece of content it’s due worth.
  • I retained the images of the band, using them as part of a cool background montage. And finally… I integrated call to action buttons, drawing users further into the website and letting them explore the band’s music and buy tickets to see them.

Before/After:

Here is a quick comparison between the original design and my 30 minute redesign. Sure, my design could be more polished, but I believe that a lot of the basic elements have been improved upon, creating a more pleasant browsing experience.

How and Why To Enter 30 Minute Redesigns

You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.

The Benefits of Getting Your Site Redesigned Include:

  • Most obviously – a FREE redesign job!
  • Your website gets exposure to PSDFAN’s thousands of readers
  • You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design principles.
  • You will get emailed the .psd of your redesign and can do whatever you want with it!

NOTE: I can only accept sites with English content, as foreign language websites are simply too hard for me to work with.

So please, leave a comment today for a chance to have your website redesigned next week!


About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

18 Comments:

  1. Man, you shook the fleas off old UncleDog and improved that site 1000%!!
    Great job, Tom. Also: that’s a wonderful idea: doing a series of posts that showcase your web design skills. I shall look forward to seeing other startling transformations!!

  2. Nitos says:

    Wow, nice job Tom!
    I could definitely do a tutorial getting this design to HTML&CSS to my blog if I´ve had the .psd

    Liked the design, keep it up!

  3. Trisha Cupra says:

    That’s an excellent job you’ve done – much, much better.
    Just a quick question – why is there so much white space under “Latest Blog Entries:” and above the first blog entry? It seems a bit disconnected to me.

    • Tom says:

      Hey Trisha, thanks for commenting. To be honest I was going to put a dividing line there but ran out of time, and really wanted to try and stick to the clock. However, that being said I do think a lot of padding/white space is essential to an organized design.

  4. Dez says:

    Wow Tom, you really are a great designer!
    This is one of your best redesign of the 30′ series!

    My friends Uncledog will have a GREAT surprise, now it’s time for me to learn to recreate this in WordPress. :)

    Thank you very much Tom, you always do a lovely job :)

  5. MarkT says:

    BANG! That one’s outta the park! :)

    That’s a fantastic de-design, Tom, love it. You’ve really brought together the strongest visual elements of the current design and tidied it up into a neat whole. Really hope they can build the real thing to match your idea.

  6. Oasisman says:

    Hi Tom, Regular subscriber to your blog. You always have great design ideas. Noticed this time you missed out the adverts on your redesign. The website in question presumably uses these to try to generate income. How would you incorporate them without spoiling the overall look?

  7. Stephanie says:

    I think that this redesign is really nice! The images of the band I do agree are important but fading them slightly into the website makes it look like they are incorporated into the website not just placed on at the highest point. I think the banner space is really nice and the call to action to buy tickets really stand out. The structure of the lower part of the website is so much more clearer now and much easier to browser through also. A great redesign!

    • Tom says:

      Thanks Stephanie! Yeah I agree it’s important to integrate photos smoothly rather than just plonking them in a website’s header. I’m glad you liked my redesign anyway.

  8. Wow, this is such an awesome redesign!! The site looks so much more professional and approachable, definitely one of my favourite redesigns you’ve done so far!!

Leave a Comment:

Cancel reply

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY