typographic calculator
DESCRIPTION
typographic calculatorTRANSCRIPT
iPhone App: Typographic Calculatora tribute to a typeface
Jacklin Nguyen A&D 318
Petrônio Bendito
2 | iPhone App: Typographic Calculator
THE PROJECT
A&D 318 Fall 2010 | 3
Design an innovative calculator that explores the intersection of graphic and product design. Investigate the expressive potential of type while keeping in mind the functional aspects of the calculator (human factors). Make it innovative, fun and exciting for the user (experience design).
4 | iPhone App: Typographic Calculator
THE RESEARCH
A&D 318 Fall 2010 | 5
6 | iPhone App: Typographic Calculatorhttp://www.beverlyhsu.com/cookies.html
Helvetica Cookies
A&D 318 Fall 2010 | 7http://www.lifeinthefastlane.ca/wp-content/uploads/2008/07/oded_ezer_1_typoplastic_surgeries.jpg
Typo
plas
tic
Surg
erie
s
8 | iPhone App: Typographic Calculatorhttp://www.lifeinthefastlane.ca/wp-content/uploads/2008/07/oded_ezer_3_freedom_is_fantasy.jpg
TypographyAnimal
A&D 318 Fall 2010 | 9http://weburbanist.com/wp-content/uploads/2010/06/unusual-typography-items.jpghttp://inspireme.lasoeurkaramazov.net/public/Posts_08_11/typo_project_2.jpg
VegetablesTypography
10 | iPhone App: Typographic Calculator
ALPHABET Drawers
http://www.kentandlondon.co.uk/chestofdrawers/product_03/product_info.php
A&D 318 Fall 2010 | 11http://www.swiss-miss.com/2009/06/typography-soap.html
TypographySoap
12 | iPhone App: Typographic Calculator
Typography Salt and Pepper Shaker
http://www.etsy.com/listing/24258664/retro-vintage-wood-letters-typography?ref=sr_gallery_3&ga_search_query=typography&ga_search_type=vintage&ga_page=5&order=date_desc&includes[0]=tags&includes[1]=title
A&D 318 Fall 2010 | 13http://littlefactory.com/scarf/uppercase/
Uppercase Scarf
14 | iPhone App: Typographic Calculator
TypographyStudy: Garamond
A&D 318 Fall 2010 | 15
1234567890+ - / x . c =
Claude Garamond was a French publisher and type designer whose designs are the basis for many modern Garamond versions. Others are based on designs of Jean Jannon, a French printer who was also inspired by Garamond’s work. Over the years, their designs have inspired many foundries. Garamond typefaces offer elegance and readability, making them suitable for a wide range of applications. This small roman type became the standard European type of the day, and his fonts have been widely copied and are still produced and in use today. Garamond’s roman is regarded as one of the classic typefaces of all time. Garamond is considered to be among the most legible and readable serif typefaces for use in print applications. It has also been noted to be one of the most eco-friendly major fonts when it comes to ink usage.
http://www.identifont.com/show?2VJhttp://typophile.com/node/12481
16 | iPhone App: Typographic Calculator
TypographyStudy: Gill Sans
A&D 318 Fall 2010 | 17
1234567890+ - / x . c =
Gill Sans was designed by Eric Gill in the 1920’s and was originally produced for the London & North Eastern Railway, and used for all signs, advertising, and timetables. Because the characters of the Gill Sans alphabet are based on classic roman letterforms and not geometric shapes, they are remarkably legible. Gill Sans also has a more pronounced contrast in stroke widths than most serifless fonts, making the design more appealing to the eye, and ultimately makes it more readable. More information can be set in a given space when using Gill Sans than with most other sans serif designs.
http://www.prepressure.com/fonts/interesting/gill_sanshttp://www.identifont.com/show?MB
18 | iPhone App: Typographic Calculator
TypographyStudy:Futura
A&D 318 Fall 2010 | 19
1234567890+ - / x . c =
Futura was designed by German typeface designer Paul Renner in the mid-1920’s for the old German Bauer foundry. Its geometric shapes were inspired by the Bauhaus, the German arts and crafts school/movement. The typeface is derived from simple geometric forms (near-perfect circles, triangles and squares) and is based on strokes of near-even weight, which are low in contrast. Almost 80 years later, Futura’s popularity as a crisp, clean sans serif typeface continues strongly, and versions of the family are available from almost every major vendor.
http://www.prepressure.com/fonts/interesting/futurahttp://typophile.com/node/12494
20 | iPhone App: Typographic Calculator
Calculator Design Concepts
A&D 318 Fall 2010 | 21
22 | iPhone App: Typographic Calculator
CalculatorDesign Concepts: Garamond
A&D 318 Fall 2010 | 23
+-*/
c.=
1465.544
12345 67890
+-*/
c.=
1465.544
+ – / = c
1 2 3 4
1470
258
369
135165.145
+ - * / . = c
24 | iPhone App: Typographic Calculator
CalculatorDesign Concepts: Gill Sans
A&D 318 Fall 2010 | 25
26 | iPhone App: Typographic Calculator
CalculatorDesign Concepts: Futura
A&D 318 Fall 2010 | 27
28 | iPhone App: Typographic Calculator
THE TYPEFACE
A&D 318 Fall 2010 | 29
I chose Futura as the typeface to design my Typographic Calculator with because of its simplicity and sleekness. The geometric lines and the unified curves of the numbers are very clean and sophisticated. I think this typeface will work well in the calculator because the numbers are very legible and will bode itself to be very functional since there are no extreme decorative elements that would get in the way. I will be able to use this sans-serif typeface in many different ways without losing its functionality.
1 2 3 4 5 6 7 8 9 0
+ - / x . c =
30 | iPhone App: Typographic Calculator
Design Revisions
A&D 318 Fall 2010 | 31
32 | iPhone App: Typographic Calculator
A&D 318 Fall 2010 | 33
34 | iPhone App: Typographic Calculator
A&D 318 Fall 2010 | 35
36 | iPhone App: Typographic Calculator
A&D 318 Fall 2010 | 37
49863.26
c
=
.
49863.26
c
49863.26
c
49863.26
c
49863.26
c
=
.
49863.2 6
c
=
.
49863.26
c
=
.
49863.26
c
=
.
38 | iPhone App: Typographic Calculator
49863.26
c
49863.26
c
49863.26
c
49863.26
c
49863.26
c
49863.26
c
49863.26
c
49863.26
c
=
.
c
A&D 318 Fall 2010 | 39
49863.26
c
=
.
49863.26
c
=
.
Up State Over State
40 | iPhone App: Typographic Calculator
49863.26
c
=
.
2
c
=
.
Up State Over State
A&D 318 Fall 2010 | 41
49863.26
. = c
49863.26
. = cx
Up State Over State
42 | iPhone App: Typographic Calculator
Final Calculator Design
A&D 318 Fall 2010 | 43
44 | iPhone App: Typographic Calculator
Blac
k an
d W
hite
49863.26
FUTURAINBOWDesigned by Jacklin Nguyen
iPhone App320 x 480 pxFlash CS5ActionScript 3.019.1 KB
000
255255255
A&D 318 Fall 2010 | 45
Fina
l Col
or S
tate
s
49863.26
49863.26
c49863.26
c49863.26
c
49863.26
c49863.26
c
49863.26
c
49863.2 6
c
=
.
49863.2 6
c
=
.
49863.2 6
c
=
.
46 | iPhone App: Typographic Calculator
Fina
l Bla
ck a
nd W
hite
Ove
r Sta
te
49863.26
000
255255255
up
49863.26 49863.26 49863.26
A&D 318 Fall 2010 | 47
Fina
l Col
or O
ver S
tate
49863.26up
2042550
2552040
1530153
01530
51153204
2550204
255255255
153153153
000
00255
2555151
204253255
2551020
49863.26 49863.26 49863.26
48 | iPhone App: Typographic Calculator
Fina
l Col
or V
ersi
on
49863.26
FUTURAINBOWDesigned by Jacklin Nguyen
iPhone App320 x 480 pxFlash CS5ActionScript 3.018.4 KB
2042550
2552040
1530153
01530
51153204
2550204
255255255
153153153
000
00255
2555151
204253255
2551020
A&D 318 Fall 2010 | 49
50 | iPhone App: Typographic Calculator
PROJECT STATEMENT
A&D 318 Fall 2010 | 51
My final design is a tribute to the the typeface of my choice, Futura, because I placed let the numbers take up most of the space on the calculator. There are no extra or unnecessary objects that are on the design which allows the typeface to take center stage and have the attention drawn on the numbers. The way the numbers are angled flow nicely with the lines of the numbers and add interest to the design. This final design showcases the typeface in a very simple, yet effective manner because there is nothing that distracts the attention away from the numbers or symbols. Everything is placed nicely on a grid, but it is also interesting and exciting because of the angled placement. This design pays proper homage to Futura because it has not been distorted or overpowered by anything else and showcases the sleek, simple, and elegant shapes of the numbers and symbols.
In this design, the colors play an intricate part in the tribute to Futura. The dark background contrasted with the varying, bright colors adds playfulness to the design, highlighting the numbers. The colors make the numbers stand out from the dark background which draws attention to the wonderful typeface. Also, the rainbow of colors are inviting and makes the design more appealing. This captures attention to the numbers and invites the viewer to use the calculator. The numbers on the calculator are large and easy to read because the numbers are fully shown and not hidden or covered by any element, allowing the full essence of the typeface to shine through.
There were many measure that I took to make sure human factors were taken into account in my design. After initially designing the calculator, I tested it in an actual iPOD to test out how the design appeared on the screen. I tested to see how each number would be touched and what the ease of making calculations would be with my design. With the testing, I was able to see if the numbers were large enough to be able to function correctly without accidentally hitting any other numbers or symbols. I also got to see how the functionality of the calculator was in regards to if the placement of the numbers and symbols were the most efficient and logical.
I went back and forth between making changes to the design and testing it in the actual product to make sure the design was made the most efficient in regards to actual use by people. The human factor played an important part in my design, and I had to find the solutions to make sure the calculator was functionally and efficient, but also keep the aspects of design in mind. It was a tough process, but I managed to showcase the beauty of the Futura typeface while also designing an effective calculator.
Jacklin Nguyen | A&D 318 | Petrônio Bendito
iPhone App: Typographic Calculatora tribute to a typeface