Organizing the Content: Information Architecture and Application

Structure

Project #2: Your design

portfolio
Brief: Create a website that will serve at
least the following purposes:
1. showcase your student works (at least 3)
2. provide your contact details
Deliverables:
Information architecture
Wireframe
Branding - logo, colors, fonts
Website - Wix or Weebly

Information Architecture (IA)

is the art of organizing an information space
presenting, searching, browsing, labeling,
categorizing, sorting, manipulating, and
strategically hiding information
Via text and imagery, users should be directed to
the part of your site or app that
accomplishestheirpurposes
It is the blueprint of the site upon which all
other aspects are built form, function,
metaphor, navigation and interface, interaction,
and visual design

Main Components of IA
OrganizationSchemesandStructur
es: How you categorize and structure
information
Labeling Systems: How you
represent information
Navigation Systems: How users
browse or move through information
Search Systems: How users look for
information

Output of IA
Show one single thing, such as a
map, book, video, or game
Show a list or set of things
Provide tools to create a thing
Facilitate a task

Elements of IA

Hierarchicalmeans that there is a

parent page with multiple child
pages which offers the user choice.

Elements of IA

Linear or sequentialallowstheusertogoforwardand
back.Thisistypicalofslideshowsandvideosand,to
somedegree,gameswhereagivenpathispreset.

IA models

All-in-one model
This is the simplest possible model.
Everything goes on a single Home page.

Flat
A flat pattern is where all pages are arranged as
peers, and every one is accessible from every other
one. This is very common for simple sites, where
there are a few standard topics, such as: Home,
About Us, Contact Us, Products.

Index
An index structure is like the flat structure, with an
additional list of contents.
An index is often organised in some way, to make stuff
easier to find. For example, a list of files in a web directory
(the index page), or could be an index of peoples names
ordered by last name.
Indexes work well when there is a medium amount of data,
and also when that data can be ordered in a way that
makes it easier to scan to what you want.

Daisy model
This model is useful for multiple, distinct linear workflows.
A good example may be an email application, where you
will return to your inbox at several points, e.g. after
reading a message, after sending a message, or after
adding a new contact.

Strict hierarchy
A strict hierarchy describes a system where you
can only access a lower-level page via its parent.
This could apply to a real-world model where
there is a strict parent-child relationship between
objects, such as arranging pages for company
offices by their country. An office cannot be in
more than one country.

Multidimensional hierarchy
A multi-dimensional hierarchy is where there are many ways of
browsing to the same content. In a way, several hierarchies coexist, overlaid on the same content. The structure of the content
can appear to be different, depending on the mode youre looking
in.
A typical example is a site like Amazon, which lets you browse
books by genre, or by title, and also lets you search by keyword.
Each of these hierarchies corresponds to a property of the
content, each of which can be useful for people in different
situations.

Search
Search functions present a dynamic view of a
set of content, and offer instant links to each
result. This allows users to jump straight to
content, without having to browse through
hierarchies or indexes.

Wireframing: Visual
Navigation

Four Important Gestalt

Principles
The theory behind grouping and alignment was developed early in
the 20th century by the Gestalt psychologists. They described
several layout properties that seem to be hardwired into our visual
systems.
Proximity - Put things close together, and viewers will associate
them with one another. This is the basis for strong grouping of
content and controls on a UI.
Similarity - If two things are the same shape, size, color, or
orientation, for instance, viewers will also associate them with
each other.
Continuity - Our eyes want to see continuous lines and curves
formed by the alignment of smaller elements.
Closure - We also want to see simple closed forms, such as
rectangles and blobs of whitespace, that arent explicitly drawn for
us. Groups of things often appear to be closed forms.

Visual Hierarchy
a good visual hierarchy gives instant
clues about:
The relative importance of page elements
The relationships among them
How to make things look important
Users can choose to ignore things that
we think we dont need to look at, and
zero in on what they think is the
important part of the page

How to make things look important

For short but large textsuch as headlines and
short phrasesuse font size, contrasting color,
and visual weight
You can also make text look very dramatic by
setting it off with generous whitespace or
background color
Put small but important items at the top of the
page, along the left side, or in the top-right corner
(Give them high contrast and visual weight, and
set them off with whitespace)
High-contrast, dramatic images draw attention;
so do pictures of faces
Ad blindness: Users may consciously ignore

 Density - A dense, heavy-looking block has stronger

contrast with the surrounding page; an open look has less
contrast.
Background color - Contrast draws attention. Black on
white, or vice versa, is the strongest contrast possible.
Position and size - A medium or large text block, roughly in
the center of the page, calls attention to itself as the
primary content (like an article or blog post). But a small
strip of text at the bottom of the page says quietly, Im just
a footer and begs to be ignored!
Rhythm - Lists, grids, alternating elements such as
headlines and summaries, and whitespace separation can
create a strong visual rhythm that irresistibly draws the eye.

Ways to emphasize blocks of text or small items

(clockwise from upper left): density, background color,
rhythm, and position and size

Grouping related items

Distinguishing one item among peers

Visual Flow: What Should I Look at

Next?
Visual flow deals with the tracks that readers eyes tend to follow as
they scan the page
Human tendency to read top to bottom and left to right: When
faced with a monotonous page of text, thats what youll do
naturally; but if there are strong focal points on the page, they can
distract you from the usual progression, for better or for worse.
Focal points: You tend to follow them from strongest to weakest,
and skillfully designed pages have only a fewtoo many focal
points dilute the importance of each one
A good visual hierarchy uses focal points to pull eyes to the right
places in the right order
good visual flow: One simple way is to use implied lines, either
curved or straight, to connect elements on the page, creating a
visual narrative for the viewer to follow.