Able to collaborate with visual and interaction designers. In today's workplace, no matter what field you are in, it is likely that you will find yourself on a project team where you are expected to collaborate with designers. So, learning some basic principles of design and gaining practice in applying them by creating an infographic will help you be better prepared to communicate design needs on the job. You have already learned and been practicing the crap principles, but in this slidedoc, you'll get a bit more background as to WHY THOSE principles work because they are based on Gestalt theories of visual perception. 3 INTRODUCTION
whole". It refers to theories of visual perception developed by a group of German psychologists in the 1920s. • These theories describe how people tend to organize visual elements into groups or unified wholes when certain principles are applied. • The following slides cover some of the basics of using three of these principles. 4 1922 - Max Wertheimer, Kurt Koffka and Wolfgang Köhler developers of Gestalt Psychology.
hierarchy means the arrangement of elements in a way that implies a hierarchy of importance within a section. It is achieved by creating dominant, sub-dominant, and subordinate focal points using varying visual weight (size, contrast) and alignment.
a page but arranged relative to a line or margin. The line doesn't have to be an actual one. In fact, it is usually invisible -- implied by the way elements are arranged. There are four ways to align elements: 1. Horizontal 2. Vertical 3. Edge 4. Center 8
look at a shape that is incomplete. When a shape is incomplete, we perceive it as a whole by filling in the negative space to complete it. Using closure reduces the complexity needed to convey visual information while also actively engaging the viewer who has to stay with the shape long enough to make sense of it. 14
• Icons, whether they use closure or not, are effective to use when creating the isotype (pictograph or pictogram) section or to add visual interest to other sections of your infographic. • You will find links to free icons under Tools and Resources. • Flaticon.com will allow you to easily change the icon color if you sign up for a free account. 15
see objects that are similar to one another. Anomaly uses the principle of similarity to alter one object in order to draw attention to difference. The grouping of these figures is using proximity, so we perceive them as one group, but the design is also using similarity and anomaly in the colors of these figures. 16
experienced as presenting a sense of order through the color choices. Notice how the visual elements and colors are competing for the viewer’s attention in this infographic. • The result is color disharmony. Knowing some basics about color wheels will help you choose a color palette that is harmonious.
complementary colors. 60% of the space is the primary color (turquoise). 30% of the space is the secondary color (cream or beige). 10% of the space is the accent color (orange). Black is also used, but it is not considered a color nor is white.
between the background and text (or other visual element such as an icon). 25 In this example, the contrast is effective because although the background and text are the same color the levels of saturation are different.