Download presentation
Presentation is loading. Please wait.
Published byMelissa Scarlett Walsh Modified over 9 years ago
1
Website Research Kieran Thompson-Oliver
2
Example 1: Hypebeast This website has been coded effectively because it is simple, easy to use and navigate and you find what you want where you expect it to be with no hassle. They have embedded videos and SoundCloud players which adds to the variety of things they have used in their website. They have slideshows which are simplistic and look good. This website is purely for people who have an interest in keeping up to date with all of the latest trends and it covers a variety of these with pages covering Fashion, Design, Footwear etc. This can be people of the ages of 13+ They use a navigation bar that uses the text as internal hyperlinks that are triggered when clicked. The pages consist of 100’s of posts that you can read more on when you click on a hyperlink. Posts have an image so you can see what the article is about. You have the option to share the posts on Facebook/Twitter.
3
DIV TAG FOR HEADER Smaller Divs for buttons & hyperlinks(Int&e xt) DROPDOWN MENU (SPRY with show/hide?) Box for title which is probably an image Div for nav bar Box with a slideshow in which has a float left applied to it Box with an image that when clicked goes to an int/ext hyperlink & has a float right and some padding applied to it. Div tag for text w/ext/int hyperlink
4
Example 2: High Snobiety This website is coded effectively because it is simple but still looks modern and stylish. They have a drop down menu which is a contrasting colour, allowing it to stand out and it is full of internal hyperlinks. Their posts contain embedded videos and music from other sources such as SoundCloud Have a simple slideshow system on their posts which is followed by the relevant article which is a nice, eye catching way of laying out a post This website is for both men and women aged 13+ who have an interest in fashion and current affairs. Small nav bar but drop down menu makes up for the lack of navigation. Each post has an image so you know what the post is about Every post has the option to be shared
5
Drop down menu, could be a spry or javascript. Javascript probably because it has show hide functions. Div tag for highsnobiety logo Div tag for seperator Large box with float middle applied and padding so it sits dead central Images will be pre made with captions placed on them Images when pressed go to internal/external pages. Individual divs for links
6
Example 3: GQ GQ is mainly aimed at men of the ages of 15+ who are interested in Men’s fashion, style, women and the latest entertainment news. Website is simple, with a simple colour scheme and is very easy to navigate. On click of one of the links in the nav bar, a series of relevant hyperlinks appear below. They have feature posts in large and a series of latest posts to the right smaller. A search bar that can be used to find posts or do a keyword search. All posts show the author and date of the post. Posts have a summarising paragraph, a stylish slideshow/video with a simple colour scheme and a paragraph below giving more info.
7
Individual divs for links Div for search bar Div for GQ logo Seperator, horizontal rule Div for text Divs for Image & text which will be an internal/external link & will have a float right and some padding added to it Div for slideshow which will have internal/external links & will have a float right and some padding added to it
8
Example 4: Vogue Vogue is the go to fashion website for fashion designers, fashion bloggers and those with an interest in fashion Simple layout Minimal colour scheme Nav bar is to the left They have monthly posts on street wear trends as well as what’s current on the catwalk Posts have an image gallery that allows you to expand it so you can see the images larger Text sits above image gallery Posts have a simple, minimal layout Shows that minimal can still be effective Draws more attention to what’s on the pages
9
Sidebar menu, tabbed spry with horizontal rules and each word is a hyperlink (it/ext) Large div for the header where the title sits as an image film. Div tag for the search bar and trending searches. Div tags for the keywords which will be hyperlinked. Large box for the image which will have padding added so that it floats right of center but is still quite central of the page.
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.