With your five selected print outs of what you perceive to be good web design. Draw out onto your selected websites the underlying grid structures.
Nasty Gal
The nasty gal website, uses a quite simple grid and the main body of content is images. The grid is based around the navigation bar that has 5 main pages for the user to interact with. It follows the common conventions of a website with the use of the navigation bar being at the top of the page and the search bar. The website is functional and looks aesthetically pleasing.
Elise Rose
The Elise Rose website again uses a very simplistic grid approach, possibly due the context of the website which has heavily influenced the design. It is a photography website and uses the uncommon conventions of a website by having a horizontal scroll bar. The website is functional with it's use of links and subcategories for the user to click on a specific photo shoot to look at. Also the website is aesthetically pleasing with it's use of high resolution and fixed frames for the images to fall into.
The creative journal uses a more complex grid due to all the subcategories and tag headings on the page. The website looks aesthetically pleasing and simple at a first glance, but to an average user there are a lot of pages to interact with that might not be necessarily useful.
The design inspiration website, uses quite a mathematical and specific grid for it's website. This is possibly uses so the images fall into the correct and consistent format. The aesthetics of the website are simplistic and easy to use. Similarly with the functionality it uses the common conventions for navigation with specific categories for users to interact with and also a big search bar.
Baubauhaus
The Baubauhause website, uses a very simplistic and slick approach to the website aesthetically. The images are all at a fixed width and are vertical which ties in with how you scroll down the page. The grid for the website again is like the design inspiration website which is systematic and mathematical in it's approach as all the columns seem to be a similar width and height.
A lot of the designs I looked at had pretty recognisable grids, the grids on these websites have helped the design of them in regards to them being laid out systematically and geometrically. This is something I need to consider when designing my web page as these are traits that are common in what type of website I am designing. Another thing that was mentioned in the session was that printed out a fixed grid and working on top of that would be something worth trying to get the right composition for my website.
PART 2
Flow Diagrams - Schematic representation of a process which can give a step-by-step solution to a given problem.
Draw out a flow diagram of what pages (limited to 5 main pages) you need, and how a user would flow through these. Consider if your website will be experimental, factual, comical, commercial, charity, linear, dual content dependant ect. These considerations will focus intial ideas and provide you with an appropriate starting point.
The initial flow chart that I drew over categorised on how to get to particular points on my website. Loraine then explained to me through drawing each of my pages out separately and passing them to me that it's a long process to go through thus dissatisfying the users needs.
I found this really useful as the main goal for my website is to be easy and accessible, with this in mind I then re-drew my flow chart, below.
I drew out this flow chart of the potential way my website could link together.
Explain Navigation - when one way can be appropriate (ect.) For this task we did it in groups and had 10 minuetes to answer this question
Q. What are common conventions of navigation and what are uncommon conventions of navigation?
I then looked for some further conventions:
Common conventions
Homepage
Left navigation bar
Thumbnails
Breadcrumbs
Indicating interactive content
Uncommon conventions
Parallax / Dynamic content: Scrolled pages
Content all in one place
I found this session really useful in finding out new terminology for specific traits in website design like, breadcrumbs and parallax content. I also found the discussions in lesson about how relevant subcategories or pages are and thinking about the users needs. Looking at the common and uncommon conventions in web design also sparked up a debate about users accustomed learning, thats why some of these common traits are used and can be risky if they are not.
Task: With the previous two exercises in mind, storyboard the interface of your website out using grids.
No comments:
Post a Comment