Project Overview

Client : Pratt Fine Arts Center
This project is a visual system redesign project for the client.
I redesigned the client’s website and suggested a mobile web page as a new channel, including a poster design.

Role

Visual Designer
UX Designer

Duration

10 weeks
Autumn 2022

Tool

Figma
Adobe Photoshop
Adobe Illustrator

Team

Solo


Pratt is



A non-profit arts education and resource center in the Seattle's Central District.
It is the facility where absolute beginners and established professional artists work side-by-side.

Pratt offers various classes, such as Glass · Jewelry · Drawing · Painting· Printmaking · Mixed Media · Wood/Stone/Metal · Youth&Teen

Pratt’s vision is to foster a creative, inclusive art‐making community,providing access to quality education and professionally equipped studios for everyone. Pratt promotes the joy and transformative power of art and actively support the development of visual artists.

Problem

How might we make Pratt Simple, Welcoming, and Artsy?


The client’s current website looks a little bit outdated, dull, and complicated.
The new design goal is to make the website look more simple and well-organized in structure, giving off more welcoming vibe to visitors.
Last goal was to make Pratt’s website feel more artsy.


Before
After

Design Goal

1. Suggest a new branding style to create an artistic and welcoming vibe.
2. Use students' artworks on the website to create an embracing and artsy ambiance.
3. Create a simple and well-organized information architecture to give a sense of efficiency to its users.

Moodboard

I create a moodboard for new branding
The website layout will be Simple, Bold, and Geometric shape for website layout.

Logo

The logo represents the first letter of Pratt, using orange tone-on-tone colors to create a vibrant vibe.
the half circle is inspired by the palette shape, and the pole-shape is inspired by a wooden stick.
The logo can be used without the name of the institution.

Grid System

Standard Style
-Webstie grid is a 12-column standard grid for 1440px.
-Mobile grid is a 4-column standard grid for Iphone14 pro.
-All images fit within the columns but banner image and circles can be extended to edge of page
-All texts are left aligned except for text in the image
-For example, text in the banner and button can be center alighed. Text inthe triangle at conner can be right aligned.

Typography

Color

Used yellow to orange tertiary color combinations to give a welcoming, warm feeling.
Artworks have already various colors, so used minimal colors for the website.

Imagery

Images use less saturated images. (via adjusting fill levels or adding additional transparent layers)
So that images feel more cohesive, and have space margins around them for more centralized focus.
Artworks do not need to be zoomed out on, as long as the art fits into the frame well.

Website - Main page

Website - Secondary page

Applied System - Website

Main Page
Secondary Page

Applied System - Mobile Website

Poster