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:
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.
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.
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.
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.
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:
Does the interface design fulfill users’ needs, or do the elements affect the users’ experience of using the interface?
Find out more on what is service design with mentor Gavin Mandrelle, a Service Designer at RMIT University, Australia!