Back to posts
Guillermo Castillo
|
May 7, 2019

Wireframing 101: a practical guide for beginners

What is a wireframe

A wireframe is a visual representation or a mock-up of an interface using only simple shapes, they are void of any design elements such as colors fonts or images and they're used to communicate information, hierarchy, structure of content and flow of your application or your site so there are three different types of wireframes there is low, mid and high fidelity wireframes.


Low fidelity wireframe

These are basically a brain dump of your ideas for how the content is going to be laid out, they're used for rapid iteration and it's usually done with pen and paper I personally like to use a sharpies because they're nice and thick and that makes sure I don't get too focused on the details so at this point you're focused 100% on the structure of the content.


Pro’s: Is the fastest way to represent your ideas and share them with other.

Con’s: Due to its craft nature it might not be the best approach to share your design decisions with the project stakeholders.


Tips:

Use sharpies: this will force you to keep everything simple and to not get into details, remember that here you are just exploring different options.

Explore: generate as many options as possible, ideally from 3 to 7 options.


Mid fidelity wireframe

A mid fidelity wireframe is a refinement of your low fidelity wireframes it's at this point that you want to start making decisions on hierarchy as well as importance of content and also start making decisions on stuff like “should I use a single column grid or should I use a two column with sidebar”,  “what sort of a grid system should I use for my images”, etc but it's important to just use shading at this point still no color everything is in grayscale or monochromatic.


Pro’s: Is a clean and easy way to represent your designs decisions, is fast to create.

Con’s: When the design is approved you will have to start almost from the scratch to recreate the design.


Tips:

Define a color scheme ideally monochromatic and around 4-5 shades of the same color.

Use simple shapes to represent the different design element, ex.: a rectangle for an image, a stack of long and thin lines to represent a lock of text, etc.


High fidelity wireframes

High fidelity wireframes are as close as you'll get to the final mock-up of your app or your site without actually jumping into Sketch or Figma and figuring out the colors and images and all that sort of thing so at this point you can start adding actual copy and icons if you have them but still do not do anything with color just use greyscale or monochromatic and don't use images.


Pro’s: since this is really close to the final design it is way easy to turn them into the final version helping you to finish the project faster.

Con’s: due to the details it requires it takes more to create.


Tips:

Define a color scheme ideally monochromatic and around 4-5 shades of the same color.

Use simple shapes to represent the different design element, ex.: a rectangle for an image, a stack of long and thin lines to represent a lock of text, etc.



Why should you do a wireframe?

Well, a wireframe allows you to spot any potential issues in the structure or flow of your website before you spend countless hours crafting the look and feel of the final design, it's much much easier to change a wireframe than it is to change the final mock-up and - it helps you as well as forces you to define your goals and priorities for your application or your website.


Conclusion

Use a wireframe to represent and communicate your design ideas really fast and spot any potential issue before investing a huge amount of time in details that might require a lot of effort to create. I personally recommend using the High fidelity wireframes since it is a close enough representation of how the final design will look like and once approved is just a matter of applying the brand attributes and change styles.

Resources

Even though you can create your own wireframe it might take you a several hours to elaborate a high fidelity wireframe that has a decent level of detail, in case that you want to save time and speedup your design process we strongly recommend you one of the best selling wireframes UI Kit in the market today which is Wireland: A massive wireframe suit collection for Web, iOS & Ecommerce projects, Wireland is a massive collection of layout and UI components composed by 3 wireframe products that will help you with the prototyping process making you a more efficient professional. Includes website, iOS apps and ecommerce.