I designed and coded website for The Shakespeare Press Museum using Adobe XD, HTML, and CSS in a team for a class challenge. Various previous iterations are previewed below to show design journey and progression.
I worked with museum curators to capture the essence of the space to create something that embodies the charm and history behind the exhibits.
The Logo design and branding guidelines were ideated by referencing the gritty metal letterpress pieces used throughout the museum.
The website design won the design contest and is planned to be implemented soon.
Team Members: Rachel Lackmann, Sarah Koep
The Shakespeare Press Museum
Website REBRAND/REDESIGN
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.
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 letter-pressed. 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.
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.