Design
Desiiiiign
What to do...
On this page I want to write about the following subjects:
- Designing in the browser
- Content first approach (or is this workflow?)
- Designing with style guides and patterns
- The mathematical aspect of design, using grids and modular scaling
Interesting Articles
- Atomic Design
- Element Collages
- Hack Smart Objects to Create Dynamic Sprites
- Style Tiles
- Webdesigners Checklist
- Responsive Deliverables
Style Guides
Examples
- Adele (A collection by UXPin)
- Design Guidelines (A collection)
- A List Apart
- Code for America
- FontShop
- MailChimp
- Nachos by Trello
- Photon Design System
- Voice and Tone by MailChimp
- YouTube
Projects
- Astrum
- Atomic Docs
- Barebones
- Design Manual
- Infusion
- Fractal
- Kalei Styleguide
- kss-node
- Lona
- Material Design
- Modulr
- Nucleus
- Pattern Lab
- SC5 Styleguide
- Stencil The magical, reusable web component compiler
- Styledecco
- Styleguide
- Style Guide Guide
- Stylify Me
- Symbols and Styleguides
Articles
- Using Handlebars.js Templates in the LivingStyleGuide by hagenburger
- Styleguide driven development by Envato
- Style Guide Best Practices by Brad Frost
(still have to process this info :P)
- Pattern Primer / preview?
- Style Guide Boilerplate
- Pears - not active anymore?
- Rock Hammer - article
- Responsive Patterns
- Designer Theme Style Guide
Animation
- Bodymoovin - After effects to html library.
- Dynamics.js - JavaScript library to create physics-based animations
- Flubber - Tools for smoother shape animations.
- Keyshapes - Create animated vector graphics.
Atomic Design
- Pattern Lab Create atomic design systems
- Brad Frost: Atomic Design (Webdagene 2014) on Vimeo
- Carbon Design systems
Facebook images
Modular scale
- Modular scale - example
- Composing the new canon
- More meaningful typography
- Building Sparkbox
- Gridlover The tool to establish a typographic system with modular scale and vertical rhythm.
Typography
Misc.
- Coolhue - Handpicked gradient hues
- Design Resources - Select websites, tools, assets, and readings for working in and learning about design
- Inclusive Components - A blog trying to be a pattern library
- Stencil - Magical, reusable web component generator