1. DESIGN GUIDE

3. LOTS OF CAREFUL THOUGHT AND CON-
S I D E R AT I O N W E N T I N T O T H E D E S I G N O F
T H E G 2 P A P P L I C AT I O N F O R T H E i P H O N E .
HOW COULD WE KEEP THE SENSE OF HU-
M O R A N D L A N G U A G E W E ’ V E E S TA B L I S H E D
WITHOUT COMPROMISING ON DESIGN?
W H AT K I N D O F F E E D B A C K D I D T H E U S E R
N E E D F O R C E RTA I N K I N D S O F A C T I O N S
W I T H I N T H E A P P L I C AT I O N ? W H AT T O O L S
W E R E AVA I L A B L E T O H E L P U S T H R O U G H O U T
THE PROCESS?
T H E F O L L O W I N G PA G E S D E M O N S T R AT E
THE BASIC STRUCTURE ON WHICH THIS AP-
P L I C AT I O N WA S B U I LT.
E N J O Y.
A.N. A.P. A.H.

4. LAYOUT
2

5. H E LV E T I C A N E U E B O L D
SIZE: 12.07
C: 100%
LOGO
1 0 0 % C YA N
S E L E C T E D TA B
DROP SHADOW
40% opacity
90o
GRADIENT OVERLAY TA B
0%- C:65 M:3 Y:0 K:0
51% C:75 M: 35 Y:0 K:0 GRADIENT OVERLAY
53% C:49 M:16 Y:0 K:0 0%- C:63 M:55 Y:54 K:28
100% C:13 M:5 Y:0 K:0 100% C:42 M:34 Y:34 K:1
STROKE
solid: C:53 M:0 Y:4 K:0
3

6. TOP BACKGROUND R AT I N G I N D I C AT O R DIM
Designed by Andrea Pardo
INNER SHADOW K:50%
C:89 M:46 Y:19 K:1
40% opacity
90o
SIZE: 6.03pts
4 BODY BACKGROUND OPEN/CLOSED
C:68 M:0 Y:82 K:0/
INNER SHADOW
C:1 M:99 Y:97 K:0
C:89 M:46 Y:19 K:1
100% opacity DIVIDER
90o D: 4px Sz: 16px C:69 M:14 Y:0 K:0
4

7. NON SELECTED BUTTON
DS: white, 45% opacity. 90o. D:1px Sz: 2px
IS: 90o. C:70 M:67 Y:64 K:74 D:2 Sz:2px
GRADIENT OVERLAY: 0%, 60% : C:69 M:14 Y:0 K:0
100%: white. Midpoints: 50%, 14%.
STROKE: C:67 M:53 Y:40 K:14
SIZE 9.06
BOLD
SIZE 6.04
SIZE 8.05
SIZE 9.06
BOLD
SELECTED BUTTON 5
DS: SAME
IS: SAME
GRADIENT OVERLAY: 0%: C:69 M:14 Y:0 K:0
100%: C:79 M:59 Y:18 K:2
STROKE: SAME

8. NON SELECTED BUTTON
DS: white, 45% opacity. 90o. D:1px Sz: 2px
IS: 90o. C:70 M:67 Y:64 K:74 D:2 Sz:2px
GRADIENT OVERLAY: 0%, 60% : C:69 M:14 Y:0 K:0
100%: white. Midpoints: 50%, 14%.
STROKE: C:67 M:53 Y:40 K:14
SELECTED BUTTON CANCEL
6 DS: SAME DS: BLACK. 75% opacity. 90o. D: 2px Sz: 2px
IS: SAME IS: WHITE. 75% opacity. 90o. D: 1px Sz: 2px
GRADIENT OVERLAY: 0%: C:69 M:14 Y:0 K:0 GRADIENT OVERLAY: 0%, 50%: C:72 M:61 Y:51 K:34
100%: C:79 M:59 Y:18 K:2 100%: C:59 M:48 Y:43 K:12
STROKE: SAME STROKE: C:59 M:48 Y:43 K:12

9. L O C AT O R PIN HEAD
DS: black, 50% opacity. 90o. D:7px Sz: 10px GRADIENT OVERLAY:
IS: white. 90o. 0%: WHITE
GO: 0%: black. 100%: C:63 M:55 Y:54 K:28 25%: C:69 M:14 Y:0 K:0
73%: C:87 M:47 Y:25 K:3
100%: C:69 M:14 Y:0 K:0
SELECTED BUTTON UNDER SHADOW
DS: SAME GRADIENT OVERLAY: 7
IS: SAME 0%: C:56 M:47 Y:45 K:12
GO:0%: C:69 M:14 Y:0 K:0 23%: C:39 M:30 Y:28 K:0
100%: C:79 M:59 Y:18 K:2 43%: C:20 M:14 Y:13 K:0
STROKE: SAME 60%: C:39 M:30 Y:28 K:0
80%: C:60 M:50 Y:47 K:16

10. TYPE SPECIMEN
HELVETICA NEUE
12 PT REGULAR A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 & $
HELVETICA NEUE
12 PT BOLD A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m
n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 & $
8

11. 9
A BIG THANKS TO TEHAN + LAX:
http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display

12. ALLISON HARPER ANDREA PARDO ANGELA NEAL
PARSONS THE NEW SCHOOL FOR DESIGN
DESIGN + MANAGEMENT
RESEARCH + DEVELOPMENT METHODS, FALL 2011