Guide To Wireframes
What Are Wireframes?
If you have been in the field of Web development then you might have heard about wireframing. But you have always wondered what is wireframing and how to create one? Wireframing is basically a blueprint for the site which represents a skeletal structure and a visual guide for your users. If you develop a website without a wireframe, then you will not have any particular size for elements, features, etc. But if you make a wireframe before, then you could specify the size of each element, navigation, page structure, features, and overall layout. Also, you can decide what logo you want to use on the site, what colors you think would flow with the site, and a font style.
Purpose & Style
There are multiple purposes while wireframing a site. It shows the main visual design and architecture of a site which leads to different paths of the pages. There are different ways of showcasing certain types of information on the user interface. Arrange content in a way to check the availability of the item in which it’s located. Nowadays, wireframing is such an excellent tool, but some people consider this as an old-fashioned way to present it to their clients. Instead, they are moving towards higher fidelity prototypes because wireframes are low fidelity. Wireframing can be generated within just a few seconds. You will just need a pen and pencils to sketch the idea. Whereas, a high-fidelity prototype needs specific software to point out every single bit of information. Wireframing has its advantages and disadvantages.
Pros:
“One of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. Users can also review it as an early feedback mechanism for prototype usability tests. Not only are wireframes easier to amend than concept designs, once approved by the client and the users they provide confidence to the designer.” If you are a Web Developer or a Designer then you should know that it is useful if you plan ahead of time to save your and client’s time. It is an important communication between the designer and the client. It will help the designer to show the client the structure of a site. Also, it can help the designer to think critically and analytically to organize the site without getting distracted. Whether you are building a website from scratch or redesigning it, if you have not done any pre-planning beforehand then you might lose your track. Wireframing is a key to turn your sketches into an actual working site. To make your design stand out, sketch your ideas, and place all of the different elements into a page. You can use a pencil/pen to simply sketch it on a piece of paper. Once you have figured out, then make your sketches in a digital form.
Wireframe brings simplicity and convenience to your design and it will give you a visual idea of the layout structure and all the elements which you will need to implement in the design.
● Wireframes let your client think about the primary and secondary goals of the site. It will also help the designer to see the actual needs of the client.
● Wireframes can help you make a quick decision and make it easier for you to communicate your ideas with your client or your colleagues.
● Wireframes can help you get feedback at an early stage.
● Wireframes also give the developer a good picture of what and how different elements need to be coded.
Cons:
When you start with your first wireframe and you start to understand the process of how a wireframe works, then you might put too much effort into just the wireframes. You might make the wireframes look as good as you can. This might seem right to you but wireframe is just the sketch which will help your client to see how elements are going to flow in an actual site. Even if you do put a lot of effort into the wireframes then the clients will be expecting the working site to be the same.
Tips/Advice
Don’t over-design the wireframes
● Once you get the hang of the wireframes then you might design the wireframes too much which can take a lot of time. Always remember that wireframes are only to help you map out the basic design, so it won’t take a lot of your time.
● This is an additional step in the designing process and if you skip this step it might make things messy and it will be hard to fix it.
● During this process you are just trying to capture your first thoughts.
● Whatever you have in your mind just put it in a design form. Don’t overthink about the design because the more you think about the design the more you want to edit and it will take a lot of your time. So just go with the flow and edit minor things.
Apps:
There is a wide variety of apps that you can use to create your account. Some are free to use and others with advanced tools might be paid. My favorites are Figma and illustrator. Figma is free to use, you just have to create an account and it is a great tool for beginners. If you are very new to Wireframing, then you might think about using free software first, so you will have an idea of how it works. Once you have created your account play around with basic shapes, colors, and lines tool. Now try to make a basic sketch of a site similar to what you have done on a paper using different tools. Once you have your design done, show it to your colleagues or client and ask for feedback.
Lastly:
Wireframes are the best way to represent your design to clients or colleagues and get feedback. If you believe that skipping this step might save your time then you will come across many issues throughout the process and you might need additional time. Before starting the wireframes, talk to your client about their color choices and theme. When you start your designing process, you won’t have any issues picking up colors and themes.
Sources:
https://www.edrawmax.com/wireframe/
Wow! You have a ton of great information here. I had completely forgotten about the importance of wireframes! I love that you gave pros *and* cons of using a wireframe.
Great post!
I appreciate that your headers and bullet points make it easy to quickly scan for tips & advice. This is a good reminder of why wireframes are important and how to quickly design them. For those who aren’t familiar with Figma, maybe add a link to their site and to their youtube tutorials.
Nice post! You took me back to my undergrad days at UCA. In any class that I was creating a website for (single or group work), I was making a wireframe. I’m definitely a sketching type of person. I feel like I get more of the direction that I want to go. I also love to use post-it notes and a visual board to kind of help guide me in my creative and website building process. Thanks for sharing some apps to use. I’m going to have to check them out, especially Figma. I love having a free and handy tool in my toolbelt.
This is all new to me, but “wireframing” sounds like a very helpful guide. Now that I am reading this, it seems essential for expert design. I think talking about wireframing first before diving into the coding part would have been a better way for me to “ease” into the topic. Coding is like asking me to play Mozart with my toes…
Wireframing seems like a good introduction, and I don’t remember Codecademy broaching the subject, so I am glad I read your post because I had never even heard the term before.
I will add a link to another site I found that seemed like a good supplement to this post:
https://uxmastery.com/wireframing-for-beginners/
A new concept for me, but you did a good job breaking it down so even newbies could understand. I appreciate your used of images; having visual to pair with your descriptions helped get the relatively foreign idea across. I also appreciate you included tools one can use, particularly those that are free.
I loved all the information you provided regarding “wireframing.” I have to admit, I had never heard the term and was very interested in this idea when you presented it for blog consideration. I enjoyed the simplistic beginning of wireframing sketched out with a pen, then you provided computer generated visuals which really enhanced this idea.
The section on “pros” and “cons” was superb! I see that navigating away from this technology can be cumbersome, especially when, like you said, all you really need is a pen/pencil to sketch out a wireframe. Sometimes the old fashioned way of doing something is the easiest.
Thank you for such an in-depth analysis of wireframing. I have walked away with a much clearer mindset on the subject.
I really love how thorough this blog post is. I was super unfamiliar with the concept of wireframing before reading this piece. This analysis was in-depth enough for me to feel like I could follow a conversation around this topic in the future. I think the diagrams that you included towards the end of the piece did a great deal to drive your point home in the final stretch.
This is something I heard mentioned in class but I didn’t know what it is. Now I see how critical it is for me to have this skill and tool for my clients even if I don’t do all the coding. I already created a Figma account and saved your link for future reference. I need to practice, but the collaboration is helpful. Thanks for the informative blog.
Thank you so much for your informative article. Wireframing Should be a key element to learn properly if you haven’t. I suggest new coders and those who’d like to learn how to code websites to start focusing on the design and layout of the site because you can code something amazing and if it doesn’t look well and the viewers cant easily go through out the site from top-down then you’ll lose potential customers. When you get to the coding aspect of coding with a wireframe in mind a great tool to make this easier is bootstrap. Bootstrap is great for its layout attributes.