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

Sculpting Text

Stephen Hay
June 27, 2014

Sculpting Text

Presentation for Responsive Day Out 2014.

Stephen Hay

June 27, 2014
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. Sculpting Text
    Stephen Hay, Responsive Day Out 2014

    View Slide

  2. Responsive Day Out!
    It’s Brighton. Here’s a seagull.

    View Slide

  3. !
    “Plain text is the underlying content stream to
    which formatting can be applied. [...]

    Plain text is public,standardized, and universally
    readable.”

    — The Unicode Standard, Version 6.1

    View Slide

  4. View Slide

  5. View Slide

  6. Structured text.
    Text that has been structured with HTML.
    HTML is arguably the single most portable and
    universally readable format.

    View Slide

  7. Good responsive design starts with structured content.

    View Slide

  8. Designers need to know the “shape” of content.

    View Slide

  9. View Slide

  10. Design the content first, then build upon it.

    This is the way of progressive enhancement.

    !
    Sites designed this way have the potential to be more
    accessible and more usable out of the box.

    View Slide

  11. “One technique I’ve used for years is to ‘design in text’...
    not necessarily describing everything in textual form [...]
    essentially what is the message that needs to be
    communicated if I was only able to provide the user with
    unstyled HTML?”

    — Bryan Rieger

    View Slide

  12. Unstyled HTML has benefits.

    View Slide

  13. Because of the focus on content and structure, 

    irrelevant or inappropriate content is easy to spot.

    View Slide

  14. The linear form of structured content prepares us for 

    the smallest screens with the least capabilities.

    View Slide

  15. When you create a plain HTML-document, 

    you have created a web page that is “mobile-ready”.

    View Slide

  16. Focusing on content and purpose (as opposed to
    containers) helps designers design more effectively.

    View Slide

  17. That doesn’t sound very exciting.

    View Slide

  18. I recommend a process that takes us incrementally and
    cumulatively from the smallest and simplest aspect of
    our design to the largest and most complex.

    View Slide

  19. This does not mean you should skip sketching, whether
    on paper, in Photoshop, or otherwise.

    View Slide

  20. The Design Funnel
    http://changethis.com/manifesto/show/48.04.DesignFunnel

    View Slide

  21. Design language for the web
    Typography, color, imagery, layout, motion.

    View Slide

  22. Design language for the web
    Typography, color, imagery, layout, motion.

    View Slide

  23. Get some representative content into the browser
    and start playing with type. Choose a base typeface.
    !
    See what I did there?

    View Slide

  24. You’ll be applying styles incrementally, such that
    their cumulative effect will be to visualize the
    design(s) you’ve sketched.
    !
    You’ll do this by sculpting the content 

    using simple CSS.
    !
    Most of these styles will be used (or in some cases,
    overridden) in the larger screen layouts.

    View Slide

  25. Start thinking about type size.

    View Slide

  26. Consider margins & padding.

    View Slide

  27. Add some color where needed.

    View Slide

  28. Maybe even background color.

    View Slide

  29. You can then add images.
    (Hi, Bruce.)

    View Slide

  30. You get the idea.
    Let’s look at an example.

    View Slide

  31. View Slide

  32. When sculpting text:
    !
    Do it methodically.
    Only add CSS where needed.
    Avoid complex CSS (for now).
    Avoid complex layout.
    Keep checking on real devices.

    View Slide

  33. When you’re done:
    !
    Expand the browser window (yes) until your
    layout breaks or no longer works well.
    !
    That’s your next breakpoint.

    View Slide

  34. hey wait you’re asking me to do
    css but i’m a designer not a
    developer wtf

    View Slide

  35. Stop your whining. 

    We’re using the most basic CSS.

    View Slide

  36. We’re “helping” content, 

    and content will help us later 

    in return.

    View Slide

  37. Thank you!
    @stephenhay

    View Slide