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.
LOW FIDELITY WIREFRAMES
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.
PATTERN LIBRARY
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.
HIGH FIDELITY WIREFRAMES AND DESIGN COMPS
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:
- They do not accurately represent what the website will actually look like in the browser and at the thousands of screen sizes on which the website will actually display. Disproportionately, the "desktop" view is favored as the gold standard.
- They focus too much on specific pages, for example the home page or the "About" page. Instead, we should be thinking about the pieces and elements that make up a page. The home page design was iterated constantly and disproportionately, in my opinion, in relation to the other design elements
- They are extremely tedious and difficult to modify and iterate upon. For example, making one color change across every design comp could create hours of work. Even then, the static comp file must be redistributed to the stakeholders.
- They do not show interactive elements, such as image slideshows, link hover states and dynamic content
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.
PROTOTYPING AND DESIGNING IN THE 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:
- Allows the team to represent interactive elements as they were intended
- Potentially can display the designs at various screen sizes, emphasizing less the "desktop" view
- Can be iterated and changed easier than static designs, by just adjusting a stylesheet
- Allows the team to reuse the already created HTML/CSS in the actual developed product (although, as I'll explain the next part of this series, it isn't always this simple).
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.