Trying to establish a consistent page layout

These images were created last week, so development has moved on a little since then, but I thought it was important to write about the process I had with creating a consistent page layout (as it took stupidly long!).  These drafts do not consider buttons as I did not have adequate time to delve into that area properly; there is another blog post concerning looking at buttons/breadcrumbs/navigation on its way.

The start page

The start page has to link to three pages: What is mindfulness, why you should try it, and how to get started with practising.  I was set on having icons presented on counters by this point, as I feel they anchor the images really nicely on the page and there is a familiarity about the shape that says "click me". According to Dan Zambonini in Web App Success (2012), "The size and composition of elements in a composition determines its balance.  An unbalanced design generates tension, which may be the goal in many design projects, but for web apps that demand repeated comfortable use, tension is not a desirable trait." 

Version 1: 3 counters, laterally centred.  This gives room for a title and any text for labelling I would have underneath.  Simone has suggested using InvisionApp's modal window function so that people could click on it and get information on the page about the linking page, without taking up more space on the existing screen.  (See Fig x for an example of a modal window).  At the moment (after all the iterations you'll see below!) this remains my favourite as it is not overly complicated and in my eyes I can't really go wrong with it.  It's a nice structured layout which can be consistently applied throughout the pages, so the user recognises a pattern in the button functions.  Below are some process shots of when I was trying to figure out how to put the icons together.

Version 2.1

Versions 2 - I really do like this look as well, now that I look at it again, even if it is arguably a bit unbalanced.  The larger circle in the middle can be a space for any instructional text and the logo for the app (which here is more of a placeholder) as well as being a natural resting point for the eyes so the user can get a bearing on what this page would be about.  Zambonini (2012) says that "people perceive the centre of the composition and, therefore, the natural balance point, to be slightly above and to the right of the mathematical centre.  This visual centre is the natural position of our focus, where our eyes tend to dwell." 

"Moving the shape off-centre creates tension, adding interest for the viewer and encouraging further exploration.  When multiple shapes are incorporated, the spacial relation and interaction of the shapes becomes the primary focus of the design." Additionally, there is a lot of negative space which acts as a ground for the page.  "It is important to design the negative space as you would the compositional elements.  Shape and group it so that it becomes an active part of the design; supporting the main elements, providing a resting space for the eye and assuming an attractive aesthetic in its own right." (Zambonini, 2012)

Version 3 follows on from that layout with a slightly different use of sizes and shapes.  Ultimately I decided against this layout right now because I wanted something that I could keep consistent throughout the use of the app (although, this could be solved with aforementioned modal windows now…).  This layout works for a page where there are only 2 or 3 bits of information, but there will be some pages where more is needed to explain the images.  At this point, trying to do that would feel quite crowded.  In line with this, Zambonini (2012) says: "Negative space can be used to draw attention to important areas of the page.  Look at any Apple project website or advert and you'll notice how they surround the primary product with ample white space."

Version 3

I like the layout of Version 3, but ultimately felt that the icons were too small.  There would not be enough room for any labels or text about the icons without the page looking too crowded.  What did work for it was continuity, which is effective because, according to Zambonini (2012) "The eye will continue in the direction that it is travelling.  We will naturally follow a line or a curve until we reach another object."

The "What is mindfulness" page

This page linked to two further pages: overviews of mindfulness & the brain, and mindfulness & the body.  It was important to have icons which indicated this as well as a written summary of the concept of mindfulness.  I chose to go with the brain/body idea because those are two areas that the overall benefits can be presented through in a way that the user can grasp as being applicable to themselves.  Much of the information on mindfulness can feel very "floaty" and centres around concepts of finding inner calm and peace.  These are of course perfectly accurate elements of the end goal of a mindfulness habit, but I felt that the information should be presented in a way that the person could relate to and apply to themselves or someone they know.  Everyone knows someone with high blood pressure, psoriasis or anxiety issues, so my hope is that framing the effects of mindfulness this way can encourage more people to try it.

Version 2.2

 Much preferring the neutral background as it makes the colours pop a lot more.  It was important to have a description of mindfulness in the centre of the page here, as this information is the most important bit.  I used a much larger circle to show visual hierarchy, although interestingly enough I have since read that shapes tend to also need to be darker to establish themselves as top of the hierarchy. "We can use the visual weight of objects on a page to guide the user through a predetermined story, controlling the order in which they view parts of the design as a means to improve their comprehension."(Zambonini, 2012) In relation to the teardrop shapes and the circle: "When multiple shapes are incorporated, the spatial relationship and interaction of the shapes becomes the primary focus of the design." (Zambonini, 2012)

Version 2.3

Another version similar to the ones above.  I like the little annotations with the images as I feel they look quite sleek, but the issue here was again crowding the screen a bit much.  I may keep the italic Futura font if I choose to annotate any images in future work as it is a slim font which wouldn't detract too much from the kind of font I use in the image below (Chapparal Pro in this example).

Version 4

I think the layout above works because it feels a bit more structured and clearly presents the two routes the user can take from this screen.  The dotted lines were an experiment but I think they anchor the icons further and bring them both together.  I'm wondering if there is a way to mix up this layout and the preferred one shown below.

The example below is a mock up for the page which would be an introduction to how mindfulness affects the brain.  All of the images are linked through the same theme so I felt it best to put them on the same page.  At first I thought that I was breaking my original rule of keeping enough space on the page, but with the addition of modal windows it could still feel streamlined.  In the vein of Gestalt theory, Zambonini (2012) writes that "when elements are placed close together, they will be perceived as a whole, belonging together." Similarity "We perceive a group of related elements where they share similar visual characteristics, shape, size, colour and so on." (Zambonini, 2012)

Version 5

Example of a modal window.  I prefer this one a lot more to the ones I posted last week as it looks a lot sleeker!

One element I skipped over a little when creating these was the golden ratio rule, which of course was not a great idea as it is so important to designing layouts! I did try to use the rule of thirds but I think I can definitely go back and review this.

References 

Zambonini, D. 2012. Web App Success. "Chapter 13: Visual Composition" [online]  http://webappsuccess.com/visual-composition.html
[Accessed 05 March 2015]