DEVELOPER FIRST DESIGN:Make Design Great Again.

WordCamp Sacramento 2016Ozzy Rodriguez@OzzyR

Design

Development

Production

Source: dr-dre-anatomy.tumblr.com

Style Guides

ColorsTypographyDifferent variations of logos

Can be as detailed as you’d like!

Style Guides: Colors

Style Guides: Typography

Style Guides: Typography

Header (site title, description)Navigation menusDifferent buttonsBody contentBlockquotesCode blocks

Using a Grid

Source: www.reactiongifs.com/heartache/

Using a Grid

Using a Grid

How many columns?Gutters as a percentage of column width

Change them!

Images

Images

Images

Krista McPhee

How to Resize an Image Without Losing Quality

https://www.wpsitecare.com/how-to-resize-an-image/

Images: SVGs

Images: SVGs

DashiconsFont Awesome Ionicons Icomoon

CREATE YOUR OWNFontelloFantastic.Me

Images: SVGs

Design, Development & Content

Action Based Design

Action Based Design

Design for touch-only devicesDesign for Accessibility

DEVELOPER FIRST DESIGN:Make Design Great Again.

WordCamp Sacramento 2016Ozzy Rodriguez@OzzyR