Visualizing ideas: whiteboarding, diagramming and sketchnoting.

Whiteboarding, diagramming and sketchnoting

I prefer to express ideas visually rather than writing them in text. In the past, I mainly used paper notebooks and pens, but recently I have been using computer apps that support digital visualization such as Excalidraw, tldraw, draw.io, Lucidchart, Miro, StarUML, and Gliffy. Although all these tools provide the function of visualizing ideas, I have learned that they are based on different mental models such as whiteboarding, diagramming, and sketchnoting. This article explores the characteristics and differences of the three models of idea visualization. By understanding the specifics and differences of each model, you can choose the right application for my needs.

Whiteboarding

A whiteboard on the wall — https://simple.wikipedia.org/wiki/Whiteboard

Whiteboards are tools designed for groups to gather and communicate visually, emphasizing real-time interaction. They provide a space where participants can freely share and expand ideas. Typically accompanied by verbal discussion, the sketches made are simple and quickly drawn, leading to low-fidelity visuals that might not fully convey meanings on their own; these are instead enriched through dialogue.

• Real-Time Communication: The primary use of whiteboards focuses on sharing information and ideas instantly, creating a dynamic environment where participants can interact and provide immediate feedback.
• Group Activity: Whiteboards facilitate collaboration by allowing participants to share the drawing and communication process together. At times, multiple people may take turns visualizing their thoughts on the board, fostering collective creativity.
• Low Fidelity: The drawings on whiteboards are expressed freely without strict formats, accompanying low stress and compulsion. This approach facilitates rapid exchanges of ideas.
• Single Large Canvas: Typically, whiteboards serve as a single large canvas that captures all participants’ contributions, allowing for ideas and information to be interconnected and integrated.
• Finalized by Sharing a Snapshot: At the end of meetings or brainstorming sessions, the content drawn on the board is shared with participants through a snapshot. This snapshot serves as a record of the ideas generated on the spot and is not used for ongoing improvements or follow-up tasks.

Applications like Excalidraw, tldraw, and Miro translate this whiteboard mental model into the digital realm. These apps support real-time collaboration and visual sharing of ideas in digital spaces, extending the functionalities of traditional whiteboards with enhanced features and flexibility.

Diagramming (Technical drawing)

A drafting table — https://en.wikipedia.org/wiki/Technical_drawing

Diagramming closely resembles high-fidelity technical drawing, typically invoking the precision work done on a drafting table with rulers and protractors.

• Importance of Documentation: The primary purpose of diagramming is documentation, often adhering to specific notational conventions. This facilitates communication across different times and spaces, serving as an effective means of conveying detailed information that demands professional expertise.
• Professional Activity: Diagramming transcends personal use, involving professionals who adhere to specific notations. It presupposes communication with stakeholders; for instance, Entity-Relationship Diagrams (ERDs) are designed to facilitate discussions between database administrators and programmers. Incorrect diagrams can lead to misunderstandings and potentially serious issues.
• High Fidelity: The task demands detailed and precise imagery, where the quality of the final product independently carries the full meaning. This process often accompanies high stress levels and a demand for perfection.
• Version Control: Over time, documented diagrams can be refined and evolved. Like documents, each diagram may need to be managed in versions, ensuring continuous updates and maintaining accuracy and relevance.

Applications like draw.io, Lucidchart, and Gliffy are built upon this mental model of technical drawing, providing tools that allow users to create and manage visually effective professional-level documents. These applications empower users to communicate complex information clearly and effectively.

Sketchnoting

A sketchnote — https://rohdesign.com/sketchnotes

Sketchnoting is a creative method to express and develop one’s ideas using a pen and notebook that can be easily carried and accessed anywhere, anytime. This mental model emphasizes the readiness of tools for instant idea sketch.

• Idea Elaboration: The primary purpose of sketchnoting is to elaborate and develop ideas, a process distinct from mere communication or documentation. It involves a creative journey that visualizes thoughts in an organized manner.
• Personal Activity: Sketchnoting is predominantly a personal activity where individuals visually capture their thoughts in a notebook. These notes form a personal knowledge base, which can be shared with others or used during meetings, highlighting the tool’s role in structuring personal reflections through a unique visual language.
• Multiple Fidelity: Starting from low fidelity, sketchnoting can shift to high fidelity for more detailed or important ideas. This flexibility allows for both free and detailed expression, adjusting dynamically to the significance and complexity of the thoughts.
• Evolution Over Time: Sketch notes can evolve over time, with additions and revisions made to existing ideas, and sometimes, new pages dedicated to more detailed expansions. This process offers creative freedom without the need for strict version control.
• Multiple Pages: Unlike a whiteboard where all ideas might be drawn on a single large canvas, sketchnotes are spread across multiple pages to prevent overcrowding of information. This allows for a structured expansion of thoughts, tracking the development of ideas across separate pages.

In today’s digital age, apps that utilize digital pens, like the Apple Pencil, are widely used for sketchnoting. Apps like Procreate offer sophisticated tools for artistic work, while Good Notes and Notability are optimized for notetaking. These tools support users in freely expressing their thoughts and organizing creative ideas visually and effectively.

Can I utilize all the models in a single app?

DGM: An online sketchnoting app — https://dgm.sh/home

Despite each model having its unique purpose and characteristics, using multiple apps for visualizing ideas has been fraught with inconvenience and problems. Managing scattered ideas becomes challenging, using digital pens requires switching devices such as tablets, and navigating between different apps can be exhausting. Could we possibly unify the functionalities and features of each model in a single app on one device?

DGM was developed in response to these concerns. Primarily based on the sketchnoting model, DGM boasts the following key features:

• Web Application: Accessible via any web browser, DGM can be used anywhere, anytime. Although no installation is necessary, it also functions as a Progressive Web App (PWA), enabling offline use.
• Designed for Keyboard and Mouse: Unlike digital pens, DGM is optimized for use with a keyboard and mouse, allowing for quick and easy sketching without the need for a tablet.
• Local-First: DGM supports saving and accessing sketches from local files, enabling users to record ideas even when offline.
• Support for Hand-drawn Style: It facilitates low-fidelity sketching effortlessly and quickly, reducing stress.
• Smart Shapes and Various Shape Libraries: DGM offers unique smart shapes and extensive libraries for creating complex high-fidelity diagrams like UML, ERD, and Wireframes with ease.
• Real-Time Collaboration: Being web-based, it supports real-time collaboration; a single web link can facilitate cooperative work without additional software installations. This effectively covers the whiteboarding model.
• Slide Show: With support for multiple pages, DGM allows users to present their sketches directly without needing to convert them into a separate presentation format.
• Publish on Web: Completed sketches can be published directly to the web, allowing immediate integration into blogs, documents, websites, etc.
• AI Assistant: An AI assistant can help generate web applications from wireframe sketches or derive database schemas from ERDs.

DGM maximizes user efficiency by providing a range of visual tools and features on a single platform, innovatively simplifying the process of idea visualization.