Monday 4 November 2013

OUGD504 - Design Production: Design For Web (Inspirational Websites)

Below are just some of the inspirational websites I have discovered so far. It would be impossible for me to comment on every single website I come across, so instead I have decided to select the most influential and most successfully designed websites in my opinion, to enable me to comment on the elements of each one which I feel could be inspirational to me when designing my final website.

The first example below demonstrates a static line of text along the top and a set of circles which act as the navigation for the website. Once the user hovers over the top of each circle, they enlarge slightly to indicate that they are active and are available to click on. This is something I would like to experiment with on my website, however maybe not in such a complex way. I could instead design the website so that once the user hovers over the circle, the circle could change colour to indicate that it is highlighted. 



I really love the design of this website called Media boom. When I first entered the website, I was welcomed with a short introductory video with sound accompanying it, so this was acting as a landing page essentially. I was then able to 'skip the intro' to enter the site itself and was welcomed with the home page as shown below. The home page still has a moving video in the background to maintain a sense of consistency, and there is a navigation bar along the top with a set of digital illustrations below 'welcome to media boom' which are also navigation tools which change once hovered over. The grid actually differs quite considerably throughout each page of the website, but it still works really well. The video changes depending on which page you are on and so it gives the website another exciting dimension. 

I would absolutely love to create a website taking inspiration from this one, however I think I will probably be limited in terms of my skills. I also don't think that certain elements, for example the video in the background on each page, would be necessary for my website, but it works here because it reflects the idea of 'media' which is what the website is trying to portray. I can however take inspiration from the icons which have been created on illustrator, and I can adopt the idea of creating a navigation bar which is centred as opposed to being featured along the top. 



This website is completely different to any I have come across before. The navigation works by simply clicking on the arrow at the bottom of the screen to take you to the next step of the 'story' essentially. It is a fact based website and I think it has been created for a bit of fun. I could definitely take inspiration however, simply from the use of the earth illustrated on the first page. I could create a website which allows the user to either click on the left or the right side of the earth, and each could be illustrated differently. One side would be vibrant and healthy and inviting, whilst the other side could be dull and negatively affected by the pollution of harmful packaging materials. This is certainly an idea I could follow through, however I am not sure whether I would have to simplify it slightly in order for me to produce it with my skill set.



This website supplies the user with two possible ways of navigating around. The user can either click on the links along the top on the navigation bar, or alternatively they can scroll down to reveal all of the different sections. I have taken screenshots below to indicate how the pages change as I scrolled downwards. With an image in the background, the designer has maintained consistency throughout, whilst at the same time introducing a band of colour along the bottom where the text is placed as well as images which slightly overlap the background image. I really love how the logo in the top left corner changes in colour slightly depending on which section of the website I am on. I also think it works really well the way the designer has cropped the images using a circle and including vibrant colours with the faded photograph remaining in the background. All of the content is centred, with quite a large border either side of the text and images, allowing the user to focus their attention quite easily on the content without feeling overwhelmed with information.

I think I would like to create a website which has all of the content in the centre like this, as the negative space around the edge gives it a focal point and creates a clean, minimal (in some ways) website which is inviting and informative.





This website caught my attention mainly because of the small info graphics down the right hand side. I love how the user is instructed to scroll down to navigate around the website, and when doing so, each of the circular info graphics are highlighted in green. Therefore if the user didn't want to necessarily scroll down to the bottom and then all the way up again, they could click down the side instead. When information is revealed, it enters on the right hand side in the form of a sheet of paper which is torn on the edges. I think this is a really clever touch and would appeal to a lot of different ages. The main section I will therefore take inspiration from is the info graphics as I think they could be a key part of my navigation.



This is a really interactive website which would be very hard to produce I think. I love the use of photography here and feel it is something I could certainly work with. Below there is an image of one of the pages where sugar has been illustrated with some small info graphics featured to the right of it. I think if I was to focus my website down to sugar cane, this is something I could experiment with and try to apply to my own designs. I may find that this isn't necessary, but it is worth trying it out to see whether I like it or not.




I came across this website, which is all about building a sustainable future. This is therefore not only relevant to my website, but it also closely relates to my practice in general at the moment, so I was therefore really interested to see how they presented the information. By scrolling down through the website, small interactive illustrations were revealed, and at the same time the circles down the left hand side this time were also highlighted. Each section of the website containing new information, all had quite a lot of negative space surrounding it, this seems to be key in a lot of examples of web design as it also fits in well with the way I like to work anyway, adopting the idea 'less is more'.




The main reason I have posted this website in my inspirational websites post, is because I love how they have incorporated the image of the world but in this case, have changed it to form the shape of a heart. It links back once again to the idea I had of using an image of the world in the centre of the page to illustrate the good versus the bad effects of packaging on the environment. Another part of the website I liked in particular is also shown below, where the designer has incorporated the idea of small illustrations running along the separation of the pages. This is something I would consider including if I end up creating a website which requires scrolling to reveal information.




This is another website with a really unique and organic feel in my opinion. I love how they have used a water colour effect rather than block colour, and the website itself also relates closely to the idea of sustainability and good health. This is why I felt as though it was appropriate to blog as I could certainly take inspiration from it in the future. Once again the navigation is along the top but you can also scroll downwards as an alternative, this seems to be a popular way of designing websites at the moment. I will consider this idea closely, however I don't feel as though it would be necessary unless I have a lot of information to include.



I included this website simply because I like how they have included an image which has been cropped once again by the shape of a circle. I seem to be drawn to this idea and feel as though it is something I should strongly consider with my own design eventually. I would include it in my own design because I feel as though it strongly represents the idea of eternity and something which is everlasting, which could in turn illustrate the idea of a sustainable, everlasting future for our environment.



This website is completely different to any of the above, and I actually think it may become quite confusing for some people to use and navigate around. On the home page the user is instructed to use their keys to navigate. However there is also a set of circles in the bottom left of the website which is an alternative way of navigating. Although if someone chose to use this option of navigation, this is where it may become confusing, as there isn't actually any text to accompany each circle and it turns in to a bit of a guessing game as to which page you are about to enter. I don't personally feel as though it is straight forward to use, so this is something I would stay clear of with my own design, and i would make sure that there is text to accompany each circle or image, to help the user with navigation.



This website is very similar to the Media boom website I wrote about earlier. There is an ongoing video in the background with sound to accompany it, and the small illustrative icons remain static over the top. It has a really positive feel to it and is certainly a memorable site to visit. Once again I think that the use of photographs, illustrations and text work really well and compliment each other.














No comments:

Post a Comment