8/8/2013 - 9:41 PM

This is a First Draft of the interaction design standards. It sets expectations and standards for best practices when designing and building

This is a First Draft of the interaction design standards. It sets expectations and standards for best practices when designing and building digital products.

  1. Design in a continuous production ready state. This is done by adhering to the column layout provided or agreed upon by the team. All wireframes, comps and prototypes will use this column layout. It is CRITICAL that ALL team members evaluate the products goals for presenting information to a user, agree on the best column layout and adhere to that layout through out the project. This will allow all team members to work parallel to each other and collaborate with a common knowledge of the design’s foundation and how it with be achieved.

  2. Layers are organized with a logical semantic naming convention. This is so anyone can read, navigate and work off of your design. A good practice is to confer with your UX Designer and agree to names that he will in turn use in his CSS.

  3. Child elements are grouped with in a parent element the same way a CSS parent class has nested child elements. This will maintain a module based layer structure. It will allow certain views and design elements to be moved, arranged and toggled off/on easily.

  4. Design with shape layers and vector masks. DO NOT RASTERIZE ANYTHING! Rasterizing something means you can never change it or resize it. With UI design elements that is a HUGE no no. It also adds CONSIDERABLE weight to your file size.

  5. Smart objects are never to be used on user interface design elements. They are to only be used on photograph images. Smart objects add weight to your file size. They do not adhere to the pixel grid, only their containing bounding box does. You can not extract an accurate size from them for production. JUST DO NOT DO IT. Photos that are placed and sized as exact height to width ratios of their source smart object are acceptable, but do so while being cautious of your file size.

  6. You should NEVER have a smart object placed inside another smart object. Smart objects with UI designs are a bad idea. Smart objects inside another smart object are even worse. This is not the movie Inception. No one wants to go on an easter egg hunt to find graphics that you have buried multiple levels deep in your file.

  7. Use a vector mask if you ever have to mask a layer. Do NOT use a clipping mask. Vector is lighter and you can adhere it to one layer at a time. If you have to move that layer you can do so without changing what is masked.

  8. BE PIXEL PERFECT. SNAP TO THE PIXEL GRID. You should ALWAYS snap your design elements to the pixel grid. Their is no such thing as a 1/2 pixel. Objects that are sized for example to be 10.678993px wide will antialias and produce a pixelated appearance once you export that graphic for a prototype.

  9. Use even number widths and heights when designing at @2x. When you are designing with @2x graphics you must anticipate that you will export @1x versions of those graphics as well. If you size something to be 13px tall in a @2x design you will get a 6.5px tall @1x version of that graphic.