Essential Prototype Tools from the WSOL Design Team

Creating prototypes is a key part of the web design process, and at WSOL, our design experts work with prototyping tools every day. It’s exciting to watch them work, and we want to make sure their expertise doesn’t go unnoticed, so we asked each member of the team to share one or more of the tools that they use to create these prototypes and let us know how they help them in their design tasks.

Britney Na:

• Paper+pencil+eraser - This is the quickest way to get the ideas out of my head and evaluate them. I can quickly sketch out different interactions and see what works the best.
• IPEVO camera - A great tool for sharing sketches with others. This camera makes it super easy to capture photos and share them with other members of the team.
• Skype - I love that I can just grab photos or PDFs and drag/drop them into the comment box. It’s so simple! It makes file sharing so easy.

Dan Rose:

My sketchpad. Without it, it’s hard to know what to produce in HTML and CSS, even on the crudest of levels. Sketching layouts and intended functionality certainly helps beat the “creative block” when making a low-fidelity prototype in the browser. It sounds like the easiest place to start, but it’s not easy to train yourself to do so when you think jumping in to code is the most efficient. Like many things, spending 5-10 minutes sketching usually ends up saving me time. Code is almost always about implementation and not ideation, so sketching helps in that regard.

Dennis Kardys:

I use a range of tools depending on what stage of the project we’re in. Like the others, I rely heavily on tools like pencils and paper, whiteboards, and lots of post-its. As we move further into a project, it’s important that we communicate our ideas in a way which is more representative of what the final intended design will look and function like. I prefer to move quickly into HTML prototyping, for everything from wireframes to full comps so that we can evaluate concepts in an interactive context. I find that is a helpful way to test, demonstrate and communicate our ideas.

Max Barvian:

It depends on the project, I guess. I always start with sketches when I’m working on something visual, like a new page layout, homepage redesign, etc. Nothing beats pencil and paper for quick brainstorming, and it’s nice to be able to work with something physical in the later stages of the prototyping process. For smaller, more code-oriented projects, I use tools like Codepen or Dabblet to throw some preliminary markup and JavaScript together and get a basic feel for how the prototype will be structured and interacted with.

Nick Melville:

By the time I’m actively involved with developing sites, the desired layout is fairly well known, so I work primarily in Sublime Text to write the code behind them. Further iterations of the code refine the high fidelity prototypes that back-end developers use to program the site, so I am often involved in sketching and group discussions via Skype to hone in on the best possible solutions once we can see them in the browser. Our whiteboard wall also comes in handy to quickly sketch out an idea before taking the time to develop components and templates in code.

Thanks to our design team for sharing! Do you have any questions about prototyping or other parts of the web design process? Are there any other design tools that you want to recommend? Please let us know in the comments below. Do you want to know more about WSOL’s web design and development services? Please contact us to speak to an expert.