DESIGN PROCESS
1
HOW MANY BREATHS IN A DAY—
the app T YPOGRAPHY III
SARAH ROCCO
2
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
3
HOW MANY BREATHS IN A DAY—
the app A REFLECTION OF THE DESIGN PROCESS AND DEVELOPMENT
by, sarah rocco T YPOGRAPHY III
SARAH ROCCO
4
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
RESERACH IDEATION process solution afterword
T YPOGRAPHY III
5
7
11
15
23
27
SARAH ROCCO
6
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
7
RESEARCH
T YPOGRAPHY III
SARAH ROCCO
8
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
T YPOGRAPHY III
9
SARAH ROCCO
10
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
11
ideation
T YPOGRAPHY III
SARAH ROCCO
12
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
T YPOGRAPHY III
13
SARAH ROCCO
14
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
15
process
T YPOGRAPHY III
SARAH ROCCO
16
DESIGN PROCESS
AM AM
HOW MANY HOW MANY
AM AM
HOW MANY HOW MANY MANY BREATHS? HOWBREATHS? MANYBREATHS? BREATHS?
breaths breaths
DO YOU YOU DO YOU TAKE A DAY? IN DO DOTAKE YOU IN TAKE IN AADAY? DAY? USERNAME USERNAME OR EMAIL EMAILOR EMAIL USERNAME OR USERNAME OR EMAIL PASSWORD PASSWORD PASSWORD PASSWORD LOG IN IN LOG IN LOG LOG IN FOrGOT PASSWOrD? FOrGOT PASSWOrD? FOrGOT PASSWOrD? FOrGOT PASSWOrD?
SIGN UP hErE SIGN UP hErE SIGN UP hErE SIGN UP hErE
HOW MANY HOW MANY
HOW MANY BREATHS? BREATHS? HOWMANY MANY BREATHS? HOW HOW MANY BREATHS?
breaths breaths DOTAKE YOU IN TAKE IN A DAY? DO YOU A DAY?
YOUINTAKE IN A DAY? DO YOUDOTAKE A DAY? USERNAME USERNAME OR EMAILOR EMAIL USERNAMEUSERNAME OR EMAIL OR EMAIL PASSWORD PASSWORD PASSWORDPASSWORD LOG IN LOG IN LOG IN LOG IN
FOrGOT PASSWOrD? FOrGOT PASSWOrD? FOrGOT PASSWOrD? FOrGOT PASSWOrD?
SARAH ROCCO
SIGN UP hErE SIGN UP hErE SIGN UP hErE
SIGN UP hErE
T YPOGRAPHY II
DESIGN PROCESS
17
HOW MANY HOW BREATHS? MANY BREATHS? 3
3
3
8:00 AM
9:00 AM
720
8:00 AM 10:00 AM
720
8:00 AM
8:00 AM
10:00 AM
1412
4,3214,321 4h16min4h16min breaths
3
9:00 AM
1412
43 breaths43 breaths 4h 16min4h 16min
HOW MANY HOW BREATHS? MANY BREATHS?
breaths
4,321 breaths 4,321 breaths
4h16min4h16min 12:00 PM 4,162
12:00 PM 4,162
HOW MANY BREATHS? 3 8:00 AM
9:00 AM
720
10:00 AM
1412
43 breaths 4h 16min T YPOGRAPHY III
4,321 4h16min
breaths
SARAH ROCCO
18
DESIGN PROCESS
AM
breaths
REA
turn your breathe in FORGOT paSSWORD ?
SIGN Up HERE
AM
calibrating...
SARAH ROCCO
T YPOGRAPHY II
breathe
Using the bottom of your phone, breathe into the dock area to calibrate your resting breathing rate.
LOG IN FORGOT paSSWORD ?
SIGN Up HERE
AM
AM
DESIGN PROCESS
19
READY TO START?
breaths
USERNAME OR EMAIL
breathe
PASSWORD
AM
LOG IN FOrGOT PASSWOrD?
SIGN UP hErE
Using the bottom of your phone, breathe into the dock area to calibrate your resting breathing rate.
LOG IN FORGOT paSSWORD ?
SIGN Up HERE
calibrating...
USERNAME OR EMAIL PASSWORD
AM
LOG IN FOrGOT PASSWOrD?
SIGN UP hErE
AM
TODAY’S BREATH RATE
12 am
T YPOGRAPHY III
•
4 am
•
8 am
calibrating...
•
12 pm
•
4 pm
•
8 pm
•
SARAH ROCCO
20
DESIGN PROCESS
AM
AM
breaths
FORGOT paSSWORD ?
SIGN Up HERE
SARAH ROCCO
READY TO START? breathe
turn your phone so the bottom is facing you, breathe into the dock area to calibrate your resting breathing rate.
T YPOGRAPHY II
AM
DESIGN PROCESS
21
AM AM
AM AM
today’s breath rate today’s breath rate today’s breath rate today’s breath rate TOTaL: 16,354 TOTaL: 16,354
TOTaL: 16,354HIGHEST: 112 LOWEST: HIGHEST: 8 112 LOWEST: 8 TOTaL: 16,354HIGHEST: 112 LOWEST: HIGHEST: 8 112 LOWEST: 8
55 55
12 aM 12 aM
• •
4 aM 4 aM
< <
55 55 avg avg
avg avg
sleep sleep
sleep sleep
•12 aM 8 aM • • 4 aM 12 PM• •8 aM 4 PM • • 12 PM 8 PM •• •12 aM 8 aM • • 4 aM 12 PM• •8 aM 4 PM • • 12 PM 8 PM ••
4 PM 4 PM
• •
8 PM 8 PM
<SEPTEMBER 9, 2014 SEPTEMBER 9, 2014> <SEPTEMBER 9, 2014 SEPTEMBER 9, 2014>
AM AM
> >
PMPM ( U G( U/ GM /3 )M 3 ) 2.5 2.5
PMPM ( U G( U/ GM /3 )M 3 ) 2.5 2.5
C02 C02
0 0
3000 3000
12, 500 12, 500
12, 500 12, 500
0 0
13 13
leader board leader board
H H
H H
C02 C02
0 5000 3000 7000 5000 9000 7000 0 5000 3000 7000 5000 9000 7000 3 PARTICLE COUNT (100 P/ FTPARTICLE ) COUNT (100 P/ FT3) 3 PARTICLE COUNT (100 P/ FTPARTICLE ) COUNT (100 P/ FT3)
T YPOGRAPHY III
25,000 25,000
august august
august august
9000 9000
> >
> >
TOTAL TOTAL AVG AVG
14 14
0 0
15 15
13 13
16 16
14 14
AM AM
To To this this To unlock unlock To unlock unlock this scree scree thisn, n,scree screen, n, please please visit app please visit visit pleasethe the visit appthe the app app store store and store and and storepurchase purchase and purchase purchase your your tube! your breath breath your breath breath tube! tube! tube! now now only now only only now$1.99! $1.99! only $1.99! $1.99! 15 15
25,000 25,000
AM AM
30 30
15 15
< <
AM AM
TOTAL TOTAL AVG AVG
• •
today’s particle today’s breakdown particle breakdown today’s particle today’s breakdown particle breakdown 30 30
< <
AM AM
17 17
15 15
18 18
16 19 16 19
17 17
18 18
19 19
AM AM
leader board leader board
CURRENTRaNK: 246,014 CURRENTRaNK: 246,014LOWEST: 20,124 LOWEST: 20,124 CURRENTRaNK: 246,014LOWEST: 20,124 LOWEST: 20,124 CURRENTRaNK: 246,014 1. JOCONNOR1251. JOCONNOR125 521,324,087 1. JOCONNOR1251. JOCONNOR125 521,324,087
521,324,087 521,324,087
2. FRANTAZ.CAROLINE 2. FRANTAZ.CAROLINE 518,233,874 2. FRANTAZ.CAROLINE 2. FRANTAZ.CAROLINE 518,233,874
518,233,874 518,233,874
3. SPYDERMAN 3. SPYDERMAN 3. SPYDERMAN 3. SPYDERMAN
503,348,994 503,348,994
503,348,994 503,348,994
4. SWAGGZ 4. SWAGGZ
498,497,388 498,497,388
498,497,388 498,497,388
478,234,387 478,234,387
478,234,387 478,234,387
6. WHERESWALDO6. WHERESWALDO 476,864,965 6. WHERESWALDO6. WHERESWALDO 476,864,965
476,864,965 476,864,965
7. HAMMERTIME 7. HAMMERTIME 7. HAMMERTIME 7. HAMMERTIME
461,873,527 461,873,527
4. SWAGGZ 4. SWAGGZ
5. MILDMESS37 5. MILDMESS37 5. MILDMESS37 5. MILDMESS37
461,873,527 461,873,527
SARAH ROCCO
22
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
23
solution
T YPOGRAPHY III
SARAH ROCCO
24
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
T YPOGRAPHY III
25
SARAH ROCCO
26
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
27
afterword When I was first brainstorming about this project, our discussion about how technology driven our culture is inspired me to turn poke fun at this aspect of our daily lives. With a satirical approach, I chose to design an app that tracks how many breaths one takes during the day. The audience for the app is anyone who use tracking apps on a daily basis and are looking for another way to document their lives with technology. The tone of the app was kept light hearted as to appeal to those that will take the app seriously, as well as those who will download it for the gimmick quality and use it for a day at most. The app is not meant to revolutionize anyone’s daily life, but simply to poke fun at the fact that we have apps to track anything and everything—no matter how trivial or insignificant. Originally, I had a blue, cream, purple color scheme, but it made the app feel outdated and flat. I wanted the app to have more upbeat and energy filled feel since it was about tracking your breath (typically associated with increased activity). Also, the colors didn’t really reflect the satirical attitude; they are serious, but the app is more playful than satirical. Moreover, the style in which the information (how many breaths you take, the resting/sleeping/average rates) was portrayed was too scientific. The app was supposed to be fun, not serious and technical. Therefore, I modified the color scheme to yellow, red/purple, and white. These colors provided better contrast and legibility, and created a more lighthearted aesthetic. Similarly, I changed the type to a hand-lettering typeface to keep the level of sophistication (aka, haughty taught ness) low and relate-ability high. I also chose
to portray the information as a bar graph that would progress throughout the day because a circle was too small to accurately convey information. I believe the app to be successful in being comical but still functional. The information is clear and straightforward, and is appropriate for type of tracking it does. The colors are relatively gender neutral, allowing the largest audience and customer base for that lucky soul who wants to develop this app into the real deal. The singled out “breaths” in a script face on the home login screen is a nice accent that offers a hint of sophistication that is meant to be tongue-incheek. In other words, the change in typeface causes the viewer to pause, pondering the significance of the word and why it is separated from the rest, and then the realization that there isn’t anything noteworthy about it at all. However, I think the scale of the icons at the bottom could be adjusted, and that they could be refined to the fit hand-lettered quality of the app more. Also, I think more screens/measurements could have been developed. If I were to start this project over, I would like to try a more serious and more purposeful app; a possible idea I had was a spinoff of the goodreads app or something related with literature. I really liked the apps that utilized the geolocation feature and finding things that are near to where you are in the present moment. Throughout this project, I learned and explored a lot with contrast. Since some screens have multiple data points/lines overlapping, I needed to carefully choose colors that would overlap well and fit in with the color scheme.
INTELLECTUAL PROPERTY REPORT (IPP)
TIME SHEET
Typefaces used in this project, Amatic and Alex Brush, are public domain typefaces available free for personal and commercial. Programs used to finalize imagery for this project, were Adobe Illustrator and Adobe InDesign, are licensed to SUNY Fredonia and available for student use. Imagery and icons were created by me.
WEEK 1:
8 hr
WEEK 4:
13.1hr
WEEK 2:
12.5hr
WEEK 5:
15hr
WEEK 3:
10 hr
T YPOGRAPHY III
SARAH ROCCO
28
SARAH ROCCO
DESIGN PROCESS
T YPOGRAPHY II
DESIGN PROCESS
T YPOGRAPHY III
29
SARAH ROCCO
30
DESIGN PROCESS
This book was typeset in Amatic and Alex Brush, based on a typographic scale of 8pt.
SARAH ROCCO
T YPOGRAPHY II
DESIGN PROCESS
T YPOGRAPHY III
31
SARAH ROCCO
32
DESIGN PROCESS
TAKE YOUR ARTSY FARTSY PICTURES AND SHOVE ‘EM UP YOUR MOON SHIRT | COPYRIGHT 2014 © | BLOOMSBURG PRESS
SARAH ROCCO
T YPOGRAPHY II