RESEARCH
Forced perspective typography http://www.todaydesign.be/non_drupal/blog/postimages/post01_08_08/pointofview_post02.jpg
Type defines an image http://www.graphicdesignblog.org/images/typography/typography-19.jpg
Conceptual type http://www.designw
orkl ife.com/?p=579 8
Clever Helvetica co
http://www.life cle ver.com/a-c offee-mu
Positive/negative sp
ace
http://fuckye ahtypogr aphy.tumblr.c om/post 7/using-negative-sp /2150973 9 ace-in-logo-design-ve ry-cl ever
ffee mug
g-for-helvetica-lover
s/
Typographic portait http://www.designers-revolution.com/?p=3863
Shaping something mundane into something creative and fun. http://geekadelphia.com/wp-content/uploads/2008/08/meat_fonts.jpg
Image/type association http://1.bp.blogspot.com/_IbKKHxP4YPc/TFoE84m1k5I/AAAAAAAAA 98/QCZ0Xvg6uFI/s1600/4_typestachesfinalnoperiod.gif
Type composing a poster http://ny-image0.etsy.com/il_fullxfull.168106400.jpg
Idea of familiarity and personal thought by using handwritten type. http://www.trendhunter.com/photos/91174#21
Skin embossment typography http://www.trendhunter.com/trends/rise-sigh-message-sheets
object replaced with its own name http://yesterdaywasnotdull.files.wordpress.com/2009/09/8_milkpackaging.jpg?w=450&h=367
Eifel Tower A http://3.bp.blogspot.com/_bVtGlUaW-tA/TCEMhQbaLKI/AAAAAAAAIro/zV9DU7qH5A/s1600/PARIS_FINAL.jpg
RESEARCHtypefaces
Bodoni
odoni skerville, B a B n h o J y nced b used i and influe n o d o B is typically ta It is . tt th a b id w m ia f its stroke 1798 by G i because o contrasting n o ly d h o B ig Invented in h y s jo a n at h i’s oni). I e serif font th njoy Bodon ia.org, Bod e d o e ls ip a ik I . is a modern (W ls rmina isement me of s bulbous te and advert it d rs n te a s at reminds s o s th p e r e n c fo k fa ic e p th oke ctual ty ge ntrasting str and intelle t its messa y u s o s h s la t c o a n severely co e s ni doe oni to b r its Noir. Bodo . I find Bod y tt fs e ri B e s s specially fo a e rp h a i c n u sh o s d o e c B fa pe picked urvy Art Deco ty business. I ination of c s b it m s o c te l perhaps an ta u s rf firmly wonde politely yet ressed is a p d a m o te s C r in t te u s b on. Po rifs. ssed variati re p m o in sharp se C r g in d n Poste e s angle sudden hard d n a ls ir w s
Helvetica Helvetica “is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with Eduard Hoffmann…The aim of the new design was to create a neutral typeface that had great clarity, no intrinsic meaning in its form, and could be used on a wide variety of signage (Wikipedia.org, Helvetica).” Helvetica is the no-nonsense sans-serif font that has been obsessed over, loved or hated by typographic designers. Helvetica is used often by the U.S. government for forms and documents. It has been used for many famous company’s logotypes as well as for traffic signage. I chose Helvetica because of its sterile, perfected, scientific style. Helvetica, in my opinion, is like the Adam and Eve of typography; in other words, it is the original, pure, ideal, unblemished Roman alphabet and how it looked before any crazy and creative type families were born. Helvetica’s stroke thickness never varies which compliments its surrounding negative space very well.
FUTURISM
typefaces
Futura was invented by Paul Renner in 1927 and is a representative of the Bauhaus design concept. It is a sansserif font that has barely any stroke contrast and utilizes nearly perfect circles to constuct letters such as O, P, Q, etc. (Wikipedia.org, Futura typeface) I find Futura to be playful, bottom-heavy, and easy to get along with. I especially love the adventurous and creative nature of the Bauhaus art movement so any font family associated with Bauhaus is alright with me. I have done quite a few projects with Futura so by now it’s a familiar face. While its minimalist sans-serif style suggests modernism and professionalism, there is a certain casual charm and attitude to Futura that I cannot resist. For my final choice of font for my calculator, I decided upon Futura, Extra Bold.
PRELIMINARY Baskerville
Gill Sans
9483.6643196
Caslon
Garamond
Univers
8313.921842910
CONCEPTS Bodoni
9382.1154215
216.89643143
32
87
109
654
621.2759268
Helvetica
Futura
REVISION
Color Study
Mouse Over Ideas
1 NORMAL
MOUSE OVER
Number grows to shown state then sways back and forth slowly.
DIVIDED! MOUSE OVER
Symbol sways back and forth slowly.
MOUSE DOWN
Symbol pulses twice upon click. White bar and text zoom in from right side.
MOUSE DOWN
Number pulses twice upon click. White bar behind “1” zooms in from right side.
UP STATE
OVER STATE
Ripples generate constantly in the background and fade out.
Number expands and ripples expand from behind number.
3 UP STATE
OVER STATE number expands.
OVER STATE symbol expands.
FINAL DESIGN COLOR FINAL The Extra Bold Futura Color Calculator Designed by Jon Benson iPhone App 320 x 480 px Flash CS5 ActionScript 3.0 38 KB
28 166 74 93 186 71 92 190 139 30 44 48
1234
39 75 89 255 255 255
BLACK & WHITE FINAL The Extra Bold Futura Color Calculator Designed by Jon Benson iPhone App 320 x 480 px Flash CS5 ActionScript 3.0 38 KB
120 120 120 153 153 153 227 227 227 238 238 238
1234
247 247 247 255 255 255
OVER STATES
3 up
9
over 28 166 74
28 166 74
93 186 71
93 186 71
92 190 139
92 190 139
30 44 48
30 44 48
39 75 89
39 75 89
255 255 255
255 255 255
(Over state color is relative to up state’s currently cycled color)
COLOR STUDIES
1234
MASTERPIECE
STATEMENT Why is your final design a tribute (or homage) to the typeface of your choice? Futura comes from the Bauhaus movement which was known for being radical, revolutionary, and freespirited. My design honors these origins of Futura through the usage of bright, bold colors and playfully arranged text. Bauhaus was a master of compositional balance and liked to use abstract, geometric shape as its subject material which is what I tried to mimic with my design. My design’s composition is laid out in a tightly configured flow of letterforms. The layout of the numbers really boasts Futura’s magnificent geometric quality and causes your eye to flow from one number to the next. Futura is also associated with taking risk and making daring moves. I accomplished this by having my design circulate through five distinctly different color studies. Overall, the design is playful, alive, and exciting, just as is the typeface of Futura.
What measures did you take to make sure human factors were taken in to account in your design? I chose the largest, thickest font style of Futura I could (Extra Bold) to maximize the user’s ease of successfully hitting a button. When rolled over, the button increases in size along with the hit state, making the buttons even easier to hit. For the hit state, I also sealed up all holes in numbers such as the two in the number “8” and the one in the number “6” so the user doesn’t have to worry about not hitting the number he means to. All the numbers and symbols have an equal amount of space to them so all buttons are equally easy to roll over. I separated the calculator’s functions in a logical fashion, according to their similarity in purpose, grouping addition, subtraction, multiplication, and division together at the top of the composition and the clear and equals button below the numbers.