Design Guidelines

DESIGN PROCESS

The following is a high-level outline of our design process.

1
RESEARCH & ANALYSIS
The research step focuses on understanding the user personas, user goals and client requirements.
Activities:
  • Audience research
  • Competitive analysis
  • Collect Existing brand and product info
Activities:
  • Personas
  • Goal Map/User Flow
2
SKETCH
The sketch step is focused on brainstorming interaction models and user experience designs to accomplish the user goals.
Activities:
  • Wireframing and page/app flow
Work Products:
  • App Flow
  • Wireframes
3
CONCEPT DEVELOPMENT
Build on the sketches to produce high fidelity concept designs.
Activities:
  • Concept Development
Work Products:
  • Visual Concepts
4
PROTOTYPE (OPTIONAL)
Create interactive prototype(s) for key user flow and interactions/animations. The prototype does not need to be a comprehensive representation on the final design.
Activities:
  • Prototype creation
  • Animation and interaction design
Work Products:
  • Interactive Prototype
5
ART PRODUCTION
Export design assets and create design specs for solution implementation and client hand-off/maintenance.
Activities:
  • Export assets
  • Create style guide/design specs as needed
Work Products:
  • Design assets
  • Design Specs
  • Style Guide

DESIGN TOOLS

VERSION CONTROL: ABSTRACT

Abstract is a version control tool for design files. Currently it only supports Sketch but support for other tools are in development. We use abstract for two main reasons: to have every project easily accessible to the entire team, and be able to access files from any point in time. We use this tool hand in tandem with Sketch.

https://www.goabstract.com

Abstract tracks changes to Sketch files so you can reference or revert back to previous files. It also allows multiple people to work on a project at the same time without overwriting their changes. Always launch Sketch from Abstract to ensure that the changes are being captured.

Abstract Guide: How it Works Abstract Overview Video

DESIGN: SKETCH

For user interface design and wireframing we favor Sketch. Sketch has strong support for vector based designs and integration with tools for graphic production and prototyping. When needed we may also leverage Adobe Creative Cloud tools.

Consider these general practices when designing user interfaces using Sketch.

  • Use vector drawing tools only to enable scaling to different screen resolutions - avoid raster based tools
  • Leverage symbols (or smart objects in Photoshop) for reusable assets like buttons, switches, etc.
  • Design in 1x scale - avoids accidentally creating half pixel sizes when scaling designs
  • Snap to pixel grid
  • Keep layers and layer groups well organized and use meaningful names

Learn More

https://www.sketchapp.com

DEVELOPER HANDOFF: ZEPLIN

Zeplin is used for developer handoff from the designer. Zeplin works with Sketch and Adobe XD. It provides design specs for the developer including exact colors, dimensions and positioning. Zeplin can also be used to create a style guide for the project.

https://zeplin.io

ADOBE CREATIVE CLOUD

We do still use Illustrator, Photoshop, After Effects, XD, and InDesign as needed.

DESIGN RESOURCES

HUMAN INTERFACE GUIDELINES

https://developer.apple.com/design/human-interface-guidelines/

MATERIAL DESIGN GUIDELINES

https://material.io/design/

MATERIAL DESIGN THEME EDITOR

https://material.io/tools/theme-editor/

APPLE DESIGN RESOURCES

https://developer.apple.com/design/resources/

Atomic Robot is an independent app agency

Ready to start your next mobile project?