Practical Tips to create Professional looking wireframes

At 17Seven, each time we begin a project, we start with something called a Discovery process where we collect information about the product, its users and the ecosystem. Then our talented designers take over and start turning all their thoughts into ideas. However designers require a medium via which they can organise their ideas and communicate the vision back to our clients in a straightforward and simple way. This is where ‘Wireframes’ come into play. They are a powerful tool for translating an idea for a digital product into reality.

Wireframing is a necessary step of the design process. Acting like blueprints for web and mobile apps, they help us set a foundation for our product and identify what works and what doesn’t, early on in the process.

Have you done wireframing before? If not, how do you know what to do, where to do it, and what steps to take? Luckily, for you, our team at 17Seven has this process mastered, and we want to share our experience with you.

Getting started with wireframing

First things first: A wireframe is a visual representation or a mockup of an interface using only simple shapes. They’re void of any design elements such as colours, fonts or images. They’re used to communicate ideas and represent the hierarchy and layout of a website or app. Just like the blueprint of a building, a wireframe lays out the specifications clearly while giving the execution team (you, other designers, developers, etc.) an overview of the product. Unfortunately, in spite of knowing its benefits, it’s an area that’s often either neglected or poorly executed by many designers.

Pro Tips to keep in mind while Wireframing

Wireframing is important because it focuses on one fundamental thing, i.e., the function and flow of your product. That’s why it’s one of the first steps towards building your product. It’s simple yet takes a bit of practice and consistent efforts to achieve perfection.

In this blog, we’ve shared 10 very practical steps. Read on and you’ll discover how you can make wireframing an essential step in your design process. You will also learn how to produce professional-looking wireframes that impress both your clients and team members.

1 | Research before creating wireframes :

If you want to create good wireframes, you have to research what users need and what they want. At the same time, it’s important to consider the business goals as well, to ensure product success. Researching before wireframing will help you set clear expectations of what output you want to achieve.

2 | Sketch your ideas on paper first; keep it simple:

The main advantages of wireframing are its simplicity and speed of execution. It shouldn’t slow you down. Start by sketching on paper or whiteboard using basic shapes such as squares, rectangles, circles, etc. This will allow you to explore multiple solutions and identify various opportunities. You should focus on creating as many versions as possible without deep-diving into any one of them. This will help you come up with the best solution for your problem.

3 | Make sure to use the perfect artboard :

The first rule of wireframing is to pick the right artboard size. If your artboard size is mismatched, your design layout will need corrections when making high-fidelity prototypes. The density of elements changes as per the size of the artboards. Secondly, choosing the wrong artboard size may lead to an incorrect visual hierarchy of your product experience. Keep in mind this simple tip: if you’re designing a responsive website, make sure you pick the smallest screen size (1024 x 768 — Desktop) so that your designs are scalable.

4 | Always use grids to plan layouts :

Using a grid is the best way to wireframe fast. The main purpose of a grid system is to help guide the placement, sizing, order, repetition and alignment of elements on your page. Grids will help you plan and define layouts that are adjustable and scalable. Grids should always be picked based on the amount of content you have on a screen. If you use Sketch, you can pick a 12 column grid by default based on the width of your artboard which is a universal grid for any web or desktop platform. Some designers even use an 8 column grid for the web when there is less content and they want to set a bold visual layout.

5 | Consistency is the Key :

Every pixel matters. Ensure that all UI elements used on a page are consistent. For example, if you’re designing the bottom navigation for an app, each icon you use should be from the same family of icons. Spacing of each element should be uniform and all labels should be of the same font size. Maintain consistency across all your screens.

6 | Design for the whole and not only one single screen :

When we say design for the whole it means that every screen you design you should think about how would that screen interact with the other screens. Our users will be interacting with the whole product and not only one screen so while wireframing always think about the overall experience you want your users to feel.

7 | Aim to make it functional and not pretty :

Wireframing is all about rapid ideation. It should be the fastest way to build something and test it with people. If we spend more time detailing the visual aspects of the design, the original purpose of wireframing is defeated. They should look balanced and convey the functionality to the end-user.

8 | Use actual content and ditch the lorem ipsum :

Lorem ipsum, also known as placeholder copy, has been around for ages. While it can be helpful in the early stages of content planning, it shouldn’t be a part of the final wireframe deliverable. When we use real content, we get to see whether or not it fits in our layout and helps generate valuable feedback from users during review sessions.

9 | Use Greyscales and avoid using colours :

Colours in wireframes are usually avoided. That’s because colours can be distracting. The goal is to define the page architecture and keep it as clean and simple as possible. The best design solution is built when users are able to complete their journey on the product even without colours or shading. Below image shows a grayscale wireframe on the left and a ‘wireframing style-guide’ on the right that helps multiple designers collaborate while wireframing for the same project. The only colours used are to highlight error or success states.

10 | Test your wireframes :

Just like user research is the first step in your wireframe process, users should be the best judge to decide if the wireframes work on not. This step is important before visual design begins. By testing the wireframe and user journey, you will get insights into how real people will use the product. This assurance and learning opportunity lets your team continue iterating if needed, and also provides valuable insights to your stakeholders or clients. In case your clients cannot provide you with target users, you can conduct testing at your end by using alternative methods such as creating hypothetical internal users for testing or using online platforms that offer a database of users that are ready to provide feedback on your products.

Conclusion

Your mission as a designer should be to make it easier for your users to accomplish their goals. By presenting information via wireframes, you are aligning the business goals of your product with the needs of your user. All by laying out some lines and basic shapes. Remember, looks or visual appeal are not at all important at this stage.

Finally, remember that there’s no right or wrong way to sketch your wireframes. Experiment and try different ways of sketching and ultimately you’ll find your own style. The more you create wireframes, the better you’ll get at it. So start wireframing! Have fun!