30 Minute Redesign: MGOCSM America
30 Minute Redesign – Suggestions Needed!
30 Minute Redesign: Commercial StarHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
Week 56: Tech Explorer
This week I will be redesigning: Tech Explorer.
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 layout is fairly conventional and works well. The two column layout is appropriate for the amount of content.
- The headings for post titles are large and eye catching, drawing the users eye towards the key content (the blog posts).
- The site uses a good amount of white space and padding, and so doesn’t feel crowded.
WEAKNESSES:
- My main issue is that the blog posts are pushed too far down the page, due to the headers, adverts and popular posts area. As the most important content on the page they should be higher up.
- I found it fairly hard to browse the content. The search form is too small, and the categories option is right down in the header.
- A lot of the homepage content feels obsolete. The tabbed sidebar areas seem to be ‘content overload’, whereas a standard category area would suffice.
- The call to action buttons aren’t very engaging at all. The ‘read more’ links are small and don’t feel like traditional calls-to-action.
My Redesign
As always, I was limited by the 30 minute time-frame, but I tried to improve upon several of Tech Explorers features, adding a few design flourishes and a clearer layout that promoted content over wasted space:
MY AIMS FOR THE REDESIGN:
- I reduced the amount of content, making the blog posts the main focus.
- I reduced the amount of scrolling to read content by bringing the blog posts up the page, and moving the ‘popular posts’ area to the sidebar.
- I made the browsing options easy to user and more prominent, adding a search/categories area right above the blog posts.
- I used bolder, more colorful calls to action, to encourage users to delve further into the site.
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.
11 Comments:
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.
Great makeover!
I like how you used the blue from the logo throughout the design.
I think I would have put the categories in the sidebar. And I’m not sure I would have put the search bar on the left – I always look for it towards the right – but I can easily see the logic in why you put it there.
The footer looks really good. I think I would have liked to see it spiced up with a few icons (like you did in the header area). And the headers look like clickable buttons – I may have gone for a dark rectangle the full width of the footer behind the footer headers.
The one thing that really bugs me is how bright and colourful the ads in the header are compared to the rest of it – but I suppose it’s the nature of the beast when you’re working with a blog that makes money from advertising.
Thanks Trisha! It really means a lot to get such in depth, analytical comments.
I definitely tried to integrate splashes of color throughout the design, and it was nice to continue the brand of blue in the logo. I was trying to position browsing/search options right above the posts, so that there was a visual tie between browsing/content.
I actually was going to work more on the footer but unfortunately ran out of time. The ads were an issue for me too, but there wasn’t really much I could do. I find that they are less distracting on a functioning website than a mockup anyway.
30 minutes isn’t long – you’ve done a great job, although i do agree with Trisha in that you do instinctively look for the search bar to the right.
All in all, the site is fresh and easy to navigate a good improvement!
http://www.cinemashaks.net I think I need a re-design because I’ve become a little sick of my design, and having someone else’s POV as a posed to mine would, I think, give me a sense of other peoples thoughts. It has become a little hard to work with, and I have been thinking of doing something different but I just don’t know how. I’m starting off in the world of blogging, and I think that a fresh design would give my readers (if any!) a easier layout. (: cheers – Mr. Bruce
Wow. A whole new perspective there. I am glad that you pointed out the problems that I overlooked like call-to-action buttons and obsolete content. Also the overall redesign looks a bit colorful. Will definitely keep your suggestions in mind while I change it. Thanks Tom.
Thanks Jal, I’m really glad you liked it and hope you get to implement some of the suggestions I made. Let me know if you’d like the .psd file
.
You did a great job in targeting the the goals of this website. You did much better than their designer.
Thanks for the kind words. I did like their original design, but any good design still have room for improvement!
Great Job! I have been working with a developer for the backend of my site (in BETA), but his jQuery has me scared to play around with the design – plus my obvious skills lacking where I find it difficult to start a design from scratch (especially for this content)… and its been online from Aplha for just on 12mths now, and traffic is finally growing thanks to some new jQuery color mods and 20 new features to come (more file types to convert to PNG eg. gif, jpeg, doc) and a few social and RSS buttons and stats.
Anyhow, you can see for the last 12mths it’s been all about the backend, and being unable to find a XHTML/CSS template minimal enough to use to start things off has made things hard for me to add more pages (Contact, About Us, Rules, Community Help, Staff Page & Supporters, Gallery [last x amount of images added in a jQuery/JS Gallery] which is ready to go bare-bones, just a mySQL fetch to be added to code by the php guy once I get up to that
I hope you can help us out Tom! 12mths, and all I have is a Logo and a CSS3 button that did’t really work out due to me still learning the difference when coding an input button and a link to a button (the input button as much reading as I do still has me stumped with hover, active, etc) and I added the rainbow image to the top, which was the only part of my original mockup I got to fit in where it should go, then the footer trick (that forces footer to stay at bottom) ruined me, so I gave up that specific method, the image (once loaded) forces it down enough anyhow, and with the right design i was hoping to avoid that css footer hack, seemed to get in the way of the header image sticking top-side also…..arrrghh. PLEASE HELP
I don’t mind wordpress if you can get the main page to function in it, as adding pages, gallery etc would be easier – but I’d say for a quick loading (must be speedy when out of beta – very!) XHTML/CSS is the way to go?
Looking forward to some feedback and hopefully you’re 30minutes to come and play
Kind Regards, and nice job above as always.
- Jay
Site Work: http://nfopic.com (TXT,NFO to PNG Image Converter).
What was the original WordPress template you were working with here TOM? Very nice alterations for a 30min job. I actually think the larger search bar with categories right next to it has an awesome positioning directly over the content, and really that side of a Blog (atleast for Ad content & Article Content) is a prime location…. I find it better than a smaller textarea to the far right….. good thinking out of the box Tom.
Keep up the goodness, I hope to have one of my sites and when my blog gets a little larger, the blog to have 30mins of Tom-Time!
Cheers,
Jay
@jaycameron
Hey Jay, I’ll include your site in this week’s poll. For the 30 minute redesigns I only provide a .psd of the design though, not a coded template. There is no original WordPress template I worked with for this design, I simply opened up Photoshop and came up with a redesign.