Next ↝
JW-Thumbnail-1.jpg

Joey Watson
Web Design

Kansas City ceramicist Joey Watson approached Special Edition Co. to redesign his portfolio website. He didn't want this to be only a website, but also an engaging and playful experience for the user, much like his artwork. 

We created a fun, organic and loopy aesthetic for the website. The textures for page backgrounds and many of the hover states are all sampled directly from relevant photographs of Joey's work. We utilized HTML & CSS adjustments and added lots of motion and unique user interactions, including sounds and gif hover states. The site offers a complete archive of his work, an artist bio and a link to his web shop. 

Check out the site!

 
JW-BottomGif.gif
 
JW-SiteMapping.jpg

We brainstormed with Joey on the look and feel for his portfolio website. He wanted the user experience to be very immersive and interactive, much like the experience he hopes to provide when someone handles his ceramic pieces. 

We learned about Joey's creative process, created visual moodboards and researched unique interactive web approaches. We mapped out the architecture of the site and began with lots of analog sketching.

 

Analog Wireframes / Sketches

JW-AnalogWireframes.jpg

Low Fidelity Wireframes

We digitized sketches and began creating low fidelity wireframes to
work out the information architecture of each page.

JW-DigitalWireframes.jpg
 

High Fidelity Wireframes

We began adding fidelity to wireframes with imagery and colors/textures
sampled from Joey's work. We reviewed concepts with Joey and iterated
until pages felt right. 

JW-ScreenDevelopment.jpg

Motion Exploration

Joey wanted unique hover interactions and background animations.
We explored various shapes, textures and pacing to strike the right balance.  

Web-Gif-Test-2.gif
about.gif
breathe.gif
Web-Gif-Test-1.gif
works.gif
shop.gif
Web-Gif-Test-3.gif
altar.gif
 

Solutions

The final website reflects the playful nature of Joey's work, while also providing a clear path for the user to navigate through his portfolio. It includes various looping gifs, audio clips, interactive easter egg moments, wonky animations and textures from Joey's ceramic work.

 
 

Home Page

The home page features a pulsating gradient background with textures sampled from Joey's work. Page links also feature sampled textures and animated hover states with audio clips created by Joey.  

 

Work Overview Page

The work overview page also features sampled textures and animated hover states with custom audio clips representing each type of work. This page allows the user to select which category of work they would like to view.

 

Work Category Page

Each work category page provides a brief description of the work and links to each piece to learn about the process and view more images of the piece.

About Page

The about page features Joey's photo, artist statement and a downloadable resume. The gradient background features more sampled textures and a custom audio clip created by Joey with one of his ceramic instruments plays in the background. Playful interactions like hovering over Joey's image to change colors and the ability to move elements around the page offer moments of discovery for the user.

 

Primary Pages

Work Pages Pages

Page Flow