How to draw wireframes in 5 simple steps
If you're working in the world of design, wireframing products or app design ideas is likely a huge part of your day-to-day workflow. Despite the prevalence of streamlined and user-friendly digital wireframing software tools such as Uizard, you may still find yourself pulling out your pencil and pad for some good old-fashioned, hand drawn wireframing.
When it comes to scribbling down your wireframe designs in graphite though, it’s important to remember that hand drawing wireframes might seem straightforward with its extremely low barrier to entry, but there’s actually quite a bit of nuance to process and it’s not as simple as sketching a few boxes on the back of a napkin and sticking it on a designer’s desk.
If you want your sketched wireframes to be a success, you need to consider what makes a strong wireframe design, what your UI considerations might be, and even how you want to position your core CTAs.
Can wireframes be hand drawn?
First things first, can wireframes be hand drawn, even in a professional setting? In a word; yes. Although there is an incredible array of wireframing tools on the market today, one thing that has always been a mainstay in the design ideation and iteration process is hand drawing wireframes, whether that be as part of a team or when solo working as a freelancer or founder.
Photo by Kelly Sikkema
Why should you hand draw your wireframes?
The beauty of hand drawing your wireframes is fairly obvious, it’s accessible to almost everyone. Regardless of where you are when an idea comes to you, if you have a pen or pencil on you, you can kick off your wireframing process in a matter of seconds.
The other huge benefit of course is team working. Hand drawing your wireframes collaboratively comes naturally, especially for product teams gathered around a whiteboard, or for creatives huddled around a coffee table. Most importantly, hand drawing wireframes is extremely easy on your wallet. If you are in the very early stages of development, you can ideate and iterate hand drawn wireframes for free with minimal effort.
Hand drawn wireframes in 5 easy steps
So, how do you go about putting pen to paper to hand draw your wireframes? Just because the barrier to entry is super low, it doesn’t mean the task is completely devoid of skill. To hand draw wireframes that will serve some use further down the design funnel, you do need to stick to some of the core tenets of design.
Ready to give your hand drawn wireframe a go? Here are 5 simple steps for drawing wireframes to ensure that your wireframe drawing reflects your project goals, whilst also hitting the necessary design best practices so that it stands the test of time:
- Decide what device you are designing for
- Draw your design navigation first
- Center your design around your product or USP
- Add image blocks, text blocks, and other large elements
- Add in CTAs (calls to action) and other navigational elements
Step 1: Decide what device you are designing for
It sounds simple, but deciding what device you’re designing for is crucially important, not just for the design process itself, but also when it comes to the UI and UX ramifications of the design. If you are working on a mobile app design, you will want the right aspect ratio, and the right assets and elements called out throughout the design to ensure your designs actually serve the right purpose.
Similarly, if you are working on a web page design, you will need to think about how user interaction with keyboard and mouse might affect your potential users later down the line. Here are the standard resolutions you will need to be thinking about, depending on what type of product you are designing:
- Desktop: 16:9 aspect ratio (typically 1920x1080 pixels)
- Mobile: 16:9 landscape aspect ratio (typically 720x1280 pixels – although this can vary greatly based on the type of device)
Step 2: Draw your design navigation first
From a site architecture point of view, and a UI point of view, the navigation of your web or app design really is one of the most important parts of your design. Although most elements will vary from page to page (or from screen to screen) the main navigation will be the mainstay across all pages, allowing for easy linking to the core pages of your design regardless of where a potential user may find themselves.
The type of navigation you will want to include will, again, depend on the device you are designing for. As a rule, desktop designs should have a horizontal main navigation at the top of the screen, and web apps or tablet app designs will have a vertical side navigation.
For mobile sites or apps, navigations tend to be hidden behind the classic hamburger button which, when clicked, will expand to show the user the full navigation. To draw your navigation for mobile designs, we would recommend drawing a specific screen demonstrating your expanded nav, with all other screens in the design simply showing where the button for expanding will sit.
Step 3: Center your design around your product or USP
This should go without saying but, if you are creating a design for a product or service, ensure that you position that product centrally across your core pages. If the aim of your design is to promote a product, this should always be the focal point of your design. Sure, you may have informational pages that don't directly link to your product, but these should be secondary to your main USP pages.
As an example, in the image above, the product is featured in the hero banner of the main landing page. Positioning your product or service centrally in your design makes it clear what the purpose of your design is, which will almost certainly improve user understanding and outcomes later down the line.
Step 4: Add image blocks, text blocks, and other large elements
You've drawn a screen, navigation, and positioned your MVP, product or service, now it's time to embellish your design with secondary visual elements that will be used to brand your design and lend it some aesthetic style when you move on to the mockup or prototype stage.
As in the above image, adding space for text and image enrichments adds a little meat to the bones of your hand drawn wireframe. Sure, these will probably get moved around at later stages in the design process but, for now, it helps to give you an idea of the overall feel of your project.
Step 5: Add in CTAs (calls to action) and other navigational elements
Finally, you want to think about on-page CTAs. These are a great way to demonstrate how a user navigating a specific page can be directed to another page, intuitively. For example, you may want to place a 'shop now' CTA on your homepage so users can directly navigate to your PDP (product display page).
Classic examples of CTAs include 'read more', 'shop now', or 'sign up'. These are clear and simple and accurately convey the purpose of the CTA to your prospective users.
From hand drawn wireframe to digital wireframe with Uizard
So, you’ve drawn your drawn, low fidelity wireframes by hand, and you may have even shared your project with colleagues, teammates, or friends, but what comes next? Once you have your wireframe drawn out in pen or pencil, the next step is digitalizing these drawings so you can move on to the mockup stage and, hopefully, the functional high fidelity prototyping stage of the design.
Transforming your design to digital has never been easier with Uizard’s AI-powered Scribble Scanner! Simply take a snap of your design or upload an image to the Uizard interface and let us do the rest. As demonstrated in the video above, once your wireframe has been digitalized, you can even transform your wireframe into a medium fidelity mockup, meaning you can go from hand drawn wireframe to functional prototype with the click of a few buttons.
Ready to give Uizard a go? Sign up for free and try out Scribble Scanner as well as a host of other incredible features. Got more questions when it comes to the world of wireframes? Head over to the Uizard Blog of Spells to find out more.