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
   

   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