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
   

   View Slide

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

   View Slide

3. Typography
   

   View Slide

4. The qualities of a good web
   font
   (or typeface)
   

   View Slide

5. The technical
   

   View Slide

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
   

   View Slide

7. Typeface: Museo Sans
   

   View Slide

8. The practical
   

   View Slide

9. What do we aim to achieve
   with typography?
   

   View Slide

10. Remember that typography
    exists to represent content
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. What makes a typeface
    relevant?
    

    View Slide

16. View Slide

17. Basic history :
    the typographic classifications
    

    View Slide

18. Humanist / Old style serif
    Garamond
    Minion Pro
    

    View Slide

19. Transitional Serif
    Times New Roman
    Baskerville
    

    View Slide

20. Modern Serif
    Bodoni
    Abril
    

    View Slide

21. Egyptian / Slab serif
    Rockwell
    Adelle
    

    View Slide

22. Humanist sans serif
    Myriad Pro
    Gill Sans
    

    View Slide

23. Transitional sans serif
    Franklin Gothic
    Helvetica
    

    View Slide

24. Geometric sans serif
    Futura
    Proxima Nova
    

    View Slide

25. Scripts
    Comic Sans
    Brush Script
    

    View Slide

26. Papyrus
    Novelty / themed fonts
    STENCIL
    

    View Slide

27. L r
    Museo Slab
    

    View Slide

28. What makes a font readable?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

35. View Slide

36. Grids
    

    View Slide

37. (in web design)
    What is a grid?
    

    View Slide

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

    View Slide

39. Why use a grid?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. View Slide

43. Creating grids
    

    View Slide

44. base unit
    a baseline
    

    View Slide

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
    

    View Slide

46. Columns
    

    View Slide

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
    

    View Slide

48. Design without content is
    frivolous decoration
    

    View Slide

49. even fancy
    

    View Slide

50. For your fancy grid needs: gridsetapp.com
    

    View Slide

51. View Slide

52. What about responsive
    design and grids?
    

    View Slide

53. View Slide

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
    

    View Slide

55. View Slide

56. { }
    DEVELOPERS
    GRIDS
    

    View Slide

57. Grids make good design
    much easier
    

    View Slide

58. Colour
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. colour wheel hue
    brightness
    saturation
    colour spectrum
    

    View Slide

63. View Slide

64. analogous
    complementary
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. Pixelmator
    ↓
    Stylize
    ↓
    Pixelate
    colourlovers.com
    ↓
    COPASO
    

    View Slide

70. contrast
    contrast
    contrast
    

    View Slide

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

    View Slide

72. Meaning
    

    View Slide

73. Branding
    

    View Slide

74. View Slide

75. How I improved my
    design skills
    

    View Slide

76. View Slide

77. critiquing
    teach
    yourself
    learning
    effectiveness
    

    View Slide

78. Laura Kalbag
    @laurakalbag
    

    View Slide

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

    View Slide