5 Effective Tips on Sketching Wireframes

Sketching wireframes is the first step before you move to the wireframing stage. It is advisable not to skip this step as this is a stage where you create the basic concept. You will spend too much time thinking about the concept in the later stages as there is no outline. Sketching wireframes helps you to get a clear direction of your basic concept, allows you to experiment with different idea options, is a good idea starter to share with your clients before proceeding to the next stage, and sets the direction of your design process. So, whenever you hit the wall, the sketch that you have created could re-highlight the purpose of your design and the concept’s goal. 

Below are the steps from sketching to coding for you to understand the design process and its contribution to wireframing:

1: Believe in your ideas. Transfer ideas to the paper, even when you’re not 100% sure of the direction.

‍
Sometimes your ideas get too cluttered in your mind, and this leads to poor judgments on which is the best idea. Believe that your ideas have potential and start to put them on paper. This way you will get a clearer view of which concept looks more promising to proceed. 

Try the Crazy Eight Brainstorming Technique to share ideas and share feedback with your teams.

2: Get the basic concept, define the user experience.

‍
The purpose of sketching wireframes is to get the basic concept of the interface. Once the concept direction is clear, define the user experience. What will they see on the screen? How to create the best flow of information?  Will the users be able to understand your concept? 

Sketching wireframes allows you to visualize the user experience process, you can edit, amend until you get the result that you want.

‍

3: Let your idea flow, do not have to be fancy or too detailed.

Keep your wireframe sketch simple. It’s okay if the sketch is not as pretty as you want it to be as long as the communication and the direction are clear. Highlight the features and formats, do not worry so much about the details. The absence of the technical design makes it easier to discuss with clients and team members.

4: Draw faster, draw smarter. Use stationery tools such as stencil, thick black pen, and highlighters.

Use the stationery tools to your advantage. Use the stencil to create shapes that define different features in your design, use black pens or markers to prevent yourself from the temptations to add in too many details in your wireframe sketch, you highlighters or add in arrows to highlight the flow of the interface design.

‍

5: Reflect on your wireframe sketch; think of the rationale behind each interface element.
                             

Now you have put your pen down and completed your wireframe sketch, take a break and look at it again with fresh eyes and mind. Hang it on your board. Ask yourself and get feedback from your team:

• Is the concept of the design user-friendly?
• Are the arrangements of the information based on the importance sequence? 
• Will the users understand the function of buttons or touchpoints available? 
  ‍

Does the interface design fulfill users’ needs, or do the elements affect the users’ experience of using the interface?


Read here to learn the 10 UI/UX sketches techniques.

Get to know other effective tips on sketching wireframes by booking free sessions with the experts!

‍

‍

‍

‍


‍