SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Why Sketching And Wireframing Ideas Strengthens Designs

September 17, 2010 by GrindSmart Media 22 Comments

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

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 ;)

Filed Under: Article, Design Tagged With: Wireframing

Comments

  1. Natalia Ventre says

    September 17, 2010 at 10:44 pm

    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. Childmonster says

    September 19, 2010 at 1:05 pm

    Nice article. Thanks a lot

  3. Andrew says

    September 19, 2010 at 6:06 pm

    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.

  4. Brett Widmann says

    September 19, 2010 at 8:01 pm

    Great article! Wireframing and sketching always helps me decrease time spent on design for projects. :)

  5. Ovsyannykov says

    September 19, 2010 at 10:24 pm

    Great article, thank you for the valuable information.

  6. ankinanti says

    September 20, 2010 at 6:34 am

    i really agree with this..

  7. Eric says

    September 20, 2010 at 10:10 am

    Great post! I always use Balsamiq Mockups for mac ($70 bucks, $40 for @forrst users!)

    Eric

  8. Lenny Terenzi says

    September 20, 2010 at 8:50 pm

    Wireframing? KEYNOTE KUNG-FU! :)

  9. Gino says

    September 21, 2010 at 9:43 pm

    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 =)

  10. Laura Klein says

    September 25, 2010 at 6:14 pm

    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.

  11. Dan Moser says

    September 28, 2010 at 9:30 am

    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.

    Regards,
    Dan
    @Justinmind

  12. Thomas Craig Consulting says

    September 30, 2010 at 8:34 am

    Great article, thanks for the insight.

  13. Steve says

    October 10, 2010 at 6:29 pm

    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.

  14. Emmanuel Kolade says

    October 11, 2010 at 12:49 pm

    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.

  15. Jim Babbage says

    April 18, 2011 at 10:15 pm

    Great article on the importance of sketching and wireframing web sites

  16. Tom Evans says

    July 6, 2011 at 10:25 am

    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.

Leave a Reply

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

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022