From Code to Clarity: Visual Thinking for Software Development 🎨

Content from my talk "Visual Thinking + Elixir" Code Beam Lite New York 2024

Visual Thinking as a cognitive tool 🧠

If you want to explore all the advantage of Visual Thinking consider there are many skills to practice, I prepared this learning framework to guide you through this world:

🎨 Drawing Reconciliation: Revisiting and refining visual representations to improve clarity, accuracy, and relevance, ensuring visuals are aligned with evolving ideas and insights.
🎨 Sketchnoting: Capturing ideas and information in real-time by combining words and visuals, creating a structured and engaging summary of complex topics or conversations.
🎨 Experimental Drawing: Exploring unconventional or abstract ways of drawing to encourage creative expression, idea exploration, and visual problem-solving outside traditional frameworks.
🎨 Active Listening: Paying close attention to spoken information and converting it into visual notes and symbols, enhancing understanding and retention of key ideas.
🎨 Visual Synthesis: Condensing complex information into a simplified, cohesive visual form that emphasizes essential elements and connections, helping audiences quickly grasp the main points.
🎨 Personal Iconography: Developing a unique set of symbols and icons that represent common themes or concepts, creating a personal “visual dictionary” for more effective and consistent communication.
🎨 Human Data Visualization: Representing data in ways that are not only accurate but also human-centered and relatable, making data insights accessible and engaging for diverse audiences.
🎨 Graphic Recording: Creating real-time visual notes during live events or presentations, capturing the flow and highlights of discussions in a way that preserves and enhances the original content.
🎨 Visual Collaboration: Using visuals to facilitate teamwork, ideation, and problem-solving among team members, creating shared understanding and alignment through diagrams, sketches, and flowcharts.
🎨 Visual Structures: Organizing information into structured layouts, such as grids, hierarchies, and mind maps, to clarify relationships and create visually coherent frameworks.

Book references 📚

The back of the napkin by Dan Roam

Visual Thinking: Empowering People and Organisations through Visual Collaboration

Drawing A Hypothesis

Build the big picture 🎆

Why is it worth learning Visual Thinking as a developer? 💻

🖍️ Enhanced Problem Solving: Visual Thinking helps decompose complex problems into simpler, more manageable visual representations, making it easier to understand and approach technical challenges.
🖍️ Improved Code Comprehension: Visualizing code structures, data flows, and dependencies can clarify relationships and functions within a codebase, especially in systems with many interdependent components.
🖍️ Better Communication with Teams: Drawing and visual explanations facilitate clearer communication among team members, making it easier to convey design decisions, bug solutions, or code review feedback.
🖍️ Faster Onboarding: Visual aids can make onboarding new team members more efficient, as diagrams and sketches provide context and clarity that speed up understanding of project architecture and workflows.
🖍️ Efficient Debugging and Refactoring: Sketching data flows or process interactions helps in spotting potential bottlenecks, bugs, and refactoring opportunities that may not be obvious through code alone.
🖍️ Enhanced Cognitive Processing: Visual Thinking engages spatial and visual parts of the brain, promoting better retention and understanding of complex information, especially when learning new concepts or languages.
🖍️ Tool for Creativity and Innovation: Visual Thinking encourages out-of-the-box thinking, enabling developers to creatively brainstorm new features, optimize existing systems, and explore alternative solutions.
🖍️ Documentation that Speaks for Itself: Visual Thinking can make technical documentation more engaging and accessible, allowing for quick reference diagrams that are often more intuitive than text descriptions alone.
🖍️ User-Centered Perspective: Drawing out user flows, interfaces, and experience journeys helps developers think from the user’s perspective, leading to more user-friendly design choices.
🖍️ Better Planning and Architecture Design: Visuals are essential when planning new features or system architectures, allowing you to explore design options before committing to code.

This are some ideas about where to apply Visual Thinking:

Sketch PRs with Your Own Code Contributions
Illustrate PRs from Others to Give Better Feedback
Create Notations for Flows (Code Release, CI/CD, Environments, Team Practices, Company Flows)
Illustrate Technical Concepts Alongside Other Diagrams
Create Simple Summaries for Frameworks
Create Visual Notes as a Diary for Personal Feedback
Help Create Visual Summaries to Keep Business Logic Fresh Across Teams

Here you have some examples:

Drawing code components flow.
Explaining visually the lifecycle of a Live View step by step.
Explaining how to achieve fault tolerance in the TANDEM computer using processes.

Where to start? 🖍️

Start with Sketchnoting
Experiment with Drawing Code Concepts
Use Visuals for Feedback, you can use tools like https://excalidraw.com/ or https://www.tldraw.com/
Build a Personal Iconography
Create Visual Summaries of Complex Processes
Map Out Frameworks and Libraries
Document Your Progress Visually
Collaborate Using Visuals

Some references:

What it is a Live View? https://medium.com/@carlogilmar/phoenix-live-view-what-is-it-a218b2a5fcaa
Welcome Elixir https://github.com/the-elixir-developer/welcome-elixir
Distributed Systems Notes https://github.com/the-elixir-developer/architecting-reactive-systems

I developer a short visual thinking introduction workshop for developers: https://github.com/visualpartnership/visual-thinking-workshop 🚀

And also you can check some trainings I made: https://github.com/visualpartnership/visualthinking?tab=readme-ov-file

If you start to make exercises, don't hesiate to open a ISSUE with your visuals, so I'll have the opportunity to give you feedback.

License

the-elixir-developer/visual-thinking

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Error
Looks like something went wrong!

Packages