Design Theory for the Web

From talks at State Of The Browser in May 2013 and Untangle the Web in June 2013

Transcript

1. Design theory for the web Laura Kalbag @laurakalbag
2. VISUAL DESIGN analysis understanding contexts comprehension knowing rules g education previous experience
3. Typography
4. The qualities of a good web font (or typeface)
5. The technical
6. 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
7. Typeface: Museo Sans
8. The practical
9. What do we aim to achieve with typography?
10. Remember that typography exists to represent content
11. 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.
12. 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.
13. 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
14. 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
15. What makes a typeface relevant?
17. Basic history : the typographic classifications
18. Humanist / Old style serif Garamond Minion Pro
19. Transitional Serif Times New Roman Baskerville
20. Modern Serif Bodoni Abril
21. Egyptian / Slab serif Rockwell Adelle
22. Humanist sans serif Myriad Pro Gill Sans
23. Transitional sans serif Franklin Gothic Helvetica
24. Geometric sans serif Futura Proxima Nova
25. Scripts Comic Sans Brush Script
26. Papyrus Novelty / themed fonts STENCIL
27. L r Museo Slab
28. What makes a font readable?
29. 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: 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” Pornograffitti line-up to do a small, three-show reunion tour through New England. Typeface: Big Caslon Irregular texture
30. 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
31. 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 Display Black Too much contrast
32. 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: Giddyup Std Too many complex details
33. 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
34. What makes a typeface beautiful? • Easy to read • Good attention to detail • Yet subtle in that detail • Well-balanced, consistent and uniform
36. Grids
37. (in web design) What is a grid?
38. A grid is a series of horizontal and vertical lines used as a guide in the positioning of elements in layout design
39. Why use a grid?
40. 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
41. 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
43. Creating grids
44. base unit a baseline
45. 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
46. Columns
47. 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
48. Design without content is frivolous decoration
49. even fancy
50. For your fancy grid needs: gridsetapp.com
52. What about responsive design and grids?
54. 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 sd sd sd s d ddsd dsd dsds s ds d d ds dddd dddsda as sd s ds s s s sd s sd s s ddddd
56. { } DEVELOPERS GRIDS
57. Grids make good design much easier
58. Colour
62. colour wheel hue brightness saturation colour spectrum
64. analogous complementary
69. Pixelmator ↓ Stylize ↓ Pixelate colourlovers.com ↓ COPASO
70. contrast contrast contrast
71. snook.ca/technical/colour_contrast/colour.html
72. Meaning
73. Branding
75. How I improved my design skills
77. critiquing teach yourself learning effectiveness
78. Laura Kalbag @laurakalbag
79. Pixeds Pixicon Symbolicons If you like icons: Glyphicons Noun Project (attribution to Mike Loree) Picto Foundry