OUGD504: Brief 3 (Web design) Trends

Trends within web design:

Skeuomorphism 

Skeuomorphism is the design concept of making items represented resemble their real-world counterparts. Skeuomorphism is commonly used in many design fields, including user interface (UI) and Web design, architecture, ceramics and interior design.

In UI and Web design, skeuomorphism attempts to create three dimensional (3-D)  effects on a 2-D (flat) surface. A skeuomorphic icon on a smartphone display that represents the phone function, for example, is designed to look as much like a telephone (or handset) as is feasible, typically with shadowing, highlights and some degree of detail. A button might appear to be raised until clicked and then appears to lower as if it had been physically pressed. Non-visual skeuomorphs include the page-turning movement used to advance an eBook, the sound of a record ending at the end of a CD and the sound of a camera shutter on a digital camera.

http://whatis.techtarget.com/definition/skeuomorphism


Skeuomorph (n)
An object or feature copying the design of a similar artefact in another material (OED)
a functional item redesigned as something decorative (Collins)
an ornament or design representing a utensil or implement (Merriam-Webster)

http://www.bbc.co.uk/news/magazine-22840833

http://b.fastcompany.net/multisite_files/codesign/imagecache/inline-large/post-inline/1-ibooks-publishing_0.jpg

http://cdn2.hubspot.net/hub/217855/file-34306905-png/images/screen_shot_2013-05-08_at_9.17.53_am.png?t=1413478990059

Flat Web design: 

Apple announced it would scrap the "traditional" look of its mobile apps which mimicked real world objects. This is "skeuomorphic" design.

Now, however, all that is set to change. Skeuomorphism has fallen out of favour in recent years, and is almost regarded as a dirty word by many in the design community.

Apple this week announced a radical revision to the approach at its annual developer conference in California and its new mobile operating system will ditch real world visual metaphors in favour of a stripped-back minimalist approach.

http://www.bbc.co.uk/news/magazine-22840833

Examples: 

http://www.joshuakeenes.co.uk/blog/wp-content/uploads/2013/05/windows-8-flat-design.jpg

Infographic comparing the two:

http://www.webdesignerdepot.com/2013/12/infographic-flat-design-vs-skeuomorphism/

This therefore shows that each form of design has its own advantages and disadvantages and when looking at my own design work for this brief I will need to take all of these into consideration about what form of style would work best. On the whole flat design is easier to read and is more minimal in its form through being clear and clean cut which follows minimalist design theories. However skeuomorphism allows the viewer to believe that the object is somewhat real and becomes more realistic looking and friendly which also has its purposes. I don't believe that one is better than the other, but they simply have different purposes as ways of designing. 

Single page websites:

1. A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web pagewith the goal of providing a more fluid user experience akin to a desktop application.

   http://en.wikipedia.org/wiki/Single-page_application

   Single page websites can be quite easy to navigate when done correctly, they are also good for showing limited amounts of information and therefore ideal for a small portfolio of work. 

   I saw a collection of one page websites and decided to click on a few to see how they function:

   http://onepagelove.com/the-top-20-one-page-websites-from-2013

   http://makeyourmoneymatter.org

   

   
   

   

   
   

   

   
   

   The page initially took quite a while to load to 100% and this therefore made me disinterested in the page as the content takes too long to load. The message is good through the animation and I like the concept however it is quite complicated to follow the animated website and as it is aimed at people struggling with banking issues I'm not sure this appeals to the right target audience and should perhaps be a little more simple and easy to follow. 

   
   

   

   
   

   http://www.rleonardi.com/interactive-resume/

   
   

   Again this website took quite a while to load and although the content and thought process is incredibly unique and provides an experience I think it is quite a long process to look through the whole website and I began to become uninterested. 

   
   

   

   
   

   http://www.kitkat.com/android/#/home

   
   

   This is quite a good example of a single page website as it contains different pages within therefore creating more search opportunities through the url hits on search engines. With using a one page website there can sometimes be issues as the website only has one part to its url. This website however has different sections to it as you can see on the right it has chunks of chocolate to be able to navigate through the different pages this also works because each page contains limited amounts of information and forms as a scroll through graphic website. 

   
   

   Responsive design:

   Responsive design teams create a single site to support many devices, but need to consider content, design and performance across devices to ensure usability.

   Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. RWD is one approach to the problem of designing for the multitude of devices available to customers, rangingfrom tiny phones to huge desktop monitors.

   The same HTML is served to all devices, using CSS (which determines the layout of webpage) to change the appearance of the page. Rather than creating a separate site and corresponding codebase for wide-screen monitors, desktops, laptops, tablets and phones of all sizes, a single codebase can support users with differently sized viewports.

   In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone. Responsive design relies on proportion-based grids to rearrange content and design elements.

   http://www.nngroup.com/articles/responsive-web-design-definition/

   

   http://todaymade.com/blog/wp-content/uploads/2013/07/HiRes.jpg