UI Design Basics: Visual Design (notes)

Adaptivity & Layout

-Adhere to the safe area and layout margins in order to prevent content from underlapping the status bar, navigation bar, toolbar, and tab bar.

-Use visual weight and balance to convey importance (larger items are easier to tap, which is important when an app is used in distracting surroundings like the gym)

-principle items should go in the upper half of the screen

-if possible, support both portrait and landscape orientations

-preview app on multiple devices (such as on an iPad AND iPhone)

Animation

-don’t use animation for the sake of using animation… sometimes it can just be distracting

Branding

-great apps express unique brand identity through smart font, color and image decisions

-SUBTLY incorporate your brand through the app design…  people use your app to get things done, not to watch an advertisement

-resist the temptation to display your logo throughout your app

-defer to content over branding

Color

-choose a limited color palette

-choose a “key color” if possible (ex. Notes app uses yellow)

-test your app’s color scheme using a variety of lighting conditions

Terminology

-use familiar words and phrases

-avoid we, our, me, and my (ex. “my workouts”)… can be interpreted as patronizing

-use “you” and “your” to interact with user (strive for friendly tone)

Leave a comment