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

Design Trends

Mel Choyce
February 12, 2019

Design Trends

Guest lecture for Emerson College's "Electronic Publishing" class.

Please view https://choycedesign.com/emerson-resources/ for example sources and additional resources.

Mel Choyce

February 12, 2019
Tweet

More Decks by Mel Choyce

Other Decks in Design

Transcript

  1. Good
    Design

    View Slide

  2. Mel Choyce
    Senior Product Designer at Automattic
    choycedesign.com @melchoyce

    View Slide

  3. What is design?

    View Slide

  4. – Sir George Cox
    Creativity deployed to
    a specific end.

    View Slide

  5. View Slide

  6. View Slide

  7. – Steve Jobs
    Design is not just what it
    looks like and feels like.
    Design is how it works.

    View Slide

  8. What makes
    design good?

    View Slide

  9. – Justice Potter Stewart
    I know it when I see it.

    View Slide

  10. Source: Vitsoe at English Wikipedia CC BY-SA 3.0, via Wikimedia Commons

    View Slide

  11. 10 Principles
    of Good Design

    View Slide

  12. Innovative
    Principles of Good Design #1

    View Slide

  13. Attractive
    Principles of Good Design #2

    View Slide

  14. Useful
    Principles of Good Design #3

    View Slide

  15. Understand-
    able
    Principles of Good Design #4
    ;)

    View Slide

  16. Unobtrusive
    Principles of Good Design #5

    View Slide

  17. Honest
    Principles of Good Design #6

    View Slide

  18. Durable
    Principles of Good Design #7

    View Slide

  19. Thorough
    Principles of Good Design #8

    View Slide

  20. Eco-Friendly
    Principles of Good Design #9

    View Slide

  21. Little Design
    as Possible
    Principles of Good Design #10

    View Slide

  22. What does good
    design look like?

    View Slide

  23. Grids &
    Alignment

    View Slide

  24. DIGITAL CONTENT MANAGEMENT
    Writing, Literature & Publishing
    Advance your career with our online
    Digital Content Management
    graduate certificate. You’ll learn
    what it takes to successfully create,
    analyze, and manage content for
    companies of any scale, from small
    startups to established
    corporations. Our 16-credit
    certificate program is designed to
    help professionals looking to learn
    new skills to stay competitive in
    content creation and strategy in
    today’s market.
    REQUIRED COURSES
    • Metadata
    • Fundamentals Of Content Strategy
    • Electronic Publishing Overview
    • Elective
    TURN YOUR CERTIFICATE INTO A
    MASTER'S DEGREE
    The Electronic Publishing Overview
    course would count as one of the core
    requirements for the MA in Publishing and
    Writing, and will be offered every
    semester.
    All other classes count as electives for the
    current MA program and are offered
    every other semester.

    View Slide

  25. DIGITAL CONTENT MANAGEMENT
    Writing, Literature & Publishing
    Advance your career with our online
    Digital Content Management
    graduate certificate. You’ll learn
    what it takes to successfully create,
    analyze, and manage content for
    companies of any scale, from small
    startups to established
    corporations. Our 16-credit
    certificate program is designed to
    help professionals looking to learn
    new skills to stay competitive in
    content creation and strategy in
    today’s market.
    REQUIRED COURSES
    • Metadata
    • Fundamentals Of Content Strategy
    • Electronic Publishing Overview
    • Elective
    TURN YOUR CERTIFICATE INTO A
    MASTER'S DEGREE
    The Electronic Publishing Overview
    course would count as one of the core
    requirements for the MA in Publishing and
    Writing, and will be offered every
    semester.
    All other classes count as electives for the
    current MA program and are offered
    every other semester.

    View Slide

  26. DIGITAL CONTENT MANAGEMENT
    Writing, Literature & Publishing
    REQUIRED COURSES
    • Metadata
    • Fundamentals Of Content Strategy
    • Electronic Publishing Overview
    • Elective
    TURN YOUR CERTIFICATE INTO A
    MASTER'S DEGREE
    The Electronic Publishing Overview
    course would count as one of the core
    requirements for the MA in Publishing and
    Writing, and will be offered every
    semester.
    All other classes count as electives for the
    current MA program and are offered
    every other semester.
    Advance your career with our
    online Digital Content
    Management graduate certificate.
    You’ll learn what it takes to
    successfully create, analyze, and
    manage content for companies of
    any scale, from small startups to
    established corporations. Our 16-
    credit certificate program is
    designed to help professionals
    looking to learn new skills to stay
    competitive in content creation
    and strategy in today’s market.

    View Slide

  27. DIGITAL CONTENT MANAGEMENT
    Writing, Literature & Publishing
    Advance your career with our
    online Digital Content
    Management graduate certificate.
    You’ll learn what it takes to
    successfully create, analyze, and
    manage content for companies of
    any scale, from small startups to
    established corporations. Our 16-
    credit certificate program is
    designed to help professionals
    looking to learn new skills to stay
    competitive in content creation
    and strategy in today’s market.
    REQUIRED COURSES
    • Metadata
    • Fundamentals Of Content Strategy
    • Electronic Publishing Overview
    • Elective
    TURN YOUR CERTIFICATE INTO A
    MASTER'S DEGREE
    The Electronic Publishing Overview
    course would count as one of the core
    requirements for the MA in Publishing and
    Writing, and will be offered every
    semester.
    All other classes count as electives for the
    current MA program and are offered
    every other semester.

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. White Space

    View Slide

  32. Guides the eye

    View Slide

  33. View Slide

  34. View Slide

  35. Typography

    View Slide

  36. – Oliver Reichenstein, The Web is All About Typography. Period.
    Web Design is 95%
    Typography.

    View Slide

  37. Choosing fonts

    View Slide

  38. Tone

    View Slide

  39. Legibility

    View Slide

  40. Steal Pairings

    View Slide

  41. Size

    View Slide

  42. 16-22px
    body fonts

    View Slide

  43. Line-height

    View Slide

  44. 1.4-1.6
    × font-size

    View Slide

  45. WordPress started in 2003 with a single bit of code to enhance the
    typography of everyday writing and with fewer users than you can
    count on your fingers and toes. Since then it has grown to be the
    largest self-hosted blogging tool in the world, used on millions of
    sites and seen by tens of millions of people every day.
    WordPress started in 2003 with a single bit of code to enhance the
    typography of everyday writing and with fewer users than you can
    count on your fingers and toes. Since then it has grown to be the
    largest self-hosted blogging tool in the world, used on millions of
    sites and seen by tens of millions of people every day.

    View Slide

  46. WordPress started in 2003 with a single bit of code to enhance the
    typography of everyday writing and with fewer users than you can
    count on your fingers and toes. Since then it has grown to be the
    largest self-hosted blogging tool in the world, used on millions of
    sites and seen by tens of millions of people every day.
    WordPress started in 2003 with a single bit of code to enhance the
    typography of everyday writing and with fewer users than you can
    count on your fingers and toes. Since then it has grown to be the
    largest self-hosted blogging tool in the world, used on millions of
    sites and seen by tens of millions of people every day.

    View Slide

  47. Line-length

    View Slide

  48. 50-75
    characters per line

    View Slide

  49. WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing
    and with fewer users than you can count on your fingers and toes. Since then it has grown to be the
    largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions
    of people every day.
    Everything you see here, from the documentation to the code itself, was created by and for the
    community. WordPress is an Open Source project, which means there are hundreds of people all
    over the world working on it. (More than most commercial platforms.) It also means you are free to
    use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license
    fee and a number of other important freedoms.
    About WordPress.org
    On this site you can download and install a software script called WordPress. To do this you need a
    web host who meets the minimum requirements and a little time. WordPress is completely
    customizable and can be used for almost anything. There is also a service called WordPress.com
    which lets you get started with a new and free WordPress-based blog in seconds, but varies in
    several ways and is less flexible than the WordPress you download and install yourself.
    What You Can Use WordPress For
    WordPress started as just a blogging system, but has evolved to be used as full content
    management system and so much more through the thousands of plugins and widgets and themes,
    WordPress is limited only by your imagination. (And tech chops.)
    Connect with the Community
    In addition to online resources like the forums and mailing lists a great way to get involved with

    View Slide

  50. WordPress started in 2003 with a single bit of code to enhance the
    typography of everyday writing and with fewer users than you can
    count on your fingers and toes. Since then it has grown to be the
    largest self-hosted blogging tool in the world, used on millions of
    sites and seen by tens of millions of people every day.
    Everything you see here, from the documentation to the code itself,
    was created by and for the community. WordPress is an Open Source
    project, which means there are hundreds of people all over the world
    working on it. (More than most commercial platforms.) It also means
    you are free to use it for anything from your recipe site to a Fortune
    500 web site without paying anyone a license fee and a number of
    other important freedoms.
    About WordPress.org
    On this site you can download and install a software script called
    WordPress. To do this you need a web host who meets the minimum
    requirements and a little time. WordPress is completely
    customizable and can be used for almost anything. There is also a
    service called WordPress.com which lets you get started with a new
    and free WordPress-based blog in seconds, but varies in several
    ways and is less flexible than the WordPress you download and
    install yourself.

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. Color

    View Slide

  55. Color increases brand
    recognition by up to
    80 percent.
    http://loyaltysquare.com/impact_of_color.php
    Impact of Color

    View Slide

  56. Making a Palette

    View Slide

  57. What emotions do you
    want associated with 

    your design?

    View Slide

  58. Balance your colors

    View Slide

  59. Don’t use black

    View Slide

  60. View Slide

  61. View Slide

  62. Hierarchy

    View Slide

  63. – Brandon Jones, Understanding Visual Hierarchy in Web Design
    Good visual hierarchy isn’t
    about wild and crazy graphics
    or the newest photoshop filters,
    it’s about organizing
    information in a way that’s
    usable, accessible, and logical
    to the everyday site visitor.

    View Slide

  64. Defines your site in
    order of importance

    View Slide

  65. View Slide

  66. View Slide

  67. What are some
    industry trends?

    View Slide

  68. Trends are just tools.

    View Slide

  69. Immersive
    Experiences

    View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. Design that
    looks like print

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. Illustration

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. 3D and
    Dimension

    View Slide

  88. View Slide

  89. View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. Vivid Colors
    and Gradients

    View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. Shapes and
    Geometry

    View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. Texture and
    Patterns

    View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. How to put this
    all together?

    View Slide

  112. Design
    Systems

    View Slide

  113. – InVision Design Systems Handbook
    A design system is a
    collection of reusable
    components, guided by clear
    standards, that can be
    assembled together to build
    any number of applications.

    View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. Why use a
    design system?

    View Slide

  118. – John Maeda, #DesignInTech newsletter
    When a technology matures, design
    moves to the foreground because the
    underlying machinery has been
    commoditized. We're living in an era
    where there's massive design debt all
    over the tech industry, but there aren't
    enough computational designers
    available to fill the gaps.

    View Slide

  119. Common visual
    language

    View Slide

  120. Standardized
    components

    View Slide

  121. Design faster

    View Slide

  122. Improves
    development
    workflow

    View Slide

  123. Unified across
    products, devices,
    and all branding
    elements

    View Slide

  124. Examples

    View Slide

  125. View Slide

  126. View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. View Slide

  131. View Slide

  132. View Slide

  133. More
    Examples
    https://www.invisionapp.com/inside-
    design/guide-to-design-systems
    https://www.designsystems.com
    https://designsystemsrepo.com

    View Slide

  134. Thank you!
    choycedesign.com @melchoyce
    https://choycedesign.com/emerson-resources/

    View Slide