Seeing (and feeling) is believing

When communicating a proof of concept or a design to potential clients seeing (and feeling) is believing.

Sketching ideas and wireframes is a major part of my design process. Sketching allows me to explore and refine ideas. It helps me to narrow my focus and start to understand the requirements and problems that my design needs to address and solve. It's also a great way to communicate your ideas and collaborate with your team - a picture is worth a thousand words.

After the sketching phase I'll usually take my sketches to Balsamiq so that I can start to create my wireframes digitally and make changes easily. I will share these wireframes with the team and we'll use them to discuss features, workflow, and UI design. This process has worked well when we're developing features to our existing product and discussing the project internally. But when we're creating something new and building a concept from scratch it's been helpful to take our wireframes to working prototypes.

A prototype allows us to test ideas internally and refine our assumptions. Most importantly, it allows us to communicate our ideas to clients and get buy in on the interaction design before development begins. We're able to learn about the technical details of our ideas and how that fits with our current product architecture.

Building a prototype is a lot like designing in the browser. But I'm not interested in the visual design. I'm interested in understanding how the UI behaves, the workflow and how the interactions flow from one part to another. Essentially the user experience. This isn't about aesthetics, this is about getting a feel for your interface.

When I build a prototype, I never start blind. That's what the sketches and wireframes are for. Going directly to code alone distract you from the intent of the thing that you're designing and what the goals are for the interface. So I start with my sketches and wireframes and as I build my prototype I discover things that I haven't considered and parts of my workflow that may have been missing. So I can change my decisions right there and test my designs easily.

HTML and CSS are part of my designers toolset and I recommend designers try to use it in theirs to help clients and your team get a feel for your designs. If you have some JavaScript or jQuery knowledge even better but there's frameworks that can help you with that. If you're not the type of designer to design in the browser, I think you'll still find it useful to take your designs to a working prototype and get a feel for the design decisions you made. You can also get some feedback from your team and test your designs on actual users. The prototype doesn't have to be fancy or pretty, and in fact it shouldn't be. Don't focus on the design details, the color, typography, etc. Just focus on the interactions.

You mentioned frameworks?

That's right, there's help! You don't have to start from scratch. That's what front-end frameworks are for...

In one of my recent projects I discovered HTML Kickstart. It's a very lean HTML framework that allows you to build an interactive web interface really quickly. It took me a couple of hours to create a responsive interface with 6 pages. They also use Font Awesome Icons which adds some great UI elements to communicate your interface to  your users.

Other frameworks...

Twitter Bootstrap - This is a popular one and has a whack load of elements that you can use to build your prototype but bootstrap goes beyond prototyping. You can build a full fledged development project with it. You can definitely do a lot more with Bootstrap but HTML Kickstart was ultra lean and light which is why I opted for it. Update: Bootstrap 3 is now out and a lot of it has changed apparently, I haven't tried this version so read more about the changes here.

Foundation - This one I'm excited about. I haven't fully worked with it (just got it setup and tinkered a bit) because again I wanted something really light and quick to use. Foundation is developed on Sass and can work with Compass, both of which I highly recommend, but that was a lot more more setup than I really needed. As a responsive framework I've heard great things and I definitely plan to use it to start my next web design.