by anthony on 08/27/12 at 9:48 am
Have you ever had an idea for a website or application? It’s easy to come up with the idea, but the hard part is understanding how that idea will take shape in user interface form. This is where sketching is useful. Sketching happens in many professions that involve creativity and construction. Even Leonardo Da Vinci had to sketch out his inventions before he started to build them. No matter how smart you are, It’s impossible to go from a simple idea in your head to immediately building it out without hashing out the details in between. Sketching out your idea before you build is necessary for every designer to do.
Every Idea Needs User Interface Translation
Designing an interface is a process. It all begins with an idea, but that idea needs user interface translation. It’s not enough to say, “I want an app that does X, Y and Z”. You need to know what the user will see on each screen of your app to do X, Y and Z. Sketching takes your mind from in the clouds to the user interface, where you start thinking about the user experience. You already know what you want your app to do, but sketching helps you figure out how your app will take users to the desired result. Sketching allows you to visualize the screen flow of the user experience so that your idea isn’t just a figment of your imagination, but something that’s more visible and clear in user interface form.
A Sketch is Not a Wireframe
Many designers mistakenly think a sketch is a wireframe. They are similar but they are not the same thing. Both are useful for illustrating an interface concept, but a wireframe and a sketch are done in different mediums and produce different results.
When you sketch, you are trying to get a basic concept of how the app will work in interface form. There are many ways you could execute an interface concept. But here you are trying to figure out what those ways are and which way works best. There is a lot of quick and dirty thinking that happens from pen to paper. The specifics of the user interface aren’t important here. What matters most is understanding what the user will basically see on each screen that will lead them to the desired result.
When you wireframe, you are trying to refine the concept of how the app will work using pixellated grayscale widgets. The medium you’re working in forces you to think in higher detail, where sizing, placement and order of elements are all figured out. You’re also forced to think more thoroughly about all the elements on the page from top to bottom, not just the basics. When you work in pixels, you can get more precise about how the user interface will work. As you finish wireframing, the interface concept should look clearer and more refined.
Sketching Always Comes Before Wireframing
Many designers have different processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mockups. But when you skip one or the either, you lose a lot of conceptual detail and refinement. The interface suffers because it enters into a stage prematurely and misses certain key elements or isn’t thoroughly refined.
What happens is you either end up creating the basic concept of the interface during the wireframing stage, or you end up refining the concept during the mockup stage. This is counter-productive because sketching is where creating the basic concept is done. Wireframing is where refining the concept is done. And mockups is where the visual graphics and content is done, not the interface concepting. When you skip the sketching and wireframing stage, you end up thinking about too many things in one stage. This not only makes it hard on the designer, but it takes a lot away from the interface because the concept doesn’t get the full attention it needs to fully develop.
Sketching Helps You Brainstorm Ideas with Clients
One of the biggest advantages to sketching is that it allows you to express your ideas quickly and involve others in creating the user interface. Whether you’re sketching on a whiteboard or on a piece of paper, it’s important that your client or team understands the basic concept of the interface so that they can do their job in providing you with the necessary content. It’s also important to include any feedback or ideas they have so that the interface isn’t missing anything. To do this, you could even get the client to sketch their own ideas out. This puts everyone on the same page so that the team can move forward with strong morale and a clear understanding.
Sketching Makes You Think and Work Faster
Wireframing from scratch with no basic interface concept is hard because you can’t push pixels as fast as you can think. When you’re concepting the interface, you need to think about all the ways you can execute the user experience. There are a lot of ideas that could pop into your head that you won’t be able to get on pixel canvas as fast as you could get them on pen and paper. Sketching lets you explore different options quickly so that you can figure which direction is best. Getting a basic concept of the interface before you wireframe makes the process faster and easier. It’s hard to come up with multiple concepts on the fly when wireframing because you’re working in a software program. Not being able to push pixels as fast as you think limits your brainstorming speed and flexibility.
Sketching Makes Your Wireframes More Detailed and Refined
Wireframing with a basic concept in mind means you don’t have to brainstorm to figure out which direction to take the user interface. There are always multiple ways you can execute a user experience to get the desired result. But when you have done the sketching already, you don’t have to do any of that when you wireframe. This leads to a more detailed wireframe because you’re spending more time refining the basic concept you already have, and less time thinking about which direction to go. When you have detailed and refined wireframes in your hand, you can focus on the graphics and content in the mockups stage.
Sketches Can Look Bad and Still Work Wonderfully
You don’t need to have the skills of Leonardo Da Vinci to sketch. A sketch can look bad and still work wonderfully. What matters isn’t your artistic ability, but your ability to explain different interface concepts. Sketches offer others a peek into your thinking. It’s also easy to change your sketches as your thinking changes, which makes collaboration a breeze. Unlike mockups, sketches don’t need to look pretty. This means you don’t need to have any technical design ability to do them. This makes it easy for clients and other team members to get involved, which brings a lot of value to the interface in the beginning stages.
A Tool for Better Sketching
Most designers usually sketch on a whiteboard or blank sheet of paper. But the problem with this is that there is no blueprint for the user interface platform they’re building for. For example, a blank sheet of paper doesn’t have a mobile phone, tablet or web browser pattern for sketching the interface. This leads designers to forget about certain platform limitations when they’re sketching. Another problem with sketching on a blank sheet of paper is that it’s hard to make perfectly straight lines without a guide. It’s also hard to keep different interface elements proportional and consistent in size from screen to screen.
Interface Papers are printable interface blueprints that solve these sketching problems. It has mobile phone, tablet and web browser patterns for sketching your interface on different platforms. The patterns are all on a grid which not only makes it easy to draw straight lines, but it’ll help keep your interface elements proportional and consistent in size when you sketch different screens.
Never Underestimate the Power of Sketching
Sketching sets the tone for the rest of the design process. It’s key in crafting the user experience and communicating it to others. You may think that you don’t need to sketch because you already know exactly what you want and how the interface should look. But when you actually do sketch, you’ll realize that there are more possibilities than you initially thought. And that the path that you were so set on might not work the best. Sketching allows you to entertain all the possibilities of what your interface could become. Where you go from there is completely up to you.