A How-to Guide on Wireframes for Websites and Apps

A How-to Guide on Wireframes for Websites and Apps

Posted on May 20, 2019

If you're questioning what wireframes are and how to use them for websites and apps, this is a great starting point! Wireframes are essentially a blueprint which allow you to visually map the layout and functionality of an app or website. They’re fantastic tools which we use here at Devika to make sure we have the layout down pat before we start working on a project. When development does begin, we know exactly what the end result should be.

5 Benefits of Wireframes

Here are our 5 favorite things about wireframes for websites and apps.

  • We develop what our partners need. We design wireframes according to our partners vision. Once the layout is sketched, we send the design to our partners. Sometimes it’s perfect straight away and we’re given the green light to start building. Other times our partners request modifications due to a change of mind, a mismatch between ideas and the actual visual appearance and a variety of other reasons. Either way, our partners can make sure what we begin building is what they need.
  • Reference Point. Wireframes can be referred back to at any time. If you get lost in the code, you can always refer back to this to stay on track.
  • Ideas vs Reality. By visually mapping out a project, you can check that the design you’ve envisioned is practically possible.
  • Sense of Accomplishment. Large projects like an app development can become underwhelming at times, especially when the final result is only revealed after weeks of hard work. Checking your progress according to wireframes is a great way to stay motivated throughout a project by recognizing your achievements along the way.
  • Navigation. While a design might look striking, an effective product must also enable the end-user to navigate through the app or website with ease. If the links between pages appear complex to you on the wireframes, imagine how much trouble the end-user will have! Using the visual guide often helps to identify ways that make navigation easier.  
7 Steps to Use Wireframes for Websites and Apps

Step 1: Decide on a project. For some, the most exciting part of a project is brainstorming all of the possibilities but we understand that it’s not everyone’s forte. If you are stuck on an idea a great way to start is to identify a problem or gap in the real world which technology could help to solve. Maybe your family needs an app that schedules chores? If there’s a need for a product, you’re on the right track.

Template

Step 2: Access a template. The template should be the outline of a mobile phone or a computer screen. You can easily find templates online or even draw one yourself! Your template should include one wireframe for each page you want to build, eg. home page, product page, about us, contact us and blog, meaning you should have at least 6 outlines ready to go.

Step 3: Start Sketching. Sketches can be hand drawn or done using online programs according to your preference. The first outline should represent your homepage and should be eye-catching and clearly labeled because it will make an immediate impression on the user. Think about where the tabs will be displayed and how they will function eg. drop down tabs.

Step 4: Add Pages. When you begin adding more pages, think about how the user will navigate through and between your pages. Everything should be clear and easy to understand from the user's perspective.

Example of 6 outlines of a wireframe.
Note - Each subheading on image 2 and 3 requires a separate wireframe.

Step 5: Add Details. Start thinking out the specific text and images you want to use and make a note of them in the comments sections eg. add photo x here. This will help to clarify the page design and confirm whether or not you will need additional features eg. a scrolling bar.

Step 6: Refine Your Plan. Once your original plan has been mapped out, it's much easier to see if changes need to be made for design or functionality. Redraw or add comments to ensure your wireframes flow well, make sense and is visually appealing and consistent.

Step 7: Start Building. Now that you have a strong concept of your idea and end-goal, with reference to these steps, begin the build!

If you have further questions or comments about wireframes for websites and apps or need support with the technical build, contact the team here.