introduction to web design

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.