How to Make a Wireframe in 2019

So you’re making a mobile UX design. Sounds simple enough right? However, there are a few things you have to consider before you can go to the prototype stage.

First, don’t worry about aesthetics. You don’t have the time to worry about how the colors will match up with the images. Instead, make a list of all of the things you want your final design to have.

For instance, does the website have private chat features or social media links? Whatever you want or need, place it on your list so you have an idea of what your final product will include. After that, categorize and prioritize the requirements based on importance in your final design.

Focus on the UX and not the Design

Everyone wants to make a good UX designed website for both desktop and mobile devices. But do you know what UX really means?

To sum up a complex concept briefly, UX stands for user experience. What will your user see when they first view your app? Where will the page take them? If your viewer needs to do a specific action, can they find out where they need to be?

What will your audience see and feel, using your app?

Sounds a bit abstract, sure.

That’s because UX and the internet are evolving faster than the average person can keep up with. But remember, when wireframing, you need to understand that UX has its limitations. UX isn’t about filling every loading page with flashy colors and features. Think about your audience and create UX that’s simple and intuitive for them.

Sketch The Wireframe

If you want to design an outline, there are some free online wireframing tools that will help you complete your job without an added expense. You can design, build, and impress your design team by making wireframes for free.

Alternatively, you can use a pen and paper to start wireframing. Sketch out the ideas you have for your page and add enough features to keep your user interested.

Make a Prototype

Prototyping is the stage where you connect your wireframe and test it like you’re the end user. For instance, this includes layering dropdown menus, connecting buttons to landing pages, etc. Prototyping tools have increased in popularity, and I hope this trend continues too, because they are useful in solving design bugs and finding blind spots and hidden flaws.

Test and Present the Idea

Does your wireframe prototype the way you need it to? Did your coworkers praise your initial idea? Then give your prototype a whirl on the meeting room table, get your team’s approval and start working on the final designs.

First, send an email to your team to let them know the prototype is completed. Try to have a presentation prepared and have a link or image to get them to start engaging with your ideas.

Conclusion

When you make a wireframe, always have your audience in mind. This means that you will have to make one that has features that are targeted to their needs. By following these steps, you will create an interesting website whose features will stand out from the competition.

How to Make a Wireframe in 2019 was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.