By Lauren MayerWEBSITE RESEARCH

NYLON MAGAZINE WEBSITE

Header, this is the title of the website and should be the main attraction. This example had animated wavy lines in the background as well. The header can also be used to be navigated back to the home page.Navigation, these are the buttons that help the audience easily navigate around the website. They can be shown in different forms depending on what is best suited, with this example when you hover over the button it changes colour. A section of a website are certain separate part. With this example, nylon has a two column grid including sections of different articles. They are assisted with an image and a small description of what they’re about.

NYLON MAGAZINE WEBSITE

Aside is part of the website that is separate to the rest which sometimes includes adverts and clicking on it would sometimes lead you to somewhere else. In this case, the aside is part of the website and is a special section.

Footer is the bottom part of the website, sometimes that are links or words that reflect on the content of the page. However this website does not have one.

Kept a white background to present a clean fresh look keeping the website modern.

This is a grid help you lay out your website It is designed to set up a grid that you can use to

align graphics, text, and HTML elements It can be anything of your choice:- three-column layout- two horizontal sections- page broken into multiple sectionsForm a logical order to the website you’re creatingAligns to keep everything in proportion, so what goes

onto the page is easier to build for you and easier to read for the audience

WEB ELEMENTS

Every typical website will have a navigation bar at the top of the page

Within this, some may have drop down bars to make it more accessible for those using it, like this:

NAVIGATION

By clicking on this tab allows the audience to access any page on the website

There are diff erent types of navigation…

Hierarchical Navigation- This is where the structure of other navigation is

designed to provide simple and straight forward path going from one page to another.

Global Navigation- This shows the pages of the website on each page,

allowing to access the whole website no matter what page you’re on.

Local Navigation- This will include link within the main text on the page, so you can click on certain words in the text that can take you to another page.

NAVIGATION

Text links- This is when certain words in text can

link you to another page on the website or even a completely diff erent website.

Site map navigation- If a website may seem quite in depth,

to make the experience for the reader easier, they can go onto the sitemap. This clearly lists all the links to the pages within the website so they do not get lost.

Navigation bar- Although typically navigation bars run at the top of the website, sometimes they can be vertically at the side depending on the style of website

STYLES OF NAVIGATION

Drop down menus- On a tab on the nav bar, a dropdown menu will become exposed to access other areas of a website. Fly out menus- This is similar to a dropdown menu,

but instead whenever the mouse if hovered over the link it will fly out either left or right.

Named anchors- If a particular page is quite lengthy that includes subheadings, named anchors will directly take you to the section of the page you would like to visit.

STYLES OF NAVIGATION