Mobile Media:
01/28/17
IOS HIG (Human interface Guidelines)
- Clarity
- Icons are created to be subtle and precise
- Negative space, colors, fonts, graphics, and interface elements highlight importance which convey interactivity
- Deference
- Content typically fills the screen
- Minimal use of bezel, gradients, and drop shadows keep the interface light and airy ,while ensuring that the content is paramount
- Depth
- visual layers and realistic motion convoy hierarchy. Transitions provide depth as you navigate through content.
- Metaphors
- People learn quickly when objects and actions are metaphors for familiar experiences. Like flipping through pages of a book.
- User Control
- People are in control. Not the app
- Apps can make warnings. But the app doesn’t control decision making.
- The best apps find a balance between enabling users and avoiding unwanted outcomes.
- Apps make people feel like they are in control by keeping interactive elements farmilar and predictable, and making it easy to cancel when operations are underway.
- Widgets
- widgets provide information without needing to open an app
- people add widgets to the search screen
- 3D Touch
- Pressure sensitive (Peek, Pop, Quick Actions)
- Accessibility features are created for people with hearing, vision and other disabilities
- Authentication
- People often abandon apps when they have to sign in first.
- If your app requires authentication, display a brief friendly explanation on the login screen that describes the reasons for the requirements and its benefits
- When possible present choices. Its important to add options that are easily assessable, instead of typing in responses.
Android Design Guidelines
- Environment
- Material Design is a three dimensional environment containing light, material, and cast shadows.
- All materials have an X Y Z dimensions.
- Light and Shadows. (Key lights create directional shadows. Ambient light creates soft shadows)
- Materials are always 1dpi thick
- Materials cannot pass through each-other
- Material never bends or folds
- Material sheets can connect and join together
- Motion
- Material Design is alive, aware, and intentional
- Responsive animation to create energy
- Material Focuses on how fast it moves instead of how long it takes to get there.
- Monition shows that an app is organized, and what it can do.
- Motion is quick. Shouldn’t keep the user waiting longer than necessary
- Motion is clear, simple, and coherent. They should avoid doing much at once
- Color
- All color pallets should include sufficient contrast between different UI elements
- Limit your selection to 3 hues from the primary pallet and 1 accent color from the secondary pallet.
- Primary Color should be the most widely used color across all of your screens and components
- Secondary Pallet can be used to indicate a related action or information
- Accent Color Should be used for floating action buttons and interactive elements
- Text fields and cursors
- Text Selection
- Progress Bars
- Selection controls, buttons and sliders
- Links
- If your background color is the 500 version, make your accent either white 100% or black 54%
- Dark text on light backgrounds (Opacity)
- Primary Text 87%
- Secondary Text 54%
- Disabled/Hint text 38%
- Primary Color 100%
- Accent Color 100%
- White text on Dark backgrounds
- Primary Text 100%
- Secondary Text 70%
- Disabled/Hint text 50%
- Primary Color 100%
- Accent Color 100%
- Use opacity instead of grey text.
- Icons and other elements work better being black or white at 38% opacity
- Dark Icons
- Active Icon 54%
- Inactive 38%
- Light Icons
- Active 100%
- Inactive 50%
- Themes
- Lets you apply a consistent tone to the app
- (post on blog one #thursday app before midterm and one after midterm)
- You need to write about your critique and iterations on your paper prototypes
Design Tools for Prototyping
omnigraffle
Framer
Flint
Marvel
Point is measurement sequence
4 pixels in every point
packs more information into a smaller size