Portfolio Site for William Keyser

Tools: Webflow, Figma

Role: Web Designer, Webflow Developer

Context: My grandfather, William Keyser, is a prolific abstract contemporary artist and furniture designer with a career spanning over 60 years. He hired me to redesign his website.

The Goals

We identified three goals for the new design:

  • Leave a legacy. His website should be a place where people can get a holistic understanding of who he is as an artist.
  • Make it professional. The new site should elevate his work and leave a professional impression.
  • Improve the experience. My grandfather knows through first hand experience how difficult it is to navigate digital interfaces for people his age. He wants a website that will enable people to easily explore his work.
a computer with a black and white website on it that says: Contemporary artist creating dynamic abstract artworks.
I took William Keyser's artifacts and documentation of his body of work and transformed his older website into a streamlined experience for the user.

The Design Process: Problems and Decisions

Make every artwork shine

My grandfather has a lot of work. His original site didn't scratch the surface of the more than 200 pieces he's created and documented during his career.

The original site could only be browsed by discipline - sculpture, painting, furniture, and ecclesiastical. This worked, but there would be a problem if more pieces were added

I realized that if put the work in order of date, and kept them in categories by discipline, everything but the oldest or newest work he completed in that category would be hard for the viewer to discover.

The solution: Providing multiple ways to browse - by time and by discipline - gives a chance for each piece of work to be discovered and enjoyed in different contexts, and allows the visitor to see the evolution of his work from the 1950's until now.

A diagram that shows how the discipline pages need more scrolls to get to the older content. If a user wants to see older content, they can click on the oldest decade page instead.
introducing decade pages allows the viewer to see older work more intentionally and easily

Create a legacy

After some brainstorming, I came to the conclusion that for the website to capture a lasting legacy of his work and professional life, the visitor needs to be able to learn more about his thought process, what was going on in his life at the time he was creating it, and the impact it had.

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.

The solution: I created multiple places for William to add information about his process, artwork, life, and accomplishments throughout the site so the visitor has the opportunity to understand who he is as an artist and where he's coming from.

a section of the website titled extra featured materials, with a picture of a book and a description about the book next to it.
The Extra Featured Materials section highlights objects, awards, and memorabilia from certain decades and the context surrounding them.
The top of the 1990s page with a big paragraph of text under the title.
Each decade section provides space for reflections and descriptions of Keyser's approach to art and design at that time, as well as other things going on during his career.
The top of the Painting page with a big paragraph description under the title.
Each discipline section provides space for descriptions of Keyser's approach to that discipline as a whole and his affinity for each medium and category of work.

Structural details and shapes

I drew upon these patterns I see in his work to inform the stylistic decisions I made:

  • Dynamic. There is a lot of sweeping, jutting, energetic lines and dynamic shapes that evoke movement in his work, even though they stay still.
  • Structural. His wood work is built with planning and care and is structurally robust. Even the paintings he creates have structured lines and shapes, and often  incorporate materials like metal and wire mesh.
  • Geometric. His work has a lot of emphasis on interesting, geometric forms and not much filigree or organic details.

The decision: I incorporated thick, contrasting borders and lines, as well as dynamic, geometric shaped containers for elements.

The lines and forms in William Keyser's artwork informed the visual design of the decades and disciplines navigation sections.
clicking through the decades on the home page carousel, which rotates in a circle.

Font Selection: Retro, Contemporary & Timeless

I put together a list of display typeface choices that I felt created a look that complemented his art and the timespan of his career.

Together we eliminated ones that drew too much attention from the work, or had letterforms he didn't like the look of, such as the stacked lowercase 'a.'

The decision: I used Newake by Indieground Design for headings and IBM Plex Mono for the body text.

the name 'William Keyser' listed in different fonts with the selected fonts indicated with a check mark
Font list and the decisions we made

Color Selection

I wanted to choose a monochromatic palette that did not draw attention away from his work, but amplified and complemented it as well.

The Decision: I chose a tan and white to add to an almost black, dark grey in order to create an open, gallery-like energy to the space around his pieces.

tan, dark grey and white
The colors I chose to compliment his artwork.

Outcome

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

My grandfather might be a biased source but here is an example of a non-solicited complement he has received:

I feel fortunate to see your work through this website which is a tribute to your creativity, intelligence, and growth over time.  [...] The website is terrific! Navigation is intuitive and robust. - Stephanie

Thank you for taking the time to explore this case study. You can browse the site below on desktop or visit it directly atwww.williamkeyser.com