WEBSITE ANALYSIS 2 – APPLE.COM

The Apple website (http://www.apple.com/iphone-6/) has a great design overall but I am specifically looking at the iPhone 6 page for the design they have implemented.The homepage you are greeted with when you select the iPhone part of Apple’s overall site is this:Screen Shot 2014-09-23 at 20.24.06 (2)

The product site has been split into ten individual sections focusing on design, display, technology, camera, connectivity, Touch ID (fingerprint scanner), Apple Pay (payment system), iOS8 (operating system), accessories and tech specifications. This can all be accessed the ‘explore’ button on the top right:Screen Shot 2014-09-23 at 20.27.24 (2)

The page is full of subtle gradients for backgrounds to add contrast, smooth animations to enhance the user experience.

Looking at view of the site as a whole, you can see how perfectly structured the site is. The site again takes advantage of the negative space and fills it with visuals of the phone complimented by a small amount of text describing why the new phone is better. It tells the user what it needs to know pro be sold the phone and nothing else. If you break down the different sections of the page you find it is all sales talk. I have drawn on the image below to help break this down. The thing to bear in mind is that this page is to show the updates from the iPhone 5S, also note that seven of the nine sections have links to allow you to learn more in depth about that aspect of the phone.

apple

1 –  Is an introduction to the phone itself,  Basically summing up the updates for the entire phone. This can be taken literally, the paragraph is

“iPhone 6 isn’t simply BIGGER — it’s better in every way. LARGER, yet dramatically THINNER. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new RETINA HD DISPLAY. It’s one continuous form where HARDWARE and SOFTWARE function in perfect unison, creating a new generation of iPhone that’s better by any measure.”.

I have capitalised the keywords to i will reference in the other points.

2 – “BIGGER/LARGER” are the keywords to be taken from section one. It describes the sizes and the names of the two products. This keeps the text to a very minimum, there is animation implemented into the page so that as scroll down the phones rise up.

3 – “THINNER” is the keyword to be taken from section two. This section describes the thickness of the devices and has a pitch to sell it to the customer.

4 – These are visuals of the device, again showing the size, thin design and quality of the build.

5 – “RETINA HD DISPLAY” is the keyword to be taken from section five. Again given precise details of the device in the terms of screen resolution. Aside from the details of this section, this is only the third image to contain a block of text, this is how Apple takes full advantage the negative space, making the content much more readable.

6 – “HARDWARE” is the keyword to be taken from section six, while describing the camera being better also giving you a visual of the product.

7 – “HARDWARE” is the keyword to be from section seven, describing how this model of the iPhone is the fastest yet and has the most LTE bands compared to the other smartphones.

8 – “SOFTWARE” is the keyword to be taken from section eight. This section causes further intrigue into the features of the iPhone, allowing the customer experience to transition flawlessly.

9 – Finally the last section is simply to inform and encourage the user to buy the iPhone. Giving them multiple options on how to do so.

Advertisement

Website Analysis 1 – thenutone.com

I am very impressed by the nutone.com, it is very simple, yet extremely professional. The company’s services range from web design and print to branding and illustration. Given they are a design company, the biggest aim of the site would be to show of the skills they have available. Their site takes advantage of negative space like I have previously spoken about (https://akbrodie.wordpress.com/2014/09/22/rosa-bonheur-the-lion-at-home/). Broken down into four simple sections.

Home

Screen Shot 2014-09-23 at 11.54.13 (2)

The homepage is simple, it has the company name twice, a couple of simple graphics, links to other parts of the site, and the social bar. The greeting is simple and is dominated by negative space. Salmon is used to colour the background, and I thought this was unusual so I researched the connotations of the colour, I realised that it may not have been picked for simple design aspects but also the meaning behind the colour. I found (http://www.mysticfamiliar.com/library/l_auras_colour_meanings.htm) with the meaning “people who have found their true vocation and love it” which would indicate that this company is not only good at what they do but they also love it  too!

Works

The works section is an interactive part of the site, when you hover over a box it names the company and tells you what work they did for that company. The page links and the social bar has moved to the sides to get of of the way of the content, allowing your focus to be on the centre of the page, which is where the client work, the most important content lies.

Screen Shot 2014-09-23 at 12.03.57 (2)Screen Shot 2014-09-23 at 12.11.59 (2)

Something incredibly simple but effective I found while looking at this site is that all the colours run into each other, check out the pink running into the grey and also the grey running into the about section here. It gives the website a certain type of flow that you can’t really find many places on the web.

About

Screen Shot 2014-09-23 at 12.14.53 (2)

As found here (http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0071161) it has been proved by a study based in the US that dyslexic people find it easier to read shorter lines rather than longer texts. This is the first time we have seen text as a whole on this website, and it keeps it short and snappy, more presentable with a shorter width and makes it look there is a nice simple block of text to read.

A quirky side to the site is the statement “Let us Lorem, your Ipsum” leading to the contact section of the site. While Lorem Ipsum is “simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s” (http://www.lipsum.com) thenutune have tried to create a somewhat innuendo sounding phrase from it. In the creative world, which the company would be making a product for, it makes them look like they have a sense of humour, and adds quirkiness to their site.

Contact

Screen Shot 2014-09-23 at 12.31.52 (2)

Again the contact section of the page is very simple. containing contrasting colours that leave the site looking far from bland. I feel that the fact that the site is simply one one page, it allows the user to experience without clutter or unnecessary content. The negative space on the webpage is key to making this site a brilliant experience for the user.