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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. The technical

    View full-size slide

  5. 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 full-size slide

  6. Typeface: Museo Sans

    View full-size slide

  7. The practical

    View full-size slide

  8. What do we aim to achieve
    with typography?

    View full-size slide

  9. Remember that typography
    exists to represent content

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. What makes a typeface
    relevant?

    View full-size slide

  15. Basic history :
    the typographic classifications

    View full-size slide

  16. Humanist / Old style serif
    Garamond
    Minion Pro

    View full-size slide

  17. Transitional Serif
    Times New Roman
    Baskerville

    View full-size slide

  18. Modern Serif
    Bodoni
    Abril

    View full-size slide

  19. Egyptian / Slab serif
    Rockwell
    Adelle

    View full-size slide

  20. Humanist sans serif
    Myriad Pro
    Gill Sans

    View full-size slide

  21. Transitional sans serif
    Franklin Gothic
    Helvetica

    View full-size slide

  22. Geometric sans serif
    Futura
    Proxima Nova

    View full-size slide

  23. Scripts
    Comic Sans
    Brush Script

    View full-size slide

  24. Papyrus
    Novelty / themed fonts
    STENCIL

    View full-size slide

  25. L r
    Museo Slab

    View full-size slide

  26. What makes a font readable?

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size 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: Freight Display Black
    Too much contrast

    View full-size 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: Giddyup Std
    Too many complex details

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Why use a grid?

    View full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. Creating grids

    View full-size slide

  39. base unit
    a baseline

    View full-size slide

  40. 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 full-size 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 full-size slide

  42. Design without content is
    frivolous decoration

    View full-size slide

  43. For your fancy grid needs: gridsetapp.com

    View full-size slide

  44. What about responsive
    design and grids?

    View full-size slide

  45. 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 full-size slide

  46. { }
    DEVELOPERS
    GRIDS

    View full-size slide

  47. Grids make good design
    much easier

    View full-size slide

  48. colour wheel hue
    brightness
    saturation
    colour spectrum

    View full-size slide

  49. analogous
    complementary

    View full-size slide

  50. Pixelmator

    Stylize

    Pixelate
    colourlovers.com

    COPASO

    View full-size slide

  51. contrast
    contrast
    contrast

    View full-size slide

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

    View full-size slide

  53. How I improved my
    design skills

    View full-size slide

  54. critiquing
    teach
    yourself
    learning
    effectiveness

    View full-size slide

  55. Laura Kalbag
    @laurakalbag

    View full-size slide

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

    View full-size slide