Pratt Fine
Arts Center
A design system and brand refresh for one of Seattle's favorite community arts center
Project Overview
This project focused on a re-design of the Pratt Fine Art’s center website, branding, and visual communication.
Timeline
Ongoing
My Role
UI and Visual Designer
Toolkit
Figma, Illustrator, Photoshop, Procreate
Problem
Pratt is a Seattle-based hub for arts and maker programming. They offer classes in several mediums and allow beginners to work right along side professionals learning skills such as glass blowing, furniture making, and blacksmithing.
Their current website gives information about classes, upcoming events, and current news. And while I think the current website does a good job of directing people to the information their most interested in. It lacks inspiration, and the information is often overpowered by the cluttered and squished feel of the website.
During my exploratory research I learned that Pratt is over 40 years old, and opened their doors to the public in 1976. I also found that the institution was named after local civil rights leader Edwin Pratt. From Pratt’s website, Edwin Pratt relentlessly championed open and equal access to educational and housing opportunities for all of Seattle’s residents.
Before
Design Solution
Brand Book
Website - Homepage
Website - About Us Page
Packaging
Design Process
Moodboard
Pratt is a Seattle-based hub for arts and maker programming. They offer classes in several mediums and allow beginners to work right along side professionals learning skills such as glass blowing, furniture making, and blacksmithing.
Their current website gives information about classes, upcoming events, and current news. And while I think the current website does a good job of directing people to the information their most interested in. It lacks inspiration, and the information is often overpowered by the cluttered and squished feel of the website.
During my exploratory research I learned that Pratt is over 40 years old, and opened their doors to the public in 1976. I also found that the institution was named after local civil rights leader Edwin Pratt. From Pratt’s website, Edwin Pratt relentlessly championed open and equal access to educational and housing opportunities for all of Seattle’s residents.
Wireframing
I tried out two separate grid system options for the initial wireframes and started to think about how I wanted the structure of the site to "feel." Later, when I went to put content in, both structures came to feel quite limiting and crowded, so while I ended up with features of both initial wireframes, the final wireframes came in with much more whitespace.
​
I also went about rearranging the page structure for route pages. A lot of important information that would immediately disqualify people from wanting to do a hike (e.g. no dogs allowed), was buried throughout the page so I wanted to elevate key route details and bring them to the top of the page.
Logo
The new logo takes inspiration from 70s and 80s fontfaces. It uses an abstract ‘P’ letterform to form a frame. The ‘P’ can be used alone for letterheads and small widths. The font 60Prime is the logo font.
Include info from slides about type of logo
Typography
Two retro-inspired typefaces are used throughout the design. Marleigh is a bold stylized serif primarily for headers while Thasadith is a sans serif font primarily for body text. Give more explicit information about what these font faces are and the benefits of their juxtaposition
Color
A refined retro color palette connects the organization’s history with their modern mission.
A refined retro color palette connects the organization’s history with their modern mission.
Imagery
Images from Pratt’s historical collection are used throughout the website. If historical images can’t be used, images should be kept in black and white with a ‘marigold’ transparency (15%) on top. Images should be square or rectangular and have corners rounded to 15 degrees for small images, and 30 degrees for larger images.
