What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a...
-
Upload
russell-russell -
Category
Documents
-
view
214 -
download
0
Transcript of What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a...
![Page 1: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/1.jpg)
What is Web Design?
![Page 2: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/2.jpg)
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 Web-enabled software like Internet television clients, microblogging clients and RSS feeders.”
![Page 3: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/3.jpg)
Confused? !!&!*!???****???!
![Page 4: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/4.jpg)
Definition of Web Design Web Design is difficult to define because it
covers so much ground: Clients Types of contents Functionalities
![Page 5: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/5.jpg)
What is Web Design?
![Page 6: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/6.jpg)
Where Should I Start? Intimidating Web Design Basics/Principles
![Page 7: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/7.jpg)
Importance of Web Design Basics
![Page 8: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/8.jpg)
Web Design BasicsWhat is a good Web site from a design standpoint?
![Page 9: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/9.jpg)
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
![Page 10: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/10.jpg)
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
![Page 11: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/11.jpg)
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.
http://www.youtube.com/watch?v=lo_a2cfBUGc
![Page 12: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/12.jpg)
Alignment Alignment: Items on the page are lined up with each
other Two types of alignment:
Horizontal alignment Vertical alignment.
Choose one horizontal alignment and one vertical alignment. Use them on the entire site. Don’t mix alignments.
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”.
![Page 13: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/13.jpg)
Example 1
![Page 14: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/14.jpg)
Example 2
![Page 15: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/15.jpg)
![Page 16: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/16.jpg)
Example 3
![Page 17: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/17.jpg)
![Page 18: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/18.jpg)
Example 4
![Page 19: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/19.jpg)
![Page 20: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/20.jpg)
Example 5
![Page 21: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/21.jpg)
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>
![Page 22: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/22.jpg)
Proximity Three tools of proximity:
Grouping Containment Whitespace
![Page 23: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/23.jpg)
Example 1
![Page 24: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/24.jpg)
Example 2
![Page 25: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/25.jpg)
Example 3
![Page 26: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/26.jpg)
Example 4
![Page 27: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/27.jpg)
Example 5
![Page 28: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/28.jpg)
![Page 29: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/29.jpg)
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:
Navigation buttons Colors Style Illustrations Format Layout Typography
![Page 30: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/30.jpg)
Example 1
![Page 31: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/31.jpg)
![Page 32: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/32.jpg)
Example 2
![Page 33: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/33.jpg)
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
![Page 34: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/34.jpg)
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.
![Page 35: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/35.jpg)
Example 1
![Page 36: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/36.jpg)
![Page 37: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/37.jpg)
![Page 38: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/38.jpg)
Example 2
![Page 39: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/39.jpg)
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.
![Page 40: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/40.jpg)
Example 3
![Page 41: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/41.jpg)
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.
![Page 42: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/42.jpg)
Example 4
![Page 43: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/43.jpg)
![Page 44: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/44.jpg)
![Page 45: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/45.jpg)
Spell it Right! Bad spelling and bad grammar can destroy
the professional effect of your web site Use spell checker http://www.thefreelibrary.com/spellr.us+Surv
ey+Reveals%3A+13+of+the+World's+Top+20+Universities...-a0203643295
![Page 46: What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a skill of creating presentations of content (usually.](https://reader035.fdocuments.us/reader035/viewer/2022062715/56649d9f5503460f94a89aad/html5/thumbnails/46.jpg)
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: Spelling Contrast Repetition Alignment Proximity
http://www.youtube.com/watch?v=mF_mWi6r-9I