This was a great read. I love the strong visual focus throughout the book and how clearly it displays grids and layouts in relation to all of the key components of design. Here I have looked at a few chapters in more detail. I love how the book is divided into very short chapters making it easy to go to and find any specific topic your after.

Components and Basic Structures

The basics of grid structures are covered first. This provides the correct terms that relate to all of the components of a grid layout as shown above. Bar columns and margins all of the terms were new to me however when viewing them in the diagram above the terms and definitions are made clear. The components are as follows:

• Columns
• Molecules
• Margins
• Spatial Zones
• Flowlines
• Markers

 

Examples of basic grid diagrams are then provided covering:

• Single-column grid– generally used for books, essays etc. The block text is the main feature of the layout.
• Two-column grid– used to control lots of text or different kinds of information. The ideal proportion in an unequal spread is when the wider column is double the width of the narrower column
• Multicolumn grids– combine multiple columns of different widths generally used for magazines and websites.
• Modular grids– verticle and horizontal columns arrange the space into smaller chunks, generally uses to control more complex information.
• Hierarchical grids– this layout breaks the page into zones. Allows content to be organised horizontally. Used for ease and efficiency.

Website basics

As I am currently working on my website portfolio I wanted to take a little time to look at website basics in more detail.

Space is broken into chunks in website layouts to help control large amounts of information. It is advised when designing a website structure that you being by reviewing constraints. This can be done by considering margins, toolbars navigational bars, headings, subheadings, images, videos lists and links etc.

The above layout and physical example is provided. Considerations such as alignment are vital in layouts such as above to create a consistent outcome. This must be applied to all the contents of a column including images, headings, text, text in a box etc.

I followed the link provided to see how The New York times website looks today. As this book was only published three years ago it is unsurprising that the layout of the website remains largely unchanged. However, as presented above I did note that the website maintains a primarily three-column based structure. It included larger images and more white space. As the screen width is reduced the layout drops to two columns. While the changes are relatively subtle they have a big impact in my opinion. As body text is vastly reduced there is a lot less information to take in at a glance. The two primary stories are more visible as the images included are bigger and the story titles both sit at the top of the page utilising a clearer hierarchy of information. The removal of centrally aligned text is another vast improvement. As you scroll through the page the use of imagery is far more dominant than text. This is reversed when you select a story to read at which point the text becomes more dominant and one and two-column grid layouts are used. This is interesting to note as it is an approach I can take in my own portfolio website. On my homepage, I should let images dominate and I can afford to be more experimental with my structure as long as a clear hierarchy of information is presented. On my case studies which include more written content I should perhaps keep it simple with either a one or two-column grid layout.

The above presents a tight multi-column structure containing multiple stories. Each molecule of the grid contains a topic heading three stories and a small left aligned image along with a list in the fourth column that includes three tab options.

The above layout is overly cluttered and the inline images with the text are in my opinion the worst offenders followed closely by the list element in the fourth column that confuses the structure and reduces the balance of the overall outcome.

The above image displays how this portion of The New York Times website looks like now. Again not a massive impact but the difference the changes make is massive. Rather than a four-column layout with a fourth column spanning the width of two columns, the page is now neatly structured into an even 5 columns. The topics are better categorised into overarching subject areas. The images now sit below the headings and take up the full width of the column and the list element has been removed. I am suddenly able to actually consider trying to navigate this portion of the page and quickly access the stories I am interested in my first searching for a subject and then reviewing different topics to see what looks interesting.

This for me is a very important insight. It is important to avoid confusing and overwhelming your user with content. In areas where lots of content is being presented, it must be broken down into categories. If there are too many categories, categorise your categories!

Systematise Using Bands

For me, a clear information hierarchy is at the heart of every good print and web design. It tells people where to look, what to click on and what to read when they’re skimming through text on web pages. It removes the need for any serious thought or effort being required of the user when they’re using your device. I, therefore, wanted to look at horizontal hierarchy in more detail to see how it could benefit me in my goal of establishing a clear hierarchy of information in every design I am working on. A chapter that jumped out to me was Systematize using bands.

A horizontal hierarchy provides a clear way to separate information. Information can also be organised into navigational bands. This approach can be effective on multiple devices as shown below.

The above site is the website for the Jewish Online Museum. I cannot find a current version of the site to see how it has developed since its presentation in this book and to review its responsive elements. However, the use of horizontal bands to structure navigational layouts is evident and well organised in the example above. The approach is demonstrated in the top navigational bar of the home screen presented above in the monitor. When the user makes a selection they are taken to a cascade of additional horizontally organised information as seen in the second screenshot. I imagine a more current revision would separate out the horizontal bands more and include further white space as well as potentially provide a relevant heading for each bar or even apply a colour or styling change to help categorise the information.

The horizontal band structure is also present in the above mobile view where the information has clearly been divided into horizontal bands, a common approach in mobile design due to size constraints. Here the website utilises a slide bar menu where the user can view more content by scrolling through a horizontal band. This is effective as it allows the users to look at and digest one story at a time.

In relation to demonstrating a hierarchy of information, I believe there are a number of ways to utilise this approach. The first has been demonstrated above in the second image of the website. Here the top two bands have been divided into two while the rest are divided into three. This instantly directs the user’s attention and the stories and images are bigger than the rest. Another approach could be to add extra height to bands that contain information the user is most likely to be interested in. Alternatively, highlighting bands with different colours so that the user has an automatic awareness that they are moving to a new section could be effective as well.