Site Overlay

Illustration case study: Virtualised network

Original version

Firstly, it is uncertain, looking at the original, whether the grey oval is simply a flow line connecting the four rectangles in a linear fashion or whether it serves as an enclosure to the inner elements. Here, it is assumed to be the latter. If the four rectangles were connected in a linear fashion then surely there would be arrows leading from one to the other. With the assumption of the oval being an enclosure, the revised version dispenses with the rectangles and integrates the labels into a solid ring. 

It is also assumed that the reason that the original enclosing object is an oval and not a circle is because it would be difficult to fit the five individual inner icons into a circle. The reason for this is that the four boxes take up a lot of space within the enclosure; reducing this space would mean that the inner icons would need to be moved closer together. 

So, for the revised version, a ring was used, with the labels integrated into the ring itself. As well as tidying up the design, it makes it more obvious that there is an enclosed environment. Originally, just a straight line was placed to separate the elements but, as the four elements link together to make a whole, a ‘jigsaw join’ was used instead, to indicate that all four elements are separate yet connected parts of a whole. 

The ‘Devices’ icon

The original illustration highlights a very common mistake made with icon design. Take a look at the ‘Devices’ icon. If a text label wasn’t used to describe it, would you know immediately what it was meant to represent? This icon shows a laptop, a tablet and a mobile phone in single icon. If you were to zoom into the icon you would see each device with buttons and other markings that are simply not required. Icons are very simple graphics used to represent an entity; they do not have to be complex illustrations in their own right. Whilst an icon with many complex elements may display well at large size, that detail is lost when the icon is reduced to a smaller size. Icons are meant to be displayed at smaller sizes and complex icons simply look messy and can affect the entire illustration.

The ‘People’ icon

Look at the ‘People’ icon. Again, because this icon was designed with too much detail, its clarity at this size is starting to deteriorate.

Also note the white rectangle behind each person element. Whilst this would not display on a white background it would obviously show through on darker backgrounds. When The Documentalist designs icons or logos, care is always taken to make sure that illustrations will display on any background, whether it be black, white or colour.

Revised version

For the individual icons enclosed inside the ring of the revised version, a popular icon font is used. These icons have been designed to display correctly at virtually any size. The ‘People’ and ‘Devices’ icons are much simpler and more obvious in what they represent. These icons are shown purely as an example and The Documentalist can design individual custom icons, if required.  

Explain Explain Explain!

It’s important to note that the document in which the original illustration appeared had the following text attached to it:

Technical Services Networking covers the strategic areas within the following diagram

Absolutely no other information was given explaining the illustration. Remember, illustrations are predominantly used in a supportive role to explain larger concepts. Without any supporting explanatory text, illustrations are next to useless. Customers require a certain amount of ‘hand-holding’ when being explained difficult or complex concepts and they will not spend time trying to ‘decode’ an illustration. A well-designed illustration may help but some customers may be left to make their own assumptions that can harm the message you are trying to get across. 

The Documentalist will work with you to look at both the illustration and text, bringing each together to create a cohesive and clear message.

Revised version

Just one more thing…

Design is a very fluid process. A single design can be worked on for days and then right at the last moment ways are found to improve it further.

Here, the thinking was that the outer blue ring represents an outer network, that which the customer will experience. The Secure Optimised Available Network is internal and contains the four areas, People, Device, Apps and Information. It could be argued that the large network icon is not actually needed and that a second, inner, ring can be used instead. 

This second revision shows this idea as a concept design, with the secure network element placed into its own ring. This further reinforces the idea, graphically, that a customer’s people, devices, apps and information are stored behind a secure area. The icons and labels have been enlarged slightly to add more clarity.

Through a small change to a design, the customer’s perception of the message you are trying to convey can be changed by a much greater degree.