More than just "making a website look pretty," the conceptual and visual design process is based on research, iteration after iteration and largely, many different opinions.


After completing the competitive analysis, our team initially created many variations of low fidelity website wireframes.  Low fidelity wireframes are the initial representation of content hierarchy, design elements (header, footer, newsfeed) and structure.  They forgo colors and any drastic visual treatment, however it's difficult not to begin designing when creating wireframes.

Personally, my process for wire framing is to first draw out many design variations on, yes, paper and slowly move to an electronic, black-and-white prototype in OmniGraffle.  There is no science to this, and I believe the more analog you are during this phase, the better, as you'll concentrate more on the structure and less on visual treatments.

Our team tested a couple iterations of the low fidelity wireframes with users, as described in the Research and More Research posting.


The pattern library will be a consistent theme during the series, as I've tried to figure out the best use cases for this element and work it into our team's workflow.  The idea behind a pattern library is to put together all of the design elements in one area, developing the treatments for your essential design elements (fonts, headings, links, logos, etc.) and then slowly integrating them into design systems (header, footer, templates, etc.).

I first worked out my pattern library within InDesign, but eventually moved everything to a single website where I could begin developing the elements in standard HTML/CSS.  My mistake was moving the browser too late in the process.

A great advantage of the pattern library is that it acts as a central repository for the other team members to reference during the design process.  However, this is only helpful if the pattern library is developed and updated regularly.  My goal is to have the pattern library available to not only designers and developers, but to the university community as a whole at site launch.

Until then, my pattern library is very much a work in progress and I'm still learning the best way to integrate it into our workflow.


Finally, it's time for visual design (colors, fonts, etc.) and the now dreaded design comps.  Being tasked early on with creating the initial look and feel for the website, I used the pattern library to dictate many of the initial design elements and then moved to Fireworks to generate some static design comps.  I worked on four variations of the home page on first a small screen, then medium and large screens, and then moved to other page templates, such as landing pages, news and even a 404 page.

Some problems with design comps, whether made in Fireworks or Photoshop:

In the end, though, with all of these challenges, and many lessons learned, we did settle on a design concept and page template style that would be used by developers for the final website.  One resource that definitely helped in this process was creating a single page repository that housed all of the design concepts and iterations in a single place and allowed stakeholders and team members to access them more easily through their browser.


As we were working with the static designs, we realized that, as described above, some elements just couldn't be demonstrated as static visuals.  Therefore, one of our team members took the great step of creating an HTML-based prototype of our home page and several of the college-level pages, which could demonstrate to users in testing and our stakeholders how exactly the designs would display and work in the browser.

If I could go back and change one part of our process, I would have begun designing in the browser early on.  Designing in HTML/CSS:

An intriguing tool that would streamline this process is Brad Frost's Pattern Lab, which combines the best of both worlds allowing the designer to create the simple "atoms" and "molecules" that make up a design, but also develop templates and pages that allow users and management to see the pages displayed in practice.  I can't praise enough this product and the  benefits of this type of prototyping in place of static visual designs.

Overall, I found this particular design process especially interesting, because it really demonstrated the changing landscape of our industry and showed the need for a new way of thinking that finally divorces the web design process from the print design process.

Importantly, though, we were able to learn and work through this rather challenging and highly subjective process, still ending with a design that works well for our users and allow Kent State to launch a website that's both forward-thinking and visually appealing.