On June 3rd, we’ve rolled out a new design for themebaker. Lots of changes and improvements can be seen on this version. Depicting our direction and enthusiasm to be par with other renown WordPress theme shop, the new design is hope to bring themebaker to entirely new level.

For those who miss the gig, this is a continuity of the first part that discuss the case studies made for the revamp. This article will explain the making and logic behind the new design.

Early Sketch

Some of the early sketch, pardon the horrible drawing ツ :

• 

  Sketch #1

• 

  Sketch #2

• 

  Sketch #3

• 

  Sketch #4

What’s new?

Front page

• Changed the tag line to clearer and self-defining phrase, “Spruce Up Your Website With Our Stunning Themes“. Button to our themes page also made prominent.
• We believe that icons usage are limiting the message that we’re trying to deliver. Plus, it can be confusing if the icons are not selected carefully. Therefore, we’re experimenting with zoom-able image instead which we believe can convey the message more accurately.
• Remove this section to reduce the clutter. User may read the detail of the theme on the theme page itself.
• Placed newsletter subscribe on the footer, space are now occupied with Stream of Info’s.

Blog

• Change from 2 column layout to 1 column. Better readability and scanning with plenty of room to ‘breath’. Also to emphasize on the content.
• Sidebar placed on top for a better navigation. Shortcuts to RSS, Facebook, Twitter and contact us also are made clear and visible on every page.

Our Themes Page

• Removed the tag and category section and replaced it demo button and details link.
• “Coming soon” image are replaced with an image of simple wireframe to portray our upcoming themes.

Usability Notes

• Navigation on top for two reason. 1st, user have been familiarize with header on top from the previous layout. 2nd, it is intuitive to have header on top.
• Links with 4 state : hover, active, focus and visited to give the sense of click able. Also prominent link color to differentiate between links and normal text.
• Blog / Archieve / Category page : Skip to content, back to top and back to previous page links
• Our themes : Coming soon image can be confusing. Therefore it’s been replaced with a simple wire frame image. Cursor of demo button and details link are changed to default cursor instead, to give the ‘this is not a button/link’ feeling.

Before and After

Juxtapose view of before and after redesign :

themebaker Version 2

themebaker Version 3

Changes however are not permanent, we’ll be collecting feedback and suggestions and modify it from time to time.

Stay tuned for more news and follow us on Twitter and Facebook. Also subscribe to our Feeds and have the updates mailed to your mailbox.