Skip to content

Session 8: Branding and design systems

Juliette Cezzar edited this page Mar 5, 2019 · 8 revisions

Session 8: Branding and design systems slides

Objective: Appreciate and articulate the importance of brand identity and design systems in the making of digital products

Lecture:

Lecture:

  • Whats the difference between a brand and a logo?

  • Brand can almost be described as character, as how a company behaves

  • The visual is what matches that behavior

  • A brief history of logos and authenticity

  • Everything based on consistency: same each time, can be authenticated

  • Modern logos

  • Talking through the Nike logo

    • Authenticity at play: you can’t copyright clothing design
    • Thinking about how much money goes into making that symbol recognizable
    • Looking at Apple logo
  • Modern era is also era of design manuals, because it’s always been more than the logo

    • This is the work product of branding agencies and consultancies
    • Remember that design really means making hundreds of interrelated decisions
    • All of this work has to be redone periodically because they are also in relationship to the brand environment out there
    • A lot of this work is preceded by non-visual research and process that has its own value
  • Maintenance

    • Maintenance is hard
    • The user/viewer wants and needs consistency but humans get bored and break shit
  • Difference

    • Difference is hard
    • Back to Medium vs Osar
    • Everyone using the same tools and responding to the same environment and going after the same users
  • What is a design system?

    • Some disagreement on this: for a lot of designers, it’s a bunch of shared components
    • For product designers, it’s really everything, and especially it’s a framework for making future decisions rather than deciding each one ahead of time
  • Looking at some design systems

    • duolingo
    • trello
    • US Web Design System
  • Now for the practical part

  • Here’s where I talk to you about when it’s time to hire a designer and who to hire

    • Design is not too different from, say, doing your taxes
    • At a certain scale you can do it alone, or do it with a little assistance or feedback
      • Freely available design systems
      • Relying on software
      • Always looking, looking, looking, adjusting
    • Once you’re at another scale, you can’t, and it’s not worth your time
    • No, you can’t start with a graphic design student, or get some kind of logo on Fiverr
    • Best case scenario is that you have a designer-partner from the get-go
    • But if not: start with someone on your same level, but part-time
    • Then move up to that person full-time
    • Then have them hire and supervise subspecialties under them as the business expands
  • What your designer(s) need to know

    • No, they don’t need “five years of experience in product design”
    • They need to be able to actively listen, they need to be able to prototype fast, they need to be able to communicate, they need to be able to receive and process feedback and cycle again
    • Software’s going to change, market’s going to change, everything’s going to change
    • They need to be able to tear down and start over, over and over again
    • They need to be as comfortable as your Chief Compliance Officer would be in telling you that what you are doing is wrong
    • You hire the designer for their eyes, not their hands – and no, they are not your gloves
  • A final word

    • Again: you are responsible for the design, everyone is responsible
    • The design is everything, and the design does more than just sell your product
    • Develop either taste or trust or both when working with designers
  • How to keep going

    • Go take HCI and Values at Play
    • Read some of the resources on the GitHub in greater detail
    • Go to conferences like Clarity and An Event Apart that focus on systems and accessibility
    • Look at every little thing and always be asking why is it like that, why does it look like that

Homework (by Thursday March 7):

  • Copy this checklist into a new google doc: http://bit.ly/2HAhC0B
  • Find a user flow in the artifact sheet you want to review
  • Highlight the project’s link in yellow
  • Complete the checklist
  • Upload it into the designated spot in the artifact sheet under the reviewed student’s name

Then (by Tuesday March 12):

  • Do the checklist yourself for your own flow, post it
  • Revise your prototype according to the checklist
  • Create a mini style guide within your Figma document, post it

That's it! You are done!

Other links:

https://blog.prototypr.io/official-sketchnotes-from-clarity-conference-2017-f3ecae9ff105

https://www.designbetter.co/design-systems-handbook/introducing-design-systems

https://github.com/alexpate/awesome-design-systems

https://www.canva.com/learn/50-meticulous-style-guides-every-startup-see-launching/

https://design.google/library/designing-span-2017/ https://www.subtraction.com/2018/02/15/how-to-redesign-a-tech-logo/