Declamations of Design by Mark Roble

Declamations of Design

Contents introduction 4 typography 6

Typographers Timeline french fold book design

Song Compositional Sequence/Poster

Expressive Typeface design

PAC posters

Apocalypse Now poster

Nightcrawler poster + comic

branding 38

National Park Trust rebrand

Metro Interface redesign

Cutoff Runoff branding

Path Museum brand

motion

Kinetic Typography

Inglourious Basterds credits

Mist

Left Circle Kucherov 80

interactive 84

Edward Tufte Biographical website

Alternate Routes app

who am I?

I am a graphic designer from Clearwater, Florida, and a recent BFA graduate of the Corcoran School of the Arts and Design at the George Washington University. Before moving to Washington, DC, I had never lived outside of Floridaâ&#x20AC;&#x201D;I believe that moving to an area that is conducive to budding artists and designers was the single most important factor influencing my design education, as well as shaping the type of designer I am today. The pages that follow show various projects created during my time at the Corcoran. The amount of information I learned during my time at school has been invaluable to me as a designer, and this book serves as a tool to help illustrate my process in handling various projects, and how I sought to create solutions for these diverse challenges. From branding, typography, motion and digital applications, Iâ&#x20AC;&#x2122;ve tried to develop a rich and purposeful style in order to convey my messages in the most effective way.

Mark Roble

Typography 6

typography II: Typographers Timeline French Fold Book Design The advancements in typography from its inception to modern-day have been momentous, and the goal of this book is to illustrate those changes and advancements through time. The title of the book, From Gutenberg to GUI, is intended to illustrate how type has been laid out from the outset of typesetting (Johannes Gutenbergâ&#x20AC;&#x2122;s press), to how the majority of type is designed today on the computer ( thrhough the use of a GUI, or graphical user interface).

From Gutenberg to GUI

introduction

Movable type

Type design and letterforms are one achievement in communication that is ofter overlooked, yet one of the

invented in, to what aesthetic movement that was prevalent at the time, to the technology that was available,

most important inventions of human history. Typefaces

type reflects more than the words on the page, or screen,

are derived from glyphs (which are individual characters,

or poster, or sign, or building. From the era of Johannes

such as letters or punctuation), and each type of glyph

Gutenberg (as early as 1450 A.D.) to the 21st century,

is defined to a certain size, weight, and style. From a

type and typography serve a major role in daily life,

particular set of sizes, weights, and styles comes a font,

and without it, we very possibly would not have all the

and multiple fonts are what make up a typeface. Much

amenities today that we take for granted.

controversy over the setting of type and the style of the type has arose throughout history, and type has been influenced by cultural context as well as geography and nationality. From the country that a typeface was

(T&T pg103). The process worked by utilizing a set of photographic images (usually on a glass grid, disk, or film strip) which are then exposed to paper or film by a

960s

system of lenses. The lettering was then printed either by the means of letterpress (etched metal plates) or, increasingly, offset litho. Another technique for using

light to set type came to fruition in the 1960s, employed by the use of a cathode ray tube (CRT); such uses, by the Linotron 505 of 1967 by Ronald McIntosh and Peter Purdy, was the first to have an impact of type setting. The largest setback of these devices was not just the skepticism over the quality of the prints, but also the inordinate costs of the equipment themselves. Quality concerns included adjustments that had to be made when using photo-matrices, the lack of consistency with the “color” of the type after it is printed, and the last being that, with an array of lenses to create a number of different designs, there was no physical necessity to create a number of individual designs. With the introduction of the personal computer in the 1980s, printing became streamlined thanks to the inkjet and laser printers. Digitalization of typefaces also made them much more accessible to the general public; typefaces, once bought through typesetting houses, are now purchased through online digital type foundries, and as a result, the price has decreased dramatically (T&T pg113). Such paradigm shifts would not have been able to occur, if it had not been thanks to a visit by Steve Jobs to Xerox Parc in 1979 (CNET). At this visit, Jobs and his team noticed a particular project at Xerox being worked on (called the graphical user interface, or GUI for short), that peaked Jobs’ interest. This interface was implemented into the first Macintosh computer, and completely revolutionized the way we use personal computers today.

Typeface: Helvetica

“Typography must be as beautiful as a forest, not like the concrete jungle of the tenements.”

the changing of times

“Modernism essentially ‘reshaped’ the way we think about type design and graphic design.”

important key to both periods was change. Both periods were characterized largely by their abilities to change,

Movable type

whether it be revolt against a government or institute a school of new design and thought, simply change. Fast-forward roughly 500 years, and we are definitely

first computer and the age of digitalization. The years

seeing different trends. In the 20th century, we see a

of Gutenberg and Bodoni and Baskerville were—never

plethora of different aesthetic movements; Futurism,

forgotten—but were no longer; in the digital age, you

Dadism, DeStijl, the Bauhaus, International Style,

did not have to create your own type or hire a skilled

Modernism, American Organic Modernism, Art Deco,

craftsman to create it; you could just walk to a store to

and Swiss Design all just before the 1960s. Post mod-

buy it.

ernism, pluralism, and multiculturalism flourished after modernism. Numerous western countries were going

The 20th century was very important to type and type

through dramatic social and political change, which

design, and was influenced by a number of different

included both World War I & II, and the creation of the

aesthetic movements. One of the most recognizable movements of this era was modernism. From this style became Impressionism, Cubism, Fauvism, Fururism, Brutalism, and Surrealism (Design Movements). Key

ornamentation and design filling up most parts of a

figures and designers of this period include Walter

composition. Designers of the modernist era believed

Gropius from the Bauhaus, and French modern architect

in a more clean and minimal approach to type, with a

Le Corbusier.

focus on negative space; often times, type designers con-

Modernism essentially “reshaped” the way we think

as the letters themselves. Adrian Frutiger put it best with

sidered the negative space of a typeface just as important about type design and graphic design. The approach

this quote: “Typography must be as beautiful as a forest,

of the 19th century could be characterized by being

not like the concrete jungle of the tenements ... It gives

very “overly decorated” and elaborate, with a lot of

distance between the trees, the room to breathe and allow for life” (Linotype.com).

Typeface: Didot

“Typography must be as beautiful as a forest, not like the concrete jungle of the tenements.” —Adrian Frutiger

In the early-mid 10th century, type designers of this era focused largely in using clean sans-serif typefaces. Important typefaces used include Futura, Helvetica Neue, Frutiger, and Franklin Gothic. Physically setting type was also not the same laborious task that it was in the Gutenberg era. Although this method has been dated to have been attempted as

—Adrian Frutiger

early as 1894, phototypesetting did not begin to enter the mainstream until 1946, when the technology was implemented by the US Government Printing Office

typography III:

AS SHALLOW AS THE WATER IS IT SWALLOWS ME The cool air takes me back, Just for a moment, and I spend

it all without realization. I have to go back. I have to go back.

Song Compositional Sequence/Poster For a lot of music, the identity behind a song is dictated by its lyrics. When listening to a song, you hear its lyrics sung, and can experience exactly how the artists intended the music to be heard; but what if you take away the audio?

The goal for the project is to reflect the moods and objectives of a song visually. This is not a straightforward task, especially coming from a third-party (the designer) who did not create the song. To truly represent the ambitions of the music visually is to represent the lyrics on a deeper level, whether it be metaphorically or subjectively.

It’s not fair. I wish that time would stop for me, just this once,

But it never will, so run it off.

I’m still here. I know

you’re waiting for me past the doorway; and if it’s you that’s haunting me, say something. and if it’s you that’s haunting me,

I’ve come this far with a different map in each of my hands. They’re drawn completely from memory. One takes me home, one takes me nowhere in particular. I always seem to pick the path with all the shortcuts open, and the lines and the circles more steadily drawn. (I guess there’s only one more way to go.) I always seem to say the things that I had

p r o m i s e d I w o u l d l e a ve u n s p o ke n , a n d a c t s u r p r i s e d w h e n t h ey

c o m e t u m b l i n g o u t i n t o t h e a i r a n d s o u n d i n g w r o n g. ( We’ve a l l b e e n

w a y t o o fa r a w a y f r o m h o m e. ) I n eve r t h o u g h t of w h a t w o u l d h a p p e n i f I eve r

fo u n d t h e g a t e c l o s e d , Te t h e r e d i n r u s t e d t h r e a d a n d i c e d o ve r b l u e a n d g rey

f r o m t h e c o l d . ( It’s t i m e t o b r e a k of f a l l t h o s e c h a i n s of o l d . ) B u t t h e g a t e h o l d s ,

Is it

Is there

Is there any

too late?

some place I belong?

place to call a home?

I g u e s s t h e r e ’s o n l y o n e r e a l w a y t o k n o w. I s t h i s t h e o n l y w a y ?

allowing entrance to the wind and smaller leaves and I am stuck now, homebound. (I guess there’s only one more way to go.)

Can I turn kback? cab And I can’t stop looking at the

world around me solemnly.

As we stand here in the fallen leaves,

As shallow as the water is, it swallows me.

A Lot Like Birds

Will you

KUROI LEDGE

DESIGNER: Mark Roble

COURSE: Typography 3

FACULTY: Francheska Guerrero

Face forward falling straight for the pavement; mouth open catching death just to taste it. Twist my body to align with the stars, This is my favorite part. This is my favorite part: Suspended close to earth but very far. This is my favorite part. Once we touch the ground we forget who we are. I guess I finally had the courage to go away. The promises we made were made hollowly. Sometimes you’d reassure me we’d be okay. But you’d always

promise me, ME JUST PROMISE

That no matter what the

weather’s like, you’ll

follow me, FOLLOW ME?

And no matter what I say, you’ll take it honestly, honestly to heart? I’ve got a long way to go and if I do it alone I won’t make it. So now I let my fate take over, And as I sink into

T H I S I S H OW FAR WE GO. T H I S I S H OW FAR WE GO.

PROJECT: Poem/Song Compositional Sequence

say

just something. speak.

If it’s you that’s haunting me,

the conseq uence b e l ow. . .

leave.

The cool air takes me back, Just for a moment, and I spend it all without realization. I have to go back. I have to go back. It’s not fair. I wish that time would stop for me, just this once, But it never will, so run it off. I’m still here. I know

The cool air takes me back,

you’re waiting for me past the doorway;

Just for a moment, and I spend it all without realization. I have to go back. I have to go back. It’s not fair. I wish that time would stop for me, just this once, But it never will, so run it off. I’m still here. I know

and if it’s you that’s haunting me, say

all the shortcuts open, and the lines and the circles more steadily drawn. (I guess there’s only one more way to go.) I always seem to say the things that I had promised I would leave unspoken, and act surprised when they come tumbling out into the air and sounding wrong. (We’ve all been way too far away from home.) I never thought of what would

something. and if it’s you that’s haunting

happen if I ever found the gate closed,

me, say something.

Tethered in rusted thread and iced over b l u e a n d g rey f ro m t h e c o ld .

(It’s time to break off all those chains of old.)

But the gate holds,

allowing entrance to the

wind and smaller leaves and I am stuck now, home-

bound.

(I guess there’s only one more way to go.)

If i t’s yo u t h at’s h au nt i n g m e, j u st sp e ak .

I’ve come this far with a different map in each

of my hands. They’re drawn completely from

memory.

One takes me home, one takes me nowhere in

particular. I always seem to pick the path with

all the shortcuts open,

If i t’s yo u t h at’s h au nt i n g m e, j u st s p e a k .

I’ve come this far with a different map in each

KUROI L ED GE

of my hands. They’re drawn completely from

me, say something.

A Lot Like Birds

One takes me home, one takes me nowhere in

something. and if it’s you that’s haunting

memory.

and if it’s you that’s haunting me, say

particular. I always seem to pick the path with

you’re waiting for me past the doorway;

and the lines and the circles more steadily drawn. (I guess there’s only one more way to go.) I always seem to say the things that I had promised I would leave unspoken, and act surprised when they come tumbling out into the air and sounding wrong.

A Lot Like Birds

b l u e a n d g rey f rom th e co ld .

(It’s time to break off all those chains of old.)

KUROI L E DG E we at h e r’s l i ke, you ’ l l fol l ow m e, fol low m e?

And no matter what I say, you’ll take it honestly,

honestly to heart?

I’ve got a long way to go and if I do it alone I won’t

make it.

So now I let my fate take over, And as I sink into

around me solemnly.

That no matter what the

But the gate holds,

And I can’t stop looking at the world

As we stand here in the fallen leaves, Will you promise me, just promise me

allowing entrance to the

Is it too late? Is there some place I belong? Is there any place to call a home?I guess there’s only one real way to know. Is this the only way? As shallow as the water is, it swallows me.

wind and smaller leaves and I am stuck now, home-

Can I turn back?

bound.

home.) I never thought of what would

(I guess there’s only one more way to go.)

(We’ve all been way too far away from

happen if I ever found the gate closed, Tethered in rusted thread and iced over

the consequence below,

Can I turn back?

This is how far we go. This is how far we go. Face forward falling straight for the pavement; mouth open catching death just to taste it.

Is it too late? Is there some place I belong? Is there any place to call a home? I guess there’s only one real way to know. Is this the only way? As shallow as the water is, it swallows me.

Twist my body to align with the stars, This is my favorite part. This is my favorite part:

Once we touch the ground we forget we at h e r ’s l i ke, yo u ’ l l fo l l ow m e, fo l l ow m e?

who we are.

As we stand here in the fallen leaves,

And no matter what I say, you’ll take it honestly,

I guess I finally had the courage to go

Will you promise me, just promise me

honestly to heart?

away. The promises we made were made

I’ve got a long way to go and if I do it alone I won’t

hollowly. Sometimes you’d reassure me

make it.

we’d be okay.

So now I let my fate take over, And as I sink into

But you’d always leave.

around me solemnly.

the consequence below, This is how far we go. This is how far we go. Face forward falling straight for the pavement; mouth open catching death just to taste it.

That no matter what the

Twist my body to align with the stars, This is my favorite part.

Suspended close to earth but very far. This is my favorite part.

And I can’t stop looking at the world

This is my favorite part: Suspended close to earth but very far. This is my favorite part. Once we touch the ground we forget who we are. I guess I finally had the courage to go away. The promises we made were made hollowly. Sometimes you’d reassure me we’d be okay. But you’d always leave. Denotation | 21 Step 4A

Irony | 24 Step 4B

typography IV: Expressive Typeface Design: Organimond My first attempt at type design, the goal for this project was to create a font that focuses more on aesthetics and being unique, as opposed to create a functional font (like this copy is set in).

Based on the letterforms of Adobe Garamond Pro, Organimond is a font that is intended to turn the original Garmond on its head. Through its organic forms and handdrawn shapes, Organimond blends the structure of Garamond with the organic forms that one may find in anywhere from the leaves of a tree, to streams and rivers. The font is to be inviting, and intriguing in its nature. Organimond was created to be used for signage in the produce aisles of an organic grocery store, to branding for hardcore bands.

Process: original hand-drawn forms

Step 4 | Part 2

Step 7 | Type Specimen

Ste

design studio I: PAC: Cyberbullying Living in the advent of the instant-information and social media provides an unlimited amount of resources to teens, but the veil of anonymities can lead to a detrimental lack of empathy and understanding. Kids can write it off as joking or having fun, but cyberbullying is an increasing problem that needs to be addressed in our communities and schools. This public awareness campaign was designed to try to have kids understand the gravity of what they say online, and to understand that just because who you are targeting may be in a similar life situation as you, that it is still in no way acceptable to say hurtful things.

digital illustration I: Apocalypse Now movie poster

Apocalypse Now is a movie that has a very dark and somber mood at timesÂâ&#x20AC;&#x201D;a very nihilistic view of the human condition and war. To illustrate (literally) these themes and have them all placed on the same poster was the intention of this project. This poster is rich in imagery and iconography, and the biggest challenge of the design was trying to determine what elements make the most sense to include, and how they should be treated graphically and hierarchically.

digital illustration II: Nightcrawler poster + comic book

Adapting a movie from screen to print is always a bit of a song and dance; understanding how the characters should be drawn and in what way is instrumental to creating a successful design. The next step after creating the poster was condensing the movieâ&#x20AC;&#x2122;s plot and characters all down into a very short narrative; distilling the elements and themes of the movie into a format that is both quickly and easily read.

“Excellent.”

It was there where he met Joe, a “stringer.” Stringer was the slang term for the freelance photographers who sold video footage to news organizations.

They had a fast as hell car, and business was booming.

Joe was an asshole —and would soon become Lou’s competition— but it was he who drove Lou down this dark new career path.

And L.A. was never short of any crime.

Lou knew that he would soon need help—

—and Rick was happy and excited to join in on the fun.

When Nina said that Louâ&#x20AC;&#x2122;s work was slacking...

Rick didnâ&#x20AC;&#x2122;t know the shooter was still alive...

...he set to film the ultimate crime...

...and Lou got it all on tape.

...but at the expense of his partner, Rick.

Branding 38

design studio II: National Park Trust rebrand The National Park Trust’s mission is to preserve parks and create park stewards for tomorrow. The organization’s current identity was stale and dated, and this rebranding was intended to solve all the problems of any good rebranding: to revitalize a brand image, while moving the brand into a modern setting, but also incorporating branding that is timeless. The new brand hopes to get kids outside and break the tether that many kids have to the Internet, and to show them that there is a rich amount of activities that kids can participate in our National Park system, and right in their own backyards. For the logo, the concept of the mark is to connect multiple elements of nature into a singular and cohesive design: The overall shape of the mark represents an acorn, the top “cap” features the peaks seen in a mountain top, the negative space that cuts the mark into two halves has the form of a river, and the bottom of the acorn can reflect a shield of badge, such as seen in a Boy Scouts’ patch or a park ranger’s badge.

design studio III: Metro Interface redesign The first step to solving a problem is recognizing that you have a problem. DC’s public transportation system (the Washington Metropolitan Area Transit Authority, or “Metro” for short), has many critiques. This project serves to solve a functional issue that Metro has, the arduous process of simply getting on a metro rail car. 49

Instead of having riders fumble with cash and change, trying to navigate complicated machines, and not knowing which line leads where, “Interface” is a project designed to eliminate these problems, and give riders on Metro a much more fluent experience. Starting from redesigned and updated Metro kiosks, this project includes a full package with a matching smartphone app that will allow users to add money to their SmarTrip cards instantly, instead of having to wait in long lines at stations and get where they need to quicker.

design studio IV: CUTOFF RUNOFF branding Design Ignites Change is a project that uses graphic design to try to identify and solve social issues. For my semester, our goal was to solve a problem with Rock Creek, a watershed that covers 77.4 square miles, and encompasses much of Washington, DC, as well as a large part of Marylandâ&#x20AC;&#x2122;s Montgomery County. 53

One of the largest problems plaguing Rock Creek is the polluted runoff that enters the creek. CUTOFF RUNOFF uses a novel and unique approach to combat this issue by promoting hands-on community involvement, as well as spreading awareness of these concerns. To correct this problem, we can create more eco-friendly infrastructure, such as building more rain gardens that allow rainwater to drain naturally. An attitude change for environmental awareness can also considerably help this endeavor. Our vision is to create a Rock Creek that once again has swimmable water.

WEâ&#x20AC;&#x2122;RE CLOSED One of the largest problems plaguing Rock Creek is the polluted runoff that enters the creek. CUTOFF RUNOFF uses a novel and unique approach to combat this issue by promoting hands-on community involvement, as well as spreading awareness of these concerns. To correct this problem, we can create more eco-friendly infrastructure, such as building more rain gardens that allow rainwater to drain naturally. An attitude change for environmental awareness can also considerably help this endeavor. Our vision is to create a Rock Creek that once again has swimmable water.

CUTOFFRUNOFF.ORG

@CUTOFFRUNOFF

STOP! KEEP O U

CUTOFFRUNOFF.ORG

@CUTOFFRUNOFF

CUTOFF RUNOFF

Merchandise

Mark Roble

04.11.16

CUTOFF RU NOFF

Social Media Strategy

Mark Roble

04.18.16

TWITTER

INSTAGRAM

environmental design: Path Museum brand Creating an identity for a design museum is especially difficult, because the identity can directly reflect the intended work that will be shown in the museum. The logo must be designed cleverly, and be able to represent the museumâ&#x20AC;&#x2122;s goals, as well as giving off a feeling of good design. The concept behind the museum is to show the path that famous designers took in their careers, and trying to understand how they achieved success. Process is so critical to design, and having a museum that traces the trajectory of key designers would be instrumental to aspiring designers, as well as design appreciators.

Motion

motion graphics II: Kinetic Typography In addition to printed type, motion can be introduced to help the further the messages of written language. Taking something like a monologue from a television show (as done in this project) and inserting the script into a kinetic sequence helps to make what is being spoken more dynamic. This can be achieved by using various font weights and scales, and helps to compliment the graphical elements that surround the type.

typography IV: Movie Title Credits: Inglourious Basterds Often times the first thing you see during a movie is its title creditsâ&#x20AC;&#x201D;a segment of a movie that is created to display the people involved in the creation of the film, the credits should also convey the mood of the movie going forward. Inglourious Basterds is a dark comedy by Quentin Tarantino that takes place during World War II, and shows a fiction story about a group of American soldiers whose sole purpose is to kill Nazis in Europe. Not a very funny plot on the surface, but to anyone who knows Tarantinoâ&#x20AC;&#x2122;s work, the movie takes very serious and dark plots and settings and finds a way to convey humor. The goal of this project was to reflect that humorous mood in the film, while also featuring war imagery and iconography from the movie.

cinema I: Mist

My first foray into 3 dimensional animation, Mist is a rendering of a sculpture in a gallery setting. Being inspired by the works of Richard Serra, I created this project to be a large-scale work of art that I would not have had the resources to create in school, but to create it as realistically as possible on screen. The angular forms were created to display a sense of motion in an otherwise static form; perhaps the sails of a ship going through the ocean, and the mist of the water inherent to sailing ship.

cinema I: Left Circle Kucherov

Sport has always been something very important to my life; whether it be playing pickup football or roller hockey with my friends as a kid, or watching sports on television, I have always wanted to combine my love of sport with my design career. Harkening back to the days of the arcade, this project features a game of bubble hockey (found common in many of the arcades of the 1990â&#x20AC;&#x2122;s), but the characters and audio synced are pulled from game audio of a modern-day hockey game.

Interactive

design studio III: Edward Tufte biographical website

Edward Tufte is the master of data visualization: from graphs to charts to books to large-scale sculptures, his work is highly proficient. Trying to scale all of his work down to a singular biographical website is near-impossible. The challenge started at the top by creating the most effective yet user-friendly web architecture. Next was finding all of his most relevant information that is easily consumable (to one unfamiliar with this industry), while also being a functional website that serves as a store for his writing, in addition to being a place where you can book tickets to see him speak in-person.

design studio III: Alternate Routes app “Alternate Routes” was a project that explored a route that one takes often (whether it be a daily commute to work, school, etc.), and to display the route electronically and interactively. The main challenge was how to take a path that was so routine and standard in my every day life and weave it into an exciting narrative. I chose the path most common to my life, my trip from home to school. My journey takes me from the Palisades in Georgetown to Foggy Bottom, where my school (Corcoran School of the Arts & Design) lies. There is only one bus line that goes from these two points (the D6), and that’s what I have to rely upon every day.

Mark Roble // BFA Graphic Design Corcoran School of the Arts & Design at The George Washington University