Published on <a href="https://blog.prototypr.io/whiteboard-design-language-v0-1-106a0844813e?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jonathan Gorczyca <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0lszOx9OqdjT2qcQhlzbAQ.png">
<h4>A common whiteboard language for Product, UX, and UI people. Stakeholders welcome.</h4>
<h4>What is it?</h4>
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.
<h4>Who it for?</h4>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6uOBOqC-Egzxsd2b6ZNitg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PmoU2P9UtPGmJ2Q8etuuSA.png">
<h4>Usage/What if?</h4>
Each glyph provided more meaning that what’s displayed. Each scribble, strike, line, and dot means more to someone who understands the language. (See <a href="https://en.wikipedia.org/wiki/Hieroglyph">hieroglyph</a>).
<blockquote>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.</blockquote>
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.
<h3>Taking it to the screen</h3>
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
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LIpdZpH0slA5xng1IzILJw.png">
Paragraph text
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fxW6tDL2gnChl6L3YyomSg.png">
Images
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*67BNtNQkN_f8hRVDrcXp0A.png">
List items
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Y2U4Pja5DzMaFtbe4zGXMQ.png">
Action Buttons
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Dz7nBueO1rAG6yZvnA9MuQ.png">
Links
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LOrQvUQfoAZFXWFI_LwQAw.png">
And so on
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-mWBCvxJOUtzcHVp66hYjw.png">Text Navigation<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cNUyVJpwDt-7OxmLPgxKZA.png">More Menu<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Jy0KnHEfugLLHT8pFHo3Hg.png">Burger Menu<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TGR9CfQ13eyx7U_Ktuhmmw.png">Close<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kt3RS5jglIPYjzde1NoSgQ.png">Icons
If this is at all interesting a repository would be next &#8211; 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! <a href="https://airbnb.design/sketching-interfaces/">https://airbnb.design/sketching-interfaces/</a>
<h4>Whiteboards are everywhere</h4>
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.
<h3>#WHITEBOARDREPS</h3>
As an exercise, do a 10 minute speed whiteboarding session. Push yourself to produce 20+ UI layouts during that time. Quick, free form creation of interface layouts. Hierarchy, interaction, vertical rhythm, forms, content outline. Remove all constraints during this level of whiteboard sketching. This is important. Do not consider the idea deeply but instead focus on quantity.
<blockquote>Quality can be honed and value is invented from these exercises.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*axx-rsrgOGl1d7WvMWeWCw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aFlQH10ycZ4YSRs_7IAhJg.png"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=106a0844813e" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/whiteboard-design-language-v0-1-106a0844813e">Whiteboard Design Language v0.1</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whiteboard Design Language v0.1

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

What is i…

Top Stories