Design is a sore point for me so I am trying to get a bit better.
Here are notes from Sarah Drasner’s Design workshop.
- Layout (Slides)
- Balance: Break symmetry to do call to action
- Shape: Use circles and other shapes to draw the eye. Remember to put circles a little “outside of lines”. Diagonals are dynamic.
- Scale: Scale an image and put it in background to make even a boring table interesting.
- Grid: Practice drawing anchor lines on things. Use CSS Grid/Flexbox.
- Also: Know when to break lines/grid, eg using
clip-path
andshape-outside
. Clippy CSS clip-path maker, Handy guide to CSS/SVG masks (and when to use them) - Book recommendation: Making and Breaking the Grid
- Inspiration: https://gridbyexample.com/patterns/
- Tools: PS, Illustrator, Sketch.
- Color (Slides)
- Types of Combinations:
- Monochromatic (clean, elegant eg shades of red, or gray)
- Analogous (more dynamic, neighbor colors eg red and violet)
- Complementary (cool vs warm color, eg blue and orange)
- Triadic (3 equal spaced colors, vibrant, rich, eg red, blue, yellow)
- Duotone (good for shadows)
- HSLA is best
- Check a11y contrast:
- http://jxnblk.com/colorable/demos/text/
- http://accessible-colors.com/
- http://www.brandwood.com/a11y/
- Process
- Anchoring
- Get your greys
- Gather accents
- Color picker tools
- Kuler color.adobe.com
- Coolors
- Paletton
- Palettab
- UI Gradients
- Cool Backgrounds
- Web Gradients
- CSS Gradient
- Gradient Animator
- Adobe Capture - take a “mood” on phone
- CSS Named colors game
- https://cloudflare.design/color
- Inspiration
- https://dribbble.com/uixninja
- Dribble - steal palette or search by color
- More info
- https://medium.com/@JustinMezzell/how-i-work-with-color-8439c98ae5ed
- https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
- https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/)
- Types of Combinations:
- Typography (Slides)
- Terminology
- serif vs sans serif
- proportional vs monospaced
- kerning (
letter-spacing: 0.03em;
) & leading (space between baselines e.g.line-height: 1.4; vertical-align: baseline;
) - Widows and Orphans
- Ligatures
- Pair fonts
- One display or serif
- One sans-serif
- Your reader is different from you:
- shorter attn span
- lower interest in topic
- persuadable by other opinions
- doesnt share same goals as you
- Other rules
- line length 45-90 chars
- line height should respect “typographic color” (how does it look blurred?)
- Perf:
- https://www.zachleat.com/web/five-whys/
- https://github.com/Munter/subfont
- Tools:
- Picking fonts
- Free: https://fonts.google.com/
- Free: https://www.fontsquirrel.com/
- Spendier: Fonts.ocm, Hoefler&Co
- Pairing fonts
- manually https://fonts.google.com/
- AI: https://fontjoy.com/
- Responsive/Fluid Typography
- https://twitter.com/MikeRiethmuller
- Picking fonts
- More info
- https://typographyforlawyers.com/
- Typography terms cheatsheet: https://crmrkt.com/MNdAPQ
- Terminology
- Inspiration (Slides)
- http://give-n-go.co/ Dribble shots coded up
- Shutterstock UI kits off the shelf
- Codepen Design Patterns
- Codrops
- Images (Slides)
- Free
- Unsplash
- Google Image
- Freepik
- freeimages
- pexels
- Lowcost
- creative market
- adobe stock
- Costly
- shutterstock
- istockphoto
- different ways to do images
- img tag
- bg source
- inline svg
- sprites
- full page bg img https://css-tricks.com/perfect-full-page-background-image/
- svg tricks
- Scaling svg: preserveaspectratio = none
- Tools
- https://tinyjpg.com/
- https://tinypng.com/
- webpack plugins
- https://jakearchibald.github.io/svgomg/
- https://codepen.io/shshaw/full/LVKEdv
- Free
- Prototyping (Slides)
- Use Loaders to reduce perceived wait
- Feature reqs/user stories: as (specific user) I expect that _(the task) so that _(expected outcome)_
- Storyboard/story map
- Make End to end website flows
- Drawing thumbnails
- Storyboarding
- Low-fi prototypes with just gray things like this
- High-fi prototype that works
- Screenshot and abs position things
- Motion: Transforms
Animation:
- http://animista.net
- https://daneden.github.io/animate.css/
- http://tobiasahlin.com/spinkit/
- http://www.transformicons.com/docs.html
- https://github.com/thedevelobear/react-rewards
Design inspo
- https://tympanus.net/Development/DraggableDualViewSlideshow/
Bonus toys
- https://leaverou.github.io/css3patterns/
- burgers https://march08.github.io/animated-burgers/
Blessed fonts
- https://github.com/rsms/inter