typographic calculator
Post on 07-Mar-2016
238 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related