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

Editorial Design in Craft

Louder Than Ten
October 23, 2017

Editorial Design in Craft

The web is under threat. Information and attention is consolidating under the centralized platforms of our social media overlords. Lucky for us, we have our own weapon to fight back with. Craft has the power to bring expression and independence back to our web… we just need to know why, how, and when to use it. Let's look at how to turn our trusty publishing tool into an art directing machine.

Louder Than Ten

October 23, 2017
Tweet

More Decks by Louder Than Ten

Other Decks in Design

Transcript

  1. EDITORIAL

    DESIGN
    in Craft

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. WE SHAPE OUR TOOLS
    AND THEREAFTER OUR
    TOOLS SHAPE US
    John Culkin
    (and kind of Marshall McLuhan… but whatever)

    View Slide

  6. View Slide

  7. 2000 2007

    View Slide

  8. Built for automation.
    Built for repetition.
    Built for consistency.

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Centralize
    Neutralize
    Dehumanize

    View Slide

  15. View Slide

  16. View Slide

  17. We don’t care
    about content.
    We only care about what it
    can do for us.

    View Slide

  18. View Slide

  19. View Slide

  20. RESET

    View Slide

  21. Let’s rethink
    the tools

    View Slide

  22. EDITORIAL

    DESIGN

    View Slide

  23. EDITORIAL

    SYSTEMS

    View Slide

  24. Typography
    Colour Components
    Writing Editing
    Content management
    Illustration Photography
    Templating
    Publishing Marketing
    Layout
    Distribution
    Sourcing
    Data visualization

    View Slide

  25. Typography
    Colour Components
    Writing Editing
    Content management
    Illustration Photography
    Templating
    Publishing Marketing
    Layout
    Distribution
    Sourcing
    Data visualization

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. Don’t stop at the system.
    Automate, then humanize.

    View Slide

  30. livewires.io

    View Slide

  31. Progressive design
    HTML prototype Styled components Pretty good baseline

    View Slide

  32. View Slide

  33. Immutable styles
    .italic { font-style: italic; }
    .semibold { font-weight: 600; }
    .uppercase { text-transform: uppercase; }
    .mb2 { margin-bottom: #{$line * 2}; }
    .pt4 { padding-top: #{$line * 4}; }
    .c3x2 { width: #{(100% / 3) * 2};}
    .dark-red { background-color: $dark-red; color: $white; }

    View Slide

  34. View Slide

  35. Field values
    are classes

    View Slide

  36. Callout
    Text
    Neo

    View Slide

  37. Callout component

    View Slide

  38. Text component file
    class=“content
    c2 c3x2-md pushl6-md align-right
    mb2 mt3
    dark-red-400”>
    Some wicked text

    class=“content
    {% for screen in block.layout %}
    {{ screen.width }{{ screen.breakpoint }}
    {{ screen.pushl }}{{ screen.breakpoint }}
    {{ screen.pushr }}{{ screen.breakpoint }}
    {{ screen.textAlign }}
    {{ screen.float }}
    {% endfor %}
    {{ customClasses }}
    {{ colour }}”>
    {{ block.text|md|typogrify }}

    View Slide

  39. View Slide

  40. Art direction matrix

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. But what about the clients?

    View Slide

  45. My client is a design…
    Disaster Master

    View Slide

  46. Control the options:
    Disaster Master
    Select colour pallet
    Switch typefaces
    Add images
    Add illustration Control layout
    Manipulate type

    View Slide

  47. COLOUR

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. Type

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. gRAPHICS

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. Let’s re-humanize
    the web

    View Slide

  61. @travisgertz @louderthanten louderthanten.com
    louderthanten.com/craft

    View Slide