The minute you learn something new, you try to relate that info to other things that you may find interesting in most cases. Observing how one thing may add to or build upon the next, in this discussion about layouts – Mig did just that. Previously we were able to define good design as something that provides clear communication which has now created a link to revealing its structure.

Reyes illustrated the fundamentals of the grid system and how it creates the building blocks for content. As the class scoured the net, we found that most websites follow a flow within a grid structure and layout. Having this allows one to deliver a hierarchy of visual cues and relevant information to the user. There are various ways to break things up in both columns and rows to cleverly guide a viewer’s eye to important items while still conveying other details. As an exercise, we separated into teams to review a well known site and dissected the areas of info into contained grids.

VA_Site_Disect_tsl_wk2 - 1

Virgin America website grid review.

Referencing the now familiar arrangements on how images overlapped, content was proportioned and what call-to-action items established dominance, testing the memory of things brought about a new challenge. Based on our recalled memory, the new activity was to select a random site that was used regularly and sketch the layout of the website without being able to see it. From the overview of grid basics, we were able to compare the best drawings to the real thing. Not bad…

Twitter_Layout_Sketch_tsl_wk2 - 1

– Memory sketch of Twitter profile page grid system. Thanks Julia Fedor!

When designing for any platform, its best to know what medium you will be designing for. Knowing that its a web browser, mobile, tablet or any other device will give you a good base to work from. Once the proper groundwork is established, you can apply a grid in the appropriate orientation and begin to design outward with the content in mind. Orienting that content within a layout will help you in establishing your information hierarchy.

Until then,

Design with LIFE in Mind…


Leave a Reply