Sunday, 19 October 2014

OUGD504 Studio Brief 03 A Brief History Of...Research Into One Page Web Design

After my Earlier research into the trends outlined in the introduction to web seminar. I wanted to look further into a particular format; one page web design. This is because this vertically aligned format seems so fitting when considering the topic of my summer research (botany) the vertical movement mimicking the vertical growth of the plants I have studied. So, I went back to the Website Onepagelove and found some website that caught my attention for differing reasons. I also added in some websites that caught my eye for negative reasons.


The purpose of this website is to inform its readers about the differences between large banks and credit unions. Its audience is quite widespread when you consider that people of al ages and social origins use banks in some form or another. However, its tone of voice is very definite as suggested by its design, colour choices and the way it functions. The scrolling navigation acts as the force behind the animation so tat the individual dictates the speed art which the absorb information. This is a fantastic way of communicating because it allows for different reading speeds and aptitudes for new technology. Although, the argument could be raised that it turns too far away from a skuemorphic approach to be understood by the slightly less tech savy members of its audience because of the way you are scrolling down but sometimes the animation is sideways. This is fine in small amount but i feel tat personally this confusion of direction would make me want to leave the site sooner rather than ager (when the whole screen is moving I find that it just makes me feel a bit motion sick). One technical set back of a website this complex is the loading time. As soon as you enter the website you are presented by a little loading animation (one that takes longer than the quoted 3 seconds people apparently give to websites) However, this animation is very sweet and definitely convinced me to wait for the website to load.
In this way the three second word associations of tis website were- anticipation, cute and pleasant. The colours play a major role in this. Throughout the animation and the loading screen this website makes use of muted and natural colours that still have sense of vibrancy and depth to them, this is a massive achievement when considering the limitations of a web safe colour pallet. When landscapes are being depicted the sense of depth is achieved through a reduction in the saturation of the colours, this is a simple but ingenious way of creating this effect. The naturalness of the colours creates a sense of familiarity straight off the bat because you instantly thing of sturdy natural things like large trees in which this combination of green and brown is so commonly found. This is quite a clever association game because the qualities of the said tree are transposed onto the brand identity of the company, solid, long-lasting and reliable. Considering the growing awareness of ecologic problems this also paints the company as 'the underdog' compared to the big aggressive and above all artificial banks that are represented in the animation. Peopl always like an underdog.



As well as websites that I like I have found one or two that I don't think are that good. This is heralded as a great bit of minimalist design and from simply looking at it, yes, I can say it looks nice but I found the navigation system very confusing. As soon as you get onto the home page a positive reaction is definitely there but soon I fond myself asking how I get anywhere, where the navigation buttons are and why they were so hidden. I also feel that the first information  you are presented with is slightly confusing, without an introduction you are left to work things out for yourself and I think that people really don't want to have to think about navigating a website, it should be instinctive and this website certainly doesn't achieve this. The small network of nameless squares in the top right corner act as navigation in the digital portfolio moving from item to item. One thing that I do like about this design is the use of images as backgrounds. It allows simple flat design to be utilised in a way that doesn't interrupt the image behind, which is of course the focus of the portfolio. this is something I could consider using in my own website design.Once you have got to grips with the navigation one up side of it is noticeable; you can navigate anywhere you need to from every page, because every page has navigation to every other page. this is a sign that the navigation and functionality of the design have been considered greatly. When creating a portfolio you want people to be able to browse at their leisure and flick around from piece to piece, this definitely allows for that. This consideration of how people want to interact with my website depending on the purpose is something I will have to outline before I start designing.

This website is one of my favourites aesthetically because of the way it melds together quite a hand drawn look with effective and attractive digital formats. It is an online CV of sorts and simply aims to outline the individual designer, his skill set and display is work.



Once again, through buttons on the top of the page, you are able to access every area of the website from every page. the mix of bright colours suggests flexibility and many different skills because they don't type cast him as one type of designer. This is because the colours, although they work together, each have different qualities and suggestions about him as an individual. he makes us of animated info graphics as well as a mirriad of different things to communicate and demonstrate his skill set. Although this works as a CV I think as any other type of web site this would be too many different things to absorb. However, I can see that there is a tangible reason for this and therefore I accept it. This is something I need to take into consideration in my own designs even if there is a reason for a certain design decision, make sure that other people can see the reason too, especially with the large decisions.

On this website i also spotted this design that interacts with the tilt aspect of mobile devices and iPads. While not everyone has these devices they are an important consideration during the design process. I should look at the screen space available on different devises and make sure my design can flex to fit to them in a way that doesn't detract from the design.
Now this website caught my eye simply because it is entertaining. This is something that is not to be sniffed at when you want to advertise or inform the audience of a website. It is creating a parallel between the kitkat and the way smart phones are advertised and marketed. Hence the (4.4) reference. The smooth scrolling transitions mimic that of an iPhone advert as does the simple angle of photography.

I love the way the progression down the one page website is marked by different crumbs left from eating a kitkat, or Bytes maybe? The attention to detail in carrying on the joke makes it perfect visual satire and this really got me thinking about my website. Because I am using plants and foot paths as the basis for the website I could use skeumorphic designs in the sense that everything is angles towards theses themes in the way the kitkat website is. i.e. 'following a path' or 'got roots' this continuity of idea throughout is entertaining and engaging as an idea.

there are several things I want to go on to do. First I want to decide the purpose, audience and what the audience would want from my website, as outlined in our seminar. Then I want to do some research into the different limitations of designing for phone and iPad access to websites. I also want to read more into this theme of skeumorphics that seem so prevalent in so much web design. I ask want to look into Web safe pallets and the font limitations that web fonts create.




No comments:

Post a comment