search

eklem / draw-at-work

Templates and tools for workshops to learn how to draw to communicate. Not art, communication. Everyone can. Doesn't need to be pretty. Communicate better within teams and stakeholders.
MIT License
2 stars 0 forks source link

readme

Draw at work!

Workshops to learn how to draw to communicate. And structure your ideas. Not art, but communication. Everyone can. Doesn't need to be pretty. Communicate better within teams and stakeholders.

Screenshot of first take on React app - work in progress

How far I've gotten with the Draw at work workshop.

Why?

  1. To think better and sort your ideas
  2. To communicate your ideas to others

3 basic workshop sessions

For each workshop session, explain quickly what you'll learn and why it's needed.

The visual alphabet

To make drawing easier without thinking too much, use a visual alphabet to simplify the process. We will use Dave Gray's visual alphabet.

Draw fast

How to simplify and when to add details.

Human beeings and interaction

We create software to help people. For this we often need to explain interactions between people or people and machines.

Practicing

Drawing battles. Get better at telling stories that communicate well through drawing and design critique.

  1. Choose a story. Write it down
  2. Draw (all of you)
  3. Design critique
  4. Draw again

React and Vite setup

React app can be found in the /react folder.

Dev

To preview and hot-reload when developing:

cd ./react
npm run dev

Build

To build static html to be published to github.io-page:

cd ./react
npm run build

Deploy to GitHub pages

cd ./react
npm run deploy