iPhone CalculatorDesigned By Christina MarshPurdue University A&D 318Petronio Bendito

Table of Contents

Research

Calculator Design ConceptsBaskerville

FuturaOprima

Interaction Studies

Final Calculator DesignProject Statement

For this project, we were instructed to choose three

different fonts from a list of ten, and to develop calcu-

lator designs for an iPhone. The calculator designs are

meant not only to be functional and visually enticing,

but also to be a type of tribute to the chose font. Each

calculator design should not distract from the font, but

should highlight the characteristics that make the font

unique, whether it be serif or san-serif. The fonts that

I chose were Baskerville, Futura, and Optima. Basker-

ville is my favorite serif font, Futura is my favorite san-

serif font, and Optima is a font that I chose as a chal-

lenge because I did not know a whole lot about it and

its characteristics.

Research

Research

BaskervilleBaskerville has always reminded me of an Old World, Antique feel. Things I think of that would be associated with this font would be old clocks, old telephones, newspapers, old signs, tags on clothing, an-tiques, rich and ornate patterns (like pais-ley), old documents, things that are aged with history, old black and white films

http://blogs.channelinsider.com/content001/voice_communications/avotus_roots_out_errant_telephone_charges.html

http://typefoundry.blogspot.com/2007/01/basker-ville-tercentenary.html

http://www.istockphoto.com/stock-photo-3481577-isolated-100-year-old-clock-face.php

This font has an emphasis on serifs. Almost all numbers have a distinct curly accent that makes me think of the way one would write with ink. There is also a great contrast between thick and thin lines among the various characters. They have almost a theatrical feel to them. Because this font was developed in the middle of the 18th century, the effects of the current time pe-riod can be seen. One important fact is that this typeface was very successful for books and book-printing. I think that will be a good direction to begin my design with, whether it has an impact on the background, colors, or layout.

1 2 3 4 5 6 7 8 9 0 - = + / . X C

http://www.changeanddecayinallaroundisee.com/index.php/entry/john_baskerville_the_movie/

http://www.bananareport.net/writing/morganspur-lock.html

Baskerville is a “transitional” typeface, designed by John Baskerville in England in the mid-18th century, revived in the early 20th century and widely used for books and other long texts. Many versions are available.

The various versions of “Baskerville” take as their starting point types used by John Baskerville in England in the mid-18th century. Baskerville had been a “writing master”, but at a time when the model to which writing aspired was not the humanist model, but one based much more closely on the work of engravers. When, having made a fortune in the japanning business, John Baskerville turned his attention to printing, he seems to have aspired to this aesthetic. He main works were monumental and classical in every sense: physically large editions of great classics (Virgil, the Bible). The type was crisp, the paper smooth and pale. They are often classified as “transitional” type, because they bridge the gap between “old-style” type (with its oblique stress and relatively low contrast) and “modern” type, with its vertical stress, high contrast, and sharp finish. Baskerville’s roman is fairly round and open, with a vertical stress but relatively low contrast.

Baskerville’s type (which he probably helped design, but which was cut for him by others at a time when punchcutting could never be mere transcription) was highly successful only for a short time--though the glow lasted longer in France. By the early 19th century the modern face had superseded it, and when the reaction against the modern occurred in the late 19th century, it was to earlier “old face” types that people returned. Interest in Baskerville seems to have revived in the early 20th century, with Bruce Rogers among others taking an interest in him. It came to be suspected that the tran-sitional label, which suggested that Baskerville was simply a stretch of road between two distinctive peaks of design, did not do justice to its originality.

Not surprisingly, therefore, the type was revived for mechanical composition in the 20th century. ATF was first, followed by English Monotype in 1923, and thereafter other manufacturers (notably linotype) followed suit. Monotype Baskerville (Series 169), perhaps the best-known of these revivals was a commercially successful type despite (or perhaps because) it was heavily “cleaned up” by the Monotype drawing office producing what Sebastian Carter, in Twentieth Century Type Designers,aptly describes as a “somewhat odourless type”. It was, however, widely regarded as well-proportioned: Hugh Williamson, in Methods of Book Design (1956), regarded it as “one of the most readable and pleasant designs now in use”, and his judgment probably reflects a fairly broad consensus among mid-twentieth century book designers.Baskerville (like Caslon) had quite different designs for use at different sizes. Monotype’s was based on a font designed for use at a fairly large size in an edition of Terence’s comedies published in 1772. ATF and Linotype used strikes from genuine punches of a smaller size type; it is not therefore surprising that different versions of Baskerville look noticeably different: they are (or may) still be “authentic”.

Baskerville, in its various versions, was popular for book work during the letterpress era. How has it survived digitization and offset printing? In principle, it should do well: Baskerville’s printing technique did not depend (indeed it eschewed) the three-dimensional element of letterpress. His model was planographic or sharp-edged: the inscription and the engrav-ing. He ought to thrive.

As usual, the picture is mixed, but there is now a fair range to choose from. Although opinions may differ, digital Monotype Baskerville seems to lack something: it inclines to the anaemic, and tends to “glitter” unattractively. Digital, photographic and offset reproduction also seems to accentuate some features which were known to be faults in the let-terpress version, especially the relatively darker stroke of the uppercase. It may well be one of the early digitizations in which something important was lost. ITC New Baskerville (Matthew Carter and John Quaranta, 1978) has better weight, but it is purchased at the price of a more extreme contrast which leads to reservations about its suitability as a text-font for long-distance immersive reading (see, e.g., Dean Allen’s comment: “quite usable but unsuitable for use in immersive reading”). Frantisek Storm’s John Baskerville is a more recent version, which promises to be an “absolutely ordinary and inconspicuous typeface” (the very virtues which recommended Monotype Baskerville in metal), based on 14pt types used for Baskerville’s editions of the Bible and Virgil. There is a version specifically designed for use at small sizes (10pt and below): Storm’s thus has all the hall-marks of a revival designed for use in text. Lars Bergquist’s Baskerville 1757 is another attempt to re-create John Baskerville’s original type. Another extremely popular font inspired by Baskerville, but with a very different aim, is Mrs Eaves.

http://typophile.com/node/12622

FuturaProbably the most important geometric sans typeface, often imitated but never (quite) excelled. Designed by Paul Renner for the old German Bauer foundry (today the Fundición Tipográfica Bauer in Spain) between 1927 and 1930. Strongly influenced by the Weimar-era minimalist spirit that also played a role in theBauhaus school (Renner himself was not a member of the Bauhaus). The large Futura family comprises one of the earliestsans serif type systems, and has grown over the years to include a complementary condensed family, a wide range of weights, and obliques.

Almost 80 years later, Futura’s popularity as a crisp, clean sans serif typeface has not waned, and versions of the family are available from almost every major vendor. The original designs owned by Fundición Tipográfica Bauer are distributed via the Spanish foundry Neufville Digi-tal, who offer a superior version of the family with old style figures and small caps. Futura as Renner originally conceived it was definitely a product of the experimental spirit of the times, and included a wide variety of radically diverse alternate forms for various letters. While not offered by Bauer with the original metal version of the typeface, and then left unavailable for many years, these alternate forms were included by The Foundry in their issue of Architype Renner.

In the 1980s, Adrian Frutiger took inspiration from Futura in his design of Avenir, and lat-er Avenir Next (with Akira Kobayashi, 2004). These are less new typefaces than revisions of Futura to match Frutiger’s model of how the sans serif typeface should work

http://typophile.com/node/12494

http://www.google.com/imgres?imgurl=http://livebandgigs.net/wp-content/uploads/2008/06/maroon5songsab-outjane5dw.jpg

http://www.designer-daily.com/how-a-simple-font-change-turned-into-a-pr-disaster-3224

http://www.josevaldesbartroli.com/graphic_design.html

http://www.dailyfreefonts.com/commercial-fonts/info/15052899-Futura-Central-European-Extra-Bold-Con-densed-Oblique.html http://www.etsy.com/listing/28290070/miss-futura-whitewash

http://ellieandabbie.typepad.com/bright_eyes_blue_eyes/abbie-food/

Photo Credits

There is nothing decorative about this typeface, and I would like to stay in sync with that in my calculator design. This typeface is most commonly associate with the Bau-haus movement, so incorporating design elements associated with that design period could be useful. I think another interesting thing to base my design off of would be the use of a perfect circle ( in 6, 8, 9 etc.) A circle could be a great basis for developing the entire layout. I also like that fact that this is a bold font, and it is used in very bold de-signs and circumstances. I don’t want this piece to be subtle at all because the font has the capacity to be very attention-grabbing.

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

OptimaOptima appeared in 1958, and is perhaps Hermann Zapf’s most original design. Although it was not con-ceived as a book face, the roman inflections of Optima font family make it legible for continuous reading. Optima is a sans serif font family with certain serif face features. These features give the face an inscrip-tional, humanist feel. The M is slightly splayed and the g echoes the Venetian style. The stems and cross-bars are mildly tapered and cupped at the ends to fa-cilitate the reading process. It can be used in display sizes or lengthy texts with affecting readability. Widely used in advertising for display and text lines as well as being used in brochures, catalogues and magazines. Optima™ is a trademark of Linotype Corp. registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions in the name of Linotype Corp. or its licensee Linotype GmbH

http://www.searchfreefonts.com/font/optima.htm

Photo Credits

http://media.www.ricethresher.org/media/storage/paper1290/news/2008/11/07/Election08/Campaign.Messages.Marked.By.Typography-3530592.shtml http://30gms.com/tags/C28/P20/ http://melon.bz/communications/branding-identity/olivia-yarrien http://rmjohnsonvt.com/blog/?p=457 http://rmjohnsonvt.com/blog/?p=457 http://www.linotype.com/13765/optimablack-font.html

Identifying Characteristics

italic is a sloped roman, not a true italicalthough a humanist sans serif, optima has a purely vertical axistapered slopes similar to serifed faces

Designer/History

Designed by Hermann Zapf, 1952-1955 and released in 1958 by Berthold. The Bitsream version is called Zapf Humanist. A new reworking, called Optima Nova, replaces the original sloped ro-man with a newly designed (by Akira Kobayashi with Zapf) true italic. It also adds a new titling font.

Character and Use

Much used from the late 50s through the 60s. Has a kind of faux classy quality, so many graphic designers gravitate toward it.Looks good at large sizes so it’s often used in signage where pure functionality is less important than a feeling of “style.” Optima Nova thickens the thins to make the font work better at text sizes, but the previous version might be preferable for display, unless you prefer the new wider titling font.Was used for engraved names on Vietnam Memorial.Is used by the Asian Art Museum of San Francisco.

http://www.rightreading.com/typehead/optima.htm

This font is interesting because it’s an impos-ter: it’s a san serif font with serif features. I think it could be great to try to play a game with the viewer and make them take a second glance to make sure that they’re really seeing Optima.

Also, the fact that the font has a completely vertical axis could be a really strong base for my designs. I’ve noticed that a lot of the ad-vertisements that I found that use Optima are either very lucrative and rich brands (Aston Martin), or are associated with purity and cleanliness (the Clinique ad), or are meant to sync with a very serious tone (the Vietnam Memorial). Richness, purity, and seriousness could be great ideas to convey through my design.

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

CalculatorDesign Concepts

CalculatorDesign Concepts

Baskerville

Futura

Optima

4534.

8746.

2736.

2736.

InteractionStudies

InteractionStudies

Up State

Over State

Up State

Over State

Up State

Over State

Up State

Over State

Up State

Over State

Final Calculator

Design

Black and White

000

255255255

Final Calculator

Design

Color

166168172

000

255255255

119160183

29118187

1193147

150207241

Over States

Project Statement

I believe that I have successfully composed a design that is a tribute to the font Optima. I didn’t really know much about the font to begin with, but through my research I discovered some things. Optima is a kind of hybrid font because it possesses qualities of a serif and a sans serif font. I see it as a mystery, a type of imposter among fonts because it doesn’t blatantly belong to one group or the other. I thought this puzzling, mysterious quality was a good direction to run with in my designs. Initially, my final design had cropped the right column of numbers on the left side; it was an attempt to make the viewers feel that they were seeing all of the numbers, but in fact they really weren’t. I chose to get rid of this cropping technique and simply add a gradient to the right row of numbers; this not only gave an element of depth to the composition, but also an air of mystery from the overlaying of the numbers. I needed to balance the mysterious feel with a feeling of stability, so I chose to present the left column of numbers in a plain, straightforward way. I also chose to position the operations buttons ( + - = etc.) widely and evenly spaced in the center. By doing this, I feel that they draw equally strong attention, and enhance the qualities of the font. From a color aspect, I wanted to convey crispness, a little bit of fun, and mystery. I have always been fond of a color scheme with a hue, tint, tone, black and white; I thought that if I found the right hue, all of my intended qualities could be represented. For a while, I had chosen a bright, hot pink as the hue. It had the fun pop that I wanted, the crispness the design needed to look more professional, and the mystery that I felt the font represented. After doing some color studies, however, I discovered that a frosty playful blue could accomplish those same things, but could also appeal to a wider audience of users ( pink tends to narrow the audience to only females ). I feel that the blue looks incredibly professional. The color scheme itself is very successful at highlighting the font, and also highlighting the character qualities that I associated with the font.

I have never designed a calculator before, but I felt that I had a good grasp on how to make the application user friendly. Throughout the design process, I was constantly uploading my jpg. files to my own personal iTouch, just so I could personally test the file and see how useable it was. I chose to place the operations buttons in the center column in an effort to clearly present them, and to also make them easy to use. When those buttons are so closely blended in with the number buttons, I personally find it hard to use; I knew that I had to first make a calcu-lator that I would be comfortable using before I could make one that other people would feel comfortable using. I chose to place the clear button in the top right corner, next to the text box; I feel that this placement can save the user a lot of time. Their eyes will already be focused up on the text box to see the answer, so the user doesn’t need to take any extra time to locate that clear button. I also had a reason in the order that I placed the operations buttons: I grouped the operations together with their natural partner ( + and -, x and /) and then placed the decimal and = last. The = button is the most important button out of the operations buttons, so placing it at the bottom of the column makes it easy to find. From an interaction perspective, I wanted to continue to convey a feeling of depth to the piece. Also, since I already had such a varied color palette, I didn’t feel it necessary to shift the colors during the over state. I instead chose to manipulate the sizing and opacity of the numbers. I shrank the numbers and lowered the opacity to make the viewer feel as if they really had the power to press the button and shrink the numbers. I chose to enlarge and change the color of the operations buttons not only to clarify to the viewer what button they pushed, but also to give that group of buttons their own unique set of over states. One little problem that was important to address what the size of the hit states for all of the numbers. I compensated by making the hit states fairly big; I then tested the calculator myself and found the hit states to be of an acceptable and functional size. In an effort to give a feeling of excitement and closure to the user when they finally click that button to make their calculation, I also applied a sound effect to the = button only.