Peter Stockwell AD 318 - 01 Foundations in Intereractive Design Professor Petronio Bendito
Table of Contents Assignment
Calculator Designs & Concepts Optima
10 - 11
12 - 13
14 - 15
Calculator Design Development
16 - 33
16 - 21
Over State Studies
22 - 27
28 - 33
Final Calculator Design
8 - 15
34 - 41
Final Black and White Design
Final Color Design
Final Over States
38 - 39
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).
Design with a single typeface (provided by the instructor); 3 concepts each one with 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.
Garamond Baskerville Bodoni Caslon Times Gill Sans Futura Helvetica Optima Universe
Typeface Research 2
Bodoni was created in the final years of the eighteenth century by Giambattista 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 reminiscent of Helvetica in its structure.
1234567890 -+x/.c= 4
Optima 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.
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 typefaces. Its shape is almost calligraphic in style possessing both thicks and thins as well as smooth transitions
Futura Futura was designed by Paul Renner in 1927. A design inspired by the design manifesto of the Bauhaus, it is completely geometric, lacking any serifs at all. Essentially it attempts to eliminate any and all superfluous parts of the form, however, 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.
Calculator Designs & Concepts 8
Designs and Concepts
Designs and Concepts
Designs and Concepts
Calculator Design Development 16
Calculator Design Development 22
Over State Studies 23
Calculator Design Development 28
Color Studies 29
Final Calculator Design 34
Final Black & White
103 104 104
0 0 0
154 154 153
255 255 255
205 204 204
227 30 85
81 39 45
0 0 0
185 212 51
65 73 45
255 255 255
91 196 190
48 72 67
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 adapting it to a more modern, playful aesthetic. Throughout my design I incorporate gemoetric shapes (specifically rectagles) to touch upon futura’s distinctive, gemometric design. Overall, the use of these rectangles potray a sense of simplicity. 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 playfulness, thus adapting the typeface for the more modern design preferences, I changed the size of the font. Note, I did not distort the font by stretching it or directly 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 particularly 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 presented 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.
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.