ANALYSIS NAVIGATION IN EDUCATION WEBS

Navigation is one of the most importance in web design, especially with the web with heavy content. Take a look to see how designers help user to navigate web with heavy contents.

1. 1 Architektskolen aarhus

Advantage:

  • Navigating by small line, and strong color (Yellow)
  • Navigating by black, grey box to show the hierarchy
  • Hierarchy text (same size,  same underline and bold text, same color, same font)
  • Use 4 colors for design (black, dark grey, grey and yellow to emphasis the logo
  • There is now breadcrumb but user can recognize easily because of color
  • Clean and clear design

1.2 JSEALLAND

1.2.1 Advantage:

  • Navigating by  color (orange, dark gray, grey)
  • Use 4 colors for design (black, dark grey, grey and orange to emphasis the logo

1.2.2 Disvantage:

  • The third sub menu on the right=> difficult to help use have an overview of content. It only have small connection is blue color, but  blue color in the second menu is small so that It’s hard to help user recognize.
  • The breadcrumb text is small, grey color=> difficult to see.
  • There is breadcrumb but it is still hard to navigate the location.

1.2.3 Comments:

  • Put all second, third sub menu on the left for scanning easily
  • Redesign breadcrumb text (increase text)

1.3. School of Architecture, Design and conservation.

Menu is design on the left. This is University of design with 6 departments

1.2.1 Advantage:

  • Navigating by  color (red, dark gray, light grey)
  • Use 4 colors for design (black, dark grey, light grey and red)
  • Hierarchy: text size, font (same font, same capital type, same bold type), color
  • Apply grid into design
  • Use different fonts for different text level => create hierarchy, contrast.
  • Have  effective white space.

1.4. School of Kolding:

1.4.1 Advantage:

  • Navigating by highlight color.
  • Use 4 colors for design (black, dark grey, light grey and highlight color)
  • Hierarchy: text size, font (same font, same capital type, same bold type), color
  • Menu is designed as breadcrumb with big font, different color to navigate the location that user are in
  • Use different fonts for different text level => create hierarchy, contrast.
  • Use different color in different context => create hierarchy, contrast.
  • Have social icons

1.5. University of Northern Denmark:

1.5.1 Advantage:

  • There is breadcrumbs, the “>” use orange color (logo color)
  • Menu is designed as breadcrumb with different color  to navigate the location that user are in
  • Use 4 colors (black, gradient from dark grey to light grey, red and  logo color (orange) )
  • Hierarchy: text size, font (same font, same capital type, same bold type), color
  • Indent menu content=>  create hierarchy.
  • Use different fonts for different text level => create hierarchy, contrast.
  • Use different color in different context => create hierarchy, contrast.
  • Have social icons
  • Use different color and underline text for link
  • Have English and Denmark version
  • Have the icon to increase or decrease font

1.5.2 Disavantage:

  • Do not have social icons

1.6. sde.dk

1.6.1 Advantage:

  • There is breadcrumbs, the “>” use orange color (logo color)
  • Menu is designed as breadcrumb with different color  to navigate the location that user are in
  • Use 4 colors (dark grey,  light grey, dark green and green)

1.6.2 Disadvantage:

  • There is confusion in breadcrumbs (using the same green colors)
  • Do not have social icons

1.7. Universiteskole

1.7.1 Advantage:

  • There is breadcrumbs, the “>” use orange color (logo color)
  • Menu is designed as breadcrumb with different color  to navigate the location that user are in
  • Use 4 colors (dark grey,  light grey, dark green and green)

1.7.2 Disadvantage:

  • There is confusion in breadcrumbs (using the same green colors)
  • Do not have social icons

Resources:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: