How to Sketch a UI for Non-Designers

A lot of times in ideation sessions, non designers will say, I can’t draw, so I can’t help with ideation. But ideation happens in the early stages of design and it’s meant to be messy. You can use basic shapes to convey UI elements and a layout. For example, I’m going to draw a UI layout on this Post-it pad using very simple shapes. I’ll start with a big rectangle which represents my browser window to define the navigation. I’m going to draw a line across the top and add in smaller lines for links. I’ll add a rectangle with an arrow to represent a button that leads to another page.

For the title of this page, I’ll make a thick line to represent the heading and then smaller lines to represent the body copy, I’ll add an image by drawing a rectangle with an X through it and start to create form fields by drawing long rectangles.

I can add a carrot in one of the small rectangles to signify a dropdown, and then I’ll add one more button to submit the form and in a short amount of time without any special tools.

Besides this marker, I’ve created a layout. You don’t need detailed drawings or complicated software to convey an idea. A fun way to start an ideation session is with a warm up activity to get everyone comfortable. One way you can do this is to start out by drawing a simple object that everyone knows like a cat for one minute after the one minute is up, everyone shows their drawing. This gets the team comfortable by making the first show and tell, drawing low pressure. And it demonstrates how one concept can be conveyed in many different ways. It’s quick, it’s fun, and it gets everyone ready to focus on ideation without feeling like they can’t draw. Next time you’re in an ideation session, start with basic shapes and feel confident that you can contribute to design ideas without a comprehensive art background.

Leave a comment

Your email address will not be published. Required fields are marked *