Wireframing Crash Course: Tips and Resources

Whether you're teaching yourself to software engineering or you're currently attending a coding bootcamp, there comes a time when you need…

Wireframing Crash Course: Tips and Resources

Whether you’re teaching yourself to software engineering or you’re currently attending a coding bootcamp, there comes a time when you need to create a website. Having a detailed plan of how you plan to structure information, pages, and features is essential to displaying critical thinking of user experience and alleviating heartache in the future.

Wireframe rendering

What wireframing is

Wireframing is the simple, bare-bones rendering of what your potential website may be. Here, you can plan the layout and the placement of user interface elements.

What wireframing is not

Wireframing is not the final product in the UX/UI design journey. There is no need to worry about which specific images to use, the copy that should be written, fonts, animation, or any other granular details that is still part of the product development roadmap.

You’re not expected to create custom art for a wireframe. In fact, many wireframes start with a pencil and paper or a whiteboard. Using a wireframing software can help but isn’t necessary since wireframing is even more temporary and in a status of consistent altering in the early days of product planning.

Tips

Keep It Simple

As mentioned above, you’re not supposed to have your expert copywriting skills or any images on display. Fill in text areas with curvy lines or use a Lorem Ipsum generator if you’re using a computer.

Your wireframe’s aesthetic design shouldn’t be the only thing kept simple. The user flow should as well. If you can’t explain a simpler site mapping solution to someone without them feeling confused, then your site is too complicated. In a world that revolves on speed readily available information, a complicated path won’t do well for the future of your product.

Homework

In another blog post of mine, I discussed the need to do user experience research in order to successfully go through the design thinking process and create a solution to a problem.

This user experience research plays a major role in how your information is structured and where certain areas of the page may need to be located.

Collaboration

Unfortunately, UX design is not a science. It’s heavily opinionated and no single person has the right answer. Collaboration invites alternative solutions and ideas that can improve the outcome.

Resources

Figma

Google Docs-style collaboration with creating and prototyping UX designs.

Adobe XD

A UI/UX design tool to create wireframes and renderings as well as interactivity with their built-in prototyping and app plugins. Projects on this app can be created via a plethora of device screen sizes.

POP by Marvel

Take pictures of your app’s wireframe or UX ideas and simulate your user’s flow.