In our Fireant News we have discussed our process, what role UX plays in that story, and what typography and iconography can add to the User Experience and overall aesthetic. Now we will be taking a closer look at what we deem one of the most important parts of the process: wireframing. So important, in fact, that we still have our Founder and Owner complete it most of the time. After the initial discovery phase with a client, the next step is wireframing. Over the last several years, FIREANT has started using interactive wireframing tools. This means that it is a published tool (visible in a browser, and you can send a link), that the client has the ability to interact with (click through links and navigation, physically seeing a basic wire of their future website’s functionality).
Before Wireframing: It’s Nice to Meet You
Prior to being able to sit down and plan out a website and its functionality, an initial discovery with the client and outlining the scope of the project needs to be completed. This might involve combing through the current website and prioritizing what the client LIKES about that site, what they don’t like, or want CHANGED. Creating a main message, creative brief, and a site map are crucial alongside a content audit and prioritization. If the project is a brand new site or campaign, we don’t have previous content to audit, and must prioritize from the main message and figure out how their plan and message will most efficiently be displayed and interacted with on the web for a user.
Interactive Wireframing & Prototyping Benefits: A Higher Sense of Clarity
What is the benefit of an interactive wireframe over a simple static wireframe? A static wireframe will show the layout of a web page, but doesn’t speak at all to how a website will function. The interactive landscape has changed and this provides insight and clarity into the true user experience being provided by the solution. We’re now working with asynchronous content delivery, single page javascript applications which don’t translate well to static presentations. This solution is highly effective if the client is not accustomed or trained to look at a static picture and see how it will work as an interactive solution (which, what client would be? Seriously, can we have their number?). Interactive wireframing provide a sense of clarity and aligns understanding of the project. It also eliminates the “I thought it was going to do this” discussion, which can be a headache and timewaster. By presenting an interactive wireframe right after the discovery process, the client can have an idea of what the website is capable of, and offer feedback on the functionality before many, many hours and effort is contributed.
Wireframing Tools: Let’s Visualize Something
A wireframe can be as simple as a sketch in a notebook, a drawing on a napkin, or a basic photoshop file with blocks laid out for content. There is a large scope of tools available and a design agency must find the most effective tool for their audience and their internal team. Some examples of tools FIREANT has used are OmniGraffle, Zurb’s Foundation, and Axure. Currently, FIREANT uses Axure, due to its lightweight coding and conditional logic. However, as with most things in the industry, we remain flexible and aware as new technologies come out or improve. By staying on top of new and improved tools and methods we remain adaptable and a stronger interactive studio.