Sprint #4

1. Navigation
2. Wireframes

Navigation is:

all design elements

that guide the user
to the content.
the way people get
around the site.
designed after IA

Let the user know where they are

Tell the user where they have been

Show the users where they

are going

Create context

Classify content.
Use landing pages to gather
related content.
Provide links to related content.
Be consistent in classification.

Where can I
search?
Which
website
am I
on?

What are the

main sections
(global
navigation)?

Where
am I?

What are my
possibilities on
this level (local
navigation)?
What is my
context?

Designing navigation
1

Begin with the

content page

Next - the pages

that link to
content pages

Then to the
homepage

Revise

Communicate who
the company is,
highlight particular
content, allow
people to navigate

Does it fit with the

strategy, content
and IA.

What needs to be
on this page?
where do people
want to go next?

What may link to

the content page?

Tweak the
navigation.

2) Wireframes
PURPOSE:
Illustrate the site content and
navigation without addressing color,
style, etc.

A visualization of content and

navigation

simple lines
few colors
focus on the lay-out
Users should be able to find
around a wireframe despite
missing
visual design
level of detail varies

1) Navigation
Researching navigation possibilities:

Discuss the advantages and

disadvantages of the different
types of navigation on the
following websites.
Discuss types of navigation
suitable for your new IA website

Horizontal:
http://www.northside.dk/en/
Vertical:
http://www.auberge-de-l-ill.com/V2/index.html
Tabs:
http://www.fidesvita.org/
Inverted L:
http://www.uxaustralia.com.au/
The navicon:
http://take-your-pulse.com/en-US
Dropdown:
http://www.bonlook.com/
Page-body nav: http://tomasbarfod.com/
Contextual links: http://da.wikipedia.org/wiki/Forside
Fly-out:
http://www.porsche.com/usa/
Alphabetical:
http://www.bbc.co.uk/a-z/
All on one page: http://siebennull.com/
Map:
http://kulturklik.dk/kort.aspx
Breadcrum: http://coolspotters.com/cameras/lomography-diana-dreamercamera

2) Sketching up wireframes
1. Decide the type of information that
should be on your website (text,
sound, pictures, video, animation)
2. In your group begin sketching up
your wireframe so they illustrate both
content and navigation (including
internal links as shortcuts and links to
related content).
3. Revise your scenarios and
wireframe before you begin
prototyping.

1) Navigation
Research p navigations muligheder:

Diskuter fordele og ulemper ved

de forskellige typer af navigation
p flgende websites.
Diskuter typer af navigation
egnet til din nye IA.

Horizontal:
http://www.northside.dk/en/
Vertical:
http://www.auberge-de-l-ill.com/V2/index.html
Tabs:
http://www.fidesvita.org/
Inverted L:
http://www.uxaustralia.com.au/
The navicon:
http://take-your-pulse.com/en-US
Dropdown:
http://www.bonlook.com/
Page-body nav: http://tomasbarfod.com/
Contextual links: http://da.wikipedia.org/wiki/Forside
Fly-out:
http://www.porsche.com/usa/
Alphabetical:
http://www.bbc.co.uk/a-z/
All on one page: http://siebennull.com/
Map:
http://kulturklik.dk/kort.aspx
Breadcrum: http://coolspotters.com/cameras/lomography-diana-dreamercamera

2) Sketching up wireframes
1. Beslut, hvilken type oplysninger,
der skal vre p din hjemmeside
(tekst, lyd, billeder, video, animation)
2.Gruppevis begynd at skitsere
wireframes, s de illustrerer bde
indhold og navigation (herunder
interne links som genveje og links til
relateret indhold).
3. Revidr dine scenarier og
wireframes, fr du begynder
prototyping.