TYPOGRAPHY SYSTEMS Marisa Bohlmann GDES 312 03 Spring 2012
01
TYPOGRAPHIC JOURNEY Eyes open, I listen to the sound of kids voices ring 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.
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
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 textured with type to represent the noise of the environment surrounding.
4 | Typographic Journey
5
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.
6 | Typographic Journey
7
rain down glides the glass
rain glides down the glass
SELECTED CONCEPT The chosen concept is a combination of both concepts two and three in that there is a focus on having 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 punctuation when my script enters the outside environment. 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.
8 | Typographic Journey
I pace down grab my umberella
the stairs
out the door
the room darkens
strange strange
ange what a stra strange dream. dre dre
I stare at my phone as the numbers change from 59 00
I roll out of bed.
I listen to the
sounds sound sounds offtcar tires i rolling over the wet asphalt
I smile at a familiar face and walk into a crowded elevator
left
left I move in slow motion towards a busy crosswalk right right left left
0 00
right
9
FINAL CONCEPT 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
Color begins to appear within the type, initiating an awareness to time. The music follows 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
02
ONLINE TYPOGRAPHY JOURNAL
“Typeontype is a place where old and new American typography emerges to communicate 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 contemporary greatness through typographic expression�.
WORDMARK EXPLORATION
2 | Online Typography Journal
3
SITE MAP SKETCHES
4 | Online Typography Journal
Home splash page
Articles archive
About
Essay 1
Essay 2
Events/Lectures
Essay 3
5
WIREFRAME SKETCHES The user would first be introduced to a short splash homepage 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 visualizing 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 images chosen highlight more of the historic 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 specific 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 underneath so that the user can choose one of the essays in the navigation bar. They would also have the opportunity 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. Everything 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 commentary relating to the article
20 | Online Typography Journal
FINAL SCREENS Essay two
“Art in Type Design� incorporates moments 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 scrollable down the page. Images of speakers/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 depending on which image is clicked.
22 | Online Typography Journal