Design Collaboration Guidelines
As app developers, one of our top priorities should always be to create implementations that match as much as possible the designs. To accomplish this goal, we need to define a standard vocabulary between the design team and us. Designers are, more and more, integrating design systems as part of their work, and we can benefit from that to build common ground. Here we define the minimum standard requirements to keep consistency and the usual forgotten pieces of app design. Independently of the size of your team, there is already a set of best practices applied by your designer that you can benefit, and others you will need anyway at some point while developing the app itself.
Style guide - Foundation
These are the basic styles that will serve as the foundation of all the other part of the design. The style guide will be helpful to avoid the mistake of not using the proper element as part of the application UI. Regardless if you follow material design, fluent design or any other design system, these style elements will facilitate tasks such as design adjustment and rebranding.
|jobandtalent VisualKit palette|
Typography - Fonts
A list of all the fonts and sizes used in the app. When possible, a complete style guide should also include colors and formatting(bold, italic, alignment) of each font.
|jobandtalent VisualKit fonts|
Sizing and Spacing
Base templates of every screen should be based o most commonly used devices that respect ratio and size. And a general rule for padding or margin that you can apply to most, if not all, of the app screens, include general rules when spacing values are constant (e.g., 8dp) or if elements have to be centered or positioned relative to other views.
Size Classes - Responsive UI
Interface elements and layouts can be configured to automatically change shape and size on different devices, during multitasking on a tablet, in split view, when the screen is rotated, and more. You will find various strategy depending on the platform as device size classes in iOS and responsive UI in Android.
Components - Pattern library - Atoms
Different design systems will have different naming for it, in atomic design you will call this Atoms, in others, it’s just called pattern library, or components. All these building blocks should be based on the style guide and will be used to build more complex elements of user interface like pages and screens.
Commons components you can find in most applications are:
Views can contain animations they are generally under two categories, animated views or animated assets.
Animated views allow in general the following change of properties as animation point:
- Transform: scale, rotate, or translate
- Color and transparency
Animated assets are used for custom loaders, visual description of first use or empty case. They are defined with a motion graphic tool like Adobe After Effects and integrated into the app with a framework like Lottie.
Interaction Model - Patterns
As today most of the mobile apps are single window full-screen design, in collaboration with the designer, it’s essential to review a prototype of the navigation with the design of the App using tools like Marvel or InVision.
There are mainly two ways to navigate from one screen to another:
- Stack: You will find this concept under Navigation Stack or Back Stack under the respective platform. You can quickly identify these screen through the fact that they have a Back/Up Button on the top left Corner. Important: Remind UX and Product Owner that navigation from a notification should keep into account the stack designed to get to the desired screen.
- Modal/Dialog, It’s a screen that sits on top of the current screen, the user must interact with it before they can return to the previous screen. It should contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You could identify them as they have at least a cancel button or a close button. Important: Remind UX and Product Owner a Modal could not be initial screen as they have a dismiss button.
If in the navigation prototype no screen transitions are described, ensure with UX and Product Owner that native screen transitions from the platform will be applied. And if any custom transitions are specified, they should include at least duration and easings curves used.
An essential step while design and estimating how complicated a screen is, is to define its empty states.
Explain to the user functionality of the app, generally shown the first time that user uses the app, or it can appear until the user makes the first interaction that generates content.
|jobandtalent example of first use state|
Shown to the user when he clears the content of the screen.
Indicate to the user that the App wasn’t able to load the content of the page.
|jobandtalent example network error|
Placeholder is needed mainly in two cases:
- When displaying images provided from a remote source, if not set yet or while loading.
- Form input fields to describe the expected value.
While reviewing the UI, let the UX and Product Owner know which interactions with users will load content or perform lengthy data processing operations. Use loading indicators and progress bars to allow the user know your app isn’t stalled and to give them an estimate of how long they’ll be waiting.
A general guideline is to show a loader:
- When a user interaction blocks the UI, like validating a form through a remote API call.
- When loading background content could take more than 1 ms
All assets of all screens should be provided, through a tool, shared folder or repository. Ensure that you have all the densities corresponding to the platforms that you are developing.
User Generated Content
Design should provide examples that include user-generated content, that content can come from direct user input or content generated by backend API based on the user’s information.
- Long text
- Full name
- Big Number
This guideline does not come with a recommendation of tooling, the ones that we tested and used in projects until now are:
- A Comprehensive guide to design systems by Will Fanguy on December 1, 2017
- Designing Systems by Brad Frost’s Atomic Design
- Size Classes and Core Components at WWDC 2017 - Session 812 - iOS
- Material Design guidelines > Responsive UI
- iOS Human Interface Guidelines > Adaptivity and Layout
- SwiftGen Colors by AliSoftware
- Asset catalog colors on Xcode 9 by Zeplin
- Android Guide Resources Color
- Material Design guidelines > Color System
- Best Practices for Modals / Overlays / Dialog Windows by Naema Baskanderi on Mar 20, 2017
- View Programming Guide for iOS > Animations
- Airbnb Design > Lottie
- Designing For The Empty States by Craig Dennis on January 9, 2013
- Material Design guidelines > Empty States
- Xcode Asset Catalog Format Reference
- Android Guide Providing Resources
- VisualKit: creating a UI Framework by Victor Baro on Apr 10, 2017
- Learning to develop Jobandtalent’s design system for Android by Jorge Rodriguez on Jun 20, 2017