Mobile Testing

An important side of the marketability of this website is the amount of users that can access it. This means, that the website must be accessible by multiple devices. Therefore I have tested three of the screens on the website to check if they would work, below are the results.

It is worth noticing that the site looks good and works well on most of the screens but it is important to also note that some of the design stops working on the smaller screens and that the devices are unable to show the site as they have been designed. The best way to get round this is to build a separate design for landscape mobile. Another issue is the fonts, and whether they display correctly, as you can see there is a mixed result from across the different devices. The mobile optimization has worked to a satisfactory level, but has suffered a few issues on smaller screens.

Advertisement

Natwest – Self Promotional Piece

I came across this promotional piece for Natwests mobile banking app, it simulates a mobile phone with the actual leaflet within the screen, then when you open the leaflet it has the relevant content. Something worth noting here is that they have used no more than three colours throughout the piece of marketing. As a web designer I could use this idea to promote what I do, this is something I will consider for part of my promotional piece.

Apple Design Influences

How has Apple effected web design over the years, and will continue to do so.

History

Apple has always been big on white space, using it to bring attention to the images and the text, while this  is relatively simple design, it can be seen across many websites with similar design to apple’s website. It uses subtle gradients to add depth to otherwise boring content, great text and content that match, icons used across the site, a grid system to keep everything in line, user friendly navigation and use of javascript to avoid long loading times. This can be seen in Apples website along with a lot of other websites that have been influenced by their design structure.

Apples website:

in comparison to

Mac Rabbit:

Versions:

Pixelmator:

Removing Skeuomorphism

Skeuomorphism is the term given the visual style that represents physical objects. The reason for using the visual style to begin with, was that when people first started using computers, they didn’t fully understand how to use them, so designers made icons to represent the original object. This is why mail icon is a envelope, music icon contains a musical note ect. Now that computers have gone ‘mainstream’ and we all understand them much better, we can remove a lot of this unneeded clutter such as textures, reflections and shadows that allowed things to represent their physical counterparts. This was changing content to so that instead of using texture and realistic imagery to represent certain design aspects, they moved to flatter mimalist design. Here are a few examples from when apple removed skeuomorphism from their mobile operation system;

The Icons were all changed to be much simpler, vibrant and nicer to look at, with the removal of physical objects and textures. The same can be said for the design with the apps.

Examples of flat web design

http://foodpornindex.com Is a website that tracks the hashtags of certain foods, healthy and unhealthy. It then shows it in an info graph designed with flat colours.

http://www.franzsans.de Is also shows another good use of flat design to show off the design of the font so you buy it, It works particularly well and I was tempted to buy the font.

Future

I believe that circle user interfaces will be inspired by Apple’s new watch. Circles appear in our natural world, just look at the moon, wheels and fruit. They create emphasis and focus our attention, giving us a defined centre. Apple have recently re-imagined user experience for the smaller screen of the watch but could have potentially created another web trend. Heres a picture of the new operating system.

Using circles in web design isn’t really a trend that has taken off over the years but there are still a couple of websites that use them in their design. Not just using circles in the design but in the user interface will create a completely different experience, something that hasn’t been created on rectangular shaped screens. While it doesn’t take up every area of the space, it will allow for a new type of white space by naturally giving the page more room to breath.

The operating system runs on a fluid icon system where you flick the screen to navigate into areas that aren’t currently visible, a crown on the side allows the user zoom in/out to their preference. If you click on an icon, an animation zoom into the icon until it is fullscreen then transforms into the app. This could be the next step in web design, as previously spoken about in my blog, pageless designs are becoming much more popular and seem to be more logical and less crowded than current designs. Interactivity to create a more immersive experience for the user would work well with pageless designs, I have researched websites that currently use circles in their user interface to create an interactive, pageless design.

A particularly interesting website I came across was (http://www.circle-ent.com) complete with animations and flat colours this website screams simplicity. Circle is a “idea lab”, a company that works on web experiences for ‘fun and brands’, it targets its market perfectly by showing off their digital skill with a fun, friendly user interface. This website seems to have already mastered Apple’s technique of simplicity through white space, the use of flat colours.

Another great example of a user experience that uses circles was (http://vlog.it) which uses a lot of slick animation from arriving to the site, to the introduction of the wheel of vlogs. It was “named as finalist for the 15th SXSW Interactive Awards in the Motion Graphics category” and “won the Awwwards Site of the Day”. Not quite as simple as the previous, it still uses flat colours and white space. Shadows from one circle to the next give the wheel a sense of depth, which makes the century circle stand out even more. It is perfect for its audience, people who want to watch video blogs the site which on a single visit contains about 40 links to videos which all open within the same window with an animation, will show recycle a total of 396 videos. It means users don’t have to leave the page, they click on all videos until they have watched them all then just refresh for another set. It takes for a great user experience, takes on great design concepts.

A website that doesn’t use circles as its user interface, but just adds to the simplicity of the pageless design is this one created for the iPhone game “Hundreds” (http://playhundreds.com). It uses white space really well to give focus to the content of the page, and again uses flat colours. There are clutters of different sized circles together and animations create an experience that attracts the user to pay more attention. As you scroll down the page, you follow a grey circle which is shown above and below other images which creates depth within the page.

References:

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

http://versionsapp.com

http://webdesign.tutsplus.com/articles/how-apple-has-influenced-web-design-over-the-years–webdesign-2553

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://webdesign.tutsplus.com/articles/flat-design-ios-7-skeuomorphism-and-all-that–webdesign-14335

http://www.apple.com

http://versionsapp.com

http://www.pixelmator.com

http://macrabbit.com

http://mashable.com/2013/06/12/ios-7-apps-comparison/

http://wpmedia.business.financialpost.com/2014/09/apple-watch-features-apps.jpg?w=620

http://www.digitalartsonline.co.uk/news/mobile-creativity/see-how-app-designs-have-changed-in-move-from-ios-6-ios-7/

http://gizmodo.com/skeuomorphism-will-never-go-away-and-thats-a-good-thin-1642089313

http://designshack.net/articles/graphics/designing-with-circles-tips-and-advice/

http://i-remember.fr/en

http://www.theprz.com/

http://www.businessinsider.com/apple-otl-aicher-ios-7-2013-7?op=1

http://www.awwwards.com/best-websites/franz-sans-powerful-pleasant-1

http://www.theprz.com/

http://activetheory.net/#!/work/food-porn-index

http://www.franzsans.de/

http://foodpornindex.com/#!/berry

http://wp.iosfans.com/wp-content/uploads/2012/11/Apple-Logo-Banner.jpeg

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:

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:

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.

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.