When designing for a digital brand, you or your designer has to find a balance between creating something visually novel and exciting whilst communicating all the important stuff. Icons and images come hand-in-hand to set the tone for your user’s experience and invite them to soak up your brand’s identity and ethos.

Here we put together a “how to” guide, focusing firstly on using icons and images in design. Covering all the basics, it’s a great springboard for you to jump off and into your digitally creative pursuits.

Let’s dive in.

simple line art icon designs
Icon designs by Clicky

How to feature icons successfully

Icons add visual accents to digital designs. If you have a lot of info to present, they are a brilliant tool for breaking up text-heavy content into a more digestible and exciting format. In order to do this effectively, you need to be strategic.

Read on to discover five great ways for implementing icons into your visual content.

1. Signify key points

Our favourite spring cleaners, bullet points or numbered lists, work to declutter text. Separating bits of info from the rest of the text body, they highlight key points and takeaways. A more creative approach to the classic list format involves iconography.

COVID measures icons
via Alex Solorzano

Designing unique symbols to further purvey your brand identity and relay your message in a visual way keeps the rhythm light and bouncy for your reader. For instance, take a look at this set of infographics, illustrating the steps that this brand is taking to handle the Covid-19 pandemic. Not only does it explain this important information in a light-hearted, easy-to-read way but it’s full of character and represents the brand’s values.

2. Label charts or graphs

Some designs suit being text heavy (think written articles or the blurb section of a book cover) but other informational content, such as infographics, requires a more visual approach. One of the benefits of iconography is that it allows readers to visualise the text, which can be especially valuable when you’re trying to communicate data or stats.

Six components of human beings with and without icons
via Visme

Take a look at the above example, first without icons and then with icons. Doesn’t the option that includes icons look so much less cluttered and easy to read? It’s because there are visual supporting elements for each label, helping to explain each point.

One thing to be sure of is that you’re always incorporating icons that are hyper-relevant to the point, or else they won’t make sense. You’re not adding icons for the sake of adding icons—you’re doing it to ensure your designs are easy-to-understand and visually appealing.

Let’s look at another type of infographic in the below images, noting the differences between these two data visualizations. Swapping written statistics and names for a chart labelled with visual logos creates a clearer, more accessible and, therefore, more efficient design.

Teen social media usage with and without icons
via Visme

3. Show consistency

There are so many different styles of icons, from flat, to outline, to isometric and more, that it can feel a little overwhelming to know where to start. We’ve rounded up three things for you to keep in mind when choosing or designing iconography for your project. Finding the right stylecolor and size is crucial for consistency and reflecting your brand identity.

Icon style

As there are so many different styles of icons to choose from, it’s important to stick to a single icon style throughout your design, regardless of which one you choose.

Here’s an example to help showcase why this consistency is so important:

Britain attitude to meat icon differences
via Visme

See how in the first instance, the icons have a similar look and feel? It makes the design as a whole feel cohesive and put together. But in the second example, the carrot is a black outline icon while the lettuce remains a colorful icon, throwing the viewer off and disrupting the design.

Icon color

Another important aspect of icon consistency is color. While certain contexts demand that icons retain “logical” colors (see the carrots and lettuce in our previous example), sometimes it’s more fun to get creative. One way to do so is to match the icon’s colour with the data widget they appear in (or the overall color scheme), like the following set of coordinating colors between the statistic and their corresponding icon.

Webinar viewers data
via Visme

Icon size

Large icons in Portuguese
Via Beatriz Ayres

A final major thing to consider when implementing icons into your design work is their size. Whatever message they are denoting, consider whether that message is just as significant as the other points. If so, and you want your reader to consider each one equally, the size of your icons should reflect this as each element in a design project should be streamlined together. What’s more, using the same sized circles helps create a uniform look around some of the more oddly shaped icons, which leads us to our next point…

4. Add a background

Graph information
via Visme

As you may have noticed in the previous examples, an icon as a line shape is often dramatic enough. Sometimes, however, you may wish to add an extra contrasting layer to your design to really make the iconography dazzle and this means adding a background. Apart from the usual spherical shapes to back your icons, there are a couple of other creative avenues you can explore, including sizing, shape, placement and transparency… whatever takes your fancy, really.

infographics step by step
Via Visme

 

5. Adding animation

What is Design Thinking?
via Visme

If you weren’t excited enough, why not contemplate animating your icons? Adding ticking, twitching or trembling adds drama and communicates the symbol’s message more effectively. Allow an excess of creativity (and motion) to run through your iconic ideas and see what happens… until then, let’s talk about images.

How to maximise your image potential

Got some fab graphics and not quite sure how to fit it into your webpage? Perhaps you’re in the midst of designing a digital space or platform and need some inspiration on jazzing it up. Imagery grabs attention; they entice users towards your call-to-action and provide an enriched experience. Not only this, but they tell your brand’s story and ethos; visually speaking.

Contrasting and complimenting white space and brand colors, featured images are so significant in design that you need to get it pretty perfect to distinguish yourself from competitors. So, we thought it’d be cool to put together five alternative techniques for presenting imagery in your designs.

1. Crack a crop

crop image pattern
Via Visme
crop image pattern

One unusual way to incorporate images into your designs is to crop them into abstract shapes and create unique patterns. You could start with something simple like a square, circle, or triangle (or something asymmetrical if you’re feeling adventurous) and then play around with the dimensions to find the right fit. If it’s a geometric design you have in mind, you could also try tiling, with some shapes exposing the image and some filled with complimentary/contrasting block colors.

2. Use images as a background

Community Share online marketing image
via Visme

Filling a background with an image creates atmosphere and welcomes the reader to make a deeper connection with your brand. You can try different techniques, like using a transparent box out to display text over the image but make sure you choose contrasting colours and placement to keep things easy to read.

3. Cutouts

food photography cut outs
Via Visme
food photography cut outs

Love the main element in an image but not its background? Slice away the bits you don’t need into an image cutout (see donut). This technique gives you a lot more freedom as you’re able to slot it’s main feature into your design without having to worry about the edges of a square/rectangular photo feeling awkward. It also opens up your site to embrace white space. Get creative with it, and see how many similar image cutouts you can use. You might even place your image cutout over part of your text to give more depth to your design.

4. Collages

Surreal graphic
via Matt Pamer

Since around 1910, the practice of collaging has evolved alongside several art and culture movements. These days, it flirts with white space to create digital designs that are dynamic, packed with character and brand identity and enthralling to look at. A brilliant way to tease or playfully manipulate content, it is the ultimate alternative mode to present imagery through.

You can use a slick grid system as a base or perhaps you want to go “old school”, scan and rip up photos before putting them together into a digital collage oozing a grungy D-I-Y aesthetic. Be explorative with compositions but ensure it all ties in nicely with your overall brand identity and color palette.

5. Add a simple transition

Artist magazine image
via Zhenya Rynzhuk

A big entrance never hurt anyone and images are no exception. Static websites can be incredibly powerful, but they can also be unapproachable. A simple motion transition increases interactivity between site and user, offering a memorable experience for the user while creating another chance to express individual brand identity.

Time to take the plunge

Icons and imagery may be small additions to your designs, but they can have a huge impact. With these 10 tips you can start integrating them into your designs to take them to the next level. Not sure what type of icon or image will work for you? The best approach to perfecting digital design is through experimentation. Choosing the right icons and imagery and learning how to manipulate them to fit the brand aesthetic of your dreams is a process and guess what—it’s fun!

Chloe West Visme
About the author

Chloe is a Content Marketing Manager at Visme, an online graphic design software. She loves to write about digital marketing and design and find new ways to engage audiences through content. Chloe is based in Charleston, SC, where she loves exploring her city with her son.