Pinterest

I use Pinterest quite often. Not just to pin things to my own boards, but to gain inspiration and generally browse through. Everything is on there....seriously, everything.

I decided to pin a few things for me to reference back to on my own board, linked below.

http://www.pinterest.com/amyjane11162/responsive-web-design/ 

Analysis: Web Visual Styles

I have found a few websites via the site designfridge.co.uk that I like the visual style of and that are somewhat similar to the graphics I have already created from my iBook.

Jelejah

This website is an educational website about Physics, so it has a similar aim to the website that I am going to be creating. 

The home page has 3 separate sections, featuring what seems to be quite a popular technique, 3 'slides' that you can scroll to. On the right hand side of the page there are 3 dots - buttons - that show you where you are in the page. I can see this being rather convenient if you are on a page that is quite long.

There is very little instruction in this initial home page. It takes a little guess work, but the three illustrations featured on the 2nd page are links to internal pages which is where the educational information is. 

I really love the way this design has been completely simplified and is not complex at all. It does rely on the intuition of the user, and I am unsure whether it would as successful if it were to be used with someone less web-savvy. 

The large logo (above) as the main entry screen is interesting and successful, but I'm not sure I would apply this to my own website design. I like the idea of having an introduction media, but perhaps not something as plain and not-interactive as a flat logo. On the main introduction screen there is also very minimal colour - just three - with the stand out colour (yellow) being used minimally and to good effect to highlight an icon that is relevant to the theme of the website itself. 

Once you start to delve deeper into the sight, neither the layout nor the visual style changes. It still works off of a vertical slideshow style frame, but each 'page' you get to has different content on about each of the planets, also featuring an animation.

Again, I love the simplicity of this and the way information is presented so clearly. A designated place where an image/interaction goes and a designated place where information can be displayed. After the first 1/2 the user then learns the language of the page and expects that layout at each chapter. I like the idea of repeating a layout so it becomes native to the user and the website is easy to continuously use. 

Above this is a, as I spoke about before, 'top layer' navigation bar that stays there no matter where you are on the page. 

You are able to click on the names of the planet and you will be skipped to that point in the page. What I noticed, too, was that the order of the colours where the navigation bar is (dark blue, red, light blue continuous background) is in the same order as on the homepage. This helps keep continuity throughout the website and again increases the users ability to understand every page. 

BarCamp 2013

Another site that takes inspiration from the continuous/the-entire-website-on-one-page trend. 

I love how there's a slight twist to it though. Instead of having each 'page' (section on the entire page) one colour to signify each section, it's been broken up to smaller chunks. So there's a strip across the page in a different colour with a bit of information, then there's another that's a bit longer, then perhaps another smaller one. 

You can see above how this section did not take up the entire page, and leaves the next section peeking through and the previous one can still be seen above it. It seems to provoke scrolling, and when I was browsing the website the fact that I could see more information coming and that I was already engaged with the fantastic illustrations and animations meant that I didn't mind scrolling further and going 'deeper' into the site/page. 

Each 'page' has its own individual colour scheme that is still in keeping with the design as a whole, and their all brilliant. The graphics seem to take inspiration from flat UI and there is heavy use of the same colour again and again but just in different shades. This all works brilliantly, and alongside consistent use of the same font styles (Same style for headings on each 'page' etc), everything ties in brilliantly. 

Examples of the colours in each section.

Analysis: Web Conventions (Icons)

As I spoke about in a previous blog post, icons are used very commonly on websites to both signify buttons and give direction but also illustrate points, brighten up and make pages more interesting.

I've been looking into Icon design and trying to work out what is most successful and what doesn't really work. All across the web there are freebie sites that give away packs of useful graphic design elements, and a lot of them give away icons. I've had a lot of these for a very long time - just as a resource - but never really properly looked into them. Below are some that I find successful and am considering implementing something of a similar style in my own website.

These are from Pixeden. I also looked on Icony.

In the design for my iBook I was heavily inspired by the 'Flat UI' design style. I didn't run with it entirely and deviated from it slightly, but it's something I would like to bring back into my site whilst still having my iBook and Website tie into each other.

I love this sort of stye, and it's a style that goes well with my main elements of ribbons. 

I've also found this article.

http://designmodo.github.io/Flat-UI/

The article is an entire page of resources for Flat UI designs that can be used on websites. Here are the icons featured on it:

These are sorts of icons that replace just typing the word or title for something. They wouldn't be featured in a navigation menu, but would be used mores to head sections within a page or help someone visually recognise and understand an element on the page. 

When I've been analysing the 2 previous websites in my 2 previous blog posts, they have both featured a specific type of icon - a menu icon. They both feature the same thing, three horizontal lines. Upon clicking them - in both mobile versions and desktop versions of a site - they bring up a hidden menu bar. I really like this idea. It enables me to tuck the menu bar to a certain portion of the page and keep it there without it.

Good Uses of Icons on Websites

http://www.iuvo.si

This website seems pretty reliant on icons. The three main features of the site are icons, and they're featured pretty big as well. Just 1 word is featured alongside them to give a bit of a hint, but they're the main element relied on to provide understanding. They're also featured quite prominently on the left hand sidebar, and are the same colour as the subheading text which helps to draw the user over. This is useful as they're more pleasing to look at than just plain text, giving some enhancement to the users experience. At the very bottom in the sidebar there is 6 icons representing social sites, which are easily recognisable as they're well known sites. 

What interests me is how, without any prompts, I (and probably the majority of other users) understood straight away that the social icons at the bottom of the sidebar are buttons and can be clicked on. They're blended quite nicely against the grey background, so it's not as if they stand out.

The icons on this site have also been turned into somewhat of a feature. A mouse hovering over them starts a little animation and the icons start to spin. This is a fun feature, and I'm now interested in using icons to turn them into a feature of my site. 

http://mailbakery.com

This website features a row of icons at the fold of the page that visually demonstrates the different services that the company provides.

What I noticed mainly about these icons is that they perfectly match the design style of the website. They stand out, but for good reason. They complement the colours and visual style of the website, even down to the illustration drawing style and the thickness of the strokes around them. This has lead me to think about the designs of the icons for my own site - I'm probably going to have to design them myself. I feel like Icons are most successful when they complement and mimic the design of their surroundings, and as I have essential got my own style (in my iBook) with my own set of colours, it would be hard for me to find icons that are appropriate. If I give myself the responsibility of designing them I can ensure that they will tie in successfully with my design and enhance the experience the user has on my site. 

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. 

Responsive Web Design: What is it?

To start off my research, I've decided to ensure I have a good understanding of what 'responsive web design' is and to ensure I completely understand what it is that I am going to be creating.

My first stop was CreativeBloq, a site that I use often to source information and find useful things like Tutorials or free downloads. I found an article called 'Get Started with Responsive Web Design' which lead me to a person named Ethan Marcotte. This seems to be the guy responsible for coining the term 'Responsive Web Design'.

In 2010 Ethan wrote an article named simply 'Responsive Web Design' on AListApart. In the article he defines the web and speaks about how it is ever changing, and how in turn that defines our design and detracts from our ability to design a website for the future and for longevity;

"Our work is defined by its transience, often refined or replaced within a year of two. Inconsistent window widths, screen resolutions, user preferences, and our users' installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we've become incredibly adept at doing so".

Ethan Marcotte on 'Responsive Web Design'

As a designer himself, Ethan explains how he noticed that he was increasingly being asked to design an "iPhone Website". This reflects how we have greatly shifted towards having mobile technology - the introduction of Smartphones has been massively successful and as a result we have become more reliant and demand more from them - one of those demands being the ability to access the web and any website from any 'mobile' device. 

Initially, websites could only be accessed when you were sat down at a desktop PC, so they only needed to be built for the requirements of a desktop screen. But with the increasing demand to access websites on the go, it became clear that accessing a website that had been designed for a desktop screen, on your mobile, was not going to work. This was common knowledge, not something that Marcotte 'unveiled'. People started to build 'versions' of their sites - e.g. as above, 'iPhone websites' - but as so many new devices and technology came out (e.g. iPads, multitudes of Android phones in different shapes and sizes) this became a lot of work. Ethan Marcotte proposes using one version, and coding it so it responds and adjusts to the device it is being used on.

"This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design."

Ethan Marcotte on 'Responsive Web Design'

I will analyse further, but below are examples that illustrate how responsive web design works.

http://fieldguide.is

http://mobiletest.me

Desktop

 The Website in it's Desktop form. A large image that is bordered at the bottom by a yellow box that meets the fold of the screen. There are then three pieces of information evenly spaced across the width of the screen.

Tablet 

Left: iPad Mini

Right: Google Nexus 7 

The above shows how the site would appear on two different types of tablet (in landscape form). The Google Nexus is noticeably skinnier than the iPad and it's interesting to see how this effects the positioning of elements on the page. The contact information on the bottom of the screen in the yellow bar has repositioned so it is more centrally aligned on the Google Nexus, whereas on the iPad, which is noticeably wider it is closer in likeness to the original, desktop 'version' of the website.

Other Desktop to Mobile comparisons of responsive websites.

 http://joshuasortino.com 

http://morehazards.com

 http://2012.dconstruct.org

AF103: Design For The Web

Today I start the new (final!) brief; 'Design for the Web'.

Project Aim
It's all about web design and responsive web design, and the aim of the project is to "produce a responsive website that will display on Desktop, Tablet and Smartphone devices". In creating this website I will ensure there is a consistent visual style throughout all of my products (Desktop version, tablet version etc) and I will develop my own approach that is carefully considered and designed successfully.

As well as using a range of software to design the visual style of the website I will also hand code the website. To do this I will use a text editor, and the suggested programs include: TextWrangler, BBEdit and NotePad++. In order to hand code the site I need to develop my own knowledge of a variety of web languages, those include: HTML5, CSS3, Media Queries and some jQuery (to add further interactivity), and these are all languages I am going to look into and (hopefully) become accustomed to and (somewhat) learn during my research and throughout website development.

Requirements
As the main product of this project, my Responsive Website must contain (at least) the 3 following elements:

• A navigation system that is not only robust and works correctly, but that is user friendly and uses a 'Responsive Navigation Design Pattern'.
• A selection of text, images/illustrations, sounds and moving images.
• Some form of animated navigational elements. These should accompany the content of the website and should be successful at enhancing the user experience. I can do this through the animation being relevant and applying a good design style.  

As usual, my blog and sketchbook shall document my progress throughout this project. They will contain: a detailed production schedule, some analysis of existing responsive websites (good and bad examples), research into different industry standard navigation design patterns, and some good visual and interactivity research.

Pitch

At this moment, the proposed pitch date is Tuesday 6th May, so I am working towards that. In my pitch I will put forward my proposal for my responsive website. This will include explanation on how I have developed certain elements of the site - the design style, the navigation system and it's responsive qualities. I will also include wireframes, developed logo and header designs as well as interface designs and my considerations of UX design.

Crit
On Tuesday June 3rd I will crit my website to the class. Here I will receive feedback that is hopefully constructive and will give me ideas on how to improve. It also gives me time to fine tune the site before submission. By this point the entire site and navigation system should be there and working with few issues - my aim is to present a 99% finished product to the class.

Submission
This project will be submitted on Wednesday 4th June by 4pm, with any proposed improvements applied and (hopefully) a design and overall product I will be happy with!

Evaluation

I have finished my iBook, so it's time to evaluate.

Overall, I think I have created a successful iBook that adheres to the requirements and could be used as an education resource. It has a good visual style with some fun and interactive ways of presenting ideas, and as a result the iBook is engaging.

Gathering Content
I was quite successful on gathering content. I initially struggled with the organisation and arrangement of content, and it took me a while to make a solid decision on the direction I wanted to take the book (e.g. what Chapters, and what sections between), but once I had made a decision then I was okay. I cover a reasonably broad range of subjects within Volcanoes, but next time I would try to cover more. I feel I could have expanded into more unusual territories, such as Underwater Volcanoes. But, overall, my content is well written and makes sense.

I tried to implement some sort of narrative into my iBook. I did this by having sections that ran on from the previous,  but I think I could have been more successful at this but including it further and also having a stronger navigation within the iBook (e.g. If a term pops up, a link to the page in the iBook that explains it).

Time Management
My Time Management throughout the project has gone reasonably well. I've managed to keep on top of things and meet deadlines, despite feeling quite overwhelmed at times. If I could improve my time management I would focus more on the design and less time dwelling on getting the content together - these are two things that I could of done alongside each other.

Aside from feeling overwhelmed, I managed to do everything that has been asked of me and that is required, so I am happy with that. Time management is not one of my strongest points and is something I am working on personally. I created my production schedule and stuck to it pretty well, so this has been successful for me.

Graphic Style
The Graphic Style of my iBook is one of it's stronger aspects. It has a strong colour scheme throughout, with some deviation (see; Chapter  3 Section 1) where I felt it necessary and applicable. I chopped and changed with the graphic style of my iBook a few times because I wasn't happy with it. I got stuck in a rut of 'I don't like the design' which was preventing me from moving forward, so I rethought how I was going to present my content and went from there. I kept some aspects of my original design (specifically the Volcano) and then implemented new colours and a new way of presenting the title (in a Ribbon). I feel this greatly enhanced my iBook, making it more engaging, with less imposing colours (red can be rather strong...) and majorly improved it's readability.

I tried to sick to my visual style and carry it out through the graphics I drew. In a way this restricted me to my drawing ability, but as it was quite a simple style I think I did quite well. I made a decision early on to as much as possible not include external graphics and graphs and to draw them myself. This gave me freedom to include as much or as little information as I wanted, and has been of a benefit to me.

Level of Interactivity Implemented
I feel I have included a good and successful level of Interactivity. I have featured several external widgets from Bookry.com as well as numerous ones from within iBooks author itself. They range in type, from click & drag to quizzes to pop overs, and this has created some fun ways to find out information.

I struggled with ways to direct the user to the interactivity. With pop overs, they do not come with a 'play' button and require a text box that says "click on...." or "click here...". This has meant my iBook feels as if it's littered with little boxes that say that, but it's something that I am restricted to because of the software and if I had the ability to I would implement symbols that users recognise as meaning certain things.

Navigation
The navigation of my iBook was again restricted by the program. If I were to continue on with this project I would implement my own navigational frame (e.g. adding home buttons) like I had planned, but I did not plan in enough time to work through this. iBooks author does not let you delete the 'Table of Contents' which appears at the beginning of the ibook, and this was a major restriction for me and caused me to have to redesign the structure of my iBook. My iBook navigates the same as every other iBook,