Introduction

This document is meant to walk you through the flow between designers and developers for those who are working with developers, are developers themselves, or simply want to be aware of the process. The design flow can be broken down into three stages:

1. Build: creating mockups
2. Prototype: linking mockups to render realistic prototypes of the app. This step is only necessary to emulate interaction and flow.
3. Review & Iterate: all members of the team will review the designs and critique them, user testing feedback will also be used here. Iterate on the design and repeat the whole process.

All members of the product team should be involved in the process, but will heavily focus on the last stage. Designers will take leadership in driving the design process and will be held primarily accountable for the building and prototyping phases (i.e., building out the mockups and prototypes).

There are two flows that are both sufficient, one is native while the other is via the browser. The choice is up to the designer.

⚠️ Designers already familiar with Sketch, want to explore the full potential of industry-grade UI design, or need to build realistic prototypes with full animation should choose the Native path.

⚠️ Designers working on simpler UI should choose the Browser path.

Standardization

Regardless of the tool you choose to use, it would be best follow similar conventions like these to create a smoother flow. Throughout the flow, there will be reduced errors with version control when there is consistency.

• Label all your Artboards with the feature name followed by a - and specific detail like:

  • Home - notification
  • Menu - highlight venue

  If you are iterating for a screen, label it with the version number as such:

  • Home - notification - 1
  • Menu - highlight venue - 3

• Use components. Components will allow you to make one adjustment and sync it across all instances (e.g., Navbars)

• Abide by a style guide or just be consistent with your fonts, colors, spacings, etc. When you push your designs to Zeplin/InVision, etc. and are using Sketch, create the style guide using the Craft extension. When doing this, you should see exactly the number of colors you intended to use and the number of fonts for each type of text (h1, h2, p, a, etc.). If you see more, that means you were inconsistent somewhere.

  • Font consistency: specify styles for each type of text h1, h2, h3, h4, p, a
  • Spacing consistency: specify values for the margin, padding, specific spacing values between elements (e.g., header and subtitle)
  • Color consistency: specify a palette with neutral variables, primary color set, and secondary color set if necessary.

• Icons can be used from an icon pack to ensure consistency or can be made. Just make sure your styles are consistent!

Browser: Figma → Zeplin