Designers and developers often have similar goals but separate concerns. The workflow solution here is simple — prior to sending the design to the coding phase, take some time to carefully review it.
You don’t necessarily need to document your entire design (although some dev. teams will require this), but taking care to make sure the margins, paddings, typography and colors are exactly how you want them is crucial.
We will briefly instance the 13 ‘Golden’ rules of consistent design that emerged for our company last few years.
1. Don’t ignore the guidelines
There is no special need to make the life or users and developers who are already get used to OS logic and standards more difficult.
2. Use the proper scaling
- Keep the ratio of each space and elements to @3x for iOS interfaces. For this purpose it’s recommended to work with 6px grid.
- For Android interfaces — respect the multiplicity of all distances and elements up to XXXHdpi. For this purpose it’s recommended to work with 12px grid.
3. Provide ample spacing for interactive elements
Apple recommends to maintain a minimum tappable area of at least 44px x 44px for all controls.
The size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.
MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 45 – 57 pixels, which is wider than what most mobile guidelines suggest. Your turn.
4. Don’t forget the Thumb Rule
Historically, the mobile applications should be controllable just by the thumb of the hand holding the phone. Nowadays it’s hard to maintain on large devices but shouldn’t be forgotten.
5. Never make the font size too small
Ensure primary content is clear at its default size especially while using custom fonts.
6. Limit the unlimited
Do not overuse the number of interface colors and fonts.
Typically, to create a consistent design theme, 3—5 colors are fair enough. It is also not necessary to abuse with lot’s of different typefaces and font sizes.
Four basic font sizes should be enough for most cases:
- content text,
- additional small text.
7. Demonstrate a neat screen grid to speed up the markup
It will be best for dev. team to look at Zeplin project to see and understand the fonts, colors, and sizes of the elements, as well as margins & paddings between them.
Don’t forget to remove unnecessary guides if you’re using smth. different.
8. Be sure to provide all actionable screens
Never forget about the error state, additional search boxes, filtering, photo editing, and more. Make sure that you have the explanation to any interactive element and interface behavior.
9. Provide the screenflow
The best user experience design starts mapping out the content and building user flows. The sketches bring those flows to life with more detail around layout and structure. Finally, a screen navigation scheme helps you bring the logic behind to the developers.
10. Keep the PSD & Sketch sources clean
Teach yourself to sort out everything neatly into folders, while avoiding deep hierarchies and hidden folders within folders. Name the layers, and do not lose the elements arrangement logic.
Forget about the ‘Screen 3.7 – new, ver nov 16’ kinda naming.
For example, if the button is made up of an icon and a caption, they should be combined into a folder Button. Menu, which consists of a pair of buttons becomes a group Menu. Background of several layers — the Background folder.
Check that all interactive elements are provided respectively with the required states (default, active, hover, etc.).
Mark the most important elements or action items with colors in the Layers panel. Nevertheless, it’s rather not necessary to color everything in a row, otherwise your source file turns into a rainbow, which will be difficult to focus on and find the required interface details.
If you are using layer overlapping effects, the best practice will be to group them or put to Photoshop smart objects. Different Photoshop versions, and especially other software can play against you and won’t display those effects.
Every time you lock a layer,
God kills a kitten.
11. Always show the animation
Demonstrate the interface animation effects, if it is required by your design concept.
12. Attach all the appstores icon sizes
Provide an archive with all the possible app and appstore icon sizes.
13. Stop using non SVG icons
Just stop using rasters. It’s 21st century. You do need scaling, styling, embedding, and even dynamic server generation, man.
Be sure to strip the unnecessary SVG metadata out.