Recently at NEWMEDIA, we have been experimenting with using live wires, HTML, and CSS pages to build wireframes. These are very different from image wireframes, and thus far, has been a change well worth making.
: A Little Background on Wireframes
Traditionally, the NEWMEDIA team has completed wireframes with the following process;
- Some sketching by hand – This helps get the creative juices flowing. It also allows us to rapidly iterate on ideas.
- We move into some kind of image rendering program whether it’s myBalsamiq, Adobe Illustrator, Photoshop, Sketch, or something else of the like.
- Make wireframe iterations.
- Finally, approval.
While the process above seems simple and works pretty well in a workflow, it does create some serious issues that we would like to address.
- Extra time spent recreating every element from wireframe to design to site build out. Using the old method you would create a wireframe in a tool of choice. Once approved, many times those elements are re-created in another tool. Once design is approved, everything is recreated again in the CMS with HTML and CSS.
- Not being able to easily view wireframes in any device. In order to demonstrate responsive design multiple images need to be created at each of the expected breakpoints. These images are difficult to view on mobile devices sometimes making it difficult to make decisions for other breakpoints and user interactions.
- No click through or limited click through. If an image is presented to the client, they can’t click links to navigate the site. However, if a program allows for links you typically don’t get the interactivity of elements like hover states or what a dropdown menu will look like, etc.
- Working out interactions is difficult and sometimes impossible, visualizing things like drop down menus, hover effects or many kinds of animations are difficult to do effectively with images or wireframe programs. It doesn’t quite translate like seeing it in a web page.
:: Live Wires
None of the available solutions truly solved the problems we were trying to solve. So, we decided to roll out and create our own tool or at least a group of tools that help us accomplish our goals. To this point we’ve decided to go with Jekyll. Jekyll is a ruby gem that compiles files into static HTML. In conjunction with Github we can serve the files as a static website. These tools have helped to solve the issues we were facing with a “traditional” wireframe approach.
::: The Solutions From Live Wires
Using this method of wire framing has certainly helped NEWMEDIA save time and help to communicate more successfully with our clients demonstrating how the website will feel and act in all devices.
- The extra time that was being spent recreating every element several times has been reduced significantly. We now can use the same HTML we use for wireframes for design. This is a huge time saver. However, since we now have control over much of the HTML output, we can structure it so it closely matches that of the system we are using, whether it is Drupal, Wordpress, or another platform. The good news: this has allowed us to save time so we can work on other problems or tasks to help provide more value to the client.
- Now that the pages are in HTML and CSS, we can put them onto a live server and provide an easily accessible way for clients to see the wires on any device. This has helped bridge the responsive gap that was created with static images.
- Being able to easily click through the links of a site and see how they all interact is phenomenal. Static images and many wireframe tools don’t provide the same experience of actually seeing wireframes in a browser on your device.
- Working out interactions is much easier and totally possible in live wires through HTML and CSS with a little javascript if needed. Interactions are difficult or impossible in other tools, and you don’t get to use the code you’ve written to provide the interactions. You do in live wires.
The main difference between using wireframes and live wires is that using live wires has helped solve many of the issues you will face in a wireframe and website design process. It can cut down development time and, most importantly, allows us the time to think through issues and ultimately provide a better end product and higher value to our clients. Feel free to contact NEWMEDIA directly with questions about live wires.