Designing for Developers

How I Learned to Stop Worrying and Love the Web

Abilities

Browsers

Screens

Internet Connectivity

The best designs are resilient to these differences and friendly to the developers who translate them into code.

Design through implementation

  1. Requirements gathering
  2. Content gathering
  3. Style Guide
  4. Design Comps
  5. Coding

Web Redesign Project

Potential Sites for Redesign

Homework (due feb 15)

  1. Choose from potential sites to be redesigned
    1. Read Markdown Cheatsheet
    2. Add short paragraph to ReadMe describing accessed needs
    3. Start to compile content, images, text, inspiration
  2. First draft of 1-page style guide for redesign
    1. Choose font pair
    2. Create 3 or more icons
    3. Color Palette
    4. Modules
      1. Buttons/Links
      2. Inputs
      3. Dropdown
    5. Optional!
      1. logo
      2. favicon

Today is Activity-ful!

  • Markdown
  • Typography
  • Icons
  • Modules

README.MD

Markdown is a writing format that converts to HTML.

Interactive Markdown Tutorial

http://markdowntutorial.com/

Killing two birds with one stone

DEMO:

https://github.com/brigittewarner/brigittewarner.github.io/edit/master/about.md

  • Gather requirements for redesign
  • Learn Markdown

Styleguides

Consistency + Scalability

Firefox Styleguide

https://www.mozilla.org/en-US/styleguide/websites/sandstone/

 

  • Buttons
  • Colors
  • Grids
  • Typefaces
  • Etc.

Color Palattes

  • Brand Colors
  • State Colors
  • Utility Colors
    • Type
    • Links
    • Borders

Avoid
Common

Pitfalls

Limits of CSS

Opacity/Transparency

div {
    opacity: 0.5;
}

div {
    background-color: rgba(255,0,0,0.3);
}

Gradients*

https://css-tricks.com/css3-gradients/

Developers will look at a comp and grab the hex because it's easier than using rgba.

Opacities will be applied to everything contained in div, not just the background color/image

*They are inconsistently supported across browsers

Typography for the Web

Favorite Examples?

Slack 'em to me!

What is CSS capable of doing with type?

  • Drop Caps (using spans)
  • Font Styles (italic)
  • Font Weight (bold)
  • Font Sizes (em, px, %, viewport-sized) 
  • Kerning (letter-spacing)
  • Case (text-tranform, font variant)
  • Hover effects
  • Importing fonts

A Few Best Practices

Typography Activity

http://www.kaikkonendesign.fi/typography/

ICONS

Vector vs. Raster

Vectors are great for

  • Great for logos, shapes, and illustrations.
  • Use much less data than a raster image.
  • Scale to any resolution.
  • Print nicely.

 

but not great for

  • photos

SVGs

  • Scale beautifully
  • Need multiple svg icons to change colors when hovering
  • Can be accomplished with CSS techniques such as image replacement

Font

Don't scale as well

More easily accomplished with CSS techniques

Create Icons Activity

https://icomoon.io/app/#/select

  1. Create one or more icons using Illustrator
    1. Belong to an existing set or to reimagine a tired icon such as the floppy disc for save, the funnel for filtering, or the hamburger for menu
    2. .svgs
  2. Import icon(s) to IcoMoon App 
  3. Export as a Font

Modules

Reading + Class Discussion

http://alistapart.com/article/language-of-modular-design

Modules

  • Screensize
  • States
    • Hovering
    • Focused
    • Success/Error
  • Affordance
    • How flat?
    • Drop shadows?
  • Click Area
    • Mouse vs. Touch Screen

Questions?

Clarifications?

Homework (due feb 15)

  1. Choose from potential sites to be redesigned
    1. Read Markdown Cheatsheet
    2. Add short paragraph to ReadMe describing accessed needs
    3. Start to compile content, images, text, inspiration
  2. First draft of style guide for redesign
    1. Choose font pair
    2. Create 3 or more icons
    3. Color Palette
    4. Modules
      1. Buttons/Links
      2. Inputs
      3. Dropdown
    5. Optional!
      1. logo
      2. favicon

Designing for Developers

By brigittewarner

Made with Slides.com

Designing for Developers

  • 1,265

More from brigittewarner