Drawing Basics

Start Drawing: Wireframe Fundamentals

Drawing for UX Design

Drawing is a crucial skill for UX designers, but it’s important to understand that UX drawing isn’t about creating art. Drawing for UX design is about organizing and communicating information clearly to colleagues who will implement your design.

Note

No Artistic Skills Required: You don’t need to be an artist to be a successful UX designer. Drawing is a learned skill - the more you practice, the better you’ll get.

Drawing Approaches

• Some designers prefer messy, hand-drawn wireframes
• Others use rulers and are meticulous about appearance
• Find the approach that feels best for you
• Focus on clear communication over artistic beauty

Basic Elements of Wireframes

Wireframes are made up of simple elements that serve as building blocks for creating designs. Most wireframes use three fundamental elements:

Core Elements

• Lines: For creating divisions, borders, and structure
• Shapes: Squares, rectangles, and circles for defining areas and objects
• Text: For labels, descriptions, and content placement

Simplicity Principle

Even complex-looking wireframes are built from these three basic elements: lines, shapes, and text. Master these fundamentals and you can create any wireframe.

Industry Standards for Wireframes

To make wireframes simple and understandable, there are industry standards for representing different page elements:

Standard Representations

Text

Represented by horizontal lines of varying lengths to indicate different amounts of text

Images & Icons

Represented by circles or rectangles with an X overlapping them

Calls to Action

Often represented by rectangles or circles, like submit buttons or compose buttons

Step-by-Step Wireframe Creation

Here’s how to build a basic wireframe using the example of a mobile app:

1. Create the Frame

• Draw a large rectangle to represent the phone frame
• Make it large enough to draw inside comfortably
• This becomes the boundary for your app screen

2. Add the Top Bar

• Draw a rectangular bar that spans almost the entire width at the top
• This is where information and actions relating to the current screen display

3. Add Navigation Elements

• Menu icon: Three horizontal lines in the top left corner
• Avatar: Circle with a simple stick figure person inside in the top right
• Logo area: Rectangle in the center of the top bar

4. Create Content Areas

• Use dividers (thin lines) to group content in lists and layouts
• Add circles with X’s inside to represent images
• Draw horizontal lines of varying lengths to represent text content

5. Add Interactive Elements

• Buttons: Rectangles or circles for calls to action
• Plus button: Circle with a plus sign for adding new content
• Navigation arrows: Simple arrows for back/forward actions

Practical Example: Gmail App Wireframe

Following these steps, you can create a wireframe that represents the Gmail app:

1. Phone frame: Large rectangle
2. Top bar: Spans full width with menu icon (three lines) and avatar (circle with person)
3. Content area: Multiple sections divided by horizontal lines
4. Email items: Circles with X’s for profile images, horizontal lines for email text
5. Compose button: Circle with plus sign in bottom right corner

Drawing Tips and Techniques

Making Clean Lines

• Hold down the Shift key when drawing digital lines to make them perfectly straight
• For paper wireframes, use a ruler if you prefer cleaner lines
• Remember that messy sketches are perfectly acceptable for wireframes

Consistency

• Keep similar elements the same size throughout your wireframe
• Use consistent spacing between elements
• Apply the same visual treatment to similar functions

Speed Over Perfection

• Focus on getting ideas down quickly rather than making perfect drawings
• Wireframes are meant to be rough and iterative
• You can always refine details later

Tip

Practice Makes Progress: The more you practice drawing wireframes, the faster and more natural the process becomes. Start simple and gradually build complexity.

Mobile-First Approach

When deciding whether to design for mobile or desktop first, consider starting with mobile because:

• Space Constraints: If your design works well on the limited screen of a mobile device, it will likely work well on larger interfaces too
• User Behavior: Many users access products primarily through mobile devices
• Design Discipline: Mobile-first forces you to prioritize the most important elements

However, always consider what’s best for your specific product and business needs when making this decision.

Remember, you can create paper prototypes for any device type using these same fundamental principles of lines, shapes, and text.