As a class challenge, two classmates and I worked together to design a new website for the Shakespeare Press Museum, a 19th century working letterpress museum at Cal Poly, San Luis Obispo.
We drafted a few prototypes before hand coding the HTML, CSS, and Javascript for the site.
Problem Statement
The problem with the old Shakespeare Press Museum website was that there was no information and no styling. Potential visitors and students wouldn’t know when the Museum was open or how to get there. There was no history of the Museum on the current page, and no explanation of how it functions within the Graphic Communication department. The Shakespeare Press Museum is a beloved monument of the Graphic Communication Department, and a hidden treasure of Cal Poly. It deserves to be represented in a way that is expressive of Cal Poly's “Learn by doing” motto, by its own GrC students.
Sketching

We started off sketching our own individual design ideas for the site, making sure we were all on the same page regarding what content was to be included.

Prototyping

Our first collaborative prototype made on Figma was colorful and fun, which we loved. However, we decided to change the logo from the initials, “SPM”, and decided to tone down the colors and blocks a bit.

Above is our final prototype, and the direct reference for our code. We prototyped all five pages on a desktop view and a mobile view.

The Final Design
Content Strategy
The goal of the design was to combine the Shakespeare Press Museum's antique-feel with a modern twist. We wanted to display important information in an aesthetically-pleasing way, while still making the site simple and user-friendly.
We believe that a more modern design makes the site more inviting, easier on the eyes, and easier to navigate. However, to preserve the history of the Museum and its “brand”, we felt it was important to keep some of the old-fashioned elements, which is why the logo looks gritty and letterpressed. Also, the modern design makes the Museum seem more relevant which is especially important since most of the site's visitors will probably be students.
Design Decisions
The most important headings are highlighted with a color and are in a contrasting serif typeface. To make the site feel sophisticated and stylized, we incorporated many intentionally overlapping elements. Secondary headings are in a contrasting color to the primary headings, but are in the sans-serif Chivo and all caps. These are significantly smaller than the primary headings, but still differentiated from the body text.
Other important information, such as dates, that we wanted separate from body text, is in orange and is placed slightly behind body text. It is large enough and opaque enough to read at a glance, but not out of place.
On the Home page, we wanted a video element so that it did not seem too static, especially since there is no scrolling. We visited the Museum during a letterpress workshop and took some b-roll shots, then put it together into a short, looping .mp4 file.
We used several photos from the Shakespeare Press Museum's Flickr account. Many of the photos are quite old, so we chose to make all of the images greyscale or brown. Again, we did this to maintain the old-fashioned feel of the Museum as well as for design consistency.
We also took the opacity down on most of the images so that they blend in well with the site and don’t interrupt the flow of content, while still serving a visual purpose.
Branding
For the logo, the team went through many iterations with letterpress inspired wordmarks. We decided on a primarily white logo on darker backgrounds to give a more clean look. We went through many color palettes that began as monochrome but later evolved into a warmer vintage-but-modern palette to portray the Museum's charming atmosphere.
Accessibility
We added alternate text to each image so that it is legible by a screen-reader. If the video on the home page doesn't load, it is replaced with a static image of typographic drawers. There is a pause button on the home page video if the user does not want to see it loop anymore, or it is too distracting.
We decided to use a sans-serif font for the body text and a serif font for the headings. This created a subtle contrast as well as hierarchy between the two types of texts. The off-white background makes the site easier on the eyes than a bright white background would. Any all-caps text is stylized in CSS rather than typed in HTML. This way, a screen reader will read it normally and not as an acronym. We incorporated multiple hover effects to each link element to indicate that they are clickable.