Art 444: Paula DiMarco
Week 3

Mon. 9-14 Challenge #1 Info graphics

LECTURE:

HOMEWORK - Due Wed. 9-16

Talk about the design plan:

 

Design Plan - PDF

A design plan usually consists of a sketch with support with other related stylistic images (Moodboard).

Often the moodboard happens before the design plan.  If you would like to include a mood board you may do this.  Otherwise you can create a pdf with images, sketches and style.

 

 

 

Wire Frame - PDF

You tend to hear this term when working with websites.  Well this is important when planning with infographs as well.  Especially since there is so much information. 

Wireframes do not have to be ugly. But it doesnŐt make sense to spend time making them beautiful when your client might not agree this is the direction you want to go.

 

1.   Make line based graphics/icons (can be done by hand or in Photoshop or illustrator)

a.    Lines drawn only. Keep the icons and elements in simple line based shapes.

b.   Do not spend time shading and making your graphics look good.  You may not use them.

c.   Create a legend for yourself and the client, which describes each item and itŐs purpose or use.

2.   Title/ headline/ Typography

a.    Do not work in color. Only black and white and grays.

b.   Provide the client with some alternative names.

c.   Generate type treatments with titles and names

d.   Treat the type as brand marks, word marks.

 

 

Wireframes can be tested with other users to see if they make sense and are functional. 

 

Samples:

00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08

 

Phase 3- design Plan

Design Plan: Compile your design plan by gathering and organizing what the look and feel of the design.  This is done through mood boards and sketches or just a compilation of all your influences, color and direction.

 

Phase 4- Wireframe

Begin on WireFrames:  begin to make your icons and graphics.  Use only grayscale or black and white. Map our where elements and objects will go.

 

Notes- at this stage in the wireframe you can use another color to apply notes. Just put notes on the side of your wireframe, do not put notes in the wireframe.

 

 

 

Art 444: Paula DiMarco
Wed. 9-16
Challenge #1 Info graphics

ACTIVITY:

HOMEWORK Due Monday 9- 21


[LECTURE]

Sites that talk about making infographs

Tell a story

10 steps to creating the perfect infograph

How to make an infograph in 5 steps

]

Make a wireframe

Website

  • Design with the correct pixel height and width
  • Use a screen capture to find out the resolution you want.
  • use illustrator and set the pixel height and width using the option web when creating a new document
  • Section off what you want to display first as people will be reading from top to bottom

 

Brochure / booklet / pamphlet

  • Determine dimensions
  • Create a physical paper plan first
  • Work in illustrator and/or Indesign
  • Plan out pages in actual size (inches)
  • Have an art board in the printed production layout.
  • But work in the designer layout

 

Poster

  • Determine dimensions of poster
  • Create a physical paper plan first if it is fold out from a brochure
  • Work in illustrator and/or Indesign
  • Plan out pages in actual size (inches)

 

 

About/ tips Videos

How to create an infograph (6 min)

Lynda.com - 5 keys to infograph (5 min.)

 

Ilustrator how to's

Graph tool in Adobe Illustrator (22 min)

Creating fun and accurate timelines in Adobe Illustrator (15 min)

Handmade beautiful and accurate Arc-Circle (12 min)

Illustrator Tutorial: Flat Design Infographic (1 hour 45 min)

 

 

 

No talking Videos

Illustrator (18 min)

Electricity (15 min)

Vector graphics in illustrator (9 min.)

New Feature of Adobe Illustrator CC 2015 / INFOGRAPHIC (2 min.)

professional Infographics adobe illustrator cc ultimate tutorials (55 min.)

 

 

 

 

 

Phase 4- Complete Wireframes by Monday

1)   Map / layout

2)   Icons/graphics – Legend as well

 

Phase 5- Designs - begin designing

Once you and your client agree that the wireframes and your style document reflect the appropriate direction, you will need to begin to design.

 

 

 

 

 

Information Graphics.

Design Formats

Process

Tips for making a strong design