Monthly Archives: December 2018

Today’s essential questions:What are some things that are working well in the featured student examples below? What could be improved to make them even better? What ideas do these give you about your own project?

Image Credit: Hsa

Image Credit: Omarion

Image Credit: Shaborn

Things to critique:

Visual Hierarchy

Quality of Graphics

Typography

Missing Silhouette PDFs

The following people never posted the PDF files of their finished silhouette projects to their blogs. The projects were printed over break, but if you would like a small version of your project printed for the show that opens next week, please post your PDF to your blog IMMEDIATELY:

Ezequiel

Jamila

Hsa

Today we will:

Analyze the progress of our infographics so far

Continue working on our infographic projects, incorporating any changes we may want to make after today’s in progress critique

Today’s essential question:How can I use typography to create a professional, easy to read infographic?

Many of us are ready to add text to our infographics. When trying to make your text look interesting, don’t use too many different “fun” fonts or your project will look like a hot mess:

As a general rule, you should use two different typefaces to keep things interesting yet unified. These typefaces should be fairly different to show contrast, and you should use the more decorative one for headings. NEVER set body text in a decorative typeface – it will make it illegible and look unprofessional. The image below explains why:

Here are some tips on how to combine typefaces to achieve professional results:

Establish visual hierarchy

Visual hierarchy tells people where to look first and what is most important. It can be achieved with size, weight, color, texture, orientation and space, or any combination of these tools.

Use different weights of the same typeface

To pair fonts that come from the same family, plan carefully to create contrast, varying things like font size, weight (such as light, regular, and bold), and case (upper, lower, small caps). One of the benefits of limiting your fonts for a presentation to one font family is that it creates a more consistent look.

Create Contrast

Using contrasting typefaces makes it clear which text are headings and subheads and which are body copy. The differences help create distinct roles for each font, allowing them to stand out as individual pieces of information.

Mix serifs and sans serifs

One of the most popular ways to combine fonts effectively is to pair a serif and a sans serif. This is a classic combination and it’s almost impossible to get wrong. Serif fonts have the small numbs on the ends of the different strokes of the letters. Sans serif fonts do not have these little nubs.

Avoid combining fonts that are too similar

Conflicts between fonts happen when the fonts look too similar. As you can see in the example above, the two fonts share the same weight, size and decoration. As a result they’ve become too alike. They’re performing very similar roles, but the small differences are conflicting which makes for an awkward overall effect. This makes it difficult to establish a hierarchy, because the fonts aren’t visually distinguishable from each other. In fact, font combinations that are too similar can often times look like a mistake—as if you’d been experimenting with different fonts and had forgotten to clean up after yourself.

Limit your number of fonts

As mentioned before, it is generally wise to stick to only two or three fonts. Too many fonts can distract and confuse your audience. Limiting the amount of fonts you use will help create a harmonious, unified design.

Today we will:

Continue working on our infographic projects, making sure any typography we add is legible and displays a clear visual hierarchy

Today we will begin creating our infographics in Illustrator AFTER Ms. Lawson has approved your project proposal. The following people may start working in Illustrator now: Omarion, Dax, Shaborn, Hsa.

Steps to creating the actual infographic file

Open Adobe Illutrastor

Create a new file. File -> New.
Set the dimensions as follows (flip the height and the width if you want a landscape orientation):

Place the image of your layout sketch. File -> Place. It may not fit the dimensions of the paper exactly.
That is ok. You can scale and distort it to fit by dragging the top, bottom, and sides of the layout sketch image.

In the layers palette, double-click to rename Layer 1.
Then press the new layer button to make a new layer, and name it “images to vectorize.”
You may also want to create a new layer for each image you plan to vectorize.

Place any reference images you plan to vectorize. File -> Place.
Hold down on the shift key and scale from the corner until each image is the correct size.

Use the rectangle tool to create boxes.

Use the text tool to add text.

Use the pen tool to trace create vector illustrations.

At the end of class, save your file as both a PDF and PNG and upload both files to your blog.
Also, create a new folder with your project PDF file and any images you are using, and back it up to your Google Drive or USB drive.

Today’s essential question:How can I use visual hierarchy to draw attention to the most important parts of my infographic?

What did you look at first? Why? The designer who created the above image used a technique called visual hierarchy to cause you to see certain parts of the design in a particular order.

Visual hierarchy refers to the arrangement of parts of a design in a way that implies importance. Visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception.

Good visual hierarchy enables you to decipher what is the most important information without even reading the text:

How do the examples below use a strong visual hierarchy to help the viewer prioritize information?

Today we will sketch out a basic layout of our infographic. Here are some ideas. (You do not have to use any of these layouts):

Today we will:

Sketch the planned layout of your infographic.
Here is an example of what I am looking for:

Photograph your layout (after it has been approved by Ms. Lawson). Tape it to a wall and photograph it from straight on.

Create a new blog post with the following:

the photograph of your layout

any text you plan to use in your infographic

any graphics you plan to use in your infographic (including photos you may vectorize)

Infographics display information in an attractive way. For our next project, you will create an infographic in Adobe Illustrator on a topic of your choice. You will also create any vector graphics that you will use in your infographic.

Examples of vector infographics created by past SOTA students
(click to enlarge):

Image Credit: Giacomo

Image Credit: Tina

Image Credit: Elyse

Image Credit: Bayleigh

Image Credit: Andrew

Image Credit: Zion

Project requirements:

12×18″ or 18×12″

created in Adobe Illustrator (vector)

you have created all imagery in Adobe Illustrator

effective use of typography & visual hierarchy

displays a cohesive color scheme

topic is accurately researched and sources are cited

Types of infographics:

Compare 2 topics (ex. life before a pet, life after a pet; Tupac vs. Kendrick Lamar)

All about a topic (ex. graphic design as a career, history of rap music, how to make a pumpkin spice latte)

Illustrate subcategories within a category (ex. comparison of starbucks drinks, stereotypes of students who go to SOTA, characters featured on Game of Thrones)

Call attention to a social issue (incarceration rates by race, gender, and income; history of a disenfranchised group (ex. Black Lives Matter, marriage equality, adoption rates of different types of pets in animal shelters)

Project planning post requirements
(what you should have completed by the end of today’s class):

Your topic

The information you will display in your infographic (include links to where you found this info)