Whiteboard Design Language v0.1

A common whiteboard language for Product, UX, and UI people. Stakeholders welcome.

What is it?

It’s a visual system that I use when working on a whiteboard. It associates the glyphs sketched on a whiteboard to the common elements in User Interfaces. It’s a group of symbols and patterns that is useful when generating or refining ideas on a whiteboard. Mobile interfaces, websites, product workflows, and web applications, etc.

Who it for?

Product people, UX and UI Designers, Front end developers, Stakeholders, Website Designers, etc. People making views on the web, mobile devices, online experiences, shopping carts — you understand. Those who enjoy taking people’s ideas and bringing them to light.

My theory is, that if we share a deeper understanding of our initial ideas, we can get to building technology much faster than ever before. We can communicate and get to what works.

Usage/What if?

Each glyph provided more meaning that what’s displayed. Each scribble, strike, line, and dot means more to someone who understands the language. (See hieroglyph).

It’d allow us to bring ideas further, faster. We can set expectations and get better with each revision. We can understand the perspective of others more intimately and reach solutions with less frustration.

If we abide by a common language it’d allow us to talk about early stage ideas clearly with one another. We can improve upon thoughts and move them to production with clear specifications. Time can significantly be reduced during the exploration of User Experience and Interaction design. With something like this, we can communicate solutions with anyone on our team with ease — because we’re all speaking the same language.

Taking it to the screen

The patterns can be applied to HTML as well as other front end frameworks. By relating the whiteboard sketches to the basic structure of a front end language we’re able to prototype an interface very quickly. It allows us to consider how the solution will be built at the same time the ideas are generated. We get from idea to usable test in no time at all.

Headings

Paragraph text

Images

List items

Action Buttons

Links

And so on

Text Navigation

More Menu

Burger Menu

Close

Icons

If this is at all interesting a repository would be next - or just better documentation of all the different glyphs. It’d be fun to create a visual AI that reads the markings from the whiteboard and then constructs the HTML prototypes! (UPDATE — AirBnB’s incredible design team is working on these ideas. I’d love to learn more about your progress, guys! https://airbnb.design/sketching-interfaces/

Whiteboards are everywhere

A shared language can provide ample ground for innovation and exploration. Ideas can be considered with understanding then taken further by everyone on the trajectory.

Ideas come to life on a blank slate. So be encouraged to share your thoughts and ideas with others! Convey it with thoughtful grace — on a whiteboard.