Home Screen Icons
all — for all the media types below
braille — for braille tactile feedback devices
embossed — for paged braille printers
handheld — for handheld devices like mobile phones
print — for printed material
projection — for projected presentations
screen — for color computer screens
speech — for speech synthesizers
tty — for teletypes, terminals, and other devices with limited display capabilities
tv — for televisions and television like devices
Device Types
Sizes
IOS
76 × 76 (iPad non-retina e.g iPad2)
120 × 120 (iPhone @2x)
152 × 152 (iPad 3+ @2x)
Android
48 × 48 (mdpi - 160dpi)
72 × 72 (hdpi - 240dpi)
96 × 96 (xhdpi - 320dpi)
144 × 144 (xxhdpi - 490dpi)
192 × 192 (xxxhdpi - 640dpi)
512 × 512 (Google Play store)
Both use .pngs
Design Guidelines
IOS
- The device will automatically round the edges and add a gradient gloss. DO NOT include these in the files
- Avoid transparency
- Don't use a drop shadow
Android
- Familiarize yourself with Androids icon design gudielines
- Integrate shadow
- Doesn't have to be in a box
General Design Guidelines
- Use imagery that users will recognize and communicates what your app does
- Keep the shapes and style simple
- Test on a variety of different backgrounds
- Use high contrast colors- they stand out.
- Avoid using typography
- Make sure the artwork can scale - always design in vector
- Don't use photos
Adding app icons
You can add app icons by adding links in the <head> of your HTML. You will need to add a link for each icon.
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" /> <link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />
Home Screen Notification
You can add a home screen notification popup component by adding a bit of javascript
Add to homescreen
>Matteo Spinnelli's "Add to home screen" script is one of the most popular scripts and is easy to use.
<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>
Mobile UX & Forms
Mobile UX
On most mobile devices, we're designing for touch which means:
- There are no hover effects
- Buttons and links need to be designed for a finger touch, not a mouse click
- Gestures are users to interact with content
- Content needs to be optimized for mobile
Designing for touch
We want to place the most used UI elements (such as navigation) in places where they can easily be assessible
Touch Targets
We also want to make sure that touch targets are large enough for finger taps
44px x 44px
Optimal touch target size is
Touch Targets
We also want to make sure that touch targets have ample white space around them so users don't accidentally touch one target, when they meant to tap another.
Plenty of white space!!!
Content
Some things to think about:
- Unless it's a game, users who access content are usually distracted and want to access content quickly
- Content should be to the point
- Content needs to be optimized for the user experience and for the mobile device
- Use progressive disclosure whenever possible
- Try to reduce the number of taps a user needs to take to get to their end goal
Detecting Touch
Feature detection library
Built into Foundation
The jQuery library allows you to detect for specific devices
Lightweight PHP script that detects mobile and browsers (in general)
FORMS
Mobile
Form Design
- User input can be difficult on some phones due to a touch keyboard or smaller keypad
- If it's possible, combine user inputs
- To decrease the margin for error and frustration, you should limit the number of input fields
- Pull as much stored information as possible to auto fill
- Space out user inputs enough so users can easily tap to fill
- Use one column on smaller devices
Form Design
- Make sure form inputs are 44px tall
- Utilize the OS functionality whenever possible
- Labels should be placed on top of the form field on smaller devices
- Make sure it's clear on what you're asking for and if the field is required
Form Design
Creating a responsive form
- All forms must be wrapped in a form tag
- All form element widths should be set at a pecentage
- All form elements must be wrapped in a label
- Forms elements can be styled via CSS (except for OS specific elements such as selects)
Let's create a responsive form!
App Icons
By shadow4611
App Icons
- 1,069