Previous
¶ Design Production
¶ What it is
The stage in which designers create each screen during the product design process, emphasising aesthetics or style, is known as user interface design or design production. During design production, designers will focus on creating all the necessary pages/screens and building components, micro-interactions, UI animations, and design documentation.
¶ Why it is useful
The user interface and documentation designers create during design production will be the main reference for developers. It’s also the outcome of the design which helps get more concrete feedback from stakeholders.
¶ When to use it
Design production is usually conducted after wireframes, and art direction is confirmed. Once the high-level layout, interaction, and art direction are decided, the change requests from stakeholders will be significantly reduced. This is the perfect time to focus on the details.
¶ How is it done
- Work on the user interface screen by screen.
- Create new components when needed.
- Design different states for components.
- Provide other assets that the developer needs.
- Design UI animations and transitions and document the animation parameters such as duration and easing.
- Sound design files
- Graphic and image assets
- App icon, favicon, assets for App Store
- Accessibility guidelines
- Create documentation for your design file for a smooth handover to the development team.
¶ Do's & Don't
Do's
- Pay attention to details during design production.
- Provide developers with as many details as possible to fully understand your intentions.
- Try to reuse styles and components from the design system as much as possible.
- If you are not working with a design system, create styles and components, then try to reuse them.
Don't
- Don’t assume front-end developers understand your intentions.
¶ Tools needed
- Figma
- Adobe Creative Suite
¶ Example
