Project C - Typographic Process by Brittany Strozzo

PROJECT C

TYPOGRAPHIC PROCESS BRITTANY LINARES � TYPOGRAPHIC COMMUNICATION � DESIGN POSTER

PROJECT C

INTRODUCTION PROJECT OVERVIEW

The overall purpose of Project C is to explore the typographic structure of information through the creation of a poster. The poster design is meant to construct a hierarchy that will allow the eye to easily and quickly move through the text and around the page. The final result should yield semantic clarity and a balanced aesthetic.

TABLE OF CONTENTS

Initial Design Process................................... 3-4 Written Assessment...................................... 5 Visual Inspiration........................................... 6-7 Sketches........................................................ 8-10 Digital Concepts.............................................11-13 Font Exploration............................................14 Final Concept.................................................15-17 Bibliography................................................... 18

TOPIC EXPLORATION

INITIAL DESIGN PROCESS TOPIC #1

TOPIC #2

Design a poster that represents the typographic process of contrast and how it is used in its various forms. The overall goal will also be to maintain clarity so that the contrast is the main object of attention and appeal. The use of contrast will be displayed on an alternating grid.

Highlighting the Service Design process. Service Design is an approach that combines multiple methods in order to address the various disciplines of a give problem. It is considered a new and different way of thinking compared to the basic design principles.

OBJECTIVE

7 FORMS OF CONTRAST

1. Size Such variations, large to small, bring contrast.

2. Typeface & Classification Contrast can be achieved by mixing the two different typeface classifications, serif and sans serif. 3. Color Draws attention to different aspects of the design through variations of one or multiple colors. 4. Cases Changing between upper and lower cases.

5. Style & Decoration Use of italics, underlines, and many other styles.

6. Weight Making the font bold for emphasis and/or type combinations, which also include the variations in line width for sans-serif and serif fonts. 7. Space Good use of negative space and placement.

OBJECTIVE

6 CONCEPTS OF SERVICE DESIGN

1. Explore Gain an understanding of the situation/problem you are currently addressing.

2. Create Contrast can be achieved by mixing the two different typeface classifications, serif and sans serif. 3. Reflection Draws attention to different aspects of the design whether it be through variations of one color or the use of multiple colorations. 4. Prototype Changing between upper and lower cases. 5. Implementation Use of italics, underlines, etc.

6. Design Making the font bold for emphasis and/or working with variable layouts to create and ideal visual solution to the proposed problem.

TOPIC #3 - FINAL CHOICE

INITIAL DESIGN PROCESS OBJECTIVE

Using hierarchy within a poster to draw attention to given spaces and help the flow around the piece with levels of larger hierarchy leading to areas of lower hierarchy. This allows the viewer to scan text and figure out areas they need to pay attention to vs areas that are just more informational or less important. Hierarchy is meant to give an overall organized look to a design piece. I want to focus on the visual hierarchy of website materials.

8 FORMS OF VISUAL HIERARCHY IN WEB DESIGN � Size

� Repetition

� Contrast

� Proximity

� Color

� Style & Texture

� Alignment

� Density & Whitespace

Such variations, large to small, bring contrast.

Shows a more dramatic shift between the relative importance of the given information.

Draws attention to different aspects of the design through variations of one or multiple colors.

The creation of order or variations on a grid format.

Repeating elements as an attention grabbing

Creation of sub-hierarchies from titles, subtitles, and other existing content.

Personality given to a design to make it stand out and consist of an overall conceptual flow.

High density causes heavy/cluttered space. Sufficient whitespace communicates the message properly.

PROJECT FORMULATION

WRITTEN ASSESSMENT HIERARCHY

This is the arrangement or organization of groups where each are ranked at a different level be it top, middle, bottom, front, or back. Deals with overall order or ranking.

ASSESSMENT

The goal is to represent hierarchy through the use of typographic arrangement, with some visual variations. Type will be used to represent the variations such as contrast, size, and alignment. Even though all aspects may not be represented in the layout, I want at least show examples of two-three of the provided terms. The arrangement is going to draw the viewers attention to the header of the poster first and foremost. This is meant to be the most important aspect as a way to grab the readers attention and pull their eye along to the most viable information. After this, the viewer is left to explore the smaller terms to gain more insight on the visual hierarchy of web design and how it is structured. This format will represent hierarchy, as it does on a website, to maintain oneâ&#x20AC;&#x2122;s interest.

RESEARCH

VISUAL INSPIRATION These examples show forms of typographic hierarchy to where the headers are the main focal point then the rest of the text is secondary. Also in the image on the far left, color is used to add extra contrast and hierarchy to the wording â&#x20AC;&#x153;Kul Turaâ&#x20AC;? so that it is made very clear that this is where to viewer needs to focus first. The contrast, be it color or use of a bold font, is carried throughout the designs as a way to connect the sub-headers to the main header.

RESEARCH

VISUAL INSPIRATION Here are more examples of using hierarchy with black and white arrangements. The darkest areas, which hold the most contrast, help draw the eye in a specific direction. The different gradations of black help soften the contrast while still leading the eye around the poster. The bottom left and top right designs use lines of text in column arrangement to add what would resemble shading around the larger bold headers.

ROUGHS

SKETCHES

SKETCH #1

Focusing on different forms of character width in order to represent different levels of hierarchy in the poster header. Then using a strict column for the filler text.

SKETCH #2

Placed visual hierarchy dead center so that it becomes the main focus of the page. In web design becomes the second focus. The diagonal lines are merely directional devices.

SKETCH #3

Here I am attempting to mimic a website layout and give the overall design different levels of hierarchy through aligning boxes and showing various contrasting ideals.

ROUGHS

SKETCHES

SKETCH #4

This is meant to resemble a website layout where you would click on of the squares and be directed to the bottom for the definition. It also has many levels of hierarchal arrangement in the header.

SKETCH #5

This arrangement is experimenting with randomized grid layout where the typeface itself provides the hierarchy through all caps, boldness, and many other factors.

SKETCH #6

The diagonal lines in the header here are implied lines. I wanted to draw more attention to the main title the implied lines will help the viewer travel cohesively into the gridded columns.

ROUGHS

SKETCHES

SKETCH #7

Visual is the largest form to be the first item you see on the poster. The header then gradually gets smaller and smaller so that you transition down the poster and into the blocks of type.

SKETCH #8

I decided to experiment with stacking the words so that it makes the viewer take in the overall concept and meaning and read more slowly.

SKETCH #9

The large V is meant to be an attention grabber here and after you notice this you will begin to read the title. The in web design is a little disconnected but with work this could be formulated more efficiently.

POSTER

DIGITAL CONCEPTS VISUAL

HIERARCHY IN WEB DESIGN

DIGITAL CONCEPT #1

Here is my first digital concept for visual hierarchy in web design. I still feel it lacks some good aesthetic qualities but to me it is a good starting point for this style of layout. I chose to use color to add extra emphasis on the forms and to draw your attention the spaces of the highest hierarchy faster than normal.

Achieving visual hierarchy is necessary in order to create a successfully design on the web. It is the organization of visual relationships of information. This form of representing information visually helps relay information to the visual thinkers, because as humans we are not capable of processing large amounts of data with sufﬁcient speed and efﬁciently. This visual relay helps individuals retain the information and process it much more quickly.

STYLE & TEXTURE

The style of the overall design is the basic personality to which the piece possesses. It is a way of emphasizing speciﬁc elements in a formalistic way. Textures is the overall feel of the layout to which attention is drawn through layering, arrangement, and much more.

PROXIMITY

This is the creation of sub-hierarchies as a way of showing separation. This is typically shown through the use of widgets, titles, subtitles, and content. The spacing of these elements is what makes them easy to ﬁnd and navigate through.

COLOR

Functions as either a tool for organization or to represent a personality. Colors that are highly contrasting and bold will attract the most attention. Variations of color can also be used to relay emotion.

ALIGNMENT

SIZE

Variations in size help draw your attention to the most important parts ﬁrst because the larger type or imagery stands out more than the smaller text. The large forms are meant to take in ﬁrst to understand the topic and the small forms are for a more indepth view.

DENSITY DENSITY &

WHITESPACE

Density usually leads elements being crammed into a tight space making them feel cluttered or overly contrasting. Too much spacing, the excess of whitespace, causes a disconnect between elements.

CONTRAST

Shows the importance of a give word or object. Variations in size or color can change the overall meaning and create dramatic representations. Also, changes from darks to lights can shift the pages overall direction.

REPETITION REPETITION REPETITION

Repeating elements in a form or page such as paragraphs with very similar color and typeface. A slight change in color or size would break this repetition and allow viewers to tell elements apart. It also creates unison by repeating certain elements within a page or on multiple pages, such as headers.

A way to created order between the elements on a page. Usually created in column like formats. This is one of the biggest way to drive the viewers eye around any page layout be it horizontally or vertically through typical gridded structure.

POSTER

DIGITAL CONCEPTS DIGITAL CONCEPT #2

This is a block website layout style. I wanted to represent and abstract poster appeal while still portraying the 8 steps of obtaining visual hierarchy in web design. For this design, I wanted to show examples of each concept, its definition, and maintain a simple aesthetic.

DIGITAL CONCEPT #3

This is grid based website layout where I wanted to create block that held an example of the concept as well as the 8 steps to creating an ideal visual hierarchy in web design. For this design, I wanted to maintain a simplistic aesthetic.

POSTER

DIGITAL CONCEPT DIGITAL CONCEPT #3.1

Here I am taking concept 3 and working with various layouts and arrangements for the left side navigation so that the piece will seem balanced and maintain a similar theme throughout. This variation contains a more blocked out style on the left, which ended up being too heavy and make me re-evaluate the layout for balance.

DIGITAL CONCEPT #3.2

This is the final variation that I feel holds the most balance of the three. This design involved some rearrangement and more emphasis on areas of hierarchy. I maintained the blue theme throughout for unity.

OPTIONS

FONT EXPLORATIONS FONTS CONSIDERED FOR DESIGN Helvetica Neue - due to its various sans-serif styles such as ultra light, light, regular, bold, etc. Impact - for its strong display qualities. This is a way to bring high contrast to headers. Myriad Pro - for its nice sans serif format. It has a nice contrast with serif fonts.* Minion - for its easy readability and ability to pair nicely with sans serif style headers. This typeface has a very similar line width to Myriad Pro and I feel this is why they would work so well together. *

Upon doing research for ideal typeface combinations, I discovered that it is a popular concept to combine sans serif and serif fonts for ideal contrast. This format calls for the header to be a sans serif typeface while the body copy is a serif, for easier readability. It also sated to avoid similar combinations such as two serifs because it creates little contrast and everything appears too similar.

IMAGE SOURCE: http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

* indicates the two typefaces used in the poster.

POSTER

FINAL CONCEPT

VISUAL HIERARCHY IN WEB DESIGN

Visual hierarchy is the key feature for effective & clear website communication and structure.

FONTS & SIZES

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem

ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

JUSTIFY

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RIGHT ALIGN

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

LEFT ALIGN

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Variations in size help draw your attention to the most important areas first, because the larger type or imagery stands out more than smaller formats. The larger forms, which possess higher levels of hierarchy, are meant to communicate the most important information first in order for the viewer to quickly understand the documents message.

Shows the importance of a given word or object. Variations in size or color can change the overall meaning and create dramatic representations. Also, changes from dark to light colorations or weights can shift the pages overall direction.

A way to create order between elements on a page. Usually created in column like formats. This is one of the most effective ways to direct the viewers eye around any page layout, whether it is horizontally or vertically arranged in a typical grid structure.

SIZE

CONTRAST

PROXIMITY

ALIGNMENT

COLOR

TEXT FORMAT

LETâ&#x20AC;&#x2122;S TALK

PROXIMITY = UNITY

COLOR CONTRAST

PROXIMITY REPETITION SIZE STYLE & TEXTURE Achieving visual hierarchy is necessary in order to create a successful design on the web. It is the organization of visual relationships of information. This form of representing information visually helps relay information to the visual thinkers, because as humans we are not capable of processing large amounts of data with sufficient speed and efficiently. This visual relay helps individuals retain the information and process it at a much quicker pace.

withtype

white

S PA C E

Density leaves elements feeling crammed within a tight space, which makes the space feel cluttered or overly contrasting. Too much spacing, or the excess of whitespace causes a disconnect between elements.

DENSITY

WHITESPACE

Lorem ipsum dolor

provides various levels of contrast

& adds personality

to the hierarchy

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

DENSITY & WHITESPACE

De sity n

REPETITION

ALIGNMENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consectetur Lorem ipsum consec tetur

Lorem adipisicing eiusmod sit amet, et dolore tempor incidid elit, sed ipsum do consec sit amet, magna. Lorem unt ut labore dol consec tetu ipsum sed tetur dolor eiusmod r adipisicin or sit amlaboredoeteiusm od tempo adipisicing incidid elit, dolor et, dolore magna.rLorem g elit tempor unt ut et dol , sed elit, sedsitdoamet, consec ipsum incidid tetur ore ma utdo labore eiusmod tempo adipisicing unt et dolore gna dolor

sit am dolor magna r incididunt sit Lorem et, con . Lorem ipsuut labore elit, sed amet, consec . Lorem ipsum eiusmod tetur adipis consectet ipsum sed sectetu m dolut labore doet dolore dolo do icing tempo r eiusmod ur adipisicin r siteiuamet magna r incididunt . lab g elit, sm,od tem adipisicing or et dolo tempor incidore por inc elit, re doldo idunt et sed sit amet magna. dol ut laborore ma Loreor sit gna. Lor ididunt ut sed do , consectetur m ipsum am e eiusmod elit, adip em ipsu r consec sedisicin doloet, labore et dolo tempor inciddog eiu ut labore iduntelit, smod tetur adipisi m dolor re magn sit ut tempor cing elit, sed amet, cons a. Lore met dol ipsum ectet dol ore inc do ur or eiusm idid ma ut labor adipisicin gna. Lor unt temporsit am e et dolo od g et, dolor em ipsu re elit magn, a.sedincididun consec sit doipsum Lorem elit, sed amet, cons eiutsmod tetur adipisi m utectet ore ut labor do eiusmod labur adipet tempor cin isicin temp e et dolo dol g incidid g re magn or incididun ore ma a. t gna. unt

Repetition of elements on a form or page, such as paragraphs, with very similar colors and typefaces. A slight change in color or size would break this repetition and allow the viewer to tell the elements apart. It also creates elements within a page or on multiple pages, such as headers.

Functions as a tool for organization or to represent a personality. Colors that are highly contrasting and bold will attract the most attention. Variations of color can be used to relay different emotions.

This style of the overall design is the basic personality to which the piece possesses. It is a way of emphasizing specific elements in a formalistic way. Texture is the overall feel of the layout to which attention is drawn through layering, arrangement, and other various design formats.

REPETITION

COLOR

Style & TEXTURE

Brittany Linares | Typographic Communication | Project C - Typographic Process Design Poster | Savannah College of Art & Design | Fall Quarter 2013

POSTER

FINAL CONCEPT ASSESSMENT REASONING BEHIND FINAL DESIGN

VISUAL HIERARCHY IN WEB DESIGN

Visual hierarchy is the key feature for effective & clear website communication and structure.

FONTS & SIZES

SIZE

ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

JUSTIFY

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RIGHT ALIGN

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

LEFT ALIGN

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

CONTRAST

PROXIMITY

ALIGNMENT

COLOR

TEXT FORMAT

LETâ&#x20AC;&#x2122;S TALK

PROXIMITY = UNITY Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et

COLOR CONTRAST

De sity n

withtype

white

S PA C E

DENSITY

WHITESPACE

Lorem ipsum dolor

provides various levels of contrast

& adds personality

to the hierarchy

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

DENSITY & WHITESPACE

REPETITION

ALIGNMENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet, consectetur Lorem consectetuipsum dolor eiusmod r adipisicin sit amet, g elit, et dolore tempor incididun sed do magna.

Lorem

consectetuipsum dolor sit amet, Lorem t ut labore consectetu ipsum sed do r adipisicin dolor eiusmod eiusmod r adipisicing sit amet labore g elit, et dolore tempor incididun dolor magna. t ut Lorem et dolor tempor incid elit, sed elit, sed, sitdoamet, consectetu ipsum utdo e magn labore eiusmod temporr adipisicin idunt et dolore g

sit amet dolor incididun ut a. sit amet, magna. Lorem Lorem t elit, e consectetu , conse Lorem ipsum labor sed ipsum consect ipsum sed r adipisicin ut labore do eiusmod ctetur etur adipisicdolordo eiusm et dolore tempor incididun g dolor eiusmo sit amet, magna. t ing d od temp adipisicing labor et dolore tempor incidid eelit,et sed elit, or incid do unt ut dolor sit amet, magna. dolor sit labore e magna. Loremidunt ut consect Lorem ipsum sed do etur adipisic amet eiusmo elit, , conse sed ing dolor labore ipsum d ctetur et dolore tempor incidid elit, eiusm ut labor do dolor adipisicing magna. unt ut od sit e etipsum elit, sed amet, consect Lorem dolore tempor incid dolor etur adipisic magna. ut labore do eiusmod idunt temporsit amet ing et dolore elit, Lorem dolor magna.sedincididunt , conse sit ipsum doipsum elit, sed amet, consect Lorem eiusmod ctetur adipi ut do etur labor ut labore eiusmod sicing adipisic temp e et dolor ing et dolore tempor incidid e magn or incididunt magna. unt

When I initially designed this piece I was thinking of an informational l poster concept. Upon further thought and after initial feedback I found it to be a clever idea to create a web page style layout that incorporated the steps. I therefore created a navigational bar on the left and 8 boxes on the right hand side that hold the hierarchy styles, a brief description of the concepts, as well as an example. I felt that the inclusion of an example would make this appeal more like an informational poster to which the viewer would want to click on the name and learn more about say â&#x20AC;&#x153;contrastâ&#x20AC;? and be able to view more examples. Also there is additional information added, to make it appear more website like, which is generic statements about hierarchy with typography and its communication qualities.

REPETITION

COLOR

Style & TEXTURE

Brittany Linares | Typographic Communication | Project C - Typographic Process Design Poster | Savannah College of Art & Design | Fall Quarter 2013

POSTER

FINAL POSTER PHOTOGRAPHY

Here are the photographs of the actual poster to scale. These were taken outside to gain ideal light settings. I provided various angles as well as the main frontal shot of the design. There was some issues getting the white balance to cooperate so the blue overtone was just due to lighting issues and has nothing to do with the actual look of the final poster, which looks just the above PDF.

RESEARCH

BIBLIOGRAPHY • Bonneville, Douglas. “Smashing Magazine.” Best Practices of Combining Typefaces. N.p., 4 Nov. 2010. Web. 27 Oct. 2013. <http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/>. • Jones, Brandon. “Understanding Visual Hierarchy in Web Design.” Webdesigntuts RSS. Envato, 28 Sept. 2011. Web. 16 Oct. 2013. <http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/>. • Stickdorn, Marc, and Jakob Schneider. This Is Service Design Thinking: Basics, Tools, Cases. Hoboken, NJ: Wiley, 2011. Print. • Web Designer Wall. “Typographic Contrast & Flow.” Web Designer Wall Design Trends and Tutorials RSS. Wordpress, 11 Dec. 2007. Web. 16 Oct. 2013. <http://webdesignerwall.com/tutorials/typographic-contrast-flow>.