How to Wireframe a Website or App
Today, we will be talking about the first stage of the web design process, and that’s wireframing. The purpose of wireframing is to figure out the plan, structure, flow, and design of the website’s content. It’s always beneficial to start with pen and paper. Some people will start directly on the computer or in a design program. Some people start with a paper and a pen because they don’t want to get too focused on the tool. They want to be able to sketch messy and get their ideas out.
When you do that, you will have more ideas since you’re not focusing on a singular idea for longer. Furthermore, you will also want to know what the content is before you get started. Here some of the key elements of content that you should know when getting started with wireframing.
Amount of Content – Is there a small amount of content, or will there be paragraphs and blog posts? You need to start identifying the amount of content going on each page.
The Type of Content – Is the content text, photos, or videos? Or maybe the content will be a lot of lists and links. Therefore, you want to figure out the type of content you will be working with. For example, if you’re working with an E-commerce client and the site you’re building is going to be mainly products with a small description, you will want to plan accordingly for the different types of content.
User Type – If you’re designing for an older demographic, you’re going to want to focus on larger imagery and typography, so it’s easier for them to read. If you’re designing an interface for a bus or public transit, you will want to make sure you don’t to have any big thumb issues, creating small touchpoints and interaction points. Therefore, think about the users that you’re designing for.
Handoff Situation – It’s essential to think about who you’re giving this design to. If you’re passing this off to a client who is never going to blog, you might want to consider what your design looks like in the wireframe process with very little text. So, take into account who it is you’re the design for.
Once you have all that in mind, you can start writing down your ideas before working. Once you have the requirements down on the page, you will want to start creating at least eight to ten different thumbnail sketches, and you want to let your imagination start flowing. By doing them as quickly as possible, you allow yourself to try a variety of layouts and solutions to the design that you didn’t think of before. You also want to try and limit yourself from doing small variations of the same design over and over. You want to create significant changes with entirely different ideas and get your pen to the paper.
Now that you have your designs sketched on paper, there are a few things you will need to do before you put them into the computer and start making high-resolution mock-ups. The first thing is you will want to go through and start checking things off that you liked and didn’t like. A quick tip, as you’re coming up with your design, it’s important for you to come up with your own personal wireframing or design language.
In Summary
At this point, you will take these ideas and put them into the computer. Then, you should start creating grey boxes. Therefore, if you show high-resolution wireframes to a client, they won’t be looking at typography or photo selection, they will just be looking at the structure. You could then have a great conversation about the content and the structure of the web design. If you need help with wireframing, we highly recommend this orlando web design firm because they have won multiple design awards for years.