Design Theory for the Web

Slide 1

Slide 1 text

Design theory for the web Laura Kalbag @laurakalbag

Slide 2

Slide 2 text

VISUAL DESIGN analysis understanding contexts comprehension knowing rules g education previous experience

Slide 3

Slide 3 text

Typography

Slide 4

Slide 4 text

The qualities of a good web font (or typeface)

Slide 5

Slide 5 text

The technical

Slide 6

Slide 6 text

Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful, and bassist Pat Badger was playing with a Berklee-based outfit called In The Pink. Following an altercation between the rival groups over communal dressing rooms, the four decided to form a new band together. Typeface: Museo Sans

Slide 7

Slide 7 text

Typeface: Museo Sans

Slide 8

Slide 8 text

The practical

Slide 9

Slide 9 text

What do we aim to achieve with typography?

Slide 10

Slide 10 text

Remember that typography exists to represent content

Slide 11

Slide 11 text

Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Typeface: Blackoak Std Typeface: Heinemann Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful.

Slide 12

Slide 12 text

Typeface: Trade Gothic Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream (“Extreme” is a derivation of Cherone and Geary's former band “The Dream”, meaning “Ex-Dream”). Guitarist Nuno Bettencourt was in a band called Sinful, and bassist Pat Badger was playing with a Berklee-based outfit called In The Pink.

Slide 13

Slide 13 text

Post-breakup (1997–2003) Gary Cherone: Van Halen and other projects On the recommendation of former Extreme manager Ray Danniels, in 1996, Gary Cherone joined one of the world's most successful rock acts, Van Halen. During 1996, Van Halen's fan-base weathered the acrimonious departures of two of rock's most successful lead singers: first Sammy Hagar, who had fronted Van Halen since 1985, and then David Lee Roth, the band's original frontman, (1974-1985). Into this fractious, and very public situation entered Cherone, whom guitarist Eddie Van Halen later called a “musical soulmate.” In 1998, the Cherone-fronted Van Halen released Van Halen III. Typeface: Trade Gothic

Slide 14

Slide 14 text

Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. In July 2007 Bettencourt quit Satellite Party for the definite Extreme reunion with Gary Cherone and Pat Badger. On November 26, 2007, the band announced plans for a world tour in the summer of 2008 with King's X as well as a release date for their new album, Saudades de Rock, produced by Bettencourt. Kevin Figueiredo, who played with Bettencourt in DramaGods and Satellite Party, took over drum duties for the band. Original drummer Paul Geary would still remain involved with the band, albeit in a management position. Typeface: Trade Gothic

Slide 15

Slide 15 text

What makes a typeface relevant?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Basic history : the typographic classifications

Slide 18

Slide 18 text

Humanist / Old style serif Garamond Minion Pro

Slide 19

Slide 19 text

Transitional Serif Times New Roman Baskerville

Slide 20

Slide 20 text

Modern Serif Bodoni Abril

Slide 21

Slide 21 text

Egyptian / Slab serif Rockwell Adelle

Slide 22

Slide 22 text

Humanist sans serif Myriad Pro Gill Sans

Slide 23

Slide 23 text

Transitional sans serif Franklin Gothic Helvetica

Slide 24

Slide 24 text

Geometric sans serif Futura Proxima Nova

Slide 25

Slide 25 text

Scripts Comic Sans Brush Script

Slide 26

Slide 26 text

Papyrus Novelty / themed fonts STENCIL

Slide 27

Slide 27 text

L r Museo Slab

Slide 28

Slide 28 text

What makes a font readable?

Slide 29

Slide 29 text

Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornografﬁtti line-up to do a small, three-show reunion tour through New England. Typeface: Foundation Sans Uniform texture Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograﬃtti line-up to do a small, three-show reunion tour through New England. Typeface: Big Caslon Irregular texture

Slide 30

Slide 30 text

Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Typeface: Freight Sans black Not too heavy Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Typeface: Freight Sans light Not too light

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Rococco Cocoon Typeface: Museo Sans Open counters Typeface: Embrionic Fairly closed counters After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Rococco Cocoon

Slide 34

Slide 34 text

What makes a typeface beautiful? • Easy to read • Good attention to detail • Yet subtle in that detail • Well-balanced, consistent and uniform

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Grids

Slide 37

Slide 37 text

(in web design) What is a grid?

Slide 38

Slide 38 text

A grid is a series of horizontal and vertical lines used as a guide in the positioning of elements in layout design

Slide 39

Slide 39 text

Why use a grid?

Slide 40

Slide 40 text

esw ssds s sdsds s sd sd sd sd sd sd sd sd sd sd sd sdsd dsd dsds s dsdddsdasdasd d esw ssds s sdsds s sd sd sd sd sd sd sd sd sd sd sd s d ddsd dsd dsds s ds d d ds dddd dddsdasdasd d sdmnn msdnnmnnd sd sdsd sdsds d sd sd as sd s ds s s s sd s sd s s ddddd ddsd esw ssds s sdsds s sd sd sd sd sd sd sd sd sd sd sd sdsd dsd dsds s dsdddsdasdasd d esw ssds s sdsds s sd sd sd sd sd sd sd sd sd sd sd s d ddsd dsd dsds s ds d d ds dddd dddsdasdasd d sdmnn msdnnmnnd sd sdsd sdsds d sd sd as sd s ds s s s sd s sd s s ddddd ddsd

Slide 41

Slide 41 text

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Creating grids

Slide 44

Slide 44 text

base unit a baseline

Slide 45

Slide 45 text

Vertical rhyt hm snd sk a sdn aks jmns as dj a;sd Ve rtic al r h y th m snd sk asdn a ks Vertical rhyt hm snd sk a sdn aks jmns as dj alskdj asnd al sdj as lkd asd asd a;sdk a;sd Ve rtic al r h y th m snd sk asdn a ks jmns asdj alskdj asnd alsdj asl kd asd asd a;sdk a;sd V ertic al rhythm snd sk asdn aksjmns asdj a lskdj asnd alsdjj asnd als dj Vertical rhythm Vertical rhyt hm snd sk a sdn aks jmns as dj alskdj asnd al sdj as lkd asd asd a;sdk a;sd Ve rtic al r h y th m snd sk asdn a ks jmns asdj alskdj asnd alsdj asl kd asd asd a;sdk a;sd V ertic al rhythm snd sk asdn aksjmns asdj a lskdj asnd alsdjj asnd als dj Vertical rhyt hm snd sk a sdn aks jmns as dj alskdj asnd al sdj as lkd asd asd a;sdk a;sd Ve rtic al r h y th m snd sk asdn a ks jmns asdj alskdj asnd alsdj asl kd asd asd a;sdk a;sd V ertic al rhythm snd sk asdn aksjmns asdj a lskdj asnd alsdjj asnd als dj Vertical rhyt hm snd sk a sdn aks jmns as dj alskdj asnd al sdj as lkd asd asd a;sdk a;sd Ve rtic al r h y th m snd sk asdn a ks jmns asdj alskdj asnd alsdj asl kd asd asd a;sdk a;sd V ertic al rhythm snd sk asdn aksjmns asdj a lskdj asnd alsdjj asnd als dj

Slide 46

Slide 46 text

Columns

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Design without content is frivolous decoration

Slide 49

Slide 49 text

even fancy

Slide 50

Slide 50 text

For your fancy grid needs: gridsetapp.com

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

What about responsive design and grids?

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

{ } DEVELOPERS GRIDS

Slide 57

Slide 57 text

Grids make good design much easier

Slide 58

Slide 58 text

Colour

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

colour wheel hue brightness saturation colour spectrum

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

analogous complementary

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Pixelmator ↓ Stylize ↓ Pixelate colourlovers.com ↓ COPASO

Slide 70

Slide 70 text

contrast contrast contrast

Slide 71

Slide 71 text

snook.ca/technical/colour_contrast/colour.html

Slide 72

Slide 72 text

Meaning

Slide 73

Slide 73 text

Branding

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

How I improved my design skills

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

critiquing teach yourself learning effectiveness

Slide 78

Slide 78 text

Laura Kalbag @laurakalbag

Slide 79

Slide 79 text

Pixeds Pixicon Symbolicons If you like icons: Glyphicons Noun Project (attribution to Mike Loree) Picto Foundry