Peter StockwellAD 318 - 01 Foundations in Intereractive Design

Professor Petronio Bendito

Table of Contents

Typeface Research

Bodoni

Optima

Futura

Assignment

Calculator Designs & Concepts

Calculator Design Development

Revisions

Over State Studies

Color Studies

Final Calculator Design

Optima

Bodoni

Futura

Final Black and White Design

Final Color Design

Final Over States

Artist’s Statement

2

3 - 7

4

5

6

8 - 15

10 - 11

12 - 13

14 - 15

16 - 33

16 - 21

22 - 27

28 - 33

34 - 41

36

37

38 - 39

40

1

Assignment

Objective Design an innovative calculator that explores the intersection of graphic and product design. Investigate the expressive potential of type while keeping in mind the func-tional aspects of the calculator (human factors). Make it innovative, fun and exciting for the user (experience design).

Requirements Design with a single typeface (provided by the instructor); 3 concepts each onewith a different typeface.

Incorporate basic interface design principles (user feedback, grouping…).

Produce your calculator using the action script included in the open source flash file.

Create a brand name and logotype for your calculator.

Create a color-themed collection and give name to each component of the collection. The collection must have one B&W and two color versions (total of three).

Your calculator’s dimensions (in pixel) must be iPhone compatible.

Your design must be functional. It needs to work in the context of a touch screen.Think about the size of people’s fingers (human factors).

Follow report deadlines provided in class by your professor.

Possible Fonts Garamond

Baskerville

Bodoni

Caslon

Times

Gill Sans

Futura

Helvetica

Optima

Universe

2

TypefaceResearch

2

http://www.sabah.com.tr/http://www.morisawa.co.jp/english/

http

://w

ww

.flic

kr.c

om/p

hoto

s/an

jens

/

http://ministryoftype.co.uk/words/article/fighting_talk/

3

Bodoni http://rotnmango.squarespace.com/Portfolio/

Bodoni was created in the final years of the eigh-teenth century by Giambat-tista Bodoni. In its earliest years it was considered a transitional modern font, bridging the gap between the older more traditional fonts and more modern fonts. It is known for its flat, unbracketed serifs, a drastic range of thick and

thin lines, and finally overall geometric design. Bodoni is an interesting font in that its letter forms appear rather unique with big circular bulges ending many of the serifs. The font has changed a great deal over the years to a very modern font remi-niscent of Helvetica in its structure.

1 2 3 4 5 6 7 8 9 0- + x / . c =

http://justcreativedesign.com/2008/03/17/

4

A rather recent typeface, Optima was designed by Hermann Zapf between 1952 and 1955. It is unique among san-serif fonts in its form, possessing a number of features reminiscent of other non-humanist type-faces. Its shape is almost calligraphic in style possess-ing both thicks and thins as well as smooth transitions

between them. Its shape is both elegant and simple, fun and yet constrained. It has a lot of character and is rather distinct in form without drawing too much attention to itself.

Optima

http://onecoledesign.com/htm

l/optima_m

ore.html

http

://w

ww

.lettr

7.co

m/g

raph

ic.h

tml

1 2 3 4 5 6 7 8 9 0- + x / . c =

5

FuturaFutura was designed by Paul Renner in 1927. A design in-spired by the design manifesto of the Bauhaus, it is completely geometric, lacking any serifs at all. Essentially it attempts to eliminate any and all superflu-ous parts of the form, how-ever, it does distinguish itself from other common san-serif fonts such as Helvetica with the use of tall ascenders. It was

actually quite important in the history of design as it inspired the creation of a number of later typefaces that range from stand-alone tributes to downright copies of Renner’s work. It has many variations in thickness, size, etc. One of the most commonly used typefaces (let alone san-serif typefaces), futura is often used to look sleek and modern.

www.davidairey.com/13-typefaces-every-graphic-designer-needs/

http://www.cds86.com/portsubmission/files/pages/futura.html

1 2 3 4 5 6 7 8 9 0- + x / . c =6

1 2 3 4 5 6 7 8 9 0

7

CalculatorDesigns

Concepts&

8

9

OptimaDesigns and Concepts

10

11

BodoniDesigns and Concepts

12

13

FuturaDesigns and Concepts

14

15

CalculatorDesign

Development

16

Revisions

17

18

19

20

21

CalculatorDesign

Development

22

StateOver

Studies

23

24

25

26

27

CalculatorDesign

Development

28

Color Studies

29

30

31

32

33

FinalCalculator

Design

34

Design

35

103104104

154154153

205204204

000

255255255

Final Black& White

36

813945

657345

487267

000

255255255

2273085

18521251

91196190

White

FinalColor

37

Final Over States

37

States

38

Artist’sStatement

Futura has a very simplistic, gemometric feel to it. It’s clean, precise and consistent. I wanted to portray this concept through my overall design while adapt-ing it to a more modern, playful aesthetic. Throughout my design I incor-porate gemoetric shapes (spe-cifically rectagles) to touch upon futura’s distinctive, gemometric design. Overall, the use of these rectangles potray a sense of sim-plicity. A theme that is once more touched upon in the use of plain black for the numbers (white for the over states). To create the sense of play-fulness, thus adapting the type-face for the more modern design preferences, I changed the size of the font. Note, I did not distort the font by stretching it or di-rectly cropping it (though I did in earlier sketches I later moved away from this idea). I merely changed the sizes of the different numbers, keeping the size of the symbols consistent to once again reference futura’s trademarks as a font. Playfulness was futher used in the color choice, though many of my color studies convey a sense of fun, the bright colors I used in the main design are particu-larly playful and create a sense of vibrancy that futher showcases futura’s versitality as a font.

One of the issues I quickly saw emerging as I worked on this paticular design was that the numbers overlapped. This pre-sented two problems both within the realm of functionality. The first was that since the buttons overlap, the hit stage (the area you can touch to actually hit the button) would also overlap. This would create problems within the program we were working in and would not allow the calculator to work properly. The second was that the user would have difficulty hitting the numbers not only because they overlapped but also because several of the numbers are rather smaller than others. I was then faced with a difficult descision, scrape the design entirely or attempt to fix the problems I saw. I decided to fix it and am quite happy with the result. It was because of this issue and a direct consequince of my brainstorming that I put the bars in the background. These bars serve as the actual buttons for each number and symbol. Thus the user has plenty of area to click or touch to activate the button and has a visual cue as to where they should touch. My initial idea of having only the button that is currently touched visible was scrapped to prevent a stobe effect in the design in favor of the much less visually shocking one I have now. 39

Note the angular, gemetric aspects of Futura’s design. This was my basis for using the geometric blocks to highlight one of Futrua’s defining characteristics.

Here we see what the actual hit frame is or the hittable area for each button. Roughly the size of a large finger, this rectangle is much easier to hit than the numbers themselves which vary greatly in size and overlap.

These stripes were made darker so the lower half of the calculator does not compete with the upper half. It’s more balanced and visually pleasing this way.

40