Design: Images and Graphics

Whether it's a storyboard, photo essay, or another project, you'll be including some kind of image in your design. Images help quickly understand information and add visual interest to the page. They also tend to be where people look first, so they're very important.

Vector vs Raster

Any graphic can either be a vector graphic or a raster graphic. It's important to understand the difference to ensure that you have high-quality graphics.

A vector file or image is made up of thousands of tiny lines and pathways that, using math, create shapes that can expand or contract without losing quality. A raster image is made up of pixels, so it’s only as big as it is—you can’t take a 300 pixel (or 300 px) image and make it 1000 px without losing quality.

This is important to note because if you are using photographs, you'll need to find high-quality images or else your project will be blurry and pixelated. More information about this is below.

File formats: jpg, pdf, svg...

When you're looking at a file on your computer, the file format is indicated by the three or four letters that come after the name and then the period, like .jpg (indicates a raster image file) or .pdf (indicates a document, usually).

Here’s a cheat sheet for file formats:

JPG – Raster format, great for photographs. You can use it most of the time to create small files. No device will have trouble opening it, and the file size is probably not astronomical.
PNG – These babies are capable of transparent backgrounds—yay! This is important when you want to put a logo or icon on a background of a different color, but you don’t want to have an ugly white box around it. The file sizes tend to be larger, though—so be careful when using them on the web. This is also a raster format.
PDF - PDFs are usually vectors, and are probably the most common vector format. You'll want to save your project as a PDF.

Icons

Icons refer to graphic symbols, which can be used to emphasize or summarize findings. Icons tend to be simple lines, often in a single color. You can make your own icons or there are several free download options:

The Noun Project: The Noun Project has millions of icons that you can download for free, as long as you are using them for non-commercial projects. Download as an .svg (a vector format) to change the color using Adobe Illustrator.
Powerpoint: If you're using Powerpoint to make your infographic, the program has a hundred or so icons built-in. Go to File > Insert > Icon
Font Awesome: Font Awesome is a set of icons that you can download and use with Bootstrap code online or with the Adobe programs.

Photographs

If you're using photographs in your infographic, the most important thing to consider is resolution.

Resolution, (or size) - Resolution in digital images refers to how many pixels there are in an image. If your images are too small, and you try to scale them up, they will become pixelated, that is - you will start to see the pixels in the image. If you took the photograph yourself, use the highest resolution (largest size) image available. If you're finding images online, make sure you're looking for "large" size images. You can filter Google Images for large images by going to "Tools".

Tables and Graphs

The effective display of quantitative information involves two fundamental challenges:

selecting the best medium of display (for example, a table or a graph, and the appropriate kind of either)
designing the visual components of the display to convey the message as clearly as possible.

A table works best when it is used to look up individual values and the values must be expressed precisely A graph works best when the message is contained in the shape of the data (patterns, trends, exceptions to the norm) and entire sets of values must be compared. Meaningful quantitative information always involves relationships.

Best practices for designing tables and graphs:

Introduce and explain visuals in the text (ex: as shown in Figure 7)
Make the graphics as simple and clear as possible
Label all of your graphics

Continue to the next page:

Design 101 Conclusion

Page updated

Report abuse