Wireframing has always been an important step in the web design process, at least for us. But, considering the evolution of responsive design and web standards, multiple browsers and a growing number of screen sizes and devices, we decided it was necessary to take a look at our current process.
With front end frameworks like Zurb’s Foundation and technologies like SASS to make style changes on the fly, a “Design in the Browser” approach has gained popularity. Maybe as an agency, we can do away with hi-def wireframes and jump right into coding? Well, we would have to be prepared to make some major changes to our process. From how we pitched concepts all the way to how we deploy sites. Which is fine, in this industry you must embrace change, not fight it. But before we made any changes, we had to answer a few important questions.
First, does it improve our ability to closely collaborate with our clients? Right now we can get buy in and consensus every step of the way. We quickly iterate, get feedback and refine concepts. I know sometimes we just grin and bare it, but that feedback is essential. If we go from brainstorming to working prototype, a client can feel left out of that process. And it may be harder to iterate, especially if it involves a big change in strategy. So no, in this regard designing in the browser would probably not be an improvement but a instead be a hindrance.
Secondly, will it streamline our production process? We have a “Work smarter, not harder” approach to production. I can confidently say, having a developer spend two to three days on a feature request that the client has not seen or signed off on, is the latter. By the time a design gets to development, it has usually seen two to three iterations. Sometimes initiated by the client and sometimes through our own internal design reviews. They can be small details or scope changing revisions. Either way, the answer is a big no, for us.
So, wireframing is here to stay, at least for this agency. But we have made changes over the years to accommodate new complexities in the industry. We now focus on content strategy, page layout and responsive testing. And no more lorem ipsum! We save those details for the look and messaging phase. We can quickly prototype without the use of code, backed by our development team’s approval and confident that if we dream it, we can build it.
I am sure there are a lot of agencies and freelancers making the similar decisions. I thought I would share why wireframes are still a fundamental part of our process and how we use them to effectively execute on projects.
Pencil and paper.
We still start with pencil and paper. We use grid paper designed for responsive web structure, like these sketch pads or my personal favorite, a good old fashioned Moleskine.
Content strategy.
We present the site hierarchy and content strategy along side our wireframes. This provides context and rationale for the overall strategy. And this highlights areas where we need to create content, messaging or visuals.
Proof of concept.
Once we have established the content strategy we can think about how we want to engage the audience. We use Invision for building clickable prototypes and Adobe Animate is great to present any animations or page transitions without spending the time coding.
Get buy in early, from the client and the team.
Before a client sees anything our team has already reviewed and decided how it can be executed with in budget and time frame. We then get buy in from clients, refine ideas and continue the process until everyone is aligned.
Why not use Photoshop?
There are a number of great online tools out there. Balsamiq, UXPIn or I have heard some great things about Sketch 3. But ultimately these wireframes are destined to be Photoshopped, so why not start there. We have built up a great library of UI patterns we use as a starting point.
Setting yourself up for design success!
With the content and site strategies in place and having already done the work of showing multiple screen sizes and devices, we can focus on a few select pages and a present style guide for our approval process.
Not every client or project is the same. Sometimes we let budgets or time constraints dictate how a project will moves forward and we might skip a crucial step like this. I know I have done it, and have regretted it every time. Processes will change, the important thing is to have one and execute it.