Skip Navigation and You

Who needs a tagline when you have us?

The UNL Template Design Process

May 13th, 2009 by acoleman

Although smaller revisions and updates never truly stop (there have been over 70 template updates of varying sizes since 2006), every three years the University of Nebraska-Lincoln goes through the process of giving the website a large face lift. The incredibly fast-paced transformation of the web and the fact that our web presence is the only medium that anyone on the planet can reach in one click demands that we both stay abreast of current trends and try to set new ones. As mentioned above, we largely consider our website to be in constant beta mode, but these large overhauls allow us the chance to try to put ourselves one step ahead of the competition while setting the stage for the future.

The process as a whole actually started clear back in September of 2008, as detailed in this post. At that time, developers across campus worked on photoshop file mock-ups of their proposed look and approximately 40 different looks were submitted. At a well-attended WDN meeting, we then ran voting that took into account both “gut response” (2 seconds viewing time) and more detailed comments for each design. After tabulating that data, 7 different designs stood apart from the rest. Click on the thumbnails below to see each of the beginning phase designs in full size.

07 look 09 look 11 look 14 look 15 look 17 look 18 look

These 7 designs were then pulled together into 3 different groups that incorporated similar ideas. Designers and other interested developers worked to further refine the ideas presented within each and ended up with the final designs that were voted on by different constituent groups in the WDN Design Survey. Needless to say, each design changed considerably from where it started. Again, click on the thumbnails below to see the design in full size.

Group A Design Group B Design Group C Design

The resulting feedback from the WDN Design Survey was incredible. We received over 8000 full responses, providing us not only quantitative data to go on, but qualitative responses to help guide us as well.

Based on survey data, designers from each group (another special thanks to Joel Brehm, Jeff Nothwehr, Seth Meranda, Christy Aggens, Vishal Singh, Aaron Coleman, and Mark Hiatt) took the Group B design as a visual starting point and moved forward with not only a visual freshening in mind, but also a charge of making more sense of the multiple navigation systems that were being used on the old site and hierarchy of the page elements as a whole. Ideas and components were combined, refined, labored-over, respectfully disagreed with, and generally massaged for several weeks until we finally arrived at where we now stand; a look that will now be coded into the next generation of University of Nebraska-Lincoln web templates.

new template look

As mentioned above, this process certainly isn’t complete. The visual design has been worked out, but now we move onto the coding phase, and your help is needed.

We’ve made a PDF of the WDN template presentation (13mb) available for download.

5 Responses to “The UNL Template Design Process”

  1. Chris Bourke Says:

    This was my least favorite design when I took the survey. Aesthetically, the design is fine, but functionally, I think its an extraordinarily bad idea to hide navigation elements (at least by default). Both casual surfers and power users need to be able to navigate UNL websites easily and quickly. Shoving all navigation elements to the top and hiding them doesn’t accomplish this. Moreover, the design seems to be rather large; when expanded it looks like it will take up half the screen on most monitors. Similar behavior was a major failing in the current template and it would not be good if it persists in the next design.

    I’m hoping that the coded web template will allow developers to at least have the navigation expanded by default.

  2. UNL | Website Realignment | All Paths Lead Forward Says:

    [...] that the Web Developers Network is in the process of realigning with a face lift. Aaron has explained much of the process in his previous post, and I won’t rehash his descriptions. Instead, I’d like to take you on a journey of how [...]

  3. UNL | Website Realignment | Introducing the Future Design of Says:

    [...] interface for beginning August 17. For details on how the design came to be, take a look at Aaron’s explanation of the process, and my explanation of the [...]

  4. Melvin Branan Says:


    Good post. Just wanted to let you know. Design and inspiration always have a symbiotic relationship.

  5. Jimmy Thakkar Says:

    The template is very good. What is even better that it is w3c compliant.


Leave a Reply