Designing Interfaces From The Inside Out

When designing web layouts for information-based (as well as experiential) websites, content is king. This is why the best approach for this type of layout is to begin by dropping in all the content bits on a solid structure and seeing how those bits relate to each other before getting distracted by fancy yet less relevant things like backgrounds, navigation styles and iconography.

This is something I can’t stress enough because it’s a trap I usually fall into. Often we’re rushed to deliver comps and it’s difficult to think about the details so it’s easy to go for a fancy background with a slick navigation that will have a quicker visual impact on a client instead of focusing on the more important, yet less noticeable (at first) aspects of an interface.

Typography, page structure, hierarchy are things that really define the underpinnings of any solid content structure upon which a designer can add as many necessary additional visual elements as are required. Beware of too many of these extras though, as a friend once told me, “Don’t add too many toppings to the pizza.”.

When setting up a Wordpress blog such as this one we can begin thinking about what content we want to have on it. The approach I take is to figure out the number of pages and how many columns per page are necessary, then I define what add units or other fixed modules need to be on the pages and finally I set up a grid structure based on these constants.

Once the grid is set the next step is typography. It’s crucial to have as close to the final content as possible which is a challenge in many cases. I’ve learned to progressively update my layouts as the “final” content comes in. Ah, revisions…