Photo credits: https://wallpapercave.com
The sorts of technical diagrams you find in the industry of software & IT mostly consist of basic shapes, arrow-heads, and lines which we call ‘connectors’. While the basic shapes such as rectangles or ovals mostly represent objects, the connectors either represent relationships or flows. By including as much detail in the diagrams as possible, we intend to make them self explanatory. But what we ultimately end up with by doing so is nothing else but a mess of spaghetti that makes the message more complicated. We are living in an era in which the clock is powered by content-delivery. In such a competitive environment, the last thing we would like to see is our audiences running away from us with their brain-synapses entwined.
The Richness of Tools that Spoiled the Kids
This wasn’t a problem that was unique to diagrams. If you remember many web sites/applications you saw in 2005, you will also remember all the things that someone could possibly do with Adobe Photoshop (bevel, emboss, engrave, gradient, masks, and many more). The paragraphs of words were force-justified and the designers had very little sense about spacing between and among elements. I have seen official letters or emails composed in Comic Sans or Palatino-linotype in italics and companies didn’t worry to have letterheads with nickelodeon-like design features. Even though this sounds funny, based on where we are today, it was part of the learning process and we are a part of the same history. This irresponsible mindset of utilizing resources (e.g. features of Adobe Photoshop, HTML marquee) was an eye-opener for the communities to realize what our generation was lacking compared to the generations who designed the flag of Switzerland or whoever actually calligraphed William Wallace’s Lübeck's letter.
The Recovery of Sense with Careful Study
In 2008, I accidentally came across a web page of the Smashing Magazine which was a plain white page with almost black text with a very few highlights in dark orange. I am sure that there were many awesome web designers by that time who had created attractive websites — but this particular website felt special for a reason. In simple words, it made me stay on that web page and read the contents without being distracted or getting tired of reading it. The overall balance of design elements on that web page surely served the purpose in near perfection. Maybe there were other websites and communities that actively promoted this trend — but this was the very first time I saw proper acknowledgement by a community of content providers for Simple, Clear, and Uncluttered design principles. This is something that is very valid in the context of technical diagrams too. The final version of your technical diagram has to be Simple, Clear, and Uncluttered.
What you try to communicate is important. But what they see and remember is what matters.
Inspiration Isn’t Essential for Imagination
Even if this article is not about designing web pages or logos, what we learn from it can be very useful even when you try to use a technical diagram to communicate an idea. I have seen designers who probably have misunderstood the concept of Simplicity by just being inspired by someone else’s work rather than thinking by their own. When you follow someone else’s way of designing stuff, how the outcome looks in distance is seen as an important factor than the simplicity of the message that needs to be communicated. This results in imbalances, uneven gaps, disconnectivity, too much spacing or most important elements in thin lines and shapes. This can make your design too weak, hence the message in it suffers a significant loss of strength.
One main important thing that we must understand is that simplicity is not weakness!
The national flag of Switzerland is one of the most simple designs you see today. But the moment you see the national flag of Switzerland, do you feel anything of weakness? If that simpleness had ever given a notion of weakness, those Swiss companies would never have used it to brand themselves in their designs (i.e. chocolate wrappers, airline material, watches, knives, and pouches). You would agree if I say that whatever you design has a personality of its own. A few months ago, I had a discussion with a few of my colleagues regarding this very matter. Then I didn’t find an official word to describe the quality which I have described above in this article—therefore, I happened to call it the “Alpha factor” of a design.
The “Alpha Factor” of a Design
If you have a good look into things that people design today, you will notice that many simple and beautiful designs do badly miss the Alpha in them. This can be something inevitable for some designers when things get highly commercialized and when they get bombarded with work with tight delivery deadlines. But that’s a different story. To understand this further, imagine yourself in an ancient war having to choose one of these designs to brand your flags, shields, and sails with it. How many modern logo designs do you think that would qualify during that process? Someone can argue that we are not designing things for the battlefield — but what else do you see other than a battlefield on today’s market which is overcrowded with contents for a single human being to read during his/her lifetime?
Without that Alpha in your story, it is hard to unite people around it. Without having that Alpha in your design, you cannot make people gather around it and perceive the idea as you expect them to.
In the context of technical diagrams, how this applies is little different even though the end goal is the same. You can make your diagrams simple by following many techniques. Similar to the above-discussed designs, the simplicity should never make your diagram look too light and disoriented so that your audience has to contact you again to understand what you have tried to communicate.
Details are really important to make sure that your audience has received all the necessary background information. Therefore, we have to think of ways that we could possibly communicate these background details for their subconscious mind to be occupied with while making our main message standing out becoming the Alpha in that pack. Also, it is crucial to understand that these background details should not represent different messages but complementing the main idea that is being communicated.
Break Attention-Levels Without Breaking the Idea
The Alpha elements in your design have to be carefully chosen based on how a complete stranger would perceive the idea starting from the entry point of the realization process. Imagine that you are designing a few frames of a movie scene. In each frame, the main component that catches our attention is something that moves when you play all these frames together. In a technical diagram also you can identify a few elements that can help to play a story in the observer’s mind by understanding the typical flow-sequences of how they perceive things.
For example, you can highlight the main elements of the diagram with strong lines or shapes with a prominent color while creating the other directly connected elements with thin lines and shapes without a fill (or filled with a light hatch pattern). After that, you can also create a map-key to prevent cluttering details such as supportive information on the main diagram space. But then we have to be mindful not to compromise the Alpha factor by using that map-key to put the most important details too.
I would like to bring this into the discussion by taking an actual example that some people are already familiar with. Since that needs to be presented in the form of a step-by-step study with some details, I've published that in another blog so that we would have a proper break in between.