app branding recommendations

11
App Branding Recommendations WashU Apps

Upload: others

Post on 10-Jan-2022

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: App Branding Recommendations

App Branding Recommendations

WashU Apps

Page 2: App Branding Recommendations

Current App Icons

Page 3: App Branding Recommendations

Updated App Icon Style

WUSTL Mobile WUSTL Olin Business School

WashU Events

WUSM EM WUSM OBGYN Guide AD8

Page 4: App Branding Recommendations

Common Icon Features

Appears on primary red background

Name is displayed in Source Sans Pro –Bold typeface

Options for name are WashU or WashU Med

White bottom border separates title bar from secondary background color

U n i v e r s i t y N a m e

Can choose from 8 secondary color choices for background

Main WashU app uses primary red as background color

S e c o n d a r y B a c k g r o u n d C o l o r

Icons are one color. Icons are white on all background colors except for yellow and light grey. On these backgrounds, icons are dark grey.

Icons are made up of f lat, solid lines

Some elements may be fi l led in to help with readability at smaller image sizes

In place of an icon, an acronym of four letters or less may be used, set in Source Sans Pro – bold

I c o n

Page 5: App Branding Recommendations

Color Recommendations

PR IMAR Y S E CONDAR Y

Title bar, app background for main WashU app

U s e w i t h d a rk grey i c o n

#172752 #105f86 #2b8282 #d25f28

#ffcc00 #3d3d3d #6c7373 #c8c8c8U s e w i t h d a rk grey i c o n

#a51417

Page 6: App Branding Recommendations

On the home screen, you can fit 10-12 characters before an ellipsis is added

The app name on the home screen doesn’t have to be the actual published name of the app

A p p N a m e

Home Screen

Page 7: App Branding Recommendations

An app name can be up to 30 characters long.

A p p N a m e

A subtitle is optional to add and can be up to 30 characters long.

The subtitle will appear in the “developer name” place after several seconds.

It is intended to summarize the app in a concise phrase.

S u b t i t l e

Product Page

Page 8: App Branding Recommendations

App Naming Recommendations

PRODUCT PAGE

• Change WUSTL to WashU to match brand

guidelines

• Have both WashU and WashU Med as options to

use for app names on product page and icons

• Use a subtitle to highlight features or typical uses

of the app

HOME SCREEN

• If you want the entire name to be visible on any

platform, limit app name to 10-12 characters

• Use a shortened app name for the home screen

– Do not include “WashU/WashU Med” in title (except for

main university app)

Page 9: App Branding Recommendations

App NamesCURRENT APP TITLE RECOMMENDED APP TITLE CURRENT HOME SCREEN TITLE RECOMMENDED HOME SCREEN TITLE

WUSTL Mobile WashU WUSTL WashU

WUSTL Experience WashU Experience WUSTL Experience

WUSTL EM WashU Med Emergency Medicine WUSTL EM EMed

WUSTL Weight Loss Surgery WashU Med Weight Loss Surgery WUSTL Weight… WL Surgery

WashUEvents WashU Events WashUevents Events

WUSTL Olin Business School WashU Olin Business School WUSTLOlinBu… Olin Business

WUSM OBGYN Guide WashU Med OBGYN Guide OBGYN Guide

microCavity WashU microCavity microCavity microCavity

Page 10: App Branding Recommendations

App NamesCURRENT APP TITLE RECOMMENDED APP TITLE CURRENT HOME SCREEN TITLE RECOMMENDED HOME SCREEN TITLE

WUSM OB Calc WashU Med OB Calculator OB Calc OB Calc

WashU Rec WashU Rec WashU Rec Rec

WASHU FYC WashU First Year Center WASHU FYC First Year

AD8 WashU Med AD8 AD8 AD8

EXR ARC WashU Med EXR ARC EXR ARC EXR ARC

WUSM OB Insulin WashU Med OB Insulin OB Insulin OB Insulin

Page 11: App Branding Recommendations

Use these resources to get all up-to-date icon sizes needed for your app’s platform.

Apple Human Interface Guidelines

Android General Guidelines

Resources

Use this template as a starting point for your app icon. You can resize this template to create all icon sizes

needed for your app (reference above links for icon sizes).

Download template

This template includes – both title bar options (WashU /WashU Med) and options for background colors. Be sure the fi l l color of your

icon/acronym is appropriate for the background color you choose, e.g. white for dark backgrounds and grey for l ight backgrounds.

(Reference page 5 of this guide).

Search for “line icons” on stock asset sites if you need help sourcing an icon.

Shutterstock

iStock

Adobe Stock