Techniques to Make Complex Ideas Easy to Understand

Practical Tips for Breaking Down Complexity and Engaging Your Audience

Sep 17, 2024

Clarifying complex ideas is a task I cherish, though it's rarely straightforward. And it’s inevitably long if I have to elucidate it. I have learnt some tips and techniques to explain things from the editor of my book React Anti-Patterns, the introduction, details and explanation structure is useful for describing concepts, patterns and code examples.

However, it’s far from enough if I want it to be super clear and digestible. To effectively convey concepts, I often employ a variety of media—each suited to different aspects of storytelling. Whether through text, metaphors, illustrations, animations, videos, hand-drawn wireframes, or my favourite—code snippets—each medium offers unique benefits.

I want to talk about the techniques that I use to make some visualisation in my articles in this issue, hopefully, I can help you if you ever need to explain something to your audiences.

Illustrations with Figma

I frequently use Figma for illustrations, akin to refactoring code or developing features from scratch. Starting with basic shapes, I adjust dimensions, colors, and styles. As the design grows, I consolidate similar elements into components, a method familiar to developers aimed at reducing redundancy. This approach allows for quick and reliable modifications.

Choosing colors can be daunting for beginners; I've been there myself. My advice is to keep it simple—"less is more." Opt for minimal colors while maintaining enough contrast to differentiate elements.

I have shared some techniques about colour theory I learn and found useful, you can find these articles in my Medium blog

Hand Drawing

Paper and pen remain my go-to tools for initial sketches—simple, direct, and distraction-free. Beginners, in particular, benefit from this method as it encourages focus on basic shapes and structures without the overwhelm of digital options. This limitation is its strength, promoting creativity within constraints.

Once a concept solidifies, I transition to digital tools like Figma or Excalidraw for refinement. Before I move to a more formal digital tool, it’s common to have 3 or 4 versions already in hand drawing.

Digital Hand Drawing Style - Excalidraw

Excalidraw adds a personal touch with its relaxed borders and textures, fostering creativity. While it offers the flexibility of digital editing tools—like copying, resizing, and repositioning—it retains an informal, hand-drawn feel.

I recommend learning the basic shortcuts and experimenting with a few concepts. Try replicating a design you like from social media or an app. Break it down into its main shapes and colors, simplify these into basic shapes, and then organize them into a wireframe-like drawing. I find using Excalidraw for sketching ideas to be particularly relaxing and effective.

Using Images

Finally images, if you have followed this newsletter for a bit, you probably have noticed that I use hero images or cover images a lot often which are linked to the topic I’m discussing in that issue.

Metaphors are powerful for storytelling. I choose images that resonate with the theme, often using services like Unsplash or snapshots from my daily routine. These images not only enhance comprehension but also trigger that delightful "aha" moment by releasing dopamine in the brain.

In the Headless Component Pattern, for example, I use an image of a beautiful statue—without its head—to introduce the topic. I believe this will bring a smile to my readers' faces and set a light, relaxed tone before they read the content.

In Closing

Employing various media not only enriches the delivery of information but also makes your content more accessible and engaging. Whether you're sharing insights with peers or documenting your own journey, integrating these elements can significantly elevate your communicative impact.

Thanks for reading The Pragmatic Developer! This post is public so feel free to share it.