What is a wireframe?
Many of you may not be familiar with the concept of a wireframe. Your initial reaction to these images may be something along the lines of, “But I thought there would be more orange!” or, “Egads, what’s up with all this gray?” or even, “What? No logo?” Don’t be alarmed…. It’s “only” a wireframe.
Here’s a helpful definition from the design blog boxesandarrows,
“A wireframe is a grayscale block diagram that illustrates the overall navigation and the blocks of elements such as content, functionality, etc. that will go on the screen. It does not contain pictures and doesn’t necessarily need to link to anything. It just demonstrates what elements a web page or application screen will contain and roughly where they might go—although the location can change. It does not include visual design.” – Julie Stanford, “HTML Wireframes and Prototypes: All Pain and No Gain”
(In fact, boxesandarrows has a great deal of wireframe-related content, if you’re curious.)
Why start with wireframes?
Well, technically, we didn’t.
Our philosophy regarding web design is that usability, content, and access to information come first. Web design isn’t just about making things “pretty;” rather, it’s about giving visitors a logical (and quick, or at least easy to follow) path to the information they’re seeking. With the primary goal of information access in mind, we began the redesign process by focusing on who our audiences are, what they typically look for on our site(s), and the means they employ to get at that information.
We studied data from Google Analytics (we’ve had this on our site now for several years, so we’ve accumulated quite a bit of user data), we conducted usability studies with local high school students on the current site, we kept abreast of constantly emerging web best practices (both in general and in the higher ed community), and we spent a great deal of time in detailed examination of other higher ed websites (and noticed definite trends). We considered the primary messages of our university—the information we want to emphasize as a university, our key initiatives, our mission as both a land-grant university and as the state’s flagship university. We also considered our position within our local community and region, as well as popular perceptions of the University of Tennessee. And we began to synthesize all of this through discussion and information design, until we arrived at what we feel is a solid information architecture for the new site.
That architecture is what is showcased in our wireframes. The wireframes do not capture the final visual look of the site, and they don’t incorporate specific messaging. The wider discussions about branding that we’ve been having as a department and a campus have informed some of the decisions we’ve made regarding navigational structure, but wireframes aren’t branding. Rather, this is the structure that our site(s) will be built upon—its bones, if you will.
Wireframes aren’t the whole picture
So clearly, wireframes don’t represent the entirety of a visitor’s experience with the site. They lack color, interactivity, moving parts, and so forth—those visual cues that are also a part of usability and the overall experience of gaining access to information online. In fact, they may leave you a little cold.
We ask only that you bear in mind the purpose and limits of wireframes as you review what we’re about to share with you. These wireframes do not represent a final draft, nor are they “new templates”—in fact, the new templates that we roll out early next year may be somewhat different from what you’re about to see.
Flat images…really?
We’re in the process of doing a proof-of-concept of these wireframes—in other words, coding them out in CSS and HTML, playing with approaches that will translate well to a variety of devices/interfaces, etc. When that’s ready, we’ll share it here in this blog for your feedback.
Feedback
We’re posting our wireframes in this blog in the hope that we’ll get good feedback from our community of content creators, designers, developers, faculty, staff, and (ultimately) the folks who are going to have to use this site on a daily basis. We invite you to leave your feedback and comments here on these pages.
» Proceed to the next post to view the utk.edu homepage wireframe
Please note that due to spam issues, we will be moderating comments, so don’t despair if your feedback doesn’t show immediately. We will get to it and post it, and we will also try to respond when appropriate or requested. Do be patient with us; we’ll try to be as timely as we can.