Project Goals
Project Goals
William was still making amazing artwork, but his web presence was stuck in the past.
He was ready for a website that
- Presented his artwork in a professional and visually appealing way.
- Was easy to navigate and organized, so that his large body of work was a joy to browse through, and not overwhelming or slow.
- Could act as a legacy for his life's work.
The "Before"
Before we started working together, William's website was not optimized for mobile, images took ages to load, and his work was presented as tiny thumbnail pictures, without consistent organization or details about the individual pieces.
![William Keyser's home page before working together](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f30921a63285538b7b670_William%20Keyser%20Website%20Before%201.png)
![William Keyser's painting category page before working together](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f30bec41d693f3bb5bb1c_William%20Keyser%20Website%20Before%202.png)
Achieving the Project Goals
Choosing Professional and Visually Appealing Colors and Fonts
To create a website that reflected William's professional energy and would be able to let his artwork shine I chose colors and fonts that were contemporary enough that they would nod towards the aesthetic of his pieces, without drawing attention away from them.
The monochromatic black of his original website was working well to not draw attention away from his work, but it didn't amplify or complement it.
I chose a tan and white to add to a dark grey color in order to add a more open, less suffocating energy to the space around his pieces.
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f320d4842f23691c76e8c_Color%20Choices%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
The specific colors I chose are a reference to both open, non-distracting gallery spaces where his work would be shown, and fundamental drawing and painting materials, such as newsprint paper, charcoal and gesso. Though they have high contrast, the colors are not pure black or white, and therefore easy on the eyes.
Finally, to create a contemporary, functional, and timeless look that matches William's artwork and furniture, I chose Newake for headings and IBM Plex Mono for body text.
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f31f67bfed464e6806718_Font%20Choices%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
Making William's Body of Work a Joy to Browse
William's original website had every page of his site lumped into one navigation bar without a clear hierarchy or categorization.
The only way to view his work was by the discipline of work, and each artwork within was not clearly sorted by the date it was completed.
Furthermore, William had a LOT of work, spanning over multiple decades, and it wasn't easy for the visitor to understand what the trajectory of William's work was from the past to the present due to separating the work solely into disciplines.
It became apparent to me that an additional way to view William's work and accomplishments was needed - people visiting the site should have a chance to browse his work by the date it was completed.
Allowing the visitor to browse his work in multiple ways, by the decade in addition to by discipline, gives the chance for each piece of work to be discovered and enjoyed in different contexts.
I took care to design the interface of each browsing method in a dynamic way. Each decade is displayed in a rotating carousel, and the disciplines are organized in a diagonal fashion, further enhancing the geometric and dynamic aspect of his work.
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f331475f400cce30c628a_Browse%20by%20discipline%20Section%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f34402232881730a12617_Browse%20by%20decade%20Section%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
Creating a Legacy
William's original site had an about page and a resume page to list his many accomplishments, but to act as a legacy and truly provide context for his furniture, ecclesiastical pieces, and artwork, this text needed to be integrated more naturally into the browsing experience.
To provide this context, I included places for William to describe his work, thought process, and accomplishments.
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f358d4842f23691ca2c66_Extra%20Featured%20Materials%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f35ba7844011fb3791840_Decade%20description%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
![](https://cdn.prod.website-files.com/64c7d3eaf2a7d945a12ecd5f/668f35f3acc37f6a5b4ef55f_Discipline%20description%20William%20Keyser%20Website%20-%20Maddison%20Manente.png)
In Conclusion
This project was unique in that it involved sorting and cataloguing a vast array of content and images into easily digestible sections of work. The scope was ever expanding, as the work available for viewing on William's original site was just the tip of the iceberg of content William wanted to display. I ensured that the website was designed in such a way that it would be easy to update going forward and can't wait to see how his work evolves and fills out the site for years to come.
I believe this project was very successful and what better way to complete the project than to receive a glowing testimonial!
The site Maddison designed for me stands uniquely apart from any comparable site in its field. I'm blown away! - William Keyser
Thank you for taking the time to explore this case study. You can browse the site below or visit it directly at www.williamkeyser.com