The Principles of Beautiful Web Design

A

achromatic color scheme 51

additive color model 46–8

adjustments, imagery

cropping 140–2, 144–5, 160

Photoshop 143–7, 160–2

aesthetic perspective, defining good design 4–6

aged style, texture 85–7

alpha channel, imagery 149

amesnjas web site, imagery 156–8

analo-adjust color scheme 58

analogous color scheme 52–3

anatomy of a letterform, typography 104–6

appeal, imagery 131

application example

color schemes 62–6

design process 32–6

Florida Country Tile 32–6, 62–6, 91–7, 125–8, 159–62

imagery 159–62

texture 91–7

typography 125–8

associations, color 39–43

asymmetrical balance 14–15

B

background

browsers 81

pattern 78–83, 92–5

balance 12–15

asymmetrical 14–15

symmetrical 12–13

big type style, texture 88–90

bilateral symmetry 13

black, color associations 43

blink tag 22

blockquote element, emphasis 22

blue, color associations 41–2

border drop shadows, CSS 155–6, 158

borders

CSS 154–6

imagery 149–58

stamp-style 149, 151–2

bread-and-butter layouts 22–4

brightness, imagery 145

browsers

background 81

file formats 148–9

bulleted list, typography 126–7

Bus Full of Hippies template 5

business cards, starting point 1, 32

C

cartoon style, texture 87–8

character, inspiration 163

choosing fonts 120–4

choosing imagery 159–62

clipart, imagery 139–40

CMYK subtractive color model 46–8

Colly web site 30

color 38–66

additive color model 46–8

associations 39–43

cool 44

hexadecimal notation 59–62

intensity 45

palettes 59–66

primary 46–8

psychology 38–43

saturation 45

secondary 46–8

shade 45, 49–51, 63–4

subtractive color model 46–8

temperature 44, 63–4

tertiary 46–8

theory 101; 46–7

tint 45, 49–51, 63–4

value 45

warm 44

wheels 46–8

color schemes 49–58

achromatic 51

analo-adjust 58

analogous 52–3

application example 62–6

changing 53

complementary 54–6, 63–4

discordant 56

double complementary 57–8, 64

Florida Country Tile 62–6

generators 60–2

mono-split-complement 58

monochromatic 49–51

monochromatic with mo’ pop 58

simultaneous contrast 56

split-complementary 57–8

tetradic 57–8, 64

triadic 57–8

variants 58

communication

defining good design 4–6

design process 2–3

typography 98

comp (comprehensive dummy), design process 2, 4

complementary color scheme 54–6, 63–4

consistency, defining good design 6

containing block, web page anatomy 7

content

defining good design 5

example 96

web page anatomy 7, 8

continuance, emphasis 19

contrast

emphasis 20

imagery 145

corners, rounded 71–4, 96

Country Tile web site see Florida Country Tile

cropping, imagery 140–2, 144–5, 160

CSS

applying effects 153–8

border drop shadows 155–6, 158

borders 154–6

emphasis 22

imagery 150, 153–8

rules 16–17

showcase/gallery web sites 25

D

decorative fonts, typography 116–17

defining good design 4–6

depth and volume, texture 75–8

design process 2–4

application example 32–6

communication 2–3

comp (comprehensive dummy) 2, 4

discovery 2–3

Florida Country Tile 32–6

implementation 3–4

informal meetings 3

information 2–3

paper 3–4

questions 3

starting point 1, 32–6

dingbat fonts, typography 118

discordant color schemes 56

discovery, design process 2–3

display fonts, typography 116–17

divine proportion, grid theory 9–10

DIY, imagery 132

double complementary

color scheme 57–8, 64

E

economy of line 74

edge treatments, imagery 149–58

em, typography 108, 122–3

emphasis 18–22

experiences, inspiration 163

F

file formats, imagery 148–9

filters, imagery 146–7

Fish Marketing web site 74

fixed width

containing block 7, 28–30

fonts 114–16

Florida Country Tile

application example 32–6, 62–6, 91–7, 125–8, 159–62

color schemes example 62–6

design process example 32–6

imagery example 159–62

texture example 91–7

typography example 125–8

focal point, emphasis 19

fold, web page anatomy 8

fonts see typography

footer

navigation 27

web page anatomy 7, 8

free images, imagery 133–5

freeform shapes 70–4

G

gallery/showcase web sites

CSS 25

typography 119–20

gathering information 2–3

generators, color schemes 60–2

geometric shapes 70–1

GIF format, imagery 148

golden ratio, grid theory 9–10

good design, defining 4–6

Google Ganking, imagery 138–9

green, color associations 41

grid theory 9–12

grouting, texture 91–7

Grow Collective web site 13

H

handwritten fonts, typography 113–14

header, example 96

hexadecimal notation, color 59–62

Hicksdesign 15

high-gloss style, texture 88–90

homepage 125–8

horizontal spacing, typography 106–7

horizontal symmetry 13

horizontal/vertical lines 69–70

hotlinking, imagery 139

HTML character entity references, typography 124

hue/saturation, imagery 146

imagery 129–63

adjustments 140–2, 143–7

alpha channel 149

amesnjas web site 156–8

appeal 131

application example 159–62

borders 149–58

brightness 145

choosing 159–62

clipart 139–40

contrast 145

cropping 140–2, 144–5, 160

CSS 150, 153–8

DIY 132

edge treatments 149–58

essence 129

file formats 148–9

filters 146–7

Florida Country Tile 159–62

free images 133–5

GIF format 148

Google Ganking 138–9

guidelines, usage 133

hotlinking 139

hue/saturation 146

interest 130–1

JPEG format 148

knock out 143

licensing 132–3

masks 142–3, 145

MorgueFile 134

multiple image effects 156–8

options 132

Photoshop 143–7, 160–2

PNG format 148–9

professional help 137–8

questions 130–1

relevance 130, 131

resolution 141, 148–9

rights-managed images 136–7

royalty-free images 135–6

saturation/hue 146

sources 132–8

stock photography 132–7

Stock.XCHNG 134

stroke 146

transparency 149

usage guidelines 133

implementation, design process 3–4

informal meetings, design process 3

information

design process 2–3

gathering 2–3

inspired, getting 25–6, 162–3

character 163

experiences 163

interests 163

morgue file 26

originality 163

personality 163

web sites 25

I

intensity, color 45

interest, imagery 130–1

interests, inspiration 163

irish-accent rule 10

isolation, emphasis 19

J

Jasongraphix web site 21

JeffCroft web site 27

JPEG format, imagery 148

justification, typography 108–9

K

kerning, typography 106–7

knock out imagery 143

L

layout and composition 1–37

left-column navigation 22–3

letterforms see typography

licensing, imagery 132–3

light and shadow 76–8

line-height, typography 107–8

lines

economy of line 74

texture 69–70

liquid width 7, 28–30, 86

logo, web page anatomy 7–8

M

marquee tag 22

masks

imagery 142–3, 145

texture 84

monitor resolution 30–2

mono-split-complement color scheme 58

monochromatic color scheme 49–51

monochromatic with mo’ pop color scheme 58

monospaced fonts, typography 114–16

morgue file, inspiration 26

MorgueFile, imagery 134

multiple image effects 156–8

N

navigation

defining good design 5–6

footer 27

left-column 22–3

right-column 23–4

three-column 24–5

web page anatomy 7, 8

negative space see whitespace

nostalgic style, texture 85–7

novelty fonts, typography 116–17

O

orange, color associations 40

Ordered List, defining good design 6

organic shapes, texture 71–4

originality, inspiration 163

P

palettes, color 59–66

paper

advantages 3–4

design process 3–4

pattern

background 78–83, 92–5

creating 92–5

Photoshop 92–5

personality, inspiration 163

perspective, volume and depth 75

phi (golden ratio), grid theory 9–10

photography

see also imagery

professional 137–8

stock photography 132–7

Photoshop

adjustments 143–7, 160–2

pattern 92–5

Picasso quote 22

pixels 67

placement, emphasis 19

PNG format, imagery 148–9

points

text size 121–2

texture 68–9

primary color 46–8

process, design see design process

professional help, imagery 137–8

proportion

emphasis 20–2

volume and depth 75

proximity, unity 16–17

psychology, color 38–43

punctuation, typography 123–4

purple, color associations 42

Q

questions, design process 3

R

radial symmetry 13

red, color associations 39

relevance, imagery 130, 131

Renegade Zen web site 36–7

repetition, unity 17–18

resolution

imagery 141, 148–9

screen 30–2

RGB additive color model 46–8

right-column navigation 23–4

river problem, typography 108–9

rounded corners 71–4, 96

royalty-free images 135–6

rule of thirds, grid theory 10–12

S

safe fonts 100–1, 103–4

sans serif fonts 112–13

saturation, color 45

saturation/hue, imagery 146

screen resolution 30–2

screenshots, capturing 26

secondary color 46–8

serif fonts 110–12

setting, texture 91–7

shade, color 45, 49–51, 63–4

shadow, light and 76–8

shadows, border drop 155–6, 158

shape, texture 70–4

showcase/gallery web sites

CSS 25

typography 119–20

sIFR, typography 102–3

simultaneous contrast, color schemes 56

skin examples 84

spacing, text 106–8, 114–16

Spanky Corners 73

special characters, typography 123–4

split-complementary color scheme 57–8

stamp-style border 149, 151–2

starting point

business cards 1, 32

design process example 32–6

stock photography 132–7

Stock.XCHNG, imagery 134

stroke, imagery 146

subtractive color model 46–8

symbol fonts 118, 123–4

symmetrical balance 12–13

T

Tattered Fly web site 85–6

temperature, color 44, 63–4

terminology, typography 104–6

tertiary color 46–8

tetradic color scheme 57–8, 64

text see typography

texture 67–97

application example 91–7

building texture 84–90

depth and volume 75–8

ddexamples 67, 91–7, 161–2

grouting 91–7

line 69–70

masks 84

pattern 78–83

points 68–9

setting 91–7

shape 70–4

trends, starting 90

volume and depth 75–8

ThinkGeek web site 22–3

thirds, rule of 10–12

three-column navigation 24–5

three-columns, content first 27–8

Tile web site see Florida Country Tile

tint, color 45, 49–51, 63–4

tracking, typography 106–7

transparency, imagery 149

trends

fresh 26–8

starting 90

texture 90

triadic color scheme 57–8

Typetester web site 109

typography 98–128

anatomy of a letterform 104–6

application example 125–8

bulleted list 126–7

choosing fonts 120–4

communication 98

decorative fonts 116–17

dingbat fonts 118

display fonts 116–17

em 108, 122–3

finding fonts 119–20

fixed-width fonts 114–16

Florida Country Tile 125–8

font families 100–1, 103–4, 110

galleries 119–20

handwritten fonts 113–14

homepage 125–8

horizontal spacing 106–7

HTML character entity references 124

justification 108–9

kerning 106–7

line-height 107–8

monospaced fonts 114–16

novelty fonts 116–17

punctuation 123–4

resources 119–20

river problem 108–9

safe fonts 100–1, 103–4

sans serif fonts 112–13

serif fonts 110–12

sIFR 102–3

special characters 123–4

symbol fonts 118, 123–4

terminology 104–6

text alignment 108–9

text images 101–2

text replacement 101–3

text size 108, 121–3

text spacing 106–8, 114–16

tracking 106–7

typeface distinctions 110–18

Typetester web site 109

vertical spacing 107–8

web sites 119–20

U

unity 16–18

proximity 16–17

repetition 17–18

usability, defining good design 4–6

V

value, color 45

variable fixed-width 29–30

vertical/horizontal lines 69–70

vertical spacing, typography 107–8

Vivabit web site 27–8

volume and depth, texture 75–8

W

weathered style, texture 85–7

Web 2.0 style, texture 88–90

web page anatomy 7–9

web sites

CSS showcase/gallery web sites 25

inspiring 25

rounded corners 72–4, 96

typography 119–20

whimsical cartoon style, texture 87–8

white, color associations 43

whitespace, web page anatomy 7, 8–9

width 28–30

fixed 7, 28–30

fixed-width fonts 114–16

liquid 7, 28–30

variable fixed-width 29–30

Winamp skin examples 84

Woot web site 20

worn style, texture 85–7

Y

yellow, color associations 40–1

Z

Zeldman web site 131

Zen, Renegade Zen web site 36–7