Upload
sylvia-martin
View
220
Download
0
Embed Size (px)
Citation preview
Chapter 3What is Web Design?
Get Trained for a Better Future
Introduction to Design
Mostafa Badr
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 Web-enabled software like Internet television clients, microblogging clients and RSS feeders.”
Definition of Web Design
Mostafa Badr
Web Design is difficult to define because it covers so much ground: Clients Types of contents Functionalities
Definition of Web Design
Mostafa Badr
Web Design BasicsWhat 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. Logos- simplified forms2. Contrast- attention3. Visual Hierarchy- comprehension4. Layout- organization5. Integrating Type and Image6. 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 Thumbnails Roughs Comprehensives Presentation Ready for Press
Mostafa Badr
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
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
Introduction
Mostafa Badr
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
How do users think?
Mostafa Badr
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.
How do users think?
Mostafa Badr
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”.
Alignment
Mostafa Badr
Example 1
Mostafa Badr
Mostafa Badr
Mostafa Badr
Mostafa Badr
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>
Proximity
Mostafa Badr
Three tools of proximity: Grouping Containment Whitespace
Proximity
Mostafa Badr
Example 1
Mostafa Badr
Example 2
Mostafa Badr
Example 3
Mostafa Badr
Example 4
Mostafa Badr
Mostafa Badr
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: Navigation buttons Colors Style Illustrations Format Layout Typography
Rythms & Repetition
Mostafa Badr
Mostafa Badr
Example 2
Mostafa Badr
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
Contrast
Mostafa Badr
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.
Contrast
Mostafa Badr
Mostafa Badr
Mostafa Badr
Example 2
Mostafa Badr
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.
Squint Test
Mostafa Badr
Example 3
Mostafa Badr
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.
Contrast
Mostafa Badr
Mostafa Badr
Mostafa Badr
Bad spelling and bad grammar can destroy the professional effect of your web site
Use spell checker
Spell it Right!
Mostafa Badr
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: Spelling Contrast Repetition Alignment Proximity
Combine the principles
Mostafa Badr
1. Place your name and logo on every page and make the logo a link to the home page
2. Provide search if the site has more than 100 pages
3. Write straightforward and simple headlines and page titles
4. Structure the page
Top Ten Good Deeds in Web Design (Nielsen, 1999)
Mostafa Badr
5. 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
6. Use high quality photos 7. Use relevance-enhanced image reduction when
preparing small photos and images
Top Ten Good Deeds in Web Design (Nielsen, 1999) (cont)
Mostafa Badr
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
Top Ten Good Deeds in Web Design (Nielsen, 1999) (cont)
Mostafa Badr
Pictures are not crawlable. Flash in the front page is frustrating (if user
has no bandwidth connection) Provide options
Some words about pictures (or Flash)
Mostafa Badr
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. Contrast4. My website is everything
Biggest Mistakes in Web Design
Mostafa Badr
5. Have you ever seen another website?6. Navigational failure7. Site lacks Content8. Forgetting the purpose of text9. Too much material on one page10. Misusing Flash
…cont
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
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
Design for Mobile Devices
Mostafa Badr