Now that you're familiar with the mobile design process, it's important to understand the platforms and operating systems that DaVita currently supports and how to set up your design documents appropriately. You'll also want to plan for the required design assets that are needed to pass the DaVita MCoE's Certification process.
WHO IS THIS DOCUMENT FOR?
Designers
TABLE OF CONTENTS
- Supported platforms & operating systems
- Working with vector graphics
- Recommended design tools
- Designing for iOS
- Designing for Android
- Writing Release Notes
- Resources & additional information
Supported platforms & operating systems
For both internal- and external-facing applications, DaVita currently supports the following platforms and minimum operating system versions:
- iOS
- iOS 9 and higher
- Android
- 4.4 (KitKat) and higher
Working with vector graphics
It is highly recommended that you work with vector graphics and not raster (bitmap) graphics, except for photography. While raster graphics are made up of pixels at a fixed resolution and resizing them (especially enlarging) will have an adverse affect on image quality, vector graphics are not made of pixels and can be infinitely scaled. The most common type of raster graphics are photographs while the most common types of vector graphics are logos, icons and fonts.
A CLOSER LOOK AT RESIZING GRAPHICS
Whether you are working with vector or raster graphics, simply resizing assets for different devices will often produce acceptable results, but not always. To provide the best possible experience for your users, you may want to provide unique graphics for various scale factors rather than exporting different sizes of the same graphic. The primary graphic types to consider are icons and photographs.
Icons in particular have the potential to appear especially small depending on the size and resolution of the device. Just like your application's app icon, icons should be designed to be legible at both large and small sizes. Depending on the complexity of your icons, it may best serve your users to provide different variations of the icon depending on how large or small it will appear (see Fig. 1 below). A great example of this can be found on Joe Harrison's Responsive Icons project; its focus is on responsive web design, but the concept is the same.
Photographs can also quickly lose their impact on a design when scaled down, depending on how they're cropped. In the two examples below (see Fig. 2a & 2b), note the difference between simply resizing a photograph versus using creative direction to re-crop based on the most important content in or focal point of the photograph.
Recommended design tools
The most popular tools for working with vector graphics are Adobe Illustrator and Sketch. Sketch offers several benefits over Adobe Illustrator, such as supporting pages (in addition to artboards and layers), symbols (including nested symbols), styled text, slices, the ability to automatically export assets at different sizes, a lower price point, and a companion iOS app, Sketch Mirror, for previewing designs on iOS devices in real-time. For working with raster graphics, Adobe Photoshop is the most versatile choice.
Designers working on mobile applications should always be previewing their designs on actual devices as they work. Applications such as Skala Preview (Mac OS X, iOS & Android) and Sketch Mirror are excellent and affordable tools for this purpose.
Animation can play a vital role in mobile app design and it's important to communicate the appearance and functionality of such animations. We currently use Flinto for animation (and to export a movie file that is included with other design deliverables), however if you need to create more advanced animations, something like Adobe After Effects would be a great tool to use.
It's also important to have an established repository for raw design files (i.e. Sketch files), fonts and exported assets for developers & other designers that may pick up the project at a later time. At this time, we're not utilizing a one-size-fits-all approach, but basing where our files live on who needs to access them.
For prototyping purposes & presenting general flows to everyone involved in a project, including stakeholders, we are syncing artboards from Sketch files to InVision using Craft Sync. We often use the InVision commenting feature to annotate screens & communicate the interaction of various elements (we prefer the Note comment type for annotations). In addition, team members can respond directly to these annotations to ask clarifying questions.
In order for developers to retrieve exact measurements, font sizes/weights, color hex codes & exported assets needed for development, we highly recommend Sympli, especially for native mobile projects. Sympli is browser-based, but offers plugins for Sketch, Photoshop, Xcode and Android Studio. Best of all, developers can export their own assets as needed right within Sympli.
For accessing raw files, such as original Sketch files, our designers are currently using an approved cloud-based solution and experimenting with design-focused version-control tools such as Abstract and Kactus.
Designing for iOS
iOS is a mobile operating system developed by Apple and distributed exclusively for Apple hardware, such as iPhones and iPads. Major releases of iOS are usually released once per year, often in the Fall.
DEVICES & SCREEN SIZES
The following devices and their associated screen sizes (in rendered pixels at 72dpi) are supported:
| iOS Device | Screen size (in pixels) | Scale Factor |
| iPhone 4s | 640 x 960 | 2x (iPhone) |
| iPhone 5/5c/5s/SE | 640 x 1136 | 2x (iPhone) |
| iPhone 6/6s/7/8 | 1242 x 2208 | 2x (iPhone) |
| iPhone X | 1125 x 2436 | 3x (iPhone) |
| iPad 2/iPad Mini | 768 x 1024 | 1x (iPad) |
| iPad Air/iPad Air 2/iPad/iPad Pro (9.7 in)/ iPad mini 2/iPad mini 3/iPad mini 4 | 1536 x 2048 | 2x (iPad) |
| iPad Pro (10.5 in) | 1668 x 2224 | 2x (iPad) |
| iPad Pro (12.9 in) | 2048 x 2732 | 2x (iPad) |
| Apple Watch (38mm) | 272 x 340 | 2x |
| Apple Watch (42mm) | 312 x 390 | 2x |
For a more visual guide to understanding the various iPhone & iPad screen sizes, take a look at the Ultimate Guide to iPhone Resolutions and the iOS Resolution Quick Reference.
DEFAULT FONT
The default system font for iOS is San Francisco.
EXPORTING ASSETS
Due to the variation in screen sizes between iPhone & iPad models, you will be required to export design assets in multiple sizes so that the design will appear correctly for your users. For iPhone apps, you will be providing assets at three different sizes, or scale factors of 1x, 2x and 3x. For iPad apps, you will be providing assets at two different scale factors of 1x and 2x.
SETTING UP YOUR DESIGN FILE
For both iPhone and iPad apps, we recommend setting up your design file at the 1x scale factor in the vector-based program of your choice. In pixel dimensions, you may set up the size of your design file at 320 x 568 to match the screen ratio of the iPhone 5/5c/5s/SE.
Apple is now offering templates for both Sketch and Photoshop. Sketch also provides a built-in iOS template under File > New From Template > iOS UI Design.
Important Note: Be sure to consider how users can benefit from different screen sizes when designing your apps. For example, the iPhone 7 Plus can use split screen layouts (similar to iPad). Users of this device will be expecting you to take advantage of the extra screen real estate.
FILE NAMING CONVENTION
Design assets should have a very specific naming convention when handing off the exported files to your iOS developer. For the 1x, 2x and 3x scale factors, assets should be named asset.png, asset@2x.png and asset@3x.png, respectively.
REQUIRED ASSETS FOR APP STORE
Every iOS application must have a launch image, app icons, screenshots and release notes to be published in the App Store. You also have the option of providing an App Preview (short teaser video).
LAUNCH SCREEN
Apple requires that every app have a launch screen, a placeholder graphic that is displayed each time the application launches (when it is not already running in the background). The launch screen should be quickly replaced by the first screen of your app to give the impression that your app is snappy and loads quickly. The required sizes for the launch screen can be found as part of Apple's Launch Screen article, along with tips on designing your app's launch screen image.
APP ICON
Apple requires two different app icon sizes to be submitted (for the home screen and App Store). You also have the option of submitting other icon sizes for Spotlight search results, Settings, and a few others. The required icon sizes for the various contexts and devices can be found as part of Apple's App Icon article, along with tips on designing your app icon.
SCREENSHOTS AND APP PREVIEW
When users search the App Store for your app, they will be interested to see screenshots of what your app's interface looks like. Apple requires at least one screenshot, but you have the option of submitting up to five screenshots. There are various rules around screenshots, such as not including the device's status bar. You will want to become familiar with the rules and size restrictions for different devices that are outlined in Apple's Screenshot Properties guidelines.
You also have the option of including an App Preview, which is a short video that demonstrates your app's functionality and is an opportunity to provide a little insight into the app's user experience. There are fairly strict guidelines and technical specifications for App Previews, which Apple has outlined in their App Preview Properties guidelines.
Designing for Android
Android is a mobile operating system developed by Google and distributed for a wide range of mobile device manufacturers such as Samsung, LG, HTC and Motorola. Major releases of Android are not currently on a predictable release schedule. In addition to a version number, Android releases are also named after various types of sweets in alphabetical order (i.e. 4.0 Ice Cream Sandwich, 4.1-4.3 Jelly Bean, 4.4 KitKat, 5.0 Lollipop, 6.0 Marshmallow, 7.0 Nougat, 8.0 Oreo).
DEVICES & SCREEN SIZES
While the Android platform is a boon for developers due to fewer restrictions on development and offer many more hardware choices for users, it does present several challenges for designers since more graphic assets will need to be provided to support the thousands of distinct Android devices that exist today.
DEFAULT FONT
The default system font for Android is Roboto.
WORKING WITH DENSITY-INDEPENDENT PIXELS (DP)
Because of the wide variety of screen sizes, resolutions and densities, it's impossible to target exact pixel dimensions for specific devices. Designers must instead think in terms of density-independence. You will be required to provide assets for four different screen densities, MDPI (1x), HDPI (1.5x), XHDPI (2x) and XXHDPI (3x), unless your developer exports assets directly from Sympli.
A density-independent pixel (dp) is measured as one physical pixel on a 160dpi screen, which is the approximate density of our baseline screen (MDPI). To convert DP units to actual screen pixels, divide the DPI of the screen by 160. For example, we need to figure out how to scale our assets for a device that has a screen density of 240dpi. We divide 240 by 160 and the sum is 1.5. Therefore, this screen density qualifies as HDPI and we need to scale our graphics by 1.5x that of the baseline MDPI density.
This Android DPI Calculator is a handy tool to calculate screen densities. Also, take a look at this Android DP/PX Converter to help with the math of converting pixels to dp and vice versa.
Android supports what it calls density "buckets" where screen sizes that fall within a certain density will load the appropriate assets. The device will automatically adjust the design to fit properly on the screen. For more information, see Google's Supporting Multiple Screens documentation.
SETTING UP YOUR DESIGN FILE
We recommend setting up your design file at the suggested MDPI baseline size of 360 x 640 pixels (16:9 aspect ratio) in the vector-based program of your choice.
With the introduction of its new Material Design guidelines, Google is now providing design templates (please note these templates are in Adobe Illustrator format (except for the "Whiteframes" template available for both Adobe Illustrator and Sketch) and sized at 360 x 640 [16:9 aspect ratio at 1x]). There are also sticker sheets that feature various Material Design components and are available for Adobe After Effects, Adobe Photoshop, Adobe Illustrator and Sketch (the sticker sheet is already built into Sketch as a template under File > New From Template > Material Design).
Important Note: Be sure to consider how the layout of your UI should change for larger or smaller physical screen sizes. For larger screens, such as those that exist for tablets, Google has provided advice for implementing Multi-Pane Layouts. Also see Google's Metrics and Grids article for how handsets and tablets are defined in terms of size buckets (based on the number of density-independent pixels they display).
9-PATCH DRAWABLES
As you create certain assets such as buttons, bubbles, fills, outlines around text or anything that needs to be able to stretch or fluctuate based on different screen densities, you will want to understand how 9-Patch Drawables work. The basic concept is that you can define how certain images can be scaled for different devices without becoming distorted or looking "stretched."
As the designer, you will need to place 1-pixel black (#000000) guides to define the scaleable areas of the image, which will define what areas can stretch as the image scales up. You also have the option of placing guides to define the fill area, or how much room inside the image can be used for text labels or other elements (see Fig. 3 below). The file naming convention for 9-Patch Drawables is image.9.png. Keep in mind that 9-Patch Drawables can only scale up, not down, so they'll need to be created at the smallest size possible. You will want to work with your developer as you determine where using 9-Patch Drawables is most appropriate for your application's UI. For tips and more information, take a look at this blog post by Radley Marx and in Google's Draw 9-patch documentation for developers.
Fig. 3 – For 9-Patch Drawables, the guides on the top and left define the areas that can stretch when the image scales up. The optional guides on the right and left define how much room inside the image can be filled with text labels or other elements.
FILE NAMING CONVENTION
For Android, your exported assets will be divided into separate folders for each screen density. The filename of the asset must be the same in each of the density folders. The folder structure and assets you deliver to your developer should look like this (unless your developer is exporting assets directly from Sympli):
REQUIRED ASSETS FOR GOOGLE PLAY STORE
Every Android application must have screenshots, a high-resolution app icon and release notes to be published in the Google Play Store. You may also optionally submit a feature graphic (required to be featured in the Google Play Store), a promo graphic for older Android devices and a short YouTube promo video.
SCREENSHOTS
Google requires a minimum of 2 screenshots, but you may upload up to 8 screenshots for each device type you support (for example, phone and tablet). See Google's graphic assets, screenshots & video guidelines for more information.
HIGH-RES APP ICON
Google requires a high-resolution app icon be provided that will be used in various locations throughout the Google Play Store. This icon should probably be the same as your launcher icon, but at a higher resolution specifically for the Google Play Store. See Google's graphic assets, screenshots & video guidelines for more information.
FEATURE GRAPHIC OR PROMO VIDEO
You have the option of providing a feature graphic or short promo video for your application that will appear at the top of the Google Play Store listing screen. Google recommends taking advantage of this space to attract users and show off the application's UI and other creative assets. See Google's graphic assets, screenshots & video guidelines for more information.
Writing Release Notes
Release notes are an excellent way to communicate with your users about what your app is all about (if it's a brand-new app) and what has changed (if it's an incremental update), including any bug fixes. Release notes also present a fantastic opportunity to strengthen your brand by speaking in a language that matches your target audience and letting your users know that you care about their needs and are listening to feedback. For tips on writing release notes, see this article on How to Write (Better) Release Notes in 7 Steps.
Resources & additional information
Last Reviewed/Updated: March 2018