typographic calculator

52
iPhone App: Typographic Calculator a tribute to a typeface Jacklin Nguyen A&D 318 Petrônio Bendito

Upload: j-n

Post on 18-Mar-2016

236 views

Category:

Documents


0 download

DESCRIPTION

typographic calculator

TRANSCRIPT

Page 1: Typographic Calculator

iPhone App: Typographic Calculatora tribute to a typeface

Jacklin Nguyen A&D 318

Petrônio Bendito

Page 2: Typographic Calculator

2 | iPhone App: Typographic Calculator

THE PROJECT

Page 3: Typographic Calculator

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).

Page 4: Typographic Calculator

4 | iPhone App: Typographic Calculator

THE RESEARCH

Page 5: Typographic Calculator

A&D 318 Fall 2010 | 5

Page 6: Typographic Calculator

6 | iPhone App: Typographic Calculatorhttp://www.beverlyhsu.com/cookies.html

Helvetica Cookies

Page 7: Typographic Calculator

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

Page 8: Typographic Calculator

8 | iPhone App: Typographic Calculatorhttp://www.lifeinthefastlane.ca/wp-content/uploads/2008/07/oded_ezer_3_freedom_is_fantasy.jpg

TypographyAnimal

Page 9: Typographic Calculator

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

Page 10: Typographic Calculator

10 | iPhone App: Typographic Calculator

ALPHABET Drawers

http://www.kentandlondon.co.uk/chestofdrawers/product_03/product_info.php

Page 11: Typographic Calculator

A&D 318 Fall 2010 | 11http://www.swiss-miss.com/2009/06/typography-soap.html

TypographySoap

Page 12: Typographic Calculator

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

Page 13: Typographic Calculator

A&D 318 Fall 2010 | 13http://littlefactory.com/scarf/uppercase/

Uppercase Scarf

Page 14: Typographic Calculator

14 | iPhone App: Typographic Calculator

TypographyStudy: Garamond

Page 15: Typographic Calculator

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

Page 16: Typographic Calculator

16 | iPhone App: Typographic Calculator

TypographyStudy: Gill Sans

Page 17: Typographic Calculator

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

Page 18: Typographic Calculator

18 | iPhone App: Typographic Calculator

TypographyStudy:Futura

Page 19: Typographic Calculator

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

Page 20: Typographic Calculator

20 | iPhone App: Typographic Calculator

Calculator Design Concepts

Page 21: Typographic Calculator

A&D 318 Fall 2010 | 21

Page 22: Typographic Calculator

22 | iPhone App: Typographic Calculator

CalculatorDesign Concepts: Garamond

Page 23: Typographic Calculator

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

Page 24: Typographic Calculator

24 | iPhone App: Typographic Calculator

CalculatorDesign Concepts: Gill Sans

Page 25: Typographic Calculator

A&D 318 Fall 2010 | 25

Page 26: Typographic Calculator

26 | iPhone App: Typographic Calculator

CalculatorDesign Concepts: Futura

Page 27: Typographic Calculator

A&D 318 Fall 2010 | 27

Page 28: Typographic Calculator

28 | iPhone App: Typographic Calculator

THE TYPEFACE

Page 29: Typographic Calculator

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 =

Page 30: Typographic Calculator

30 | iPhone App: Typographic Calculator

Design Revisions

Page 31: Typographic Calculator

A&D 318 Fall 2010 | 31

Page 32: Typographic Calculator

32 | iPhone App: Typographic Calculator

Page 33: Typographic Calculator

A&D 318 Fall 2010 | 33

Page 34: Typographic Calculator

34 | iPhone App: Typographic Calculator

Page 35: Typographic Calculator

A&D 318 Fall 2010 | 35

Page 36: Typographic Calculator

36 | iPhone App: Typographic Calculator

Page 37: 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

=

.

Page 38: Typographic Calculator

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

Page 39: Typographic Calculator

A&D 318 Fall 2010 | 39

49863.26

c

=

.

49863.26

c

=

.

Up State Over State

Page 40: Typographic Calculator

40 | iPhone App: Typographic Calculator

49863.26

c

=

.

2

c

=

.

Up State Over State

Page 41: Typographic Calculator

A&D 318 Fall 2010 | 41

49863.26

. = c

49863.26

. = cx

Up State Over State

Page 42: Typographic Calculator

42 | iPhone App: Typographic Calculator

Final Calculator Design

Page 43: Typographic Calculator

A&D 318 Fall 2010 | 43

Page 44: Typographic Calculator

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

Page 45: Typographic Calculator

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

=

.

Page 46: Typographic Calculator

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

Page 47: Typographic Calculator

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

Page 48: Typographic Calculator

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

Page 49: Typographic Calculator

A&D 318 Fall 2010 | 49

Page 50: Typographic Calculator

50 | iPhone App: Typographic Calculator

PROJECT STATEMENT

Page 51: Typographic Calculator

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.

Page 52: Typographic Calculator

Jacklin Nguyen | A&D 318 | Petrônio Bendito

iPhone App: Typographic Calculatora tribute to a typeface