The document provides design guidelines for an iPhone application called G2. It demonstrates the careful consideration that went into establishing the visual language and user experience of the app. Pages show the basic structural framework, including layout, typography, buttons, indicators, and other interface elements. Designs aim to balance the app's sense of humor while prioritizing usability.

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