How to learn to wireframe?

4kCode
NYC Design
Published in
2 min readNov 11, 2018

Wireframing is the phase of the design process where we try to sketch and give birth to new, young and still unpolished ideas. We can start creating them on a paper, whiteboard or software program and will try to establish a relationship between the main features a project should have; such as navigation bar, buttons, images…All these details create a collaborative space to provide design solutions.

So how do you know if your wireframing process is on the good path? First you have to take into account which are the best practices for wireframing, afterwards understand the expectations of your client and lastly you have to ask yourself if your wireframes are solution-oriented.

Let’s start from the beginning and understand which are some of the basics of wireframing fundamentals:

  • Try to avoid color so you ensure the discussion with your client remains focused on the experience you are creating.
  • Be consistent when defining typography, spacing, and delivery
  • Use content to make understand the client, the story better
  • Sharing is caring, so to double the potential of your wireframes make sure you are surrounded by a team of professional designers that can provide support.
  • Make sure the expectations of your client are met
  • Keep it simple in order to avoid confusion

In order to create a successful wireframing process you should be able to have an answer for the following questions:

  1. Which are the user and his/her business goals with this software?
  2. How to organize the content to support these goals?
  3. How to send the main message to users?
  4. What should the user see first on the landing page?
  5. Where is the call to action?
  6. What will the user expect to see on the page?
  7. Which should be the content and how it should be organized?

Whether you decide to sketch by hand or using a software we encourage you to spend time experimenting with different tools and processes. We highly recommend you to also have a quick look to the following articles “A Beginner’s Guide to Wireframing” or “How to Make Your First Wireframe”.

--

--

4kCode
NYC Design

The 4 keys to write successful code are vision, team-work, innovation and communication