Website ResearchKieran Thompson-Oliver

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.

DIV TAG FOR HEADER

Smaller Divs for buttons & hyperlinks(Int&ext)

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

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

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

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.

Individual divs for links

Div for search barDiv 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

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

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.