You Are Reading

OUGD501 - Theory Into Practice: Visual Function

These are a couple of websites that are similar in how I want mine to work.

Bellroy
This is for Bellroy wallets, and is a long scrolling website which is what I want to produce. It teaches you how to slim your wallet, with diagrams, photographs, interactive elements and a shop at the end. It is really clean, easy to understand and involves the user which I think is important because it keeps their attention.


It gives you the option to scroll or shop.


It goes through four steps, with stars to represent those.


Shows examples of bulging wallets via photographs.


It then explains why using a diagram.


It gives you two ways to switch through three tips - arrows and buttons.


It then adds an even more interactive element by being able to slide and change the images.


It then gives an flow chart style question.


Which leads to the shop at the end. Now you've figured out how to slim your wallet, you should be able to easily select the wallet that is suited to you.


I want my website to be like this in the sense it is one long page, and each section has a different element to it - whether through buttons, sliders, quotes, images and diagrams.


Teehan + Lax
I thought of an idea of visually showing how website functions work on a web page, for example being able to resize an image of a desktop website to see how it works in tablet and phone version. I then found this website which does a similar thing, and I think it works really well.
To show how their project Readability works, they have included interactive features for the user to visually see what they have done, rather than just static images.

Here you can just move your mouse to see the original site and the redesigned one, side by side. This gives the user a clear vision as to what has changed. This is better than having to scroll to see two different images because users would have forgotten what they first saw.





This interactive feature lets you click to see how the site looks with different text sizes and with a light vs dark background.
I think this is an amazing interactive feature, because it shows how much work has gone into the project, how to interact with it and engages the user, keeping them on the page and wanting to learn more.
I want to implement this into my work because the audience will be people interested in usability and accessibility in the web, who will mainly be developers and designers. These people want to see how interactive code can be and will already know a lot of advanced features that code can produce. As it is about current web trends, it needs to be contemporary in both design and development to support the content.





Pizza Game Changer
This is a website which allows you to vote for pizza innovations, and shows the results in a long scrolling website. This is similar to how I want my function to work, because not only does it provide each innovation in a full screen section, it has a long scroll and you can see the results at the end.





Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.