Wireframes! The very backbone of creating a website. Or any layout for that matter. Need an app? Wireframe it. Need a website? Wireframe it. Need a computer program? Wireframe it! But, first, what exactly is a wireframe? Find out in this here article.

What is a Wireframe?

A wireframe is essentially a proto-skeleton for a website, app, program, literally anything that you will need a guide for before creating. When building a website, you hopefully do not hop right on in and cross your fingers. You start with a wireframe, a blueprint for your project. Wireframes are also called “page schematics” or “screen blueprint” which also conveys its meaning pretty well.

When you build anything digitally, you need this blueprint to create your assets, place the location of your media, place text where it belongs. Wireframing can save your life when you are building. Doing this will designate where things will belong, allow you to know what you’re doing. Y’know, just the normal help that making a guide does.

How To Make A Wireframe

Wireframes can be made in different ways. You could do it traditionally with a paper and pencil, or you can make it digitally, using design software such as Photoshop, or even software specific for building wireframes. Whichever way you chose to do it is up to you and your comfort levels, I believe. Although, if you are collaborating, it may be best to have an easily accessible wireframe that is easy to understand. However, if it is just you and you’d like to make the messiest wireframe on paper, go for it! The means justifies the end.

Making a wireframe is up to what your website needs. Be sure to ask yourself tons of questions before coming to a decision. What are you doing? Are you selling things? Portraying things? Will there be lots of text or lots of media? Where will everything go? What is your purpose? Asking yourself those questions will absolutely help you as you go on.

Referencing already made websites may help you in this endeavor. Many websites can be easily converted into wireframes, in fact, helpful practice would be to create a wireframe over a screenshot or image of a website (such as Wikipedia, Youtube, etcetera). Make boxes for the media areas, designate where text will lay, create menu bars, headers, footers! Let your planning go wild.

Wireframing Resources

Let’s link and showcase in a few helpful resources about wireframing! Regard these resources when you create your next plan, and think through about how wireframing works as you do so. Be sure to check these handy links out!

  1. Invision’s How To Make Your First Wireframe Article! – Wireframing explanation with great links, helpful gifs that illustrator how people wireframe, and other various things! Very helpful!
  2. Career Foundry’s How to Create a Wireframe – Very interesting and helpful step-by-step explanation. Has nice visuals for on-paper wireframes.
  3. envatotuts+’s A Beginner’s Guide to Wireframing – Features website templates, has a lot of information. Step by step, and very helpful.
  4. Telepathy’s Learning to Wireframe: 10 Best Practices – Has 10 very useful tips to utilize when making wireframes.
  5. Capterra IT Management’s How I Learned to Create a Wireframe: 6 Easy Steps to Follow – Another helpful step-by-step! Has nice TL;DRs / quick takeaways at the end of each step for quick reading.

Now get out there and make some wireframes!

Featured Photo by Artem Sapegin on Unsplash