Why Sketching And Wireframing Ideas Strengthens Designs

Sketching is one of the many ways humans have adapted to, to express and expand on ideas. A sketch is more like bringing an idea to a three dimensional view rather than imagining it in the head, which causes our idea to evolve over time as we forget certain elements of our ideas, and replace them with things we thought were part of the idea or ideas.

Additionally, sketching helps us change our ideas to make them more reasonable where they can become a reality, and gives us a general outline when we bring our design ideas to say, Photoshop.

Great design ideas should always be sketched out to be better formulated and somewhat finalized before brought to the digital world. This helps us develop on our design idea, which actually helps us provide a better end result or product, than that of whom did not sketch the idea.

Therefore, eliminating sketching as a process of gaining experience is not a valid point as you are eliminating a crucial process in design that can sometimes make or break a project. To better prove the point on how sketching can strengthen your design ideas, we discuss several benefits to sketching out our designs before making them a reality.

Eliminates Time Wasted

Time Wasted
One obvious factor or benefit of sketching your design ideas is that it eliminates time you could have wasted.

You may be wondering how sketching can eliminate wasted time while you could simply start right into Photoshop or Fireworks. You have a valid point; however, even the greatest ideas need refining. Sketching enables you to plan before actually starting to design. You can solve a lot of UX and design problems by sketching ideas on paper prior to firing up your preferred design software.

What this means is, spending the time to sketch your idea on paper will actually help you visualize your idea better than you would when you imagine it.

It allows you to get a better overlook on how it will turn out, and if you do not like how the design idea is turning out on paper, or the idea may not be reachable or feasible, you have not spent the time actually bringing it to life in Photoshop, but rather just a half hour throwing it on paper.

Therefore, a not so great idea will not waste hours out of your day just to realize that it will be heading straight to your trash bin.

Helps Expand on Our Ideas

Expand Ideas
Whenever we imagine ideas, they are usually the skeleton of what the end result can be.

However, when you take an idea directly to Photoshop, you do not quite have the brainstorming you would if you brought it to paper to expand on it, and thus great ideas are often suppressed and lost, making your great idea turn into an exceptional idea or design.

However, by bringing your designs from mind directly to paper, it gives you a completely new and different level of how you visualized it, allowing you to expand on your ideas for the design often bringing it from exceptional, to a mesmerizing drool-worthy design.

Therefore, it is definitely worth the time and effort to sketch your ideas out before making them a reality.

Helps with Group Feedback

Group Feedback
Let’s face it, when we spend hours and days and weeks bringing an idea to life in Photoshop, we are generally not open to major feedback that will attempt to overhaul all the work, effort, and time we have put into it to bring it to life already.

We would just reject credible and excellent feedback if it means we need to change a huge chunk of our design such as a structural change, or we would be forced to perform these major changes by a design firm, which causes delays in the completion of the design project.

However, when you sketch your ideas on paper or on a whiteboard, your group can provide feedback allowing you to bring changes to the sketch in seconds helping make your design an excellent piece of work in the end.

In fact, many new great ideas whether design or not are structured by brainstorming on paper first with their group before going forth and bringing some sort of prototype to life.

Increases Creativity

By bringing your design directly to Photoshop you are limiting your creativity as you are trying to follow the idea you imagined to get some sort of prototype completed before actually changing a few things around.

A sketch on paper acts like your design prototype for your idea or ideas. This allows you to quickly expand on it by using your creativity before actually bringing it into Photoshop or to the browser for a graphical preview.

This also happens to save you time from manipulating your prototype in a graphic editing program rather than on paper which tends to only take several seconds rather than several hours.

Design Evolution

Design Evolution
One great thing about sketching out your design ideas is that later on you can look back and see how your design has evolved, from sketch, to prototype, to the final product.

This not only is just for personal satisfactory, but it actually helps you improve on your final product months down the line.

When we design websites, we tend to design them specifically for the content we need for that website at that current point in time, however, our sketches often contain different content containers before we scratched them out.

By going back and looking at our sketches when we are looking for ideas or how our design or designs evolved, it will actually help us bring the containers we eliminated into our current design if we decided we needed such containers or elements later on.

Your Turn To Talk

I’d be very interested in hearing your thoughts on this. What is your usual process? Do you usually start out by sketching and wireframing or do you fire up Photoshop or Fireworks right from the start? Please take a minute to chime in and leave a comment below ;)


  1. says

    I start with doing wireframes at Mockflow. I hate sketching though because I’m very bad with proportions, everything looks great on paper and I think I’m done, and then I have to solve tons of problems.

    I rarely do a full mockups in Photoshop. From the wireframe I jump right into Esspreso to code. Depending on the type of website, sometimes I do a mood board too.

  2. says

    I start with grid paper or my moleskin notebook, then jump into fireworks or dreamweaver and get my placeholder to match the structure.

    I’d found this helps designers and architects collaborate on requirements, functions, and design.

  3. says

    I am a huge believer in this. In school one teacher had us do dozens of pages of sketches for ONE logo. It was all about sketching and sketching till you could find the perfect solution to a logo for a company. The more solutions you find the better your chances of coming up with something truly unique and great. Works well =)

  4. says

    I agree with Natalia that sketching on paper causes problems. I can always make things fit into a hand drawn sketch, but as soon as I try to get it into a grid, lots of parts don’t really work. I fell in love with Balsamiq for quick, slightly interactive sketches. I do lots of those quickly, share the different directions with the team, and then pick a couple of winners and create more detailed interactive prototypes in HTML and jQuery.

    The interactive prototypes are fantastic for testing with users, since they act very much like the final product except without the visual design. For some reason, it’s also emotionally easier to make changes to huge chunks of them than it would be if they were pixel perfect in Photoshop. Probably because they’re so quick to build, but you know you’re throwing them all out at the end anyway, once the product is built!

    Great article, btw. Sketching is a fantastic way to be creative and take risks with your design before you dive in and start your full design.

  5. says

    I agree with Laura’s comment, it tends to be easier to gather feedback using a rough sketchy wireframe rather than using a very detailed one. At least during the first meetings with your client.
    We normally recommend to adapt the wireframe depending on who’s going to evaulate it and how advanced the definition proces is.
    You can start with a very basic wireframe and then eventually extend it adding interactions or a more detailed visual aspect. It depend on your needs. Hi-fidelity wireframes, for instance, are great to extract feedback related to usability issues.
    Of course, the success key is being able to perform all this “evolutions” in a rapid and handy way.


  6. Steve says

    I always start with wireframe sketches. When you just want to get signoff on functionality and general styling, you don’t want to waste your time with PS or AI and argue with the client about why an icon is red instead of blue.

  7. says

    Great post. I would just add one more phase between the wireframe & photoshop stage: and that’s prototypes. I find that wireframes aren’t enough these days, because they don’t convey interactions adequately. A working prototype is critical to offering functional direction to all stakeholders involved: be it product managers, usability engineers, designers & developers. Everyone benefits from this because it makes it easier for them to ‘get it’, and further the culture of the collaborative feedback that’s so necessary at that early, conceptual stage of a product where you need get it right before you commit all your time & resource into producing mock-ups and code.

  8. says

    Many thanks for a great post. I couldn’t agree more! I absolutely love the sketching stage … We use collaborative sketching extensively in our UX design process (to the point that we even developed, UI Sketcher, an iPad app to help the process too). If you are interested, there is more information about our sketchboard process (based on an original theory by those clever folks at Adaptive Path) here: http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces.


  1. Why Sketching And Wireframing Ideas Strengthens Designs…

    Great design ideas should always be sketched out to be better formulated and somewhat finalized before brought to the digital world. This helps us develop on our design idea, which helps us provide a better end result….

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *