contact us

Use the form on the right to contact us.

You can edit the text in this area, and change where the contact form on the right submits to, by entering edit mode using the modes on the bottom right.


Round Rock Texas 78680
USA

5125085388

Howdy! My name is Ansa and I'm a designer in Austin, Texas.

Currently I am a User Experience Architect at Chaotic Moon. Previously, I spent two years as a freelance interaction designer and before that, some time as creative lead at a startup. I like to occasionally write about things I'm thinking about or working on, and I even change my mind occasionally. 

 

 

Blog

Freelance designer based in Austin, Texas.

Rapid Prototyping with Middleman

Ansa Copeland

Despite the fact that many people espouse prototyping, there is relatively little on the web about how to actually go about it. Through trial and error, I have arrived at a robust solution that is flexible enough to handle a wide variety of projects.

Frequently, I find that paper prototypes are sufficient for smaller projects since the functionality and interactions are pretty standard. On these projects, I am frequently acting as a front end developer as well as a designer, so a fully-fledged prototype seems redundant.

On larger projects I find that a prototype is worth a million words, both to me as I test out ideas, and to the developer. For these projects, my preferred prototyping tool is Middleman, a static site generator built on Ruby.

Prototyping with sample data / content, HTML, CSS, and Javascript gives me a chance to "touch" a concept in a way that sketches or high fidelity mockups simply cannot. When creating a design, I start with simple sketches to record my ideas but quickly move into prototyping functional wireframes with little to no styling. This works well since the first phase of design is all about the architecture, navigation, and organization of the project, rather than styling.

An interactive prototype is in no way a replacement for Photoshop. For one, I rarely prototype the entire project. I prefer to put the big ideas and interactions into the prototype, and to refine details and pixels in Photoshop. I find that these prototypes give me a very strong idea of which screens will need the most attention, and that they help me to set smart priorities prior to moving too far into the level of detail that Photoshop best serves.

Middleman is both simple and powerful, and it gives me a great way to exercise my (albeit limited) coding knowledge. Instead of writing out verbose HTML, CSS, and JavaScript, Middleman enables you to use tools like Slim, Sass, and CoffeeScript. It also gives me a number of ways to organize my code and cut down on duplication by using layouts, partials, and various helper functions. I recommend checking out MiddlemanApp.com for installation and usage documentation.

While Middleman may not be the right tool for everyone, I definitely think that more designers should take the time to find a prototyping method that works for them. I see so many instances of poor design choices that could have been avoided pre-development with even the most basic of prototypes.

Wireframing can certainly help, and is a good place to start, but prototyping takes this one step further. It allows you to actually interact with your content or data in the way that your user will. You will notice right away if something in the flow feels overly complex or if the layout is too constraining for your dynamically generated content. It saves you and your team time, money, and lots of frustration. Your developers and clients will thank you.