Design Chat

For http://wpbootcamp.com/austin/

Transcript

1. DESIGN CHAT
   @trentwalton
   trentwalton.com
   paravelinc.com
   

   View Slide

2. WEB DESIGN
   

   View Slide

3. “And the [web] is right in front of you,
   every day, so you as a designer for this
   medium have the opportunity to use it to
   prototype what you’re designing.”
   —Stephen Hay
   

   View Slide

4. frankchimero.com/writing/the-webs-grain
   

   View Slide

5. “It is the nature of the web to be flexible,
   and it should be our role as designers
   and developers to embrace this
   flexibility, and produce pages which, by
   being flexible, are accessible to all.”
   —John Allsopp
   A Dao of Web Design, 2000
   

   View Slide

6. PROGRESSIVE ENHANCEMENT &
   DEVICE AGNOSTIC DESIGN
   • Hostile browsers
   • Tiny screens
   • Slow connection speeds
   • Touch inputs
   

   View Slide

7. CONTENT
   

   View Slide

8. “Content precedes design.
   Design in the absence of
   content is not design, it's
   decoration.”
   —Jeffrey Zeldman
   

   View Slide

9. TYPOGRAPHY
   

   View Slide

10. • Choose appropriate fonts
    • Don’t use too many fonts
    • Mind your CPL (45–75)
    

    View Slide

11. FURTHER READING…
    • On Web Typography
    • webtypography.net
    • Fluid Type
    • Smart Quotes for Smart People
    

    View Slide

12. LAYOUT
    

    View Slide

13. • Sandwich-Driven Web Design®
    • Keep mobile/RWD in mind
    • Content Choreography
    

    View Slide

14. PERFORMANCE
    

    View Slide

15. • Performance is part of web design
    • Perception is important (Fiber)
    • Optimize images
    • Be clever (TMFO, Zen Garden)
    

    View Slide

16. FURTHER READING…
    • Responsible Responsive Design
    • webpagetest.org
    • Tim Kadlec
    

    View Slide

17. BORING IS OKAY
    

    View Slide

18. “The boring designer realizes that the
    glory isn’t in putting their personal
    stamp on everything they touch. In fact,
    most of the time, it’s about leaving no
    trace of themselves. The boring designer
    loves consistency. The boring designer
    loves a style guide.”
    —Cap Watkins
    

    View Slide

19. TEAMWORK
    

    View Slide

20. IMPORTANT…
    • Content
    • Typography
    • Layout
    • Performance
    

    View Slide

21. ALSO IMPORTANT…
    • Morale
    • Communication
    • Trust
    • Enthusiasm
    

    View Slide

22. TOOLS I USE
    

    View Slide

23. • Paper + Pens
    • Whatever graphics editor is fastest
    • Codepen
    • Github
    • Atom (Code Editor)
    • BrowserStack
    

    View Slide

24. QUESTIONS?
    @trentwalton
    trentwalton.com
    paravelinc.com
    

    View Slide