The elements of design are the basic visual parts that every graphic is built from: line, shape, form, space, colour, texture and value. A news infographic, a social media quote card, a video lower third and a website banner are all arrangements of these few parts. A digital journalist who can name and control each element can explain why one graphic reads clearly on a phone screen while another confuses the audience, and can correct it before it is published.
Example: a newsroom preparing a graphic on rising maize flour prices uses lines for the price trend, rectangles for the data labels, empty space around the headline, a strong colour for the latest price and a lighter value for the gridlines. Each choice is a decision about an element of design.
A line is a mark that connects two points. Lines can be straight, curved, thick, thin, solid or dashed, and they carry meaning: horizontal lines feel calm and stable, vertical lines feel strong, and diagonal lines suggest movement or change. In multimedia graphics, lines are used to divide sections of a layout, to draw the trend in a line chart, to point from a label to a detail in a photograph, and to guide the eye from the headline to the call to action. Implied lines also matter: the direction a person in a photograph is looking creates a line the viewer's eye follows.
A shape is a closed, flat (two-dimensional) area defined by a line, colour or texture. Geometric shapes (circles, squares, rectangles, triangles) look ordered and are used for buttons, icons, chart bars and text boxes. Organic shapes (irregular, natural outlines) feel informal and are used in illustrations and backgrounds. In a news package, a consistent shape language helps the audience: for example, every "Breaking" label may sit in the same rounded rectangle across the website, social cards and video.
Form is a shape that appears to have three dimensions: height, width and depth. On a flat screen, form is created with shading, highlights, perspective and shadows, or produced directly in 3D software such as Blender. Form is used in 3D explainer graphics (for example, a cut-away of a building or a model of a road interchange), in product images and in icons that need to look solid. Too much form in a simple data graphic distracts from the numbers, so 3D effects on bar and pie charts are usually avoided because they distort how the values are read.
Space is the area around and between the elements of a design. Positive space is the area occupied by text and images; negative space (also called white space, even when it is not white) is the empty area around them. Negative space gives a layout room to breathe, separates unrelated items and draws attention to what matters. A crowded social media card with the headline, logo, photograph, three statistics and a web address all competing for room is hard to read on a small screen; removing two items and increasing the space around the headline usually makes it stronger.
Colour is the element with the strongest emotional and informational effect. It has three properties: hue (the colour itself, such as red or blue), saturation (how intense or dull it is) and value (how light or dark it is). In journalism graphics, colour is used to highlight the key data point, to separate categories in a chart, to carry the brand identity of the media house and to set mood. Colour must be used with care: red and green alone should not separate categories because many viewers have red-green colour vision deficiency, and text must have enough contrast against its background to be read.
Texture is the surface quality of a design, either felt (in print) or seen (on screen). Visual texture is created with photographs, patterns, grain, paper or fabric effects and brush strokes. In multimedia graphics, a subtle texture can give a feature story a warm, handmade feel, while a clean flat surface suits data and breaking news. Texture should never reduce the legibility of text placed over it.
Value is the lightness or darkness of a colour or tone. Strong value contrast (dark text on a light background, or the reverse) makes text and key shapes stand out, while close values make elements blend together. Designers check value by viewing a design in greyscale: if the headline disappears in greyscale, the contrast is too weak. Value is also used to show depth, with darker shadows placing objects behind lighter ones.
Size is how large or small an element is, and scale is its size in relation to other elements. The largest item in a design is usually seen first, so the headline or the key number in an infographic is given the greatest size. Scale must also be honest: in pictograms and icons used to represent data, enlarging an icon in both width and height makes the value look much bigger than it really is.
Create a free account to open more of this chapter.
Free: practical guides, quick cards, workplace scenarios and more.
Create a free account