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

The Web Native Designer (March 2011)

The Web Native Designer (March 2011)

Following the latest trends is fun but also encourages laziness; you should think about design in terms of a particular brief rather than the particular fashion of the day. Yet it can be useful to focus on underlying trends: how we work, how we communicate with clients and how we’re now starting to appreciate the web as a medium in its own right.

Paul Robert Lloyd

March 08, 2011
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. the
    WEB NATIVE
    Paul Robert Lloyd
    designer
    APA DIGITAL BREAKFAST
    8TH MARCH 2011

    View full-size slide

  2. WHAT IS
    THE WEB?

    View full-size slide

  3. Radio with pictures

    View full-size slide

  4. People in the newspaper industry saw the web
    as a newspaper. People in TV saw the web as
    TV, and people in book publishing saw it as a
    weird kind of potential book. But the web is not
    just some kind of magic all-absorbing meta-
    medium. It's its own thing.
    — Paul Ford
    http://www.ftrain.com/wwic.html

    View full-size slide

  5. Three qualities

    View full-size slide

  6. DYNAMIC ADAPTABLE SYSTEMATIC

    View full-size slide

  7. DYNAMIC ADAPTABLE SYSTEMATIC

    View full-size slide

  8. DYNAMIC ADAPTABLE SYSTEMATIC

    View full-size slide

  9. It’s time to throw out the rituals of the printed
    page, and to engage with the medium of the
    web and its own nature.
    — Jon Allsopp
    http://www.alistapart.com/articles/dao/

    View full-size slide

  10. Without context

    View full-size slide

  11. pt px
    PRINT SCREEN WEB
    % em

    View full-size slide

  12. DESIGNERS DEVELOPERS
    v

    View full-size slide

  13. CARE? DON’T CARE?
    v

    View full-size slide

  14. DON’T CARE? CARE?
    v

    View full-size slide

  15. PLAN DESIGN RELEASE
    DEVELOP

    View full-size slide

  16. PLAN RELEASE
    DESIGN
    +
    DEVELOP

    View full-size slide

  17. DESIGNERS DEVELOPERS

    View full-size slide

  18. COMMUNICATION

    View full-size slide

  19. Global visual language

    View full-size slide

  20. Play
    To top
    Pause
    Print
    Rewind
    Email
    Expand
    Help
    Pop–out
    Info
    Share
    Alert
    HD
    Add
    Next
    Favourite
    Lock
    RSS
    Unlock
    Comment
    Search
    Parental
    Close/No
    Listen
    09 Iconography
    Helvetica Bold 48px
    48px Leading / -30 Tracking
    Helvetica Bold 36px
    36px Leading / -30 Tracking
    Helvetica Bold 32px
    32px Leading / -20 Tracking
    Helvetica Bold 28px
    28px Leading / -15 Tracking
    Helvetica Bold 24px
    08 Typographic Hierarchy
    Helvetica Regular
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    1234567890!@£$%^&*()_+
    Helvetica Bold
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    1234567890!@£$%^&*()_+
    07 Typography
    Super Header 36px
    Header 32px
    Subheader 20px
    TIME STAMPS 11PX CAPITALS
    Copy 13px Helvetica Bold on 16px leading Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet
    diam. Aliquam sollicitudin tristique nulla. Duis libero diam, condimentum et,
    condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis.
    Suspendisse porta commodo leo.
    Copy 13px Helvetica Roman on 16px leading Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet
    diam. Aliquam sollicitudin tristique nulla. Duis libero diam, condimentum et,
    condimentum in, congue eu, tellus. Phasellus eu elit at nisi ultricies lobortis.
    Suspendisse porta commodo leo. Sed tincidunt tincidunt massa.
    Link Suspendisse porta commodo leo 13px
    Link Pellentesque mollis nisi eget purus 13px
    COMMENTS 11PX CAPITAL
    EMAIL 11PX CAPITAL
    PRINT 11PX CAPITAL
    8px
    06 Type Specification
    05 Local Mastheads
    48px Gill Sans Regular 34px Gill Sans Regular
    Sign in | Preferences Home | News | Sport | Weather | iPlayer | TV | Radio | More Search the BBC
    40px
    216px
    8px 8px 8px
    16px
    04 Global Masthead
    8px
    8px
    8px baseline
    304px 304px 336px
    16px units 976px page width

    View full-size slide

  21. Common Foundation

    View full-size slide

  22. Design system

    View full-size slide

  23. DYNAMIC ADAPTABLE SYSTEMATIC

    View full-size slide

  24. THANK-YOU
    http://paulrobertlloyd.com/2011/03/webnative
    @paulrobertlloyd

    View full-size slide