Twitter for the Enterprise (Part 2: Page Re-Design)

Back in Part 1 Twitter for the Enterprise (Part 1: The Begining) after being satisfied with the apps functionality, it was makeover time.

I thought it would interesting to take you through my thoughts and what I think is important when giving the app a much needed face lift/redesign.

Layout

The first thing I like to do is a rough sketch of the layout including elements such as header, contents and footer. This allows me to play around with proportions, I decided to have a horizontal header spanning the entire page that was quite thin allowing the content section to stand out more.

Colours

A good place to start when looking for inspiration is COLOURlovers, just create an account and your away. It's amazing how easy it is to create a set of colours that work well together, the website allows you to save and share your palettes with other uses. On this occasion I decided on some very similar colours with a bright or contrasting colour to suit.

DIV Not TABLE

Back in the day when I built my first web page it was easy to just chuck everything in table rows and columns spanning, merging, mashing you name it.

As a rule tables are good for represent data and that's all they should be used for. The use of div is a more  flexible/cleaner approach, I often find myself compelled to clean up a layout done with tables. I've been using div's for a while now and haven't looked back.

Visual Hierarchy

Decide what you want the users' attention to be drawn to, in our case we wanted the users to see the the text box before anything else hence the reason why it's so large and bright. Even colours can serve to create this sense of hierarchy one way to archive this is to place a brightly coloured element on a darker background this gives a sense of the brighter element being on top or at the front. Use of different font sizes can also serve to further emphasize this.

Check out the new look, we haven't decided on the name yet.