Analysis: Grid System (Made by PFD)

'Made by PFD' is the website of a design agency. Again I have visited the awwwards.com website, this time under the actual Design business category, as you would assume that the sites would be well designed and the majority responsive.

The website is very much (probably not the official term), 'grid based'. This seems like it makes the website more successful as the grids will continue to flow evenly and shift to the next row if need be. I was reading an article on coffeecup.com about the benefits of using Grids in Responsive design which helped me further my understanding of them.

Main points from the article:

• A fluid grid is dependant on the horizontal width of the page it is being displayed on. It will still fill the page with the desired number of rows/columns but their evenly distributed sizes are reliant on the width of the page. It is 'squishable'. 
• Just because a grid is fluid does not mean it is responsive by nature. If you keep reducing the width of the page the grid will keep on squishing. 
• The sizes of fluid grids are not set in stone, and a responsive fluid grid will stack elements before they become unusable (e.g. they get too squished). If the width of a column hits a certain point it will be moved and arranged until it is positioned so that it can be read properly. 

The following image is copied from the article:

Above you can see that instead of squishing the columns onto the one row and continuing to squish them even if they become unreadable as the width of the page decreases, a column has been shifted below.

The Made by PDF website demonstrates this well. You can see the website in the desired form below:

As you reduce the width of the page the descriptive text rolls onto additional lines and the images - the element that is most obviously in a grid layout - start to reduce in size. In order to keep the 2 images on the same row together they start to shrink to compensate.

As you continue to reduce the width of the website, though, there comes a point where it's decided that the images have been made too small for them to be enjoyed and understood properly. So, they are re-stacked to bring them back up to the correct size.

Analysis: Grain & Mortar

To start my analysis of varying responsive websites, I visited a site that I've recently started to use quite a lot: awwwards.com. The website daily spotlights varying well-designed sites (submitted by the companies/designers), rates them and commends them on their best aspects. They have a section for responsive websites and you can also refine your search through their 'site of the day' for responsive websites. I found the following website - 'Grain & Mortar' - through this site.

This site is not familiar to the graphic style that I shall be going with for my website (as I will be matching up my graphic style with my previous project), but it presents a good insight into the fundamentals of a successful responsive website which I'd like to analyse and understand further.

This analysis will break down the individual elements on the page and describe what happens to each of them as the platform for the site is being viewed on changes. 

Platforms being viewed on: iPhone 5, iPad Mini (both landscape and portrait), 13" Macbook Pro.

Grain & Mortar
Grain & Mortar are a company in Omaha that designs websites and branding for businesses, as well as making apps and motion graphics.

Desktop 

iPad Mini (Landscape - Portrait)

iPhone 5

As you can see above, the initial appearance of the website changes slightly when you view it on different devices. Cropping of the feature image (slideshow of 3) occurs as well as proportionate sizing of links (e.g. 'Watch the video) to ensure readability and usability and adjustments to the navigation bar.

Navigation Bar

When viewed in a desktop internet browser, the navigation bar appears as above. When your mouse hovers over a button, it changes to an orange background (sticking with the white text) which matches the orange in the logo (also featured in the far left of the navigation bar. There is no change between the 'hover' state of the buttons and the 'active' (clicked down on, is selected etc) state, they are both orange. 

There are 7 clickable buttons in the navigation bar, one of those being the logo which, alongside the actual 'home' button acts as a 'home' button too. To signify to the user that the mouse is hovering over the logo, it dims the bright white text slightly to a grey.

Also, the sizing of the text within the buttons is equal to the sizing of the text within the logo, and they line up evenly.

When viewed on an iPad in Landscape orientation, the navigation appears as below:

There are no completely obvious, dramatic changes. No navigation buttons have been removed, but they have been slightly repositioned to make up for the smaller display size (they appear to have text that is ever so slightly smaller?)

When viewed on an iPad in Portrait orientation, the navigation appears as below:

Here there are some significant changes. First of all, an additional navigation option appears in the form of 2 arrows. Clicking the forward arrow will take you forward a page and clicking the backward arrow shall take you back - as if you are viewing a slideshow of each of the websites pages. The logo still acts as a 'home' button too. If you want to access a specific page quickly or want to view the different options for pages, you click the menu icon in the far right. Upon clicking that, the following appears:

The entire page slides to the left to allow the entry of a menu sidebar, and all of this is down with one fluid motion. This sidebar is coloured orange - the same as in the logo and as mentioned above - and covers the entire height of the screen. It is not scrollable itself as there are not enough options for a scroll to be required, but as I will go into further detail later on, the page itself is still scrollable underneath. Upon clicking an option in this sidebar, it collapses back to it's original state, the page shifts back to the right and the page you have selected will load. To close this sidebar without clicking a link to another page, you simply click (or as it's a touchscreen device, tap) on the menu icon again. 

The icons used here have got me thinking about icons in the general and whether their design has an impact on a users experience with the website - I think I will look into this further at another time. 

There is a similar experience when you view the website on an iPhone, as you can see below. 

The initial navigation buttons you are presented with has been condensed further, with the removal of the backward arrow. Left is the menu button, the forward arrow, and the option of using the logo as the home button. When you click the menu button you are presented with the familiar navigation used in the portrait iPad version - a sidebar. 

As the iPhone (and most mobile phones) screen is a lot smaller than the iPad, the sidebar appears proportionally a lot bigger and takes up most of the screen. If it were any smaller, the text would have to be smaller, and then the text risks being unreadable. Just like before, you click the menu button to collapse the sidebar and view the website normally, and you can use the forward arrow in the navigation bar to quickly flick through the pages (in the order they appear in the sidebar) quickly. 

This website features, in the best way I can describe it, 'layers'. 

No matter what platform you're viewing it on, the navigation bar is always the 'top layer'. As you scroll down the site (demonstrated below on an iPad) the navigation bar is always present and always stays at the top of the page, allowing the content to scroll up, underneath and past it. You can even see it scroll up and past due to the navigation bar having a slight transparency to it. 

Content

Below the main, large image (a slideshow of 3 different images) there is a box containing a sentence that quickly summarises the company. This box contains actual text, rather than an image, which means that its alignment and amount of text on one line is dependant on the width of the device you're viewing the site on.

If you view the site standardly on your computer (in this case, a 13" Macbook Pro) it appears like this:

All of the main text (in the larger, capitalised font) fits onto one line, with smaller text in lowercase underneath. Then, if you view the site on a slightly smaller screen of an iPad, in landscape, it appears as the following:

Basically exactly the same. The orange 'learn more' button appears slightly larger. If you then view the site on an iPad but in portrait mode, the following happens:

The text runs onto two lines as the width of the page is not big enough to fit the text at it's designated size. If the text was any bigger, it may detract from its readability. As the text falls onto the 2nd line, the surrounding blue box has naturally extended. Also, the ratio between the size of the 'main' strap line and the additional information below seems to allow for that additional info to appear bigger and more readable. 

If you then view this piece of content on an even smaller device, such as an iPhone, the following appears:

The content has been pushed further onto three lines with less words on each line. Again, this causes the blue background box to have to be bigger and as a result viewing this piece of content purely will take up nearly the entire screen, resulting in the users main form of viewing the site involving in a lot of scrolling to view all of the information.

There's also a 'grid' of information beneath this that also reacts to the width of the page. If you view the site at its standard size, it appears as the following;

If you then view this on an iPad at a landscape orientation, it moves from a 4 per row grid to a 3 per row grid. A smaller width, such as an iPad at portrait, moves it to a 2 per row grid. Then, at it's smallest, such as on an iPhone, it turns into 1 per row, again resulting in the obvious need to continuously scroll further and further to see all content.

Summary:

• Sometimes there is need to remove the least important information for the iPhone version, as you do not want to clutter a small iPhone screen with info that's not immediately relevant.
• Navigation can be done through a menu bar or in some cases a 'next' or 'move forward' button is successful. This can turn your site into something similar to a slideshow presentation, but works for people just wanting to quickly browse. 
• I like the idea of having a hidden navigation sidebar that moves in only when it needs to be used.
• 'Layering' your content to allow access to navigation wherever you are on the page, even if you're right at the bottom. 

I Think I've Finished...

I think I have FINALLY (!) finished my iBook! Here's a few screenshots of what it looks like and some of my favourite pages and final developments.

I really love the graphics on this page. If I had more time I'd like to implement more interactivity to it, as at this time there is none, but I'm really happy with the graphics. I think they really fit the visual style of the iBook and they easily explain and demonstrate the different types of volcano. I've tried to keep this visual style throughout the entire iBook, and I think it's successful. When I did some testing of my iBook and asked for a general opinion,  I was complemented on this. 

Also, in the final stages of the creation of my iBook I made the decision to feature proper images at a low opacity in the background. The decision to do this was based on my feeling that the pages of information (e.g. not the title pages or chapter beginnings) were looking quite blank. Text was sitting against pure green background (with the slight alternation of shades) and each page was looking dull and not very inviting. The images are relevant to the chapter that it's in, and help tie all of the pages within that chapter together. I was careful not to set them at too high of an opacity so as not to reduce readability of the page.

I like this page as it's simple, fun and has a good level of interactivity. I think the graphics I've included here are great, and overall I think the graphics in my iBook are one of it's strengths. Below are some examples of them.

Whilst I did experiment with textures (and you can see that in particular on the front cover of the iBook and in the Table of Contents) I made the decision to lay off of them on the smaller graphics. I felt it would detract too much and take the design either further from its Flat UI inspired roots. Instead I experimented with lighter shaded shapes above the original (e.g. to represent light) and this is particularly obvious in the 'glass of water' and 'soft drink' examples above. 

Another feature I decided to implement whilst finishing up my iBook was something I refer to as the 'yellow info bar'.

These sit in the top left hand corner of the page of a lot of pages, and on the designated chapters will run throughout the entire thing. They're designed to look like they're attached to the main 'Ribbon' title, so end behind it but do not run through the entire back (where it would be visible). I decided to have them as I was aware that my chosen Red & Yellow went well together, and I needed somewhere to put Sub-titles. They work well and are in a position that allows me to consistently put them in the same spot as they will never detract from the content on the page. 

Above is an example of my efforts to really simplify what the end user is seeing on the screen. When creating these, I tried to consider the target audience. Yes, asking a question does not make it 'specific' to 16 year olds, but the design is rather candid and basic but gets straight to the point. The added slightly wonky arrow adds a small sense of quirkiness and I like the look that it gives. These are shown at the start of selected Sections within my iBook, and aim to give the user an immediate understanding of what's going to be covered in the section - the answer to that question.

An Inspirational iBook

A while ago I was browsing www.kickstarter.com and came across a project called 'Chineasy'. I read the article, watched the promotional video and thought that the idea was absolutely brilliant. Then, thinking no more of it, I closed the page and haven't looked much into it since.

Today whilst having a quick browse through the iBooks online Library via the iBooks app, I saw that the creators of 'Chineasy' released the iBook version of their book. Knowing that it contained, what some consider, a "revolutionary" way to learn a language, I downloaded the free sample to have a look. 

I'd like to analyse it quickly, whilst I'm in the midst of my project, as I am currently in the middle of trying to workout layouts through constantly drawing wireframes. I find the layout of this book really inspiring and a brilliant platform for someone to learn from. 

There is a very consistent design style. It's very current, very engaging and very aesthetically pleasing.

Example 1: Chineasy: The New Way to Read Chinese

Comparing the above and below examples, there is not a consistent colour scheme but rather a consistent colour style - very, very slightly muted. Some pages are coloured through a set of shades of a colour (e.g. above, with orang/red), whereas others work with contrasting colours, and offsetting a darker shade against a lighter one. 

The use of the full, portrait image on the left compared to the smaller, 4-piece grid offsets the page and prevents the need to have a page of 4 images on the left as well. It reminds me a of a magazine - the advertisement, then the magazine content.

Example 2: Chineasy: The New Way to Read Chinese

The layouts vary from page to page, but general stick to a grid system. Example one features a clear 2up - 2down grid, whereas example 2 has a column of imagery and then matching information on the outer edge of the page, leaving breathing space within the central column. I think this is a brilliant way to present information - break it into small chunks and arrange it in a way that makes logical sense. The way Example 2 is organised is similar to what I've seen in a lot of magazines, and even shopping catalogues - the way icons are used to match up with the information that is in a seperate area on the page. 

Example 3: Chineasy: The New Way to Read Chinese

The use of dramatic comparisons, using imagery that we recognise, seems to be a good way to enable someone to learn something easily. My dad always told me that if I ever needed to remember a set of numbers to turn them into something visual in my mind based on what they looked like (e.g. number 2 = swans) and then make a short one sentence story containing all of those things. This is a similar thing, associating the information with something very visual and recognisable, increasing the chance of the reader being able to remember it. 

Another Analysis

Whilst sifting through some real questionable material on the iBook store, I came across a really cool and interesting Enhanced iBook called "The Senses".

The iBook is made up of a series of pages that contain a lot of interactive images and pop-ups. You work it by reading the text and then clicking on the various X's and circles dotted over the imagery. Clicking upon these brings up additional pages (pop ups) which allow you to interact further and find out more information. If you look the example below, you can see a clickable point on the males cheek. It stands out enough so that you know you're supposed to click it.

Clicking upon this brings up another page that contains an interactive diagram on the same image that we saw on the previous page. There's a good sense of continuity and it highlights what the user needs to do to interact once they see the additional features overlaid onto the original image.

When you click on the small plus by the eye, a small animation starts that visual explains the points made in the accompanying text. I like the way they have chosen to animate what some would just leave as imagery. It creates a stronger, more visual way of the user learning and is more likely to be successful.

I also like the continuity between chronological pages. As you can see above, they've used the either side of the males face to continue to the next page of the same chapter. This keeps a similar layout that the user has already understood from the first page but changes it slightly to avoid blatant, identical pages each time which can get boring. 

Another good example of using animation to explain what could just be a diagram is the following (images below). The idea is that you click the X's and it visually demonstrates what it means by our eyes running to opposite sides of our brains. 

I think this is a really successful way of demonstrating a point, especially by giving them their own pages that are optional to click on. These interactive diagrams are placed, generally, centrally on the page against a very clear (sleek looking) background and, unlike other iBooks, the surrounding is not cluttered by text. They're of a nice design style that fits within the overall style of the book.

Analysing iBooks

To do some more research, I'm going to analyse some existing 'enhanced' and regular iBooks. This should help me gain some understanding on what makes a successful iBook and what doesn't, as well as further identify any conventions and patterns throughout them. I viewed them on my iPad, to see the full experience the iBook gives. Screenshots are direct from the iPad.

'Our Wild Planet'
The first iBook I analysed was one that was not enhanced, but very similar to what I've been asked to do. It's an information book about different types of animals, with different chapters explaining different animals that fall into different categories within each.

Our Wild Planet - Nature Through The Eyes of a Project Noah Community

This is the very first page you see when you open the iBook. You can see that the bottom of the screen contains a row of dots. Each of those dots represent a chapter, and then within that chapter there additional sections with their own pages. In the above image you can see I am in Chapter 1, Page 1. Below you can see how when you scroll through the different chapters, each row of images (previews of what's on that page) changes. 

Once I had delved into one of the chapters, I noticed an obvious recurring theme about all of the pages containing content - they're all pretty much the same! There seems to be very little difference between each information page, no matter what category it may be in - a page in the 'birds' category is the same as a page in the 'mammals' and then the same as one in the 'anthropods' category.

The above screen caps are from the 'mammals' and 'birds' categories. They both contain a portrait image on either the far left or right, with specific styles for the heading, subtitle and body text. To me, this is quite a dull way of presenting information. It does not look that interesting. The black font against the stark white background is too text-book-like and despite the small chunks of information, I don't think this provides an easy way to learn. 

There are points, though, randomly throughout the iBook where there is good positioning of text around images. The images are large and cover the entire page, forcing the text to work around it. In some areas it works, some not so much, but I think it's a much more successful way of laying out the information. 

Example 1                                                                             Example 2

Example 1: Relatively successful. Good use of a large image, and the darker text works well with the green. 

Example 2: Excellent use of space around the main subject of the image & well coloured text that is very readable against the green background. Your eyes travel around the entire page.

There is no interaction in this iBook, it's purely for reference. You can easily skip to and from chapters, and using the iBook app you can take notes along the way and view an outline of the entire book. You can see below the toolbar you use the navigate, and the notes/summary page.

--------------------------------------------------------------------------------------------------------------------------

'Visual Dictionary - 11 Languages'

Next up is this pure interaction based iBook. It's an iBook that teaches foreign languages and, in the same, the words for different items in an airport. There are only two types of interaction - swiping from page to page, and sound upon selection of images. I recorded a short video of how you interact with the iBook.

I think the lack of varied interaction works in this iBook. Whilst I only download the sample version so I haven't seen the entire thing, I do think perhaps a small bit of more information could be included. Either an introduction screen or a small piece of text on each page.

Compared to my previous analysis, this iBook is much more reliant on the users common sense and whether they understand that they can click on an image and it will play a sound. Small sound icons may help to ensure that people get the full experience from it.

The graphics are very simple and easy to understand. The title of the book contains the word 'symbols', so the iBook itself uses very recognisable 'symbols' that are generally understood as signs worldwide. 

As you can see above, no matter which page or chapter you're on, or which language you're trying to learn, the page layout stays exactly the same. This provides great sense of continuity and makes it extremely easy to navigate, but does look a bit dull after a while. Perhaps an inclusion of the countries flags somewhere? May help.