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]

Current progress and meeting with Simone

On Tuesday I had my third supervisor meeting with Simone, the first in three weeks as I was unwell last week so couldn't attend.  I showed her the work I how posted here, which she was mostly very happy with.  My main concern for this week was the subject of my dissertation, as while I am very happy with where my practical work is going, I am finding it difficult to pin down where my dissertation topic would tie in, or what my dissertation topic even is!  I thought I was going in the direction of type-image relationships, but at this stage it could equally be about information graphics or digital-analogue relations (as my final outcomes would be both on screen and printed) and both have been discussed with Simone.  She has suggested I do more reading on all topics, including works by David McCandless and Edward Tufte, who are information designers.  Hopefully by the time the first presentation on the 26th rolls around I will be able to say I know the answer!

Simone asked that I make a flowchart of all the pages I want to have in my prototype, which I currently have on a very messy piece of paper so that will be in a blog post for tomorrow.  The early drafts of the content of the webpages (and I mean early) are shown below.  It was also agreed that I should have prototype visuals ready to put in an online survey, so that I can get some feedback on how effective/persuasive my visuals are.

Through researching the scientific findings on the benefits of mindfulness, I came up with the beginnings of the illustrations for the mock website.  Currently I am working in a vector style using some elements of skeomorphism to give the visuals some depth and lift them off the screen a little.  Images created using Illustrator CC and placing textures where I felt I wanted some.

First draft of informative illustrations for the role of the amygdala in the limbic system.  I liked the offset outline style of the banner and the speech bubble, but ultimately decided they were not in keeping with the other illustrations. 

These were the first pieces I created, after researching the limbic system (also known as the emotional brain).  Placing definitely needs looked at and I would like to consider other fonts which have a bit more weight to them, but I am happy with the direction and style, as is Simone.

I wanted an annotated diagram to show the benefits mindfulness brings to the body.  Not sure if I will keep the dotted rings to highlight information as it feels a little busy, but I think this kind of illustration is important to highlight information that could be persuasive to the audience as they are presented with the parts of the body that are affected.

Very happy with the brain diagram (below), however my recent research in brain illustrations has got me thinking about trying it from an isometric angle or combing it with an image of a person's head.  

Early draft page for the 'Beginner Exercises" page.  One of the elements of the website will be a guide to mindfulness exercises at various levels. Introductory exercises to mindfulness include holding an ice cube in the hand and noticing the sensations,  inspecting a raisin, and noticing 5 things as you go about your day.  For newcomers to mindfulness, these seem a bit bizarre on the surface, so it's important to put them across in a way that appears fresh and contemporary rather than a bit hippy.

After going over my web flowchart with Simone I hope to have more content to post very soon.  Next on my list for illustrations is a how-to on different kinds of mediation and the body scan practice. 

  On a different note, I managed to secure a meeting with Tricia from Student Services, a counsellor who runs a 7 week mindfulness course for Abertay Students each year in October.  She leant me two books, The Mindful Way Through Depression by Mark Williams, Zindel Siegel, John Teasedale and John Kabat-Zinn, and Mindfulness: A practical guide to finding peace in a frantic world.  These should be helpful as they detail the MBSR (Mindfulness Based Stress Reduction) and MBCT (Mindfulness Based Cognitive Therapy) among other things; these are the most intensive and structured courses for learning mindfulness, and of the scientific studies I have read, the results of most if not all of them are based on MBSR training over 8 weeks.