際際滷

際際滷Share a Scribd company logo

Design and Development

C
cmeador

The document discusses some problems with traditional design processes and tools being tailored for static outputs. It suggests that designers communicate exclusively with business teams while developers are left holding technical debt. As a solution, it recommends modular design with 80% completeness and separate layouts from style elements. It also advises requesting a style guide that defines colors, typography, states, buttons and icons to improve handoffs between designers and developers.

Convert to study materialsBETA

Transform any presentation into ready-made study materialselect from outputs like summaries, definitions, and practice questions.

1 of 7
Design & Development
Some Problems Designers often are hired by and communicate exclusively with Business / Marketing team. Many designers come from print / agency background. Traditional design tools are tailored for static output. Dev team is generally much faster to create new features and often gets stuck holding design debt. Design to Developer Ratios are 10 - 1 at best.
Some Solutions
1. Modular Design No need for pixel perfect. 80% is ok! We are building dynamic machines, that can be viewed in varying levels of degradation. Keep your color button styles and other tag level items separate from your layouts. Ask for feature level design solutions. Stay modular!
2. Request a Web Style Guide Colors "primary, secondary, etc" naming conventions Typography Display font for h1 tags only, Arial for all data, tables, numbers... Color by State what does each color mean and when should it be used? (rest, hover, error, create, view) Button Styles What is the basic look of system buttons. (radius, shadow, by state, etc) Icons (left, right, up, down, ?, +)
Resources
Secret Weapons Font Squirrel - http://www.fontsquirrel.com/fontface/generator Colour Lovers - http://www.colourlovers.com/ Color Scheme Designer - http://colorschemedesigner.com/ HTML Ipsum - http://html-ipsum.com/ The Noun Project - http://thenounproject.com/ Lorem Pixel - http://lorempixel.com/ Subtle Patterns - http://subtlepatterns.com/

More Related Content

Design and Development

  • 2. Some Problems Designers often are hired by and communicate exclusively with Business / Marketing team. Many designers come from print / agency background. Traditional design tools are tailored for static output. Dev team is generally much faster to create new features and often gets stuck holding design debt. Design to Developer Ratios are 10 - 1 at best.
  • 4. 1. Modular Design No need for pixel perfect. 80% is ok! We are building dynamic machines, that can be viewed in varying levels of degradation. Keep your color button styles and other tag level items separate from your layouts. Ask for feature level design solutions. Stay modular!
  • 5. 2. Request a Web Style Guide Colors "primary, secondary, etc" naming conventions Typography Display font for h1 tags only, Arial for all data, tables, numbers... Color by State what does each color mean and when should it be used? (rest, hover, error, create, view) Button Styles What is the basic look of system buttons. (radius, shadow, by state, etc) Icons (left, right, up, down, ?, +)
  • 7. Secret Weapons Font Squirrel - http://www.fontsquirrel.com/fontface/generator Colour Lovers - http://www.colourlovers.com/ Color Scheme Designer - http://colorschemedesigner.com/ HTML Ipsum - http://html-ipsum.com/ The Noun Project - http://thenounproject.com/ Lorem Pixel - http://lorempixel.com/ Subtle Patterns - http://subtlepatterns.com/