So often when we work with small businesses, start-ups and nonprofit organizations, we are often asked what wire-frames are. Actually, most times we get this look that says “what the heck is a wire-frame”.
Well, I’d like to not only share what a wire-frame is, but the importance it holds within the process of web development.
In short, wire-frames are the skeleton of a website. Very similar to sitemaps they represent a core part of the site’s design. Wire-frames provide an idea of how users will interact with a specific page or set of pages within a website. In addition, wire frames give a good view of the type of content that will be on a page and potentially how much content. A well laid out wire frame will include descriptions of how certain elements or features on a page will function. Wire frames lead the way, when it comes to a site’s design and functionality.
Wire frames used in web site design
From a design perspective wireframes are not much to look at. They are usually very simple in design and very seldom have any color. In the late 90’s, and early 2000’s, wire-frames were less common or less evolved. Most site layouts were represented by boxes. Today wire-frames, sometimes referred to as wires, are draw in Adobe Illustrator, Adobe Photoshop, or in other professional applications. We often see them sketched out on dot grid paper, white boards, chalk boards, and even napkins.
Today wire-frames are much more detailed. Often times they have the actual navigation of a site and even some of the final copy if available. The idea is to give the design team, development team and the client a clear picture of how the site will function. One of the core problems this solves is uncertainty; which can lead to scope creep and exasperating the project’s budget.
The design team uses wire frames to show where page elements belong and even to see what elements have priority on the page. Developers can determine what code they will need to write based on the types of elements in the wire-frames. This can save countless hours not on in development, but also during quality assurance.
Clients can view the wire frames to determine if the goals of the site are being met, and all the features required are represented. By viewing wire-frames, most issues can be addressed before any hours are used in designing the site or in development. The means less hours are wasted going back and forth over the design and function of the web site.
This is extremely helpful when it comes to responsive design. Having wire-frames to represent each view port can save the development company time and the client money. Being able to compare the wire frames of the desktop, tablet and smartphone view of the same site goes a long way in writing the HTML and CSS of a site. It can also help to determine where and when JavaScript id necessary for each device type or identify areas where the design needs to be “smarter”.
Wire-frames are a great starting point for smart web design.
Site interaction through Wire-frames
Clients frequently ask how a visitor will navigate the site before the design has been created or before pages are developed. In the past, many years ago, we would develop a mock site or prototype of the site for them to click through. Some people still do a similar style of development called rapid prototyping or agile development. I’m not going to go into those here, but will likely write a separate post about them later. While we sometimes do rapid prototyping, we most often use wire-framing to keep the cost lower. Rapid prototyping is more appropriate for projects with larger budgets and shorter timelines.
Well sketched wireframes will not only show the navigation and areas of the site, but the types of buttons used to navigate the site. Often times these buttons reveal the way a button functions, which shows how a user will interact with that button or element. Are they watching a video? Filling out a form, clicking a call to action, or just reading text? Are there images on the page, forms, downloadable files, products or animations? Wireframes can give us a good idea of what a site user or visitor is supposed to be doing on a page. We can determine by wireframes if the design will accomplish the goals of the client. Does the navigation and content lead a user to the goal clearly? This is valuable part of what wireframes do for us at Eternal Works.
Wire-frames used to show content
While we sort of went through some of the types of content used in wireframes above, I thought it was very important to speak on how they help us navigate through the process of developing a website. A very important part of our process is content strategy. The wireframes of a new site are a great way to audit a site for existing and missing content. This is a great way to show your copywriters or the client the types of content and the amount of content needed to complete the site. Because E-W does wire-framing early in the process, it helps us in setting realistic deadlines for producing content. This is often a real eye opener for clients and a great point to discuss who will be responsible for producing the missing content and by when.
When we can; we like to use the actual content of the site for wire-framing. This helps us to see how the design and the content interact. Especially since the design should be determined by the content. We can often see where sidebars may be too long or where the responsive design may need to be adjusted based on the actual content vs the content we anticipated. They can also reveal dynamic content that is managed by a database.
Wireframes showing web site functionality
For a developer wireframes can serve two purposes: one, clarifying how something will function, two identifying areas of the site where the functionality is unclear. Our developers always use our wire-frames to look for clarity against the project scope. Sometimes a button can link to a separate page or make images slide across the screen. Sometimes the button makes the content change, but on the current page dynamically. Wire-frames are a great place to go over how the site functions with the client as well. We use wire frames to make sure that the pages of a site do what our clients expected them to do. Does this page solve the problem that the client presented? That’s the question we are looking to answer.
In closing on Wire-framing
I hope you can see the value that wire-framing brings to the development process. Wire-frames are a tool that most industry leaders use in their process of developing websites, applications and many other digital solutions. They are very similar to story boarding in video, or blue prints in architecture. In the same way it can be very costly to build a site without them or work with a firm that does not use them. In the least, they should provide a good argument as to why they don’t see the need to wireframe your website before they get into design or development.
Creating Wire-frames
While in most cases; we recommend that a client provides the problem that they are trying to solve, we also understand that some clients are or have in-house designers and developers that have experience solving the presented problems and may partner with an agency like our for other resources or skill-sets, so we have included a list of online applications that are good for creating wire-frames. There are times when client developed wire frames are a good tool to clarify the scope of a project.
While we create most of our wireframes in Adobe Photoshop and Illustrator, we’ve played with a few of these and have friends who have given them good recommendations.
Balsamiq - https://balsamiq.com/
Gliffy - https://www.gliffy.com/
Mockflow - https://www.mockflow.com/
Moqups - https://moqups.com/
UXpin - https://www.uxpin.com/
Quirk - https://quirktools.com/
