Joey Watson Ceramics 

Joey Watson Ceramics 

Kansas City ceramicist Joey Watson approached Special Edition Co. to design his portfolio website. He wanted the site to provide a fun and engaging experience for users, much like the one they would have interacting with his artwork.

We created an organic and loopy aesthetic for the site. Page textures and hover state graphics are sampled directly from high-resolution photographs of Joey's work. We experimented with HTML & CSS customization to create unique audio and motion interactions. The site offers a complete archive of Joey's work, an artist bio and a link to his webshop. 

Check out the site!

Kansas City ceramicist Joey Watson approached Special Edition Co. to design his portfolio website. He wanted the site to provide a fun and engaging experience for users, much like the one they would have interacting with his artwork.

We created an organic and loopy aesthetic for the site. Page textures and hover state graphics are sampled directly from high-resolution photographs of Joey's work. We experimented with HTML & CSS customization to create unique audio and motion interactions. The site offers a complete archive of Joey's work, an artist bio and a link to his webshop. 

Check out the site!

My Role
Web Design
Development
Journey Mapping
Information Architecture
Wireframing
Motion Graphics
Animation
 

Client
Joey Watson

Collaborators
Trent Roach
Special Edition Co.

Completed
2017

JW-DivideGIF

Process

We brainstormed with Joey on the look and feel for his portfolio site. He wanted the user experience to be very immersive and interactive with fun moments of discovery.

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

JW-SiteMapping
JW-AnalogWireframes

Low Fidelity Wireframes

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

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

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

JW-DigitalWireframes

High Fidelity Wireframes

We added fidelity to wireframes with imagery and colors/textures sampled from Joey's work. Throughout the process, we collaborated with Joey to review concepts, and continued to iterate until pages felt right. 

JW-ScreenDevelopment

Motion Exploration

Motion Exploration

Motion Exploration

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

Web Gif Test 2
Kansas City ceramicist Joey Watson, Joey's work, low fidelity wireframes, Motion Exploration, Joey's ceramic work,
about
Web Gif Test 1
altar
shop
Web Gif Test 3
breathe
Kansas City ceramicist Joey Watson, Joey's work, low fidelity wireframes, Motion Exploration, Joey's ceramic work,

The Outcome

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. The portfolio experience is also fully responsive.

JW-WebOutcome

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 features sampled textures and animated hover states with audio clips representing each category of work. This page allows the user to select which category of work they would like to view.

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

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

Work Category Page

Each work category page provides a brief description and links to each piece to learn more about the processes involved and view imagery. Additionally, the grid icon by the top right navigation expands for a high-level view of all of the work for quick browsing.

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 using 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.

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 using 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

Primary Pages

Primary Pages

JW-All Pages

Work Category Pages

Work Category Pages

Work Category Pages

JW-Work Category Pages

Page Flow

Page Flow

Page Flow

JW-Page Flow
JW-BottomGif

More Work

SmartVideo Dashboard(Coming soon)

Thicket(Coming soon)

Grocer's WarehouseBranding | Wayfinding | Web

CollectivityUI/UX | Web | Branding

RCMABranding | Web

WebuzzUI/UX | Branding

AEPBranding | Web

BunkrBranding | Web

Port FondaWayfinding

Eye x EarBranding | 3D | Motion | Exhibition

Emma Fisher x SEPrint | Collaboration

Sam Small
© 2019, All Rights Reserved

SS-FooterSquiggle