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.

Transcript

1. EDITORIAL
 DESIGN in Craft
5. WE SHAPE OUR TOOLS AND THEREAFTER OUR TOOLS SHAPE US John Culkin (and kind of Marshall McLuhan… but whatever)
7. 2000 2007
8. Built for automation. Built for repetition. Built for consistency.
14. Centralize Neutralize Dehumanize
17. We don’t care about content. We only care about what it can do for us.
20. RESET
21. Let’s rethink the tools
22. EDITORIAL
 DESIGN
23. EDITORIAL
 SYSTEMS
24. Typography Colour Components Writing Editing Content management Illustration Photography Templating Publishing Marketing Layout Distribution Sourcing Data visualization
25. Typography Colour Components Writing Editing Content management Illustration Photography Templating Publishing Marketing Layout Distribution Sourcing Data visualization
29. Don’t stop at the system. Automate, then humanize.
30. livewires.io
31. Progressive design HTML prototype Styled components Pretty good baseline
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; }
35. Field values are classes
36. Callout Text Neo
37. Callout component
38. Text component file <div class=“content c2 c3x2-md pushl6-md align-right mb2 mt3 dark-red-400”> <p>Some wicked text</p> </div> <div 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 }} </div>
40. Art direction matrix
44. But what about the clients?
45. My client is a design… Disaster Master
46. Control the options: Disaster Master Select colour pallet Switch typefaces Add images Add illustration Control layout Manipulate type
47. COLOUR
51. Type
55. gRAPHICS
60. Let’s re-humanize the web
61. @travisgertz @louderthanten louderthanten.com louderthanten.com/craft