TCorner is a serialized blog post from our newest Labs member, Taylor Cornelius.  TCorn comes from a design background and these are his adventures on the development side of the fence.

For the past few projects at Brown Bag Marketing we have taken a new approach to wireframing great experiences. In the past, our process would have begun with business and technical requirements along with user research, I would have made sketches, revised them, made better sketches, revised, made higher fidelity wireframes in a design program, revised, revised and revised again. If you have any experience in design or design programs you will know that making bulk updates to a design is not a quick task to do.

A client and often times colleagues have trouble understanding wireframes when they are presented on printouts or in presentations. The wireframes are seldom interactive (maybe links work) and trying to design and explain something like a drag and drop feature becomes a nightmare. When wireframing in the browser, these micro interactions can be developed early on. The wireframes start fully interactive and can give a truer sense of the scale of a website or application. Twenty pages of printed wireframes does not necessarily equal twenty different pages of a website. Wireframing in the browser also lends itself to share-ability with the client, stakeholders and users. The wireframes become a prototype that can be experienced earlier on in the design process. By wireframing in the browser you are already creating the foundations for what will become the live product. Through sharing a url we can garner better, earlier feedback and therefore move through more iterations of a design until it excels.

Wireframing in the browser allows for the setting of basic site-wide styles very quickly with CSS. When I refer to styles I mean the look-and-feel of wireframes, not client brand elements. Creating and editing things like margins, font-sizes and element positioning becomes much quicker when using CSS because you can type out one line of code that will effect every single page. In a design program one would either have to copy and past things from previous pages and art boards, or make multiple master page templates and keep track of which page is using what. CSS has frameworks that can be utilized to help with styling and creating layouts (Twitter Bootstrap and Foundation). These frameworks provide a jumping off point with styles so that you are not starting from nothing. I can set styles quickly and easily and if they need to change I can do that easily. I am not having to fuss with when I should be concerned with the overall experience. CSS frameworks also allow for mobile first, responsive design through built-in column layouts. This saves frustration by not having to keep track of mobile, tablet and desktop wireframes in a design program and ensuring elements are carried across each device type. By wireframing in the browser, content and elements can scale naturally with device size.

At Brown Bag Marketing, we have taken wireframing in the browser one step further by incorporating WordPress and a library of reusable modules. This is our prototyping process and it utilizes our modular framework called BagPress.  If you would like to learn more about it, Evan Mullins has written The Modular Web is Coming, which goes into further detail about modular web design.