Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Theory for the Web

Design Theory for the Web

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

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

June 10, 2013
Tweet

More Decks by Laura Kalbag

Other Decks in Design

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?

  16. None
  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
  35. None
  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
  42. None
  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

  51. None
  52. What about responsive design and grids?

  53. None
  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
  55. None
  56. { } DEVELOPERS GRIDS

  57. Grids make good design much easier

  58. Colour

  59. None
  60. None
  61. None
  62. colour wheel hue brightness saturation colour spectrum

  63. None
  64. analogous complementary

  65. None
  66. None
  67. None
  68. None
  69. Pixelmator ↓ Stylize ↓ Pixelate colourlovers.com ↓ COPASO

  70. contrast contrast contrast

  71. snook.ca/technical/colour_contrast/colour.html

  72. Meaning

  73. Branding

  74. None
  75. How I improved my design skills

  76. None
  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