Infographic Day 5: Typography & Visual Hierarchy

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:

we-all-know-this-looks-bad

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:

papyrus

legibility.png

Find the above examples entertaining? There’s an entire blog post, titled, “Does your choice of font signify you as a terrifying beast?”

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

Establish visual hierarchy
01_hierarchy_01B

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
styles_within_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
contrast

hipsterTrade-410x215

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
serif_and_sans_serif

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
too_similar2

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
two_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
  • Upload the newest PDF of our progress to our Google Drives
  • Post both a PDF and PNG of our progress to our blogs
Advertisements

Infographic Day 4: Creating Simple Vector Graphics

Today’s essential question: How can I create simple vector graphics to use in my infographic?

Follow these tips to create successful vector graphics:

Keep it simple

Create your graphic from the simplest shapes possible, and include the minimum amount of details needed for your graphic to be recognizable
cute-dog-breeds_23-2147519661

Keep it bold

Create contrast through color, shape, and scale
food-icons-in-flat-design_399-2147492815.jpg

Keep your style consistent
  • Either use line art in all areas or no areas.
    Keep an eye on core styles such as line art for defining areas. If you’re going to use it, use it throughout your whole creation.
    line-icons-flat-design-elements-food-beverages-cafe-menu-items-popular-healthy-fast-food-culinary-objects-various-78730100
    mexican-food-flat-design_23-2147546660
  • Use the same palette throughout.
    Introducing new colors to one area only may make that element stick out like a sore thumb.
    christmas_vector_graphictravel-infographic-with-elements-in-flat-design_23-2147554095
Here are some examples of photos of faces that have been successfully turned into vector graphics:

Today we will:

  • Continue working on our infographic designs
  • Create a new blog post with the following:
    • a PDF of our progress (this will look like a link)
    • a PNG of our progress (this will look like an image)
    • a few sentences describing the types of graphics you plan to create, and the style you are going for

Infographic Day 3: Setting Up Our Illustrator Files

Today’s essential question: How will I create my infographic in Adobe Illustrator?

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

  1. Open Adobe Illutrastor
  2. Create a new file. File -> New.
    Set the dimensions as follows (flip the height and the width if you want a landscape orientation):
  3. 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.
    layout_sketch
  4. In the layers palette, double-click to rename Layer 1.
    Then press the new layer button new_layer 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.
    layers_palette
  5. 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.
    placed_graphics
  6. Use the rectangle tool rectangle_tool to create boxes.
  7. Use the text tool text_tool to add text.
  8. Use the pen tool pen_tool to trace create vector illustrations.
  9. 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 we will:

  • create a new 12×18 or 18×12 file in Adobe Illustrator
  • place our layout sketch in this file
  • begin vectorizing our layout sketch
  • save our file as a PDF and upload the PDF of our progress to our blog

Infographic Day 2: Visual Hierarchy

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

Visual-Hierarchy

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.

tumblr_kz69f7XQzA1qz8ohs

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

main-qimg-d2f75ec3accd1ed43792d2c4f179b6a2

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

sushi-guide_cropped

london_cropped

lemon_mug_cake

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):

infographic_cheat_sheet

Today we will:

  • Sketch the planned layout of your infographic.
    Here is an example of what I am looking for:
    infographic_layout.jpg
  • 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)

New Project: Infographic

Today’s essential question: What topics might lend themselves to an interesting infographic?

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):

 

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)
  • Sketches of potential layouts
  • Here are some examples of what I am looking for:

Today we will:

  • Brainstorm various infographic topics
  • Consult Ms. Lawson and your classmates on which topics may work the best for this assignment
  • Create a new blog post with:
    • your topic
    • the information you will display in your infographic (include links to where you found this info)
    • sketches of potential layouts
    • Here are some examples of what I am looking for:

Vector Silhouettes Last Day: Artist Statements

hand-writing-vector-smallToday’s essential question: How can my artist statement add to the meaning of my artwork and ensure that it is appropriate to hang in a high school gallery?

Many of our silhouette projects tackle tough issues that people might not expect to see in a high school art show. Therefore, it is important that we write carefully crafted artist statements to explain them. We will display the artist statements next to the silhouette projects at the 11th grade show, so please pay extra attention to spelling and grammar. Ms. Lawson is willing to edit any artist statements,  but you must request editing help when you publish your artist statement.

Final Blog Post Requirements

When you are done with your project, create a final blog post with the following:

  • A PDF of your finished project (this may be 3 separate PDFs if you are creating a triptych)
  • A PNG of your finished project (so we can see the image in the blog post)
  • An artist statement (minimum 150 words) about our project. Not sure what to write? Start by answering the following questions. Make sure you turn the artist statement into paragraph form – no credit will be given for incomplete sentences.
    • What is the big idea behind your artwork?
      • What is your artwork about?
      • Who or what inspired your artwork?
      • How do you want people to feel when they view your artwork?
    • Describe your artwork
      • What does your artwork look like? (hint: everyone had to make a black and white silhouette)
      • What is the subject matter? What character(s) or story did you portray with your project?
      • How does the subject’s body language contribute to the imagery?
      • If there is a background or props, how do those items help illustrate the concept?
    • How did you create your art?
      • What media is your artwork made from? (hint: everyone had to use Adobe Illustrator)
      • Describe the process or steps you took to create your artwork.
    • Overall thoughts
      • What did you learn from creating this artwork?
      • Is the final piece what you imagined? How so?
      • What did you do well? What could you have done better?

Today we will:

  • finish our vector silhouette projects
  • create a final blog post with the following:
    • a PDF of your finished project (this may be 3 separate PDFs if you are creating a triptych)
    • a PNG of your finished project (so we can see the image in the blog post)
    • a minimum 150-word artist statement about your project in paragraph form

Vector Silhouettes Day 6: In-Progress Feedback

standing-people-silhouettes-in-front-of-picture-frame-in-art-gallery-interior-vector-illustration.jpg

Today’s essential question: What do I need to work on today in order to finish or improve my silhouette project?

Please check your folders – Ms. Lawson has left everyone feedback on their projects and has outlined what you should work on this class. Remember, next class we will finish our projects and write our artist statements, so if you are behind, please arrange a time to catch up.

Today we will:

  • Continue tracing over our silhouette photos or sketches
  • Create a blog post with the following:
    • BOTH a PDF and a PNG of each image you have traced over
    • a few sentences describing what is going well, as well as anything you would like help with