Issuu on Google+


thesis process book Aura Seltzer


Š 2012 Aura Seltzer

Maryland Institute College of Art, Graphic Design MFA 2012 project typeconnection.com portfolio auraseltzer.com department thesis2012.micadesign.org/seltzer


Contents 4

the project

25

the essay

31

the exhibition


the

Project


5

The Overview what is type connection ?

This book presents the evolution of Type Connection. Sidebars share insights from my process as I edited and refined Type Connection’s concept, content, and visuals.

I began my thesis project by asking, “How can typography use humor to engage and inform an audience?” Type Connection is my answer to this question. Type Connection is a game that helps users learn how to pair typefaces. Like a conventional dating website, Type Connection presents its users with potential “dates” for each main character — without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. Users are matchmakers. They decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, they explore typographic terminology, type history, and more.


6

The Typeface Persona case study: creating adobe garamond pro's dater profile

Type Connection’s use of parody, metaphor, and personification make the game a light and humorous educational tool. As a proof of concept, I set out to write my first character’s dater profile and describe Adobe Garamond Pro as a person.


7

Adobe Garamond Pro Gender: Male Physique: Sturdy and agile, well-defined forms Heritage: French Looking for: Long-term dating, companionship

draft 2 I drew ideas for profile sections from existing online dating sites. After writing this early draft, I concluded that I needed to get rid of aspects that were not directly related to type or did not impart specific information about the typeface. Especially on the internet, users wouldn’t be willing to read a lot.

About Me: I am a modern-day High Renaissance man. My cologne is the scent from rows of old books that line my apartment. I don a well-groomed mustache with the occasional five o’clock shadow, a vintage tailored suit, and sharp-toe oxfords. A graceful, understated stride complements my firm handshake. I strive to accommodate others and willingly assist those who ask for help. I spent a number of years traveling across Western Europe, during which I learned how to properly cook beef bourguignon. At times, I command the presence of a male gymnast, swinging fluidly between parallel bars, but alas, I am a mere librarian. Core Values: Tradition, loyalty, flexibility My Perfect First Date: A show at the opera, lectures or book signings, a wine tasting My Ideal Match: Is not afraid of public transportation. Is detail-oriented but far more spontaneous than me. Accepts me for who I am despite my unsettled lineage. Is warmhearted and kooky, like a hand-sewn sweater. Will unknowingly convert me into a man who cuddles (or at least one who obligingly holds hands in public).

AaBbCcDdEeFf GgHhIi JjKkLlMmNnOoPpQq RrSsTtUuVvWwX xYyZz


8

my profile

g

Adobe Garamond Pro

g Review my Matches

my profile

italic

bold all caps

Adobe Garamond Pro gender

Male

physique

regular

bold italic

heritage

Sturdy and agile, French well-defined forms

looking for

Long-term relationship, companionship

semibold all caps bold small caps

semibold italic

about me

I am a modern-day High Renaissance man who dons a well-groomed mustache, the occasional five o’clock shadow, a vintage suit, and wedged-toe oxfords. A graceful, understated stride complements my firm handshake. I strive to accommodate others and willingly assist those who ask for help. At times, I command the presence of a gymnast, swinging fluidly between parallel bars, but alas, I am a mere librarian. core values

Tradition, loyalty, flexibility perfect first date

A show at the opera, lectures or book signings, a wine tasting ideal match

Is not afraid of public transportation. Is detail-oriented but spontaneous. Accepts my unsettled lineage. Is warmhearted and kooky, like a hand-sewn sweater. Will unknowingly convert me into a man who cuddles ( or at least holds hands in public ).

semibold bold

regular all caps


9

draft 3 (opposite) Draft 3, typeset in Adobe Garamond Pro, appeared with a corresponding type specimen in an early website mock-up. A critique suggested that I tone down the personification and focus on facts about typography and pairing. Specifying a typeface’s gender was a polarizing statement, and stating a typeface’s “ideal match” was too narrowing. Ideas for the “perfect first date” could be used for design ideas but didn’t need to appear in the profile. Mentioning what a typeface was “looking for” was also unnecessary. final draft (left) Rather than repeat the “About Me” text in both the profile and specimen, I presented the final draft of Adobe Garamond Pro’s profile solely as a type specimen. Subsidiary profile information like physique and heritage would exist in some other fashion on the site. I shifted the site’s frame from personification to type information and pairing strategies. I wrote a separate paragraph about each typeface’s history to accompany its specimen.


10

light italic

a sample of specimens (left to right) Glypha, Gill Sans, Maple, ITC Cerigo


11


12

The Strategies

Seek Physical Similarities.

devising strategies for pairing typefaces

You may be drawn to look-a-likes — those whose similar height, weight, proportions, and bone structure are similar to your own. Accept the narcissism of love, and use your own features as a matchmaking guide. In Type Terms: Pairing typefaces with common proportions will be easier on readers' eyes. Look for similar

draft 4 I wrote a set of five strategies for finding the right match to accompany an early stage of the website. Research drove me to think about similar proportions, contrast, time period, mood, and staying within a single typeface family. Each strategy is broken up into two voices: one that speaks with metaphoric language to users as if they are typefaces (not matchmakers) and another that speaks in specific typographic terms.

x-heights, cap heights, ascenders, and descenders, as well as correlating aperture size, axis tilt, terminal shape, and stroke consistency/geometry. Likeness in lowercase a, g, e (and sometimes t, f, q) — usually the most representative forms of a typeface — can suggest a solid pair.

Remember Your Roots. Sharing a historic era, customs, and values with your partner can strengthen your relationship. You may never argue over which type of art to hang in your foyer or, more importantly, how to raise your children. Before even meeting, you will be on the same page. In Type Terms: You can create harmonious matches by choosing typefaces designed for the same tool (pen, brush), output medium (metal, wood, screen), time period, or concept. Old style serif typefaces go well with humanist sans despite being years apart, because both were inspired by the broadnib pen.


13

Embrace the Other.

Rely on Your Family.

You may feel attracted to those who are different from

If you are ever lonely or need someone to talk to, you

you, hoping they will balance out your weaknesses and

can always count on the company of your immediate

bring something refreshing to the relationship. Too

family. Loved ones support you and make you feel

many differences can elicit friction — making cuddling

comfortable. Reach out to distant relatives if you feel

unbearable — so opt for just a few points of difference

claustrophobic at home or find your role too confining.

for a fairytale ending.

In Type Terms: You can utilize various weights from

In Type Terms: Pairing typefaces that contrast in weight,

a single type family, extended family, or superfamily, as

scale, width, spacing, and/or casing systematize the

families were designed to share a set of consistent traits.

content and add balance to the composition. Many

Bolds, italics, extended, and condensed fonts introduce

successful complementary pairs feature a serif typeface

typographic color, while character alternates and

with a sans serif typeface. Designate distinct roles

ligatures can make familiar relationships seem novel.

for each face — headline, body copy, caption — to help readers understand order of importance in the text.

Match Your Mood. Potential mates who share your temperament may also gravitate towards you. A rugged outdoorsy type might not sympathize with the frequenter of a five-star restaurant. Finding a mate that meshes with your mood can help you feel comfortable together as a couple. In Type Terms: Letterforms can convey distinctive emotional qualities. Select typefaces that, when paired together, exude a tone that is in keeping with the text and context. Typefaces can be used to convey a range of emotions including earnestness, politesse, delight, confidence, and apprehension.


14

Rely on Family. You can utilize various weights from a single type family, extended family, or superfamily, because families were designed — many times by the same designer — to share a set of consistent traits. Bold, italic, extended, and condensed fonts introduce typographic color, while character alternates and ligatures can make familiar relationships seem novel.

Seek the Similar. Pairing typefaces that look alike can create visual consistency that will not distract readers from the writing itself. Use one face’s features as a matchmaking guide, and look for similar x-heights, cap heights, and ascenders/descenders, as well as correlating aperture size, axis tilt, terminal shape, and stroke consistency/geometry. Comparable lowercase a, g, e (and sometimes t, f, q) can also suggest a solid pair.

Embrace the Other. Pairing typefaces that contrast in weight, scale, width, and/or spacing can eliminate monotony and visually divide the text — making it easier for readers to understand hierarchy. Too much contrast can cause friction, so opt for just a few points of difference. Many successful pairs feature a serif typeface with a sans serif typeface. Assign distinct roles — headline, body copy, caption — to each to help readers deduce order of importance.

Explore the Past. Focusing on the context of a typeface’s creation can provide a better understanding of its nuances. You can create compatible matches by choosing typefaces designed for the same tool (pen, brush), output medium (metal, wood, screen), historic era, or concept. Old style serif typefaces go well with humanist sans despite being years apart, because both were inspired by the broad nib pen.

final draft In writing my final strategies, I realized that fiction shouldn’t be the frame to deliver fact. I eliminated any trace of metaphor and made sure to be generous and specific with typographic information. I eliminated the strategy about matching moods, because that strategy is not unique to pairing (it applies to typeface selection in general), is largely subjective, and is closely related to the design application. The remaining four strategies became guiding principles for choosing a cast of characters and determining “right” from “wrong” in the game.


15

The Cast main characters and daters

main characters Adobe Garamond Pro Archer ITC Century ITC Stone Sans Univers daters Apollo Avenir Bryant Chaparral Pro Cronos Pro Eurostile Futura Gill Sans Glypha ITC Cerigo ITC Franklin Gothic LinoLetter Linotype Centennial Maple PMN Caecilia Utopia

For Type Connection’s five main characters, I chose typefaces that came from different time periods, had a variety of inspirations, and did not overlap in classification. I used my finalized pairing strategies to choose accompanying typefaces for the game: each main character had a successful match along the three strategies (“Rely on Family” was treated separately). Also, I made sure to pick workhorse typefaces that I thought young designers would have access to through their schools (and that I had a license to through MICA ). I aimed to provide a wide enough selection for users to learn how to apply the strategies on their own.


16

The Website Development

Logo

Five strategies for finding your perfect match

early mock-ups

Call to Action/ Mission Username

Adobe Garamond Pro

Sign SignInIn

For the first iteration of Type Connection, users assumed the identity of a typeface and looked for a match. Upon logging in on the homepage, users familiarized themselves with their assumed profile and clicked “Review My Matches” to find a list of recommended typefaces to peruse. Users visited a potential matches’ profile page and evaluated compatibility by examining a design sample and comparing selected letters.

my profile

g

Adobe Garamond Pro

g Review my Matches

italic

bold all caps

regular

bold italic

semibold all caps

Meet the Daters

Intro Blurb/ Artwork (Success Stories)


17

The homepage wireframe for this mock-up was inspired by type foundry and dating websites’ homepages, both of which dominantly feature “success stories.”

For this iteration, anthropomorphism was at the forefront. The site implied freewheeling but had clearly-determined outcomes. It involved the user minimally and didn’t impart that much information about type. I didn’t focus on strategies or include wrong answers.

my matches: 1–5 of 5

Gill Sans

g View Compatibility

Return to Profile light

UltRa BOlD cONDENSED

cONDENSED all caPS

ShaDOWED all caPS

sort by: Best Match

g


18

With later iterations of the website, I turned Type Connection into a game where the user was a matchmaker who created pairings and set up couples to go on a date. I put typographic information at the forefront and used the humorous dating metaphor as a frame for the rich content. With a game-like structure, there were less expected results. I gave a reason for users to play again. Also, I used the strategies as a way to evaluate and organize the pairings. Type Connection became less about creating a simple tool to share formulaic matches and focused more on imparting strategies so that users would feel empowered to pair typefaces outside the context of the game.

I used paper mock-ups to test sequencing and underlying grids of revised iterations.


19

Head over heart. Evaluate Univers and Glypha’s potential as a couple.

Life’s too short to live alone. First, choose a character to match.

e k e e e

Send on a Date

Reevaluate Options

GRID FORMATION.

My work demands simplicity, precision,

and a global design vocabulary.

I dress for the day with a firmly-pressed shirt,

adobe garamond pro

high-wasted trousers, and functional footwear—

no embellishments. adobe garamond pro

univers

univers I broke through the glass ceiling.

glypha

I AM A STRUCTURAL ENGINEER WHO DREAMS IN

45 light all caps

GRID FORMATION. MY ANDROGYNOUS FEATURES

k f

My work demands simplicity, precision,

and architectural background signify my technical,

I broke through the glass ceiling.

73 black extended all caps

hard-willed attitude in the workplace.

MY ANDROGYNOUS FEATURES

and a global design vocabulary.

Built like a ladder

I dress for the day with a firmly-pressed shirt,

<

I AM A STRUCTURAL ENGINEER WHO DREAMS IN

39 thin ultra condensed

and architectural background signify my technical,

with long legs and jutting feet,

high-wasted trousers, and functional footwear—

I DOWNPLAY MY FEMININE CURVES AND OVAL FACE

adobe garamond pro

adobe garamond pro

no embellishments withresults wide-leg trousers . and geometric glasses. compatibility

hard-willed attitude in the workplace.

67 bold condensed oblique

65 bold

MY SQUARE HEAD AND ANGULAR JAW

I savor the intimidation factor

lowout Embrace Other stand at greatthe distances, of high Seek the Similar BUT MY NEUTRAL DEMEANOR & UNCANNY clonking platform heels med Explore the Past resemblance to my colleagues seem 49 light ultra condensed all caps

MY SQUARE HEAD AND ANGULAR JAW 67 bold condensed oblique

Let’s Play! stand out at great distances,

Built like a ladder

75 black oblique small caps

45 light small caps

47 light condensed

55 roman

45 light

45 light oblique small caps

49 light ultra condensed all caps

and can communicate an artistic vi-

BUT MY NEUTRAL DEMEANOR & UNCANNY

Family ton/a maskRely myonindividual -

55 roman

ity.

resemblance to my colleagues seem

to mask my individuality. 45 light oblique small caps

sion

with long legs and jutting feet,

75 black oblique small caps

solely through ideograms.

85 extra black small caps

I DOWNPLAY MY FEMININE CURVES AND OVAL FACE 53 extended all caps

with wide-leg trousers and geometric glasses.

67 bold condensed oblique

I savor the intimidation factor of 49 light ultra condensed all caps

clonking platform heels Life’s too short to live alone. First, choose a character to match.

55 roman

e k e e e I am A STRUCTURAL engineer who dreams in grid formation.

adobe garamond pro

a d r i a n f r u t i g e r , 1957

adobe garamond pro

univers (adrian frutiger, 1957) Univers is a neo-grotesque sans serif conceived as a total system for both metal and photosetting. A departure from Futura’s severity and Helvetica’s invisibility, Univers’ simple, homogenous structure is legible from afar and appropriate for long text. The numbering system for its 21 styles was a response to naming inconsistencies. With diagonally-cut curve ends, a square dot over the i, and G without a spur, Univers is neutral to different languages, as well.

adobe garamond pro

cap height x-height baseline

and can communicate an artistic vision

solely through ideograms.

45 light oblique small caps

0%

100%

adobe garamond pro

Gabocsegqtf

Head over heart. Evaluate Univers and Glypha’s potential as a couple.

My work demands simplicity, precision,

and architectural background

Heritage: Swiss Virtues: Renovation, illusion

hard-willed attitude in the workplace.

100%

and a global design vocabulary.

Built like a ladder

I dress for the day with a firmly-pressed shirt, wear

compatibility results

Only fools rush in. Pick a strategy for finding Univers' match.

SEEK

the

EXPLORE

the

PAST

FAMILY

1

2

3

4

Look closely.

Pairing look-a-likes requires an eye for detail.

med

Explore the Past

n/a

Rely on Family

Think deeply.

Sharing history and influences can lead to a pleasant future.

75 black oblique small caps

and imparting a bit of type knowledge.

high-wasted trousers, and functional

and a global design vocabulary.

i broke

through the GLASS ceiling.

I dress for the day with a firmly-pressed shirt, high-wasted trousers, univers

adobe garamond pro

no embellishments

glypha

Watch that cursor. Glypha isn’t very touchy-feely.

100%

adobe garamond pro

65 bold

hard-willed attitude in the workplace. 75 black

35 thin oblique

with long legs and jutting feet,

67 bold condensed oblique

55 roman all caps

I DOWNPLAY MY FEMININE CURVES AND OVAL FACE

stand out at great distances,

75 black oblique

with wide-leg trousers and geometric glasses.

49 light ultra condensed all caps

55 roman

Be careful.

e f e

k

My work demands sim& plicity, precision,

45 light oblique small caps

and architectural background signify my technical,

Try Again

View Best Match

53 extended all caps

55 oblique

I savor the intimidation factor of 75 black oblique small caps

clonking platform heels

resemblance to my colleaguesand seem can communicate an artistic vision

What’s comfortable can be easier, but it might not get Univers laid.

I AM A STRUCTURAL ENGINEER WHO DREAMS IN

MY ANDROGYNOUS FEATURES

Built like a ladder no embellishments

45 light small caps

45 light oblique small caps

45 light

to mask my individuality solely through ideograms. 100%

100%

GRID FORMATION.

65 bold oblique all caps

85 extra black small caps

BUT MY NEUTRAL DEMEANOR &

Meet the daters. Choose one to test its compability with Univers.

0%

One sentence stating

MY SQUARE HEAD AND ANGULAR JAW

0%

0%

Seek the Similar

on

SIMILAR

Act boldly.

Embrace the Other

RELY

the

OTHER Opposites attract and can make relationships more exciting.

low high

47 light condensed

35 thin

Swiss through the glass ceiling. IHeritage: broke Virtues: Order, objectivity

why the I dress for the day with arelationship firmly-pressed shirt, wouldn't work out

with long legs and jutting feet,

high-wasted trousers

EMBRACE

Physique: Stringent and spartan

65 bold

Reevaluate Options

<

univers

<

glypha I broke through the glass ceiling.

I AM A STRUCTURAL ENGINEER WHO DREAMS IN

Physique: Toned with good bone structure GRID FORMATION. MY ANDROGYNOUS FEATURES

0%

Send on a Date

My work demands simplicity, precision, ! vocabulary. k f and a global design

Find its Match

After choosing a main character, strategy, and date option, users evaluated compatibility by analyzing the nuances of the typefaces’ specimens. I indicated on a spectrum how well the typefaces fit the four strategies. The specimens were not the best way to learn more about each typeface or to be able to cross-examine their details. I also missed the opportunity to showcase beautiful letterforms on a larger scale with this design.


20

The Final Website typeconnection.com

I coded the final version of Type Connection with HTML5, CSS3, and jQuery â&#x20AC;&#x201D; all technologies that were foreign to me when I began my project. I also learned how to make the site responsive for three different browser sizes. The site is compatible with IE 6+, Safari 5+, Firefox 3.6+, and Chrome 17+. Typekit served the typefaces (FF Tisa Web with a hint of Le Monde Courrier). file breakdown 350 PHP files 287 images 18 folders 4 CSS files 3 JavaScript files 1 .ico icon

This graphic approach to the homepage makes the call to action clear and gives the sense that users are about to enter a typographic world. For the color palette, I wanted to avoid clichĂŠ love colors.


21

The reverse sides of the character cards describe the typefacesâ&#x20AC;&#x2122; personalities and showcase a limited palette of styles and weights. Historical descriptions for each typeface appear on rollover. The design reiterates the usersâ&#x20AC;&#x2122; main character choice by showing that typefaceâ&#x20AC;&#x2122;s faded character card next to the strategies. Rollover one-liners clarify the meaning of each strategy. After users choose a strategy, the game presents three daters for users to evaluate.


23

After selecting a dater, users evaluate compatibility based on their chosen strategy. Users can toggle between large letters of the two typefaces and click the circled areas to learn more about each typeface’s anatomy. Specimens show each face’s weights and styles. At this step, the website prompts users to send their chosen couple on a date. If the match is correct, users see a congratulatory page that explains why the match works. If the match is not the best answer for the strategy, a pop-up states why and lets users select a different dater.

happy couples Type Connection presents 20 successful typeface pairings. To illustrate how the pairings work together, I imagined design applications (e.g. a menu, newspaper, poster) that also allude to activities the typefaces would enjoy if they were people: a wine tasting, dinner and a show, or a lecture. Designs appear at the final step of the game and on a “Meet the Matches” page.


24

# of Visits: First Week of Launch 20,000 10,000

The Launch

march

26

27

28

29

30

31

april

analytics and favorite tweets In the first week of Type Connection’s launch, the site received over 62,000 unique visitors. Exactly one month later, that number had nearly doubled. Over 111,000 unique visitors have played, and the total number of page views has exceeded one million. The percentage of new visits is still high at 73%, and the percentage of returning visitors is slowly growing.

Mr. DeLand  @MrDeLand @auraseltzer @typeconnection is a fun way to explore an often difficult concept for young designers. well done! cipmann  @cipmann Didactic type site, loads of fun, superb copy. We highly recommend. typeconnection.com Virginia McLeod  @outcasteditions This is brilliant. And elegant. And smart: The Type Connection typographic dating game bit.ly@GRLWhm via @swissmiss + @the99percent Mark Staplehurst  @britburger @auraseltzer To be honest my face began to ache from the permasmile: they’re all spot on. The site is a perfect blend of academic & playful. Claire Monique  @clairemonique more fun than real dating sites!! a typographic dating game by @auraseltzer typeconnection.com

Emily Brophy  @elouwebdesign There are good things, and then there are amazing things that make you fall in love with the web all over again: typeconnection.com Dana Larson  @strawburrymiwk I wonder if other educational tools could mimic this kind of teaching method? I learned a lot more thn I have elsewhr. typeconnection.com/index.php jenny watson  @JennyiAm Now here are some relationships that will actually last forever. typeconnection.com Morgan  @bwoup Just discovered Type Connection, it’s brilliant. Engaging content and great presentation, good job! typeconnection.com @auraseltzer

David N Atkinson  @DNAtkinson Even non-type nerds shd check out Type Connection bit.ly/ H7adPP Fun, informative, slick, lovely copywriting. Congrats, @auraseltzer


the

Essay


26

The Essay when archer met avenir Type Connectionâ&#x20AC;&#x2122;s Teaching Methods for Pairing Typefaces

The thesis essay is a 1,500-word written piece about the themes, subject matter, and/or process of a thesis project. I wrote a persuasive essay that justifies from an educational standpoint three design judgments I made in developing Type Connection.

I have a love affair with typography. I love everything from its detailed forms and bold texture to its rich history and connection to both writing and speech. For my thesis project, I wanted to figure out how to get other graphic designers, especially students, excited to learn about type. I designed Type Connection, a website and modified dating game that aims to educate visitors about the choices involved in pairing typefaces. Through an interactive interface, I introduce users to personified typeface characters, teach strategies for pairing two typefaces together, and help users understand what constitutes a good combination. Type Connection could have taken many forms: a printed book, a how-to guide, a series of flash cards, and more. I decided to make Type Connection a website. As a website, Type Connection has the potential to reach a wider audience, quickly, at a more affordable price (for both myself and my users). The project is online and available for people to see with just one click. Users can access the resource at any time of day or night. As an educational tool, an


27

online game allows choices, and provides pacing

The virtue of this unique experience, however, is

and suspense —elements that are often lost or

that users feel empowered. Users are more likely

impossible to imitate through a book. An online

to enjoy learning about typography if they feel

game also enables the user to pair typefaces more

invested in the steps they take. They will be excited

easily and receive immediate feedback based on

to discover content because it feels like it is new

those choices. With a website, I can add and edit

information that I designed and wrote just for them.

information, as needed. Most importantly, I can reveal

The game follows users’ own tastes and decisions

a lot of information about typography gradually,

and, in doing so, uncovers strengths and weaknesses

in digestible bits, and account for different levels

that may not have surfaced without this personalized,

of involvement from my users.

interactive learning. With a website, users can return

Aside from discrepancies across Internet speed, devices, and browsers, the main disadvantage of

to the site as many times as they’d like, and will feel this sense of excitement each time they play.

teaching users how to pair typefaces through an

To teach users how to pair typefaces, Type Connection

online interface is that each user’s experience is

personifies typefaces and uses the metaphor that

different. Type Connection’s lessons depend on the

users are matchmakers for typefaces looking for

pairings users try and the number of times they

love. Like human beings, typefaces are built with

play. Each user’s interaction with Type Connection

common dna; they share basic anatomies (arms,

is unique, which may not allow for consistent

legs, x-heights, apertures, counters, etc.) that students

educational experiences or similar interpretations

can analyze and compare. I chose to anthropomor-

of the content.

phize typefaces so that, from the outset, users


28

Personification and metaphor inspire users to think creatively about pairing typefaces.

would get a sense of a

would not (and could not) give clear formulas. I

typeface’s physique,

did not want to provide strict rules on how to pair

voice, and personality.

typefaces, but because of this more open-ended,

The metaphor puts

imaginative strategy, I risked convoluting the topic

the user in a familiar

and confusing my users.

context. Everyone can sympathize with what it’s like (and what’s at stake) when searching for a potential companion. I hoped that users would become more emotionally invested in the success of their pairings if they were matchmakers, the ones responsible for the combinations, rather than graphic designers performing a task. Users learn by playing, a strategy that differentiates the site from other educational resources on typography. If users have fun while learning, they are more likely to return. Personification and metaphor inspire users to think creatively about pairing typefaces. They make an esoteric subject like typography approachable and fresh.

I worried that my users might become confused by the metaphor, so I reduced that risk by separating Type Connection’s creative writing from the practical writing about type. When I personified a typeface, I looked at the typeface as an image, not as a functional letterform, and interpreted the body and appearance of the typeface to be suggestive of human character traits. Type specimens and the reverse sides of character cards speak to the typefaces as people, and because I treated the text as a visual composition, the specimens and character cards showcase each face as a palette of weights and styles. “Family portraits” and “happy couples” snapshots allude to activities

By creating humanlike personalities for my typefaces

the typefaces would enjoy if the typefaces were

and challenging users to help them find love, I risked

people, but more apparently, the portraits and

disrupting Type Connections’ ultimate purpose:

couples illustrate the pairs in practical applications.

presenting users with reproducible strategies for

I separated the language of love from the language

pairing typefaces. For entertainment and engagement

of typography, and this allowed me to incorporate

purposes, I added creative writing and nonessential

extra levels of information that would enrich —not

layers of information through which users would

stifle — use of the website.

have to grasp these strategies. To allow for personification and metaphor, I decided Type Connection

Type Connection uses another method for teaching the pairing of typefaces: the selection of strategies.


29

Once users select a main character to pair, they

whether Type Connection can really be considered

choose whether to “rely on family,” “seek the similar,”

a game if it consists of a series of closed loops. Users

“embrace the other,” or “explore the past.” Their

could feel manipulated, as if they are being cornered

choice guides the subsequent options for daters and

to take specific paths. In requiring users to make

the degree to which I deem certain options correct

a choice—and one that is not truly open — I risked

(or not). From an educational standpoint, I introduced

frustrating users to the point where they would

the strategies as measuring sticks to help the users

stop playing.

evaluate the appropriateness of their pairings. This choice is monumental in the game. It orients users’ thinking about potential daters. It forces the users to make a judgment — one the users will likely repeat in real life when creating their own pairings — while making the users aware that there is more than one rationale for pairing typefaces. It encourages users to think strategically before responding visually, so that they will learn how to justify their own type decisions to others.

Type Connection focuses users'

I mitigated the possibility of users resenting (and leaving) the game by reinforcing the choices that they make each step thereafter. Instructions at future steps embrace users’ choice of strategy, whether I instruct them to “make themselves at home” and learn more about a typeface family or ask them to evaluate a pairing based on that strategy. In designing a closed loop for Type Connection, I guide users down paths in order to give them helpful feedback. Each response is tailored to users’ exact choices and

The challenge of forcing

imparts certain lessons. The illusion of a customized

Type Connection’s users to

response creates a delight that outweighs any pos-

choose a strategy before

sible frustration. By requiring the user to choose

are learning valuable lessons

proceeding with the game

between a few purposeful options, Type Connection

while enjoying the metaphor

is that it gives the impres-

focuses users’ thinking so users feel they are learning

sion that users have more

valuable lessons while enjoying the metaphor

control in the game than

of matchmaking.

thinking so users feel they

of matchmaking.

they really do. If unable to break rules or make genuinely free choices, users might rethink how much fun they’re having. They may question

When I launched Type Connection online, I felt proud that the project was complete and oddly comforted that no one knew about it yet. I hoped


30

that teachers would recommend the game, students

150 countries. I was ecstatic to read that people found

would enjoy playing, and that designers would pass

the site informative, innovative, and funny. They

it around in their close circles. I submitted a website

enjoyed playing. Each visitor spent an average of

link to eight design blogs, believing that their editors

three minutes doing so. Twenty-five percent of

would deem the project worth sharing. Immediately

visitors are return visitors. Some demanded more

after hitting Send, I worried about broken links,

typefaces be added to the site. Friends questioned

typos, and errors. I worried that visitors — especially

how I could monetize the site’s traffic and content.

typeface designers — would passionately disagree with my logic and pairings.

I created a Type Connection Twitter username, and I have nearly 400 followers. I have no clear vision of

That same day, Quipsologies and Swissmiss featured

where the brand should go next (if anywhere). I am

Type Connection, and the site received 9,873 visits.

far more excited about the opportunities that Type

Messages swarmed on Twitter, to my shock. The

Connection has allowed, from offers for freelance

number of international visitors impressed me most.

work to job interviews. I hope that Type Connection

Out of 106,000 unique visitors so far, only 42% are

will give me the chance to work on new projects that

from the United States — the remaining spanning

require a similar depth of thinking.


the

Exhibition


32


33

The Exhibition maryland institute college of art Meyerhoff Gallery, March 26 – April 1, 2012

installed 2,453 pieces of vinyl – Black Matte ~200 cards – Hammermill Color Copy Digital Cover, 100lb. ~200 handouts – Hammermill Color Copy Digital Cover, 100lb. 60 strips of Scotch blue painters tape – 1.5" wide 20 pieces of PVC plastic – white, 7.92" x 13" x 6mm 20 plotted prints – white, 7.92" x 13" x 6mm 6 nickel-plated display clips by Hammerpress 6 wire nails – #17 x 1"

3 packages of Velcro tape – 15" x .75" each 3 plotted posters – 30" x 22" each 2 extension cords 2 screws found in Brown 404 1.5 gallons Benjamin Moore Super Spec paint –“Titanium” 1 IKEA Lack wall shelf – white, 11.75" x 10.25" x 2" 1 pedestal – 40" x 18" x 24" 1 package light duty Arrow staples – .25" x 6mm 1 iMac – silver, 19" diagonal


34

Designing an exhibition about a website was a difficult task, especially because the majority of my content was written. I questioned how to present (and perhaps amplify) the dating metaphor. I added a few vinyl hearts to text but tried to make the design in keeping with the website’s neutral, clean aesthetic. My final installation included: a computer station for visitors to play the game; three specimen posters that represented the personification in the game; a vinyl flowchart that showed a top-down view of the game (otherwise a surprise while playing); and a colorful grid that celebrated the 20 “Happy Couples.” I gave away a card with the website URL and designer credits, hoping that visitors would play at home and share the website with friends. I also gave away a handout that listed the “Happy Couples” and described their date activities to illuminate the meaning behind their design applications.


35


A special thanks to my teachers, family, and friends for their smarts and support.



Type Connection: Thesis Process Book