The Web Design Process

In any web design project, it may seem like there are countless steps to arriving at the final product. From ideation to iteration, and everything in-between. There are seven major components when it comes to the design process: mood boards, color palettes, grid structure, sketching, mockups, prototyping, and web typography. Each serve as a building block to make your website unique and functional. I chose to look at my former place of work, ICA Boston to illustrate how one might conduct a website re-design process looking specifically at mood boards, color palettes, site-mapping, and wireframing.

Mood Board

Mood boards set the tone for not only the web design process, but also your brand identity. Start by collecting images that reflect the brand’s visual identity, mission, and aspirations. I like to use curation-based platforms like SAVEE and Pinterest to collect inspiration and ideas and then image databases like Unsplash to find images.

I thought about the brand identity of ICA Boston and I would say that it is very strong. There is a clear sense of the different elements that make this particular museum special. A few key words and phrases I thought about while creating my mood board were: “Contemporary,” “Established,” “Museum,” and “Waterfront.” Here is the mood board I came up with:

Color Palette

Deciding your color palette is integral to the web design process. Like a mood board, a color palette guides the aesthetic of your website greatly. There are many ways to choose which colors your palette will consist of, but I tend to refer to color theory and color psychology to determine which colors will work.

Color Theory is of a set of standard requirements relating to color– how it is used, paired and combined based on the Color Wheel, color psychology, cultural meanings and more. On the most basic level, the Color Wheel helps us to understand which colors go best with others as opposed to what doesn’t, along with which colors combined make other colors, and more. It’s a useful tool to consult while creating a palette. Color psychology is another aspect of Color Theory that takes things to a deeper level. It explores what moods and traits are symbolized by each color, adding a human layer to how we interpret color.

For the ICA, I wanted to start with some base shades of blue to represent the location of the museum. I went with a light shade (Pale Azure) and a darker one (Electric Indigo). I liked how these two blues looked next to each other and contrasted well while being within the same color family. The second most important color was yellow (Maize). It symbolizes creativity, playfulness, and mental stimulation. I chose some bright shades of the colors green (Lime), red (Imperial Red), and pink (Ultra Pink) to add some contrast and pair with the other colors. Overall, this palette is a fresh and lively update to the previous palette of muted tones that the museum used.

Site Map

A site map illustrates the relationships between different pages and sub-pages in the navigation. It’s a useful tool in determining the user journey both in the early and final stages of the design process and builds the groundwork to arrive at the latter half.

Here are the various changes I made to the Site Map in order to build a more simplified and cohesive user experience.

Vist:

I added sub-pages to this tab to condense the current text-heavy page.

Exhibitions:

This is another page which would benefit from sub-pages in order to break up the information given in the single page as well as create a more visually interesting web page for each category of exhibition.

Learning:

I combined Teens with Teen Arts Education Hub because the Teens Category already lists the same tabs as the latter.

I removed Free Admission for Youth, as it would probably fit better in Visit tab under the discounts/resources sections.

The category On-Site Art-Making combines Art Lab and Seaport Studio (could also be called Art-Making).

I moved Digital Guide to the Visit section to de-clutter.

Join + Give:

I consolidated the Companies, Universities, Libraries, and Foundations sub-pages into an Institutional Memberships sub-page to remove clutter. On a related note to consolidation, it was hard to remove and combine the different membership levels in this tab just knowing how museums work, it's beneficial to highlight specific membership levels and I would need more data about their most profitable/popular levels to adjust these properly.

Finally, I removed the Watershed as its own category and added it to Visit/Exhibitions it can also exist on the website the same way as the Store (in the top navigation).

Before

After

Wireframes

Finally, wireframes bring us one step closer to seeing what a website’s design and structure will look like according to the site map. Wireframes provide key insight to how usable a website is, what could be missing or highlighted, and the general flow and aesthetic of a website.

Here are some examples of wireframes using the ICA website. I compared the current design of the Homepage, Exhibitions page, and Donation page to execute the changes made in my sitemap above and illustrate what the potential re-design would entail.

Homepage

For the homepage, I took into consideration what the museum is currently focused on highlighting, while creating a more simple and engaging hub for whatever users might find interesting. The current homepage has a long list of events to scroll through that takes up almost the entirety of the site. I thought that this page missed an opportunity to highlight more of what the ICA has to offer in terms of the Watershed, store, membership levels, and its thriving teen program. To highlight events, I mocked up a scrolling carousel of featured events that would be linked to the Calendar page.

Exhibitions Page

One thing that I mulled over quite bit while redesigning the exhibitions page is its non-hierarchal nature. I do like it but it also leaves something to be desired. I think it is important to highlight the current exhibitions, and bring users to other exhibition sections as their own pages. I featured them in a four-section grid menu below the current exhibitions list to give them that highlighted feel.

Donation Page

The Donation page is an extremely important page to any museum. I felt that it was under-utilized and could give users more than what it is currently offering. For example, I changed the random photo slideshow to an image box with a caption on the right side to make better use of the heading. I wanted the “Make a Gift” section to feel less clunky and outdated, so I designed it in a way that shows that the form is divided into steps rather than a long overwhelming list of boxes. I also added a list of more “Ways to Give” as suggested in my sitemap to declutter and consolidate these related categories.