Wireframe UI Tips For Complete Beginners

Interface design usually starts with a quality wireframe. This lays a blueprint for the layout and makes it easier for designers to craft pixel-perfect mockups.

But if you’ve never designed wireframes before you might not know where to start. In this guide I’ll share my top wireframing tips for newbies. You’ll learn how to create wireframes, what to focus on, and where they fit into the design pipeline.

Start With Lo-Fi Wireframes

Wireframes have two basic styles: lo-fi and hi-fi. These stand for low fidelity and high fidelity, two different levels of detail for wireframing interfaces.

Designers who are in a rush might do a quick wireframe that falls between low and high fidelity. But you’ll see better results if you start with lo-fi wireframes first. These are just simple sketches that use rectangles to represent sections of the page.

You can try many different ideas quickly and gauge which ideas work best. This leaves room for experimentation and allows you to go in different directions with your ideas.

Start small and worry about details later. Lo-fi wireframes don’t need to depict the entire website.

Instead they should be rough ideas for how you might design aspects of a website. Once you have a few ideas down you can dig a bit deeper to see which ideas you like the most.

Be willing to try lots of layouts and don’t get attached to anything too much. The beauty of lo-fi sketching is that you never put too much effort into any one idea. You can always refine previous ideas or put down new ideas rapidly, a technique called rapid prototyping.

Once you find some ideas you like then flesh out the details. Pinpoint where icons might go, what they could look like, how much spacing you’ll need(among other features).

But try to get into the habit of sketching lo-fi wireframes first. It’ll make a big difference in the creative process and you’ll have an easier time planning usable layouts from scratch.

Mix Digital & Traditional

Websites are a digital product so all designs are created digitally in programs like Sketch and Photoshop.

But there is a benefit to wireframing on paper first before moving to the computer.

For one thing it’s easier to put down ideas with a pen(or pencil) instead of a mouse & keyboard. You can get ideas out quicker directly from your head onto the paper without worrying about exact pixels or clicking/dragging the mouse accurately.

And most designers prefer sketching because it’s more freeing. Most wireframes eventually become digital but starting on paper leaves more room for mistakes and discovery.

Anyone can sketch rectangles so you don’t need any artistic skills or even good penmanship.

You just need to draw lines and make shapes that denote areas of a page like the header, logo, navigation, page title, content, or related media like images or slideshows.

You can even find printable dot grids for wireframing with structure. Some designers like this method, others don’t.

The only way you’ll know what you like is through experimenting. Think of a site you’d like to design and create the wireframes on paper first. Plan the entire process visually on paper and see what you think.

Some designers even create high-fidelity wireframes on paper before going digital. This way it’s easier to clone the wireframe digitally when you know exactly which features go where.

Flowcharts Can Aid Organization

Traditional UI wireframes focus on one page at a time. But if you’re building a huge project you might need to outline how all these pages connect together.

Different projects have different goals and a blog design won’t be right for a medical supplies company homepage or a new social networking site. Flowcharts can help you plan a content hierarchy which is always useful.

If you’re working for a client then flowcharts can also help them visualize how their site will work. A great flowchart can show a client all the pages on their website and where all those pages appear.

And sometimes personal projects can benefit from a similar flow chart process.

I typically recommend using lo-fi wireframes with flowcharts because they’re simple enough to replicate. Plus you only want to see how pages connect to each other, not necessarily how those pages are designed.

If you do end up creating digital flowcharts you should look for UI/UX kits and related resources. These kits are usually free and they come with pre-built elements that you can reuse over and over again.

Here are some great freebie wireframing kits to get you started:

Design With Clear Intent

Design wireframes as if they’re usable interfaces right from the start.

Before even sketching a wireframe think about what a user might want to do on that page. How can you design an interface that makes their task easy? Where should the most important elements be?

If you know what the site is for then you’ll have a much easier time planning a wireframe that works. This is how you design with intent so users know exactly what to do on each page.

If needed you can make a list of all the site’s most important features. Then organize them by most to least important to help you organize intent.

Once you settle on a wireframe it’ll basically define the mockup and final coded layout of the website. So this early wireframing stage is very important because it sets the blueprint for every stage afterwards.

Whether you design lo-fi or hi-fi, or maybe a mix of both, you’ll still need to consider the user experience.

This also means wireframing for responsive designs and considering how the layout might look on different screen sizes.

If you can organize different wireframes for all the pages on a website then you’ll make the later design stages a lot easier.

Once you know how the site transitions from a widescreen monitor to a smartphone you’ll know how to design the final mockup, and you’ll have enough resources for developers to code the proper breakpoints.

Wrapping Up

Wireframing a website is possibly the most important part of the creative process. This is when you can really experiment with ideas for different layouts, different styles, and consider usability before diving into the details.

This guide should have more than enough info for beginners just getting started with wireframing. But it can be useful to study examples on Dribbble to see how other designers wireframe their layouts.

Over time you’ll pick up your own workflow and wireframing will eventually become like second nature.