Transcript Web Design Basics

Get Trained for a Better Future
Introduction to Design
Chapter 3
What is Web Design?
Mostafa Badr
Definition of Web Design
 What is Web Design?
 Wikipedia:
“Web Design is a skill of creating presentations of
content (usually hypertext or hypermedia that is
delivered to an end-user through the World Wide
Web, by way of a Web browser or either Webenabled software like Internet television clients,
microblogging clients and RSS feeders.”
Mostafa Badr
Definition of Web Design
 Web Design is difficult to define because it covers so much
ground:
 Clients
 Types of contents
 Functionalities
Mostafa Badr
Web Design Basics
What is a good Web site from a design standpoint?
Mostafa Badr
Defining Graphic Design
 Not about Software (just tools)
 Visual Communication/ Functional Art
 Problem Solving
 “Information Architects”
 “…The designer conceives, plans, and
executes designs that communicate a specific
message to a specific audience within given
limitations…”
Mostafa Badr
Some Basics
1.
2.
3.
4.
5.
6.
Logos- simplified forms
Contrast- attention
Visual Hierarchy- comprehension
Layout- organization
Integrating Type and Image
Visual Themes
Mostafa Badr
The Design Process
 Defining the Problem
 Research (Audience, Constraints, Goals)
 Build your Visual Vocabulary- search for samples
 Build on the work of others- combine in a new original way





Mostafa Badr
Thumbnails
Roughs
Comprehensives
Presentation
Ready for Press
It Starts With Creativity
 Good design is created with a basic understanding
of:
- Design processes
- Theories and concepts of design
 Designer/client relationship governs the entire
design process
Mostafa Badr
Fundamentals of Design
 Design elements
 Line, Shape, Value,
Color, Texture, Space
 Design principles
 Balance, Proximity,
Alignment, Unity,
Emphasis, Rhythm
Mostafa Badr
Introduction
 Think of something anyone can do?
Answer: Make an ugly Web page.
 To avoid making an ugly Web page, we need to
learn the basic design principles.
 Four basic concepts: alignment, proximity,
rhythm/repetition, and contrast + one additional:
spelling
 Results: From dorky to professional looking pages
Mostafa Badr
How do users think?
 In order to use the principles properly we first need to
understand:
 How users interact with Web sites.
 How they think
 What are the basic patterns of users’ behavior
Mostafa Badr
How do users think?
 Users don’t read, they scan.
 Web users are impatient and insist on instant
gratification.
 Users don’t make optimal choices.
 Users follow their intuition.
 Users want to have control.
Mostafa Badr
Alignment
 Alignment: Items on the page are lined up with each other
 Two types of alignment:
 Horizontal alignment
 Vertical alignment.
 CHOOSE ONE. Choose one alignment and use it on the entire page.
Don’t mix alignment.
 Get the text away from the left edge. This means indent your text so
the text doesn’t appear in long, dorky, difficult-to-read lines.
 Type sits on an invisible line called the “baseline”.
Mostafa Badr
Example 1
Mostafa Badr
Mostafa Badr
Mostafa Badr
Mostafa Badr
Proximity
 Proximity: Relationships that items develop when
they are close together, in close proximity.
 Be conscious of the space between elements.
 Group together
 Space them apart
 Difference between a paragraph and a break: <P> and
<BR>
Mostafa Badr
Proximity
 Three tools of proximity:
 Grouping
 Containment
 Whitespace
Mostafa Badr
Example 1
Mostafa Badr
Example 2
Mostafa Badr
Example 3
Mostafa Badr
Example 4
Mostafa Badr
Mostafa Badr
Rythms & Repetition
 Rhythm: Associate elements by repeating a common
stylistic feature or arrangement
 Repetition: Throughout a project you repeat certain
elements that tie all the disparate parts together.
 Repetition elements that unify the entire site:







Mostafa Badr
Navigation buttons
Colors
Style
Illustrations
Format
Layout
Typography
Mostafa Badr
Example 2
Mostafa Badr
Contrast
 Contrast: What draws your eyes onto the page.
 Contrasting elements guide your eyes into the page,
create a hierarchy of information, and enable you to
skim through the vast array of information and pick
out what you need
Mostafa Badr
Contrast
 Contrast elements:




Style
Colors
Graphic signposts
Spatial arrangement
 Exception: If you want people to sit and read through
an entire piece, avoid contrast so the page can be
bland and uninterrupted.
Mostafa Badr
Mostafa Badr
Mostafa Badr
Example 2
Mostafa Badr
Squint Test
 Easy way to assess the overall contrast of your page
 Technique: Close your eyelids so your eyes are about
three quarters closed, so that normal text becomes
blurred and unreadable.
Mostafa Badr
Example 3
Mostafa Badr
Contrast
 Create a focal point: Something must be the
dominating force, and the other elements follow a
hierarchy from that point down. The focus is created
through contrast.
Mostafa Badr
Mostafa Badr
Mostafa Badr
Spell it Right!
 Bad spelling and bad grammar can destroy the
professional effect of your web site
 Use spell checker
Mostafa Badr
Combine the principles
 Applying any one of these principles will radically improve
the design of your web pages, you will generally find
yourself applying more than one principle, and probably all
four.
 Summary of the principles:





Mostafa Badr
Spelling
Contrast
Repetition
Alignment
Proximity
Top Ten Good Deeds in Web Design
(Nielsen, 1999)
1.
2.
3.
4.
Mostafa Badr
Place your name and logo on every page and make the logo
a link to the home page
Provide search if the site has more than 100 pages
Write straightforward and simple headlines and page titles
Structure the page
Top Ten Good Deeds in Web Design
(Nielsen, 1999) (cont)
5.
6.
7.
Mostafa Badr
Use hypertext to structure the content space into a starting
page that provides an overview and several secondary pages
that each focus on a specific topic
Use high quality photos
Use relevance-enhanced image reduction when preparing
small photos and images
Top Ten Good Deeds in Web Design
(Nielsen, 1999) (cont)
8. Use link titles to provide users with a preview of each link
9. Ensure that all important pages are accessible for users
10. Do the same as most big websites else: if most big websites do
something in a certain way, then follow along since user will
expect things to work the same on your website
Mostafa Badr
Some words about pictures (or Flash)
 Pictures are not crawlable.
 Flash in the front page is frustrating (if user has no
bandwidth connection)
 Provide options
Mostafa Badr
Biggest Mistakes in Web Design
1. Believing people care about you and your
website.
2. can't figure out what your website is about
in less than four seconds
3. Contrast
4. My website is everything
Mostafa Badr
…cont
5. Have you ever seen another website?
6. Navigational failure
7. Site lacks Content
8. Forgetting the purpose of text
9. Too much material on one page
10. Misusing Flash
Mostafa Badr
Information overload (crowded)
Mostafa Badr
Bad text (hard to read)
Mostafa Badr
100% Flash + Bad Navigation
Mostafa Badr
Bad typography
Mostafa Badr
Graphical Menu
Mostafa Badr
Graphical Menu
Mostafa Badr
Flashy – my eyes hurt
Mostafa Badr
Design for Mobile Devices




Mostafa Badr
Why?
Small screen
Not so powerful browser
Limited data network
Design for Mobile Devices




Mostafa Badr
Most of popular CMS provide Mobile plug-ins
Blogger.com
Joomla
Wordpress