When it comes to design, you always want something different. Much out-of-the-box. Like extraordinary. Now that’s when you start brainstorming and viola! there comes the idea. Okay, with the idea in mind, all you want is to jumpstart the project especially when you have the biggest temptation in front of you- a blank screen. But wait this is the time when you got to hold the paper instead of pixel. Wireframing software at this stage is just a trap and you must hold your horses before you take on to this step.

The best way to shape your ideas in user interface form is through sketching which involves great creativity and construction. No matter how expert you are as a designer, it is impossible to leap to the final product from the basic idea by skipping all the important details in between. Sketching paves the way to a fabulous design as through it designers explore and evaluate various interactive concepts.

Initially you must focus on getting the substance right and then draw attention towards style in order to deal with the structural issues first. Details give you a fair idea of the bigger picture as these are the nuances which frame the final design. Sketching gives the liberty of polishing the ideas before you take on to the wider project. Also, it puts an end to the erupting ideas and stops you from exploring further. Once you have the rough sketch in front of you, you can conveniently make changes to save on the hassles and time later. Sketchboarding helps you to nail UX concepts before going on the process of wireframing. You can iterate as many times as you want and then choose the best user experience to turn the tables for your design.

Know Sketching

When you start thinking on paper, that’s when you start sketching. It’s simple and quick flow of ideas using pen and paper, iPad Pro, MS Paint or even old envelope and crayons, whatever works the best for you. The purpose is to explore as many ideas as possible, get a vision of the site and its elements. Now, don’t be driven by perfection here. This is not some drawing contest. If your sketches are good in communicating your ideas, you are good to go. As a matter of fact, sketches are clumsy and uneven. If you blow your creativity just to make them look good, you are on the wrong trip.

Sketchboarding is very low on commitment. As it is showing super refined designs in the early stages is not a good idea at all. If any time changes occur, which often does, you will be caught in the web of making amends from the scratch. Sketches, actually, can be used to get the approach approved first and then finish with the design later so that they aren’t many surprises to take a toll on the process.

Clients are very keen on getting sketches. They have lot of ideas bursting within, but find it difficult to give it an expression. This is when sketchboarding comes handy. As they give their layman description, you gauge the talk and start sketching. Just draw as they say and iterate repeatedly till the time you get what they actually want. Suggest ideas, explore more. All this is interactive, fun and highly creative and at the same time fulfilling for the clients owing to their active participation. Even though sketches are mere scribbles drawn in seconds still they are highly useful in explaining the concepts with much efficiency.

Be More Clear

You must know that sketches are not what the client pays for. They are not deliverables. You are hired for your solution-driven approach and are paid to solve problems by creating a site that fulfills users’ needs. Sketching is a signboard to reach your final destination. It is a tool that helps to meet the clients’ expectations. Make note that sketches are not wireframes by any chance.  Don’t just wobble on pages and hand them to a developer to give them a form. That can backfire your efforts totally. Wireframes, without any doubt, are essential to build a dynamic product.

They fall as a part of deliverables and come into use for both the clients and the professionals to refer to the blueprint of the final site, even if you are making a website for yourself.  But only when you are aware of the different parts of the site, have full knowledge of the elements and interactions in use and last but not the least get a buy-in from the concerned clients and team, that’s when you should move on to wireframing.

Get To Layers

Sketching can be of great mess. Chances are that you might end up with a collage instead of a sketch. So, if you want competent sketches, try working in layers. Begin with light-gray marker and then keep adding details through layers in darker markers and pens. Using light-gray marker in the beginning makes your thinking clear. This enables you to make mistakes and brainstorm ideas for the problem. Even if you draw irregular lines with the light marker it is not of much issue as it is it won’t be seen by the time you finish the sketch. As the pages give definition to ideas, use a darker marker or pen to layer up with additional details.  Furthermore, this can also highlight a particular sketch amongst the other sketches.

A major merit of sketching in layers is that you don’t get stuck in details from the start. It prompts you to look after content and hierarchy first and then go on to the other aspects. If you are sketching a list to get an idea of the interface, but still don’t have a clear picture on the items in the list then just let it go with few scribbles here and there. Afterwards, you can go back and amend the items in the list. Take note that if you use a ballpoint pen initially and then go for a marker later, there are chances that the pen’s ink will smudge from the alcohol in the marker.  Gradually, as you become versed with sketching, you can even leave the layers behind and draw spontaneously.

Take It Light

As you move on to sketch long lines, it is better to extend arm and pen with your shoulder rather elbow or wrist. Elbow or wrist should be used for drawing quick small lines and for the areas you want to execute control. Using your shoulder will enable you to pull across longer and straighter lines. If you use your elbow you will see that the lines with not be drafted straight and will have a slight curve to them. By placing two dots to connect from start to end, you can draw straight lines by orienting the paper in your direction. Another merit of drawing from shoulder is that the movement becomes quite swift for whiteboard as well and then your straight lines are of no match at all.

Strengths In Use

A good trick is to rotate the page while drawing a line so that you can edge multiple angles of lines with ease. By rotating the page you can sketch a line that suits your range and direction. Don’t try to draft a vertical line if you are not comfortable doing so, instead rotate the page to an angle of 90 degrees and then work on making a horizontal line. It might seem fundamental, but is quite powerful.  Note: Don’t apply this technique straightaway on whiteboard as for that you need to practice drawing vertical lines.

Interactions Work Best

As you begin, go for a simple sketch and then put into play sticky notes for additional tooltips, modal windows, pop-overs and other interactive features. By using sticky notes, you can state interactions and concepts easily without going for repetitive drawings on the framework of the application. These can be moved without trouble and can be drawn on with same markers and pens that are already in use. You can state multiple interactions in a go and then gradually remove pieces before scanning or copying the sketch. Different colors should be used to label different interactions. If let’s say one sticky note is not sufficient for your modal window then you can add one more right next to it. Reversely, if one sticky note is very big for your tooltip then use a ruler to slash down the size.

Copy And Paste

There are chances you might want to manually redraw a UI element many times in a sketch. Now, this is not a bad idea as by doing so you can iterate rapidly and at the same time even reconsider your ideas. For this an all-in-one scanner or photocopier can come quite handy as it can swiftly create templates from the present sketches and even redraw a particular item from the sketch. We can rightly say that a photocopier is an old version of Control+ C and Control +V. It can be of great help as it can sort the mess you create while sketching.

The Story Teller

Keep the context in mind while drawing the application or use the device for the purpose of framing. It is a useful way as it brings into consideration the environment on which the application will be used, also generates empathy amongst users and even improves the understanding of the challenges new to this application. A few sketches applicable to context can really be helpful in the long run especially in mobile devices. Remember that drawing the surrounding environment can be a bit difficult as it requires high level sketching. Do not let this stop you. If you find sketching the environment tricky, use a picture to suffice underlay.

Sketchbook Not Always

Try drawing on 8.5 x 11’’ copy paper. As you know sketches are meant to be shared so using these sheets will enable you to hang them on a wall and share your ideas with the other members of the team or even gather deeper view on the project as a whole. If you are thinking on saving a sketch, you can scan the sheets together and save yourself from the trouble of tearing sheets from the sketchbook. Not sure still? Well, copy paper is pocket friendly, enables sketches to be used as underlays and doesn’t trap you in choosing between book-bound and spiral-bound too.

Conclusion

It’s a common notion that sketching is meant just for designers, whereas developers, project managers and business analysts can also loosen up and enjoy scribbling. In fact, sketching is a great way for teams to bond together and communicate with ideas that span across various areas. Sketches generate valuable feedback and responses as against plain print-outs or screenshots. Don’t forget that the aim is to gather ideas, review them and go for documentation, that’s it. It’s not about boasting creativity at all. Think how you can communicate more effectively with your sketches. Indeed, sketching is the best way to explore what’s in store for others. You share what you have in mind. It targets more on the solutions rather than technology. So, what are you waiting for? Go and gave fun. Simple. After all, if you want to fetch, you have to sketch!

Images Credit – www.dribbble.com

Summary
Article Name
Why You Should Sketch Before Making Wireframes?
Description
Wireframe sketching is an important part of UX design process and best thing about sketching is it allows us to explore ideas & understand the concepts.
Author

Related Post

Flat Design Vs Material Design: The Design War Design is much like the bait in the web world. Well, in a way, a perfect food for thought or rather here you can say call-to-action. At Think 360, our...
25 Fonts That Make Your Designs Look Amazing Okay, let me begin by asking you a question. What makes a design good? The answers that are generally heard are simplicity, or maybe white space. Some...
15 Tips For High Fidelity UI Wireframes Do you think, ‘wireframes are just empty visuals’? A step in the design process that can be forgone easily? Well, then I’m afraid you’re mistaken. And...
Wireframes Vs Mockups – Design Tools Made Cl... Design terminology can often be confusing. And why will it not be, when we are referring its jargons to connote everywhere. Now, that doesn’t mean tha...
The following two tabs change content below.
palprince@gmail.com'

Prince Pal

User Experience Designer | Company Branding Expert at Think360 Studio
For 12+ years I have designed, developed and marketed websites / apps startups in New York, California, Florida and in India. Always focused on great User Interface is key.

Pin It on Pinterest

Shares
Share This