

Stakeholders (which might include team members, customers, clients, managers, and so on) can be sent a digital mockup for review, which is key to the prototyping process. They’re also more comprehensible than quick paper sketches. Digital mockups should focus on getting spacing and the flow of screens right.ĭigital mockups are helpful because they can be shared easily. This mockup was creating using Balsamiq Mockups. I also like that the lines aren’t perfect because it helps others understand that the lines do not represent a final result. I like Balsamiq in particular because it has some commonly used web widgets, such as video players and embedded maps. I like to use Balsamiq Mockups, but another popular choice is OmniGraffle. Once I have a paper mockup I’m happy with, only then will I use a digital mockup tool to wireframe my ideas. Just as long as it allows for quick sketches, it should serve the need. I should note here that any drawing tool will work fine, such as a whiteboard drawing or a drawing app for a tablet device. At this point, I’m just marking down the big ideas. Paper drawings should be loose without any attention given to fonts, colors, small interface elements, and so on. Intentionally or not, digital mockups tend to lock in a specific level of detail fairly early on. One moment I might be blocking out the major columns, and the next I might be deciding on the order of navigation elements. Drawings are great because the level of abstraction can change wildly in a matter of seconds.

Some might argue that a more robust digital mockup tool can serve the same purpose, but I disagree. Second, drawing allows for maximum flexibility.

Now is the time to explore all the possibilities. The less time I spend on an idea, the less attached I’ll be this is good in the early phases because I don’t want to settle too soon. Dozens of quick thumbnail sketches can be scratched out in a few minutes. When I say “cheap,” I’m describing the level of time and emotional investment - not necessarily monetary expenses. In this image, I’ve used a pen to draw some small thumbnail sketches of a todo list app.įirst, I think it’s important to mock up sites starting with the cheapest tool and moving toward more expensive time investments, and there’s nothing cheaper than drawing. Taking this example to the extreme, it’s arguably more intimidating to draw a house with a pencil and paper than it is to build it with LEGO blocks. However, there are several advantages to drawing websites before jumping into more concrete tools. It’s tempting to open Photoshop or begin coding right away because these digital tools put a cap on the level of naivety and ignorance we can display.
#Rapid sketch samples trial
Even for a very simple website, a five-minute sketch could save hours of trial and error in the late stages. The cheaper the prototype the better because prototypes involve more iterations and refinement that can be costly.įree trial on Treehouse: Do you want to learn more about website prototyping and design? Click here to try a free trial on Treehouse. I think it’s because people are hoping for a better way to simplify the complexities of creative problem-solving.Įven though my answer might not be very flashy, building a website with a prototype is often much faster than skipping the prototype phase.

I feel like when I give this answer, there’s a small sigh of disappointment. Treehouse students will often ask me which mockup tool I use to prototype websites, and my response is almost always the same: pencil and paper.
