TYPOGRAPHY SYSTEMS

Marisa BohlmannGDES 312 03Spring 2012

TYPOGRAPHIC JOURNEY

Eyes open,I listen to the sound of kids voicesring against the window.The room darkens,Rain falls down the glass,What a strange, dream.My phone changes from 59 to 00.I pace down my stairs, grab my umbrella, out the door.I listen to the sounds,of wet car tires rolling over asphalt.The faint hum of the city awakening.I cross a busy crosswalk,and into a building.into an elevator.

01

CONCEPT ONE

This was one of my first concepts that was designed for another, more vibrant script. The idea was to have some letterforms grow and follow a fast-paced route throughout the composition. The script had many interruptions of onomatopoeia and thought so by expressing this stop and go feeling, it would give a sense of chaos as well as anxiousness.

2 | Typographic Journey

3

4 | Typographic Journey

CONCEPT TWO

After writing a new script that was more resembling of the feeling I wanted to portray, I developed two more concepts that had a presence of light/dark, interaction within the environment and an airy tone. In this particular concept, the beginning of the video would be more focused on the simplicity of the type against a charcoal-black background and how they follow a common baseline (as well as growing from it). The end of the video would become more tex-tured with type to represent the noise of the environ-ment surrounding.

5

6 | Typographic Journey

CONCEPT THREE

Concept three was developed and expanded upon concept two. The difference in this concept is the focus on having the type float across the screen rather than just fade effects. I wanted to, again, incorporate the environment in correlation to the airy, dynamic quality of the type treatment.

7

8 | Typographic Journey

rain

glides

down

theglass rain glides down the glass

I pace

down

the

stairs

grab my umberella

out the door

SELECTED CONCEPT

The chosen concept is a combination of both con-cepts two and three in that there is a focus on hav-ing the type follow a common baseline and growing from it. There is also this textural quality of sound that I wanted to focus on representing through punc-tuation when my script enters the outside environ-ment. The type would be more blurry and awakening in the beginning, observing the surrounding noises and continuing down a steady-paced route that leads to the entering of the elevator.

000I roll out of bed.

9

the room darkens

what a strange dream.strangedream.strastrange drerestrangeanged I stare at my phone as the

numbers change from 59 005959

I listen to the

of car tiresrolling over thewet asphalt

soundssoundsft i

soundsound I move in slow motion towards a busy crosswalk right

rightright

left

leftleft

left

I smile at a familiarface and walk intoa crowded elevator

When the screen is gray, the type is blurry and fades to represent the movement of the eyes slowly awakening. The type begins to add layers of fading and moving text to capture the essence of waking up.

10 | Typographic Journey

FINAL CONCEPT

Color begins to appear within the type, initiating an aware-ness to time. The music fol-lows this transition into a more upbeat pace that marks the start of dynamic movement across the composition.

11

12 | Typographic Journey

The composition lightens in response to light in the outside environment. Punctuation begins to float into the screen, layering and building to appear as people and sound pass the narrator within the space. This then transitions back into the simple focus on type once the punctuation disappears and the character enters another environment that is quieter.

13

ONLINE TYPOGRAPHY JOURNAL

“Typeontype is a place where old and new

American typography emerges to com-

municate visual experience. Typography

is constantly exposed, revitalized, and

conceptualized in our complex world. How

do we carry on tradition? How can we

recapture freshness? Typeontype aims to

connect these ideas that can achieve con-

temporary greatness through typographic

expression”.

02

WORDMARK EXPLORATION

2 | Online Typography Journal

3

SITE MAP SKETCHES

4 | Online Typography Journal

Home splash page

About

Essay1

Essay2

Essay3

Articles archive Events/Lectures

5

WIREFRAME SKETCHES

The user would first be introduced to a short splash homep-age that gives a brief description of the site. Then, once the logo is clicked, the user will be able view essays as well as information about the author in a lightbox display.

6 | Online Typography Journal

7

GRID STUDIES

8 | Online Typography Journal

9

GRID STUDIES REFINED

10 | Online Typography Journal

11

IMAGE STUDIES

12 | Online Typography Journal

Each individual essay had a different essence to it from it’s layout as well as choice of imagery.

Essay one: The article was very much on visual communication and how we approach new possibilities within different forms of design. The images are visual-izing material within a vast world but also pays mind to the older processes used by the typographer and how that’s evolved.

Essay two: This short essay discussed a lot about the new expressions of the designer and how that has a historic connection to old type forms. There is a message in relation to the practical life and man’s harmony with nature. The im-ages chosen highlight more of the his-toric and crafted form of type up close, so that the user can get a sense of the natural movement of the letterforms.

13

DESIGN EXPLORATION

Home/articles page

14 | Online Typography Journal

DESIGN EXPLORATION

Essay

15

FINAL SCREENS

Cover page

16 | Online Typography Journal

The splash page is a short animation that introduces the wordmark in a playful typographic expression so that the user is intrigued to click into the site. Once the words move into place, the user can then click the logo to activate the page to shift upwards off the page, revealing the about page underneath.

17

FINAL SCREENS

About page

After the user clicks into the site, this page is revealed to express the intentions and goals of the site. On this page, the focus is to read the about description but the user can also hover over the navigation bar to click into subpages, check out the utility bar to become more socially interactive with the site, search for spe-cific keywords in the search bar.

18 | Online Typography Journal

FINAL SCREENS

Articles archive

The articles archive page can be clicked in the side navigation bar. Once it is clicked, the link will highlight and a drop down menu of essays will appear under-neath so that the user can choose one of the essays in the navigation bar. They would also have the op-portunity to view an updated feed of essays that have a corresponding image and brief description. The user can also click to comment on the essay if desired.

19

FINAL SCREENS

Essay one

In the side navigation bar, the essay chosen will appear highlighted to signify the current page being viewed. Every-thing on the first essay page is fixed so when scrolling through the essay, it disappears underneath the header. The essay is displayed on one long page so if the user wanted to scroll all the way back to the top, he/she can click “top” to reset the article back to the top. The images within the essay are playfully structured so that the user can hover over them to reveal inspirational com-mentary relating to the article

20 | Online Typography Journal

FINAL SCREENS

Essay two

“Art in Type Design” incorporates mo-ments of large imagery that interrupts the essay so that the user can engage with the image and connect that back to the essay. Since the imagery retains this close up, raw quality of form, the user can then see the presence of the hand within these expressive letterforms. There are also callout quotes that I felt highlighted important parts of the essay, informing the reader on the key points of the passage.

21

FINAL SCREENS

Event page

The events page utilizes a different grid from the essays to provide variety to the user. The events can be sorted by date, speaker, and location and will be scrol-lable down the page. Images of speak-ers/events/artwork are shown in the grid and when each is hovered, the date and location is revealed so that intrigues the user to click on that image. Once the image is clicked, the rest of the images become dimmed and information about the event snaps to a grid within the larger grid. This grid will change depend-ing on which image is clicked.

22 | Online Typography Journal