introduction to web design
DESCRIPTION
The presentation aims to teach the basics of Web Design in regards to layouting, typography, color and readability.TRANSCRIPT
Presented by:Ermilo John D. Gialogo, Jr.BSCS-IST, De La Salle University-Manila
1Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design04/12/23
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 2
HOW DO I START?
Know the purpose of your site Business? Organizational? Hobbyist? Personal?
Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 304/12/23
Set up the website anatomy Containing Block Logo Navigation Content White Space Footer
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 4
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 5
Layout using Rule of Thirds Application of the “divine proportion”
▪ Generally makes the site aesthetically appealing
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 6
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 7
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 8
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 9
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 10
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 11
Common layout examples Left-column navigation
▪ http://www.thinkgeek.com/index.shtml Right-column navigation
▪ http://www.audi.com Three-column navigation
▪ http://store.apple.com/
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 12
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 13
Done with the basic stuff.
WHAT’S NEXT?
Colors One of the designer's
best tools Look and Feel Branding Highlight or group content
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 14
Colors
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 15
Colors Red to yellow, including orange,
pink, brown, and burgundy Associated with the sun and fire
Represents both heat and motion
When placed near a cool color, a warm color will tend to pop out, dominate
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 16
Green to blue, can include violet
▪ Cooler violet is closer to blue
Cool colors can calm people down and reduce tension
In a design, cool colors tend to recede▪ Great for backgrounds and larger elements
on a page, ▪ Wont overpower your content
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 17
Monochromatic Scheme One color, different hues
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 18
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 19
Monochromatic Color Scheme - http://haveamint.com/
Analogous Colors Adjacent colors in the color wheel
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 20
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 21
Analogous Color Scheme - http://regines.net.au/
Complementary Colors Colors located opposite to each other in
the color wheel
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 22
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 23
Complementary Color Scheme http://www.ufl.edu/
Complementary Colors Watch out for simultaneous contrast
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 24
Colors in Nature
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 25
Colors in Nature
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 26
Color Scheme 2 http://wellstyled.com/tools/colorscheme2/index-en.html
Color Blender http://www.colorblender.com/
Contrast makes things stand outThings with higher contrast will be
more noticeable.
Creating a document for the web or print, information should be organized and readable
If you are using background graphics on a web page, keep text and other information readable
Don't use too many font sizes Don't use too many font sizes 2-3 Fonts in all
▪ Headers / headlines▪ Body Text▪ Highlights
Serif This is Times New Roman, one of the most
common serif typefaces In print, serif type is easier to read
Sans serif This is Arial, a sans serif typeface On a computer screen, sans serif type is
easier to read
Keep lines shortParagraphs: 4-8 lines Use wider margins to increase white
space
Too many colors TooToo Many Fonts and StylesStyles
ALL CAPITAL LETTERS ARE DIFFICULT TO READ Upper and lower case letters are easier
Do you prefer to read Verdana online? Do you prefer to read Arial online?
Do you prefer to read Georgia online? Do you prefer to read Times online?
Use text when possible Searched and indexed by web
crawlers Can be selected and copy-pasted Decreases page load time
Effective text 351 B (Text)351 B (Text)
1290 B (GIF)1290 B (GIF)
Users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
F for fast.
Users won't read your text thoroughly in a word-by-word manner. Scanning Exhaustive reading is rare
The first two paragraphs must state the most important information.
Start subheads, paragraphs, and bullet points with information Carrying words that users will notice when
scanning
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 46
That’s a lot of stuff.
HOW DO I REMEMBER THEM ALL?
http://www.havenworks.com/http://www.5safepoints.com/http://www.samanzerin.com/http://www.alternativetransportservi
ces.co.uk/http://www.brillpublications.com/
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 47
CSS Zen Garden http://www.csszengarden.com
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 48
04/12/23 Ermilo John D. Gialogo, Jr. ● CIIT: Introduction to Web Design 49
WRAP UP THE STUFF.