2. Topics:
7.1 Appearance design
7.2 Elements of design
7.3 Layout and flow
7.4 Guideline for interactive design
7.5 Interaction design
7.6 Integration of media elements
7.7 Technical aspects and problem solving
3. 7.1 Appearance Design
What is visual appearance ?
In the design of media,
either for a web-based or
offline product, its
appearance must be able
to capture the users’
attention and should be
good enough to engage
them.
4. 7.1 Appearance Design
Why visual appearance
design important?
“Great visual design sets a
product apart. It creates
confidence, engenders trust and
encourages people to connect
with your product. For these
reasons, lucid, elegant and
engaging visual design has
always been central to every
product to be created”
5. 7.1 Appearance Design
Example: Website design
“Website design should be visually interesting.
Website design can reflect a specific product,
describe the character of the company, as well
as personal visualization . The first thing that
visitors caught when arriving at some website
is the website design (layout, images, and
other design elements), visitors do not read
the content first, instead they scan the
entire page and then decide to continue
explore the content or leave the website.
Especially for the first-timer visitors who visit
a website, the first impression they captured
would be decisive, whether the website is
worth visiting again or not. ”
http://satudigit.com
6. 7.1 Appearance Design
Example: Website design
Website impression can be constructed by using
visual design, website can be built into various
characters. It is important to determine the proper
character, which is in accordance with the mission
and background of the website.
As a simple illustration, website for finance
company should give the impression of professional,
safe, and at the same time can strengthen the trust
of their visitors.
Personal websites, or personal blogs, can be
displayed more relaxed, informal, warm, not too
rigid and demanding, so that visitors can feel a
personal closeness to the website owner.
Personal website can be showing the impression of
cheerful, active and dynamic, or it may be
mysterious, or other, depending on the personality
you want to display to visitors.
http://satudigit.com
7. 7.2 Elements of design
Lines
A line is a collection of points
along a straight path that
goes on and on in opposite
directions.
A line has no endpoints.
Lines could be used to create
mood
Lines could also be used to
create contour and gesture
8. 7.2 Elements of design
Shapes
The external form or Shapes are limited to
appearance of someone or two dimensions:
something. length and width.
It is an enclosed space, the Geometric shapes -
boundaries of which are circles, rectangles,
defined by other elements squares, triangles
of art (i.e.: lines, colours, and so on - have the
values, textures, etc.). clear edges one
achieves when using
tools to create them.
Organic shapes have
natural, less well-
defined edges (think:
an amoeba, or a
cloud).
9. 7.2 Elements of design
Texture
The feel or shape of a
surface or substance; the
smoothness, roughness,
softness, etc. of
something.
Texture can be created
from manipulation of
different color tones
10. 7.2 Elements of design
Colour
Color is very influential in
design.
Each color has its own
character, and describe a
particular atmosphere.
Color scheme (color
combination) in the
design should be able to
represent the desired
character.
Excessive color
combinations will distract
users from the content.
11. 7.2 Elements of design
Colour Scheme
In colour theory, a colour scheme is
the choice of colours used in design
for a range of media.
Colour schemes are used to create
style and appeal.
Colours that create an aesthetic
feeling when used together will
commonly accompany each other in
colour schemes.
Monochromatic: the use of white
and black to create ranges of shade
and tint
12. 7.2 Elements of design
Complementary: A basic colour scheme will
use two colours that look appealing together.
More advanced colour schemes involve
several colours in combination, usually based
around a single colour; for example, text
with such colours as red, yellow, orange and
light blue arranged together on a black
background in a magazine article.
Analogous: Colour schemes can also
contain different shades of a single colour;
for example, a colour scheme that mixes
different shades of green, ranging from very
light (almost white) to very dark.
Triadic: Combination of primer colour blue,
red and green.
13. 7.2 Elements of design
Use of the phrase colour scheme
may also and commonly does refer
to choice and use of colours used
outside typical aesthetic media and
context, although may still be used
for purely aesthetic effect as well as
for purely practical reasons.
This most typically refers to colour
patterns and designs as seen on
vehicles, particularly those used in
the military when concerning colour
patterns and designs used for
identification of friend or foe,
identification of specific military
units, or as camouflage.
14. 7.2 Elements of design
Space
Space can be used to both
separate and connect elements
in a design. Wider spaces
separate elements from each
other and narrower spaces
connect elements to reveal
relationships between them.
Overlapping elements maximizes
their relationship.
By controlling and shaping space
in our designs, we create
rhythm, direction, and motion.
We create design flow through
our use of space.
15. 7.2 Elements of design
Space can be used to convey a variety of
meanings, some of which include
quality – wealth, luxury
solitude – abandonment, loneliness
cleanliness – bleached, washed
purity – unsullied, unadulterated
spirituality – sacredness, connection to
something greater
openness – distance, infinity
calmness – placidity, inaction
16. 7.2 Elements of design
Whitespace does three main things in a design.
Creates groupings of elements
Creates emphasis and hierarchy
Improves legibility
Consistent use of white space across pages
connects those pages. Space is layout.
Space can also show difference. Sections within
site can maintain consistent space within the
section and differ from other sections.
17. 7.2 Elements of design
Whitespace gives a place for the eye to rest,
which it needs in order to absorb the message
you’re trying to communicate. It’s a visual cue
that there’s a break in the content or that the
content is finished.
Whitespace makes your page and site easier to
navigate.
Consistent use of negative space is a hallmark of
professional design. Look at any design that
strikes you as amateur. I can almost guarantee
little thought will have been given to the space
within the design.
18. 7.2 Elements of design
Negative space can be active or
passive.
When the space in a design is
symmetrically balanced the space
becomes passive. It’s static and
formal and for the most part boring.
When negative space is
asymmetrically balanced it becomes
active. It’s dynamic and modern
and interesting.
Further reading: http://webdesign.about.com/od/webdesignbasics/a/whitespace.htm
19. 7.2 Elements of design
How to Use Space in Design
Space in web design can be divided into to
types.
Micro whitespace – is the space within
elements, such as the margins surrounding text
and the leading between lines of text or the
spaces between the individual characters.
Macro whitespace – is the space between
major elements in your design. These spaces
tend to be larger and are usually immediately
apparent
20. 7.3 Layout and Flow
What is Layout?
“Layout is the design and placement of
visual elements on a page”
(Graham, 2005)
KISS
The more stuff being put in the layout,
the more complicated the task will be
Arrange Layout as simple as possible,
minimizing elements that are not
important, maximize whitespace (distance
between elements).
Website with good layout, easy to
navigate, visitors are easy to find
something, and quickly find what they
want.
Further reading:
http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
http://webdesignledger.com/inspiration/48-examples-of-excellent-layout-in-web-design
21. 7.3 Layout and Flow
What is Design Flow?
Flow is the way the eye moves or is led
through a composition. While most of us
will naturally move from one element to
another in our own fashion, a designer
can control to some extent where the
eye moves next.
By following basic design principles the
design can help shape the message and
through the use of visuals, the content
can be more inviting to read.
22. 7.3 Layout and Flow
Graham (2002) defines flow in design as having
two components:
Verbal Flow – the path taken when reading
text on the page
Visual Flow – the path taken when looking at
images and graphics on the page
Good flow can lead the eye from element to
element and present information in the order
you want it to be seen. That will aid the reader
in understanding the information presented and
allow you to better influence how your message
is perceived.
http://www.vanseodesign.com
23. 7.3 Layout and Flow
How to Improve Verbal Flow
Since verbal design flow refers to reading text, you can
improve flow by making your copy easier to read. When
thinking about verbal flow understand where your reader
will naturally read next.
To make copy easier to read you can:
Develop a consistent typographic style across your site – Be
consistent with your use of font size, face, and color
Choose a font for your copy that is easy to read – Your copy is
not the place for a fancy font
Place headings close to the text they refer to, captions close to
images. Organize your text elements so it’s clear what goes
with what
Watch the width of columns – Don’t make columns to wide or
too narrow as each hinders reading
Develop a vertical rhythm in your type – Use consistent line
heights and vertical margins and paddings
http://www.vanseodesign.com
24. 7.3 Layout and Flow
How to Improve Visual Flow
Assuming a left to right reading direction as in English,
the natural visual flow for people will be a backwards
“S” pattern. You can alter that natural pattern with the
images you use, where you place those images, and
how images, graphics, and text are mixed on the page.
Many images have a direction. An arrow, a hand
pointing, a face looking in one direction. Your eye will
speed up or slow down depending on the direction it
was moving when it fell on the image. If the eye is
moving to the right and then comes upon a face looking
right it will continue to move right slightly faster. If the
same eye encounters a face looking left it will slow
down or even reverse direction to the left. You can use
images to control or redirect the visual path the eye is
taking.
http://www.vanseodesign.com
25. 7.3 Layout and Flow
Vertical or horizontal lines can stop the eye
right in it’s tracks.
Use the direction of images to control the
the speed and direction of flow
Create barriers when you want to reverse
the eyes direction
Create open paths to allow easy movement
through your design
Use contrasting colors and shapes to pull
the eye
26. 7.3 Layout and Flow
Design Flow Across Your Site
Flow exists on the single page as well as across
site.
Low can be strengthen flow across site by being
consistent from page to page. Human beings
seek patterns.
Design repetition will help strengthen the
general flow when viewing your site.
A consistent typographic style and a grid-based
layout help maintain the pattern and strengthen
the flow of your site.
Designing repetition into pages and across site
will aid flow. Changing the layout from one page
to the next will impede flow.
http://www.vanseodesign.com
27. 7.4 Interaction design
What is Interaction Design?
is "the practice of designing interactive digital
products, environments, systems, and services."
“Interaction design defines the structure and
behavior of interactive systems”.
heavily focused on satisfying the needs and
desires of the people who will use the product.
The practice typically centers on “embedding
information technology into ambient social
complexities of the physical world”.
28. 7.5 Guideline for interaction design
Simple and natural dialogue.
No irrelevant information.
Natural and logical sequence.
Speak the user’s language.
Rather than system-oriented terms.
Minimize the user’s memory load.
From one part of the dialogue to
another.
Provide context clues, help facilities.
29. 7.5 Guideline for interaction design
Be consistent:
In use of words, phrases.
In required user actions.
Across subsystems.
Provide feedback within a reasonable
time.
Provide clearly marked exits.
To cancel an action.
To "undo" an action.
30. 7.5 Guideline for interaction design
Provide shortcuts for
experienced users.
Provide good error messages:
Defensive (non-criticizing).
Precise.
Constructive.
Error prevention:
Don’t put user in situation
where an error can be made.
Check out: http://it.toolbox.com/blogs/enterprise-solutions/gui-screen-design-checklist-20426
31. 7.6 Integration of media
elements
Integration of media elements
requires the following steps:
Planning and organizing information
Storyboarding
Acquiring & preparation of media
Integrating the media elements
Further reading:
http://resources.edb.gov.hk/com-lit/it04/text_unit08.htm
http://www.youthmediareporter.org/2009/08/integrating_elements_med
ia_art.html
Check out : http://www.webdesignfact.com/2010/10/beautifully-integrated-social-media.html
32. 7.7 Technical aspects and
problem solving
Technical aspects:
Need to understand appropriate software
or authoring tool to be used.
Critical elements:
Tools
Product
Designer/Developer
Users
33. 7.7 Technical aspects and
problem solving
Choosing appropriate tool:
Function
Content
Hardware
Software
Performance
Interface design
Databases
Reliability
Maintenance
