PSDFan Extra

  • FanExtra Network
  • PSDFan Extra
  • BlogsFan Extra
30 Minute Redesign: UncleDog

30 Minute Redesign: UncleDog

By Tom, 15th August, 2011, 18 Comments

(30 Minute Redesigns - Articles)

FanExtra Membership:

Sign up today for a FanExtra membership, and get access to hundreds of PSDFAN tutorial source files, weekly members-only tutorials, vectors, icons and design-related discounts.

>> Sign up to FanExtra Today

Promote this Post:

We'd really appreciate it if you took a moment to help promote this post. Your efforts help keep this site running.

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!


Join our FREE Newsletter
Join our newsletter for free weekly updates. Receive a free premium icon pack for joining.
We hate spam just as much as you

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.

FanExtra Membership:

Sign up today for a FanExtra membership, and get access to hundreds of PSDFAN tutorial source files, weekly members-only tutorials, vectors, icons and design-related discounts.

>> Sign up to FanExtra Today

Promote this Post:

We'd really appreciate it if you took a moment to help promote this post. Your efforts help keep this site running.

Related Posts

Leave a comment

18 Comments:

  1. Mark Armstrong says:
    August 16, 2011 at 12:48 am

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

    Reply
  2. Nitos says:
    August 16, 2011 at 12:57 am

    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!

    Reply
  3. Trisha Cupra says:
    August 16, 2011 at 1:15 am

    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.

    Reply
    • Tom says:
      August 17, 2011 at 10:24 pm

      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.

      Reply
  4. Dez says:
    August 16, 2011 at 7:31 am

    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 :)

    Reply
  5. MarkT says:
    August 16, 2011 at 8:57 am

    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.

    Reply
  6. Oasisman says:
    August 16, 2011 at 10:23 am

    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?

    Reply
  7. Stephanie says:
    August 22, 2011 at 9:43 am

    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!

    Reply
    • Tom says:
      August 22, 2011 at 2:20 pm

      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.

      Reply
  8. SJL Web Design says:
    August 23, 2011 at 3:22 pm

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

    Reply

Leave a Comment:

FanExtra Membership

Join our FanExtra membership community today expand your learning. Just $9 for access to advanced members-only tutorials and thousands of design resources.

Learn more & Signup Login

Write For Us:

Are you a talented writer or designer? We’re always on the look out for quality authors, and we pay great money for any articles or tutorials accepted! Please get in touch if you’d like to join the FanExtra team.