Skip to content

Instantly share code, notes, and snippets.

@JackHowa

JackHowa/StorybookNotes-fem.md

Created March 15, 2020 21:44
Show Gist options
  • Save JackHowa/7b6b3e3d4871de586ae892f0a800e421 to your computer and use it in GitHub Desktop.
Save JackHowa/7b6b3e3d4871de586ae892f0a800e421 to your computer and use it in GitHub Desktop.
Download ZIP
from Frontend Masters Storybook course ideas
Raw
StorybookNotes-fem.md

Design system

Pillars

  • style guide
  • foundation
  • ui kit
    • buttons
    • text fields

Tech

build into component library

  • Meet devs where they are with tech

Style guide

  • storybook
  • gatsby
  • invision

documentation for designers

Build system

  • Define principles
    • how do you want users to feel?
    • you may have to say no
    • atlassian: bold optimistic and practical
  • ui audit
    • compile all components
    • group these components by functionality
    • take screenshots of ones that exist
    • group by functionality
    • don't group by appearance
    • think of priority: what's highest impact, easily achievable
  • prioritizing
    • make survey
    • does this request embody our design principles
    • have all dept take survey?
    • is this going to require a lot of design or development effort
    • high risk to success of our product?
    • is this going to improve the lifes of our users
    • are we confident in this decision?
    • is this technologically feasible?
  • turn into impact
    • adoption metrics
      • impact + identity + confident = individual adopter total
      • invididual adopter total / # adopter questions = individual adopter
      • get xy value
      • want something that's really impactful and not risky
      • basically a swat graph
      • strong adopter and strong opposer
      • accordions would be high risk in terms of accessibility, potentially low impact
      • whereas the buy button is low-risk, high reward
    • opposition metrics
    • there will be a lot of stakeholders who question decisions
  • design checklist
    • accessibility
    • interaction
    • context
    • completion - states
    • content
      • talk to content editor
    • customization
      • change colors
      • different themes under different brand identity
    • screen resolution
      • resize browser or on mobile device
  • development checklist
    • browser compat
      • polyfill
    • error handling
      • ts handle props
  • common mistakes
    • starting for scale
      • don't try to code for every situation
      • only scale when you need to
    • educate before building
      • don't make it just theory
      • have something to discuss before talking theory with staekholder
    • figure out what are nice-to-haves vs required

Design

  • color

  • two different types of color mixing

    • additive color mixing
      • colors start black and become white
    • substractive color mixing
      • colors start white and include
      • this is for printing

  • primary colors

    • colors which cannot be created by combining other colors
    • red, yellow, blue

  • secondary

    • results from mixing two primary colors

  • tertiary colors

    • created by combing a secondary color with a primary

  • color palettes

    • monochromatic
      • variations on a shade of a single color
      • safe choice
      • can be good for resumes
    • complementary
      • balance colors out
    • analogous
      • select three colors on the same side
    • triadic
      • less common
      • select three colors evenly-spaced around color

  • terminology

    • hue
      • any color on the color wheel
    • saturation
      • intensity or purity of color
    • luminscence
      • brightness
    • shade
      • incorporate black into color
    • tint
      • add white into color
    • tone
      • create black or white with a base hue
      • good for hover states

psych of colors

  • red
    • fire, violence
    • can raise blood pressure
    • use sparingly
  • orange
    • vibrant, energetic
  • yellow
    • happiness, sunshine
    • cowardice, deceit
      • use nice shade if use lots
  • green
    • renewal, growth
    • calming, like blue
    • lot of financial apps duh
  • blue
    • sadness, calmness
    • reliability, peace
    • fb would want to calm if it's safe with them
  • purple
    • luxury, royalty
    • quirky
  • black
    • power, elegance, formality
    • evil death
  • white
    • purity
    • cleanliness, virtue
    • modern
  • gray
    • can moody
    • formal, modern
  • brown
    • dependenability
    • reliability, earthiness

Color values

  • hex
    • base 16 representation of value
    • hexadecimal, base16
  • rgb
    • additive color mixing
    • create colors by mixing r g and b
  • rgba
    • alpha is opacity of each pixel
  • cymk
    • subtractive color mixing model
    • used in print design

Creating a color palette

Typography

  • Ascender

    • peice of letter above line

  • descender

    • letter below

  • baseline and capline, normal upper and lower line

  • tracking

    • spacing between characters
    • loose to tighter

  • kerning

    • horizontal spacing between two characters

  • leading

    • "leeding" (pronounced)
    • tight or loose
    • vertical space between baseline to baseline
    • like double space

  • serif

    • times new roman
    • short lines or strokes on he open end
    • traditional

  • sans-serif

    • don't have lines on the ends of letters
    • helvetica, pt sans
    • more modern

  • monospaced

    • letters and characters occupy same amount of space

Measurements

https://type-scale.com/ https://fonts.google.com/specimen/Prompt?query=Prompt&sidebar.open&selection.family=Prompt:ital,wght@0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600 https://type-scale.com/?size=16&scale=1.618&text=A%20Visual%20Type%20Scale&font=Prompt&fontweight=400&bodyfont=Poppins&bodyfontweight=400&lineheight=1.65&backgroundcolor=white&fontcolor=%23333&preview=false

  • Question: how to change font size after adjusting type scale

UI

Buttons

  • Should look and function like buttons
  • ghost buttons have no background fill, only outline
  • filled buttons are good primary buttons
  • squared edges may be better for drawing the eyes
  • icon buttons should at least have an aria label
  • border radius
    • more playful if curved
    • think back to your brand identity
    • if something more professional, might want to stick with square
  • drop shadow
    • gives elevation
    • scott tolinski styled components course has design system for elevation
    • on hover and focus
  • labels
    • title case easier to read
    • need to have accessibility
    • wickag (wcag) contrast of text
    • make sure the font label is thick enough
    • if you turned off color contrast
  • vertical padding
    • make sure the label has enough padding or width and height
    • multiple of 4 for padding
    • works well
  • horizontal padding
    • min width is your friend

Typically your default state color will be the X-300 value, hover/focus can be X-400 or X-200. 100 is typically lighter, 500 - darker

Make a component

  • Atomic design brad frost

  • composite component

  • make group

  • then make component on right-click

  • use effect

    • then click sun icon to make colors

  • Match brand identity with colors

  • https://undraw.co/illustrations

  • Remember to vertically center using the three lines in top right after selecting the whole group

Design system

  • could use external stylesheet
  • style tag in the head of the document
  • could also use inline css
  • problems:
    • specificity
    • mathemtical equation of how applied
    • type selectors and pseudo elements
    • class selectors, pseudo-classes
    • styles can become decentralized and hard to remove or update
  • css naming architectures
    • like bem to superficially scope elements
    • simply a naming convention
  • pre-processors
    • sass or less
    • nesting
    • & to modifier
    • mixins and more control
    • functions that can be applied to styles
  • css-in-js
    • scopes styling to the components themselves
    • now just write css inside of react components
    • when components are parsed, css is generated and attached to the dom

component lib

  • mono repo like lerna

  • create react library but doesn't work well with styled components

  • cra would not be a good idea in prod here

  • npx don't have to have cra globally installed

  • hide visually https://github.com/styled-components/polished

    • little tool for styled components

  • use theme provider for styled components

    • can pass in args to the styled components
    • modifiers can also be helpful here

  • aria hidden = true, if the illustration doesn't add anything

  • svg

    • Using svg as src if you don't want modification
    • render as inline svg for changing the color

perceived perf

  • delight users
  • microinteractions
  • can update users about the status of a task
  • can be used to show state change
  • create habits
  • tips:
    • animations should be accessible
    • relatability feel as though they're part of the real world
  • react-spring is a physics based library
  • perf, never make a user wait
    • don't show an animation just to show one

react spring

storybook

  • npx -p @storybook/cli sb init

  • audience:

    • can be used for pms
    • devs

  • generate docs

  • addons have other capabilities

  • npm i @storybook/preset-create-react-app

  • mdx write documentation with jsx

  • need the mdx addons in step 3

  • can add preview.js for different backgrounds

  • those parameters could be good for stubbing fusion stuff

  • storybook addon knobs

  • @storybook/addon-knobs

  • add to main.js whenever there's a new addon

  • decorator is where knobs are imported

  • inside of preview.js, importand add withKNobs as a decorator

  • need to stop and restart whenever there's a new knob

  • tell the knob what you want this to be changed as

  • @storybook/addon-a11y with ally from storybook addons

  • automated decorator with ally1 in the preview js

  • remember to stop and restart the storybook if you see an error

  • preview.js is where the decorators go

  • check if you have any violations

  • lot of aria attributes

  • easy tool for visually checking accessibility

    • not the only tool for accessibility

  • customize storybook so it looks like your brand

  • manager.js file in storybook

  • import themeing for storybook to make your storybook look custom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment