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 it is necessary for every designer to do.
Every Idea Needs User Interface Translation
Designing the user 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 imaginative mind from the clouds to the user interface screen where you can start thinking about the user experience. You’ll be able to figure out how your app will work to get the desired result. Sketching allows you to visualize the screen-to-screen interaction so that your idea is something that’s 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 user interface form. There are many ways you could craft 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 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 pixelated 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 more clear and 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 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 concepting is best done. Wireframing is where refining the concept is done. And mockups is where the visual graphics and content placement is done.
When you skip the sketching and wireframing stage, you end up thinking about too many things during a 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 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 experience. Whether you’re sketching on a whiteboard or paper, it’s important that your clients and team members understand the basic concept of the user experience so that they can provide you with the necessary content.
It’s also important to include any feedback or ideas they have in your sketches so that they can see how it’ll look. You could even ask clients to sketch their ideas out. This puts everyone on the same page so that the team can move forward with togetherness and mutual understanding.
Sketching Makes You Think and Work Faster
Wireframing from scratch with no basic concept is hard because you can’t push pixels on software as fast as you can draw them on paper. When you’re concepting the interface, you’ll think about all the ways you can craft the user experience. There are a lot of ideas that could pop into your head that you won’t be able to illustrate on a pixel canvas as fast due to the lack of flexibility.
Sketching lets you explore different options quickly so that you can figure out the best design direction. Getting a basic concept of the user interface through sketching will make the wireframing process faster and easier.
Sketching Makes Your Wireframes More Detailed
Wireframing with a sketched out concept means you don’t have to figure out as much on your wireframes. When you’ve done the sketching already, you don’t have to brainstorm all the various design directions you could go.
This leads to a more detailed wireframe because you’re spending more time refining the sketched out concept you already have. The more detailed and refined your wireframes are, the easier it’ll be when you get to the visual 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. When you get new ideas, it’s easy to show them on your sketches. Unlike mockups, sketches don’t need to look pretty. You don’t need to have any technical design skill to do them. This makes collaborating with clients and team members a breeze.
A Tool for Better Sketching
Most designers sketch on a whiteboard or blank sheet of paper. But the problem with this is that there aren’t device imprints for them to sketch on. This leads designers to forget about certain device dimensions and limitations. Another problem with sketching on a blank canvas is that it’s hard to draw straight lines without a grid to guide you.
Wireframe Sheets are printable sketch sheets with device-sized imprints that solve these problems. They include imprints for iPhone, iPad, desktop browser and iOS icons.
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 you don’t need to sketch because you already know how you want the interface to look. But when you actually start sketching, you’ll realize 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.
