Initial Practical Idea Tests

Link to website containing all highway code information: https://www.highwaycodeuk.co.uk/

A lot of images are like this: 

- Photographs of the right or wrong thing to be wearing (mainly relating to high vis).

Other images are more like this: 

- Illustrations depicting the events.

• Would I design for this section, and if so how? 
• Include these images? Take my own photos but better? 
• Edit the images to make them look more interesting?
• Use illustrations instead? 

Exploration of this: 

This example uses a simple 32 field grid, placed in the original images as well as text to see how it looks.

Rather crowded, visuals are looking pretty busy.

The images have little consistency to them making it look rather jumpy and distracting. 
- Could maybe take own images or find better ones online that outline the same message. 

Initial hierarchy is simply the inclusion of bold headings in larger point type.
- Think more about the impact of this going forward. How does it affect the reading experience? 

Edited the images to be in one colour scheme.
 - This creates a sense of consistency that was lacking within the images, but at the cost of the image. 
- It's harder to understand what the image is trying to communicate. 

Layout is a rough idea, nothing set in stone. But obviously it needs considering further.

Maybe try and find own photos for the images or take them myself. 

Could edit the colour photos to appear softer and in a more hazy colour palette, see if this reduces the business of the page. 

What needs to be done with the grid?
- More breathing space, all feels very close together and cramped.
- Categories need to be identified.
- Figure out a good field system that works for a range of things (think to pentagram and muller brockmann examples). 

VISUAL IDEAS FOR LAYOUT INC. IMAGE: 

Attempt at using two columns, one for the images the other for text.

- Issue is the amount of text is too small, the grid isn't very clear and the layout looks unconsidered and awkward. 

The grid here uses 3 different columns, still very jumpy because of the imagery. Has a level of visual consistency with the next image but it is difficult for the eyes to follow. 

Second layout using 3 columns, but large section of text is centralised at the bottom, again this layout looks awkward. There needs to be a more visually effect was of organising the information. 

Needing to develop a visual consistency across the platforms, thinking about Muller-Brockmann and how he mentions images are best when there are fewer changes in size (really think about this when developing these pages with signs as a lot are of different sizes. How do I develop visual flow?) 

Single column layout with image wrapped within text, the use of a single column encourages a linear reading pattern which isn't the most effective for the way the highway code would be read. 

- The layout needs to encourage the dipping in and out factor of the book. 

Two columns, with image within the column.

- Images have to be a certain size with this layout causing it to dominate the visual element of the layout. 

- Thinking about what I've read: Two column layouts can offer a better reading experience as it ‘improves cognitive function associated with the way information is displayed’ (p. 604). Al-Samarraie (2019)

Image A

Image B

Thinking about the hierarchy, A&B have the image at the top along with the title to emphasise the chapter heading making it what the audience read first. 

- A having the title closer to the body text, and B with the white space between. 

- B has a stronger sense of division making the title stand out more.