Editorial Design in Craft

11fb562e7c6fdd7f6dceb33c858c9ed5?s=47 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.

11fb562e7c6fdd7f6dceb33c858c9ed5?s=128

Louder Than Ten

October 23, 2017
Tweet

Transcript

  1. EDITORIAL
 DESIGN in Craft

  2. None
  3. None
  4. None
  5. WE SHAPE OUR TOOLS AND THEREAFTER OUR TOOLS SHAPE US

    John Culkin (and kind of Marshall McLuhan… but whatever)
  6. None
  7. 2000 2007

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

  9. None
  10. None
  11. None
  12. None
  13. None
  14. Centralize Neutralize Dehumanize

  15. None
  16. None
  17. We don’t care about content. We only care about what

    it can do for us.
  18. None
  19. None
  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
  26. None
  27. None
  28. None
  29. Don’t stop at the system. Automate, then humanize.

  30. livewires.io

  31. Progressive design HTML prototype Styled components Pretty good baseline

  32. None
  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; }
  34. None
  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>
  39. None
  40. Art direction matrix

  41. None
  42. None
  43. None
  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

  48. None
  49. None
  50. None
  51. Type

  52. None
  53. None
  54. None
  55. gRAPHICS

  56. None
  57. None
  58. None
  59. None
  60. Let’s re-humanize the web

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