Contrary to popular belief, website design isn’t that different from print design. They both start with research. According to Jason Beaird and James George (2014), the design process can be paired down to three main directives, “discovery, exploration, and implementation”. The discovery process begins with a client meeting. The initial client meeting shouldn’t focus on the design, but on who the client is – who they are, their role in the company, and their business goals (Beaird and George, 2014). Once the “who” is established, the “what” comes next. What do they hope to accomplish with the new website? Who is their target audience? Do they have an existing brand? Who are their competitors? And the list goes on (Beaird and George, 2014). Once the information is gathered, exploration begins.

According to Beaird and George (2014), it’s time to “take the information you’ve learned from the client back to your laboratory for analysis, dissection, and experimentation”. This is where the information learned is assimilated and manipulated to find out how it can best be arranged for proper placement. (Beaird and George, 2014). This process is known as information architecture and should be a precursor to developing any website, even the simplest ones. During the exploration stage of the process, the focus is “on organizing the content and flow of the website into a structure we can design around” (Beaird and George, 2014). As with any design project, the process begins with a sheet of paper and some post-it notes. The post-it notes allow you to arrange the website into subgroups and categories that will eventually become the site’s navigation. Always make sure that the information is accessible and doesn’t become overwhelming for the viewer (Beaird and George, 2014).

The final stage is implementation, but…don’t sit in front of the computer just yet. Accord to Beaird and George, “it’s easy to lose focus on the design if you start thinking about the layout in front of a computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS and focus on how you want the final product to look” (2014). Begin with sketching the layouts on paper, only moving to Photoshop once there are several solid options. Wireframes are then created in Photoshop using rectangles to visual the website layout in its simplest form. Finally, color and content are added to build the first draft for the client (Beaird and George, 2014).

The stages of the web design process are very similar to those learned in Defining Client Needs and Brand Development. In Defining Client Needs, the discovery phase began by developing logo concepts for an international city through the creation of mind maps. Each mind map was derived from a main theme: geography, culture, and tradition. This allowed us to recognize broad commonalities within each city and then break the main roots into subcategories that aided in the discovery of more unique aspects about each city. During the exploration phase, multiple sketches were developed around each theme. The sketches were critiqued and pared down into the strongest concepts. In Brand Development, the best logo concepts were implemented and developed in Illustrator as black and white logos. Once secondary revisions were made and color was added. Finally, style sheets that included the color palette, brand descriptors, fonts, scenery, and textures were created for the final logo.

In the case of the Art Institute of Chicago, Studio Blue redesigned the website “in an effort to dispel the widely held belief that the museum was not family-friendly” (O’Grady, 2009, p. 163). The design firm began the discovery phase by gathering a library of website examples from well-known museums around the country to evaluate their strengths and weaknesses (O’Grady, 2009, p. 164). During the exploration phase, Studio Blue also conducted a series of group interviews to gauge the perception of the museum. Potential patrons believed that the museum was “inaccessible to families…and the museum’s collections were not organized in a way that was easy for the general public to browse or reference online” (O’Grady, 2009, p. 164). They also used the information gathered by the previous web developer to aid in the site’s new layout. The redesign increased visitor traffic, including paper and digital correspondence (O’Grady, 2009, p. 164).

The Art Institute of Chicago’s website takes a minimalist approach to simplify a wide array of information. The main navigation is comprised of 7 pages that each have their own side navigation, breaking down the content even further for ease of access. The site remains modern, sleek and crisp with muted earth tones and saturated to allow the information to speak on its own. The site maintains the brand standards of the Art Institute of Chicago by maintaining the austerity of the institution while making the museum accessible and more inviting to new patrons.

Web design and print design are often seen as two different animals, but they are really two halves of the same whole. The design research process unites all facets of design by asking questions, making discoveries, and using the information gathered to create an effective design solution. Although every design process has its own unique outcomes, all designers are united by one factor: making the client happy and successful.

References

Beaird, J., & George, J. (2014) The Principles of Beautiful Web Design, 3rd Edition. SitePoint.

O’Grady, J., & O’Grady, K. (2009). A Designer’s Research Manual: Succeed in Design by Knowing Your Clients and What They Really Need. Beverly, MA: Rockport Publishers.