Portshowlio

SSCA 2014 Portfolio Show Website

My Role

UX (Shared with Holly Torneby)

Project Management (Shared with Holly Torneby)

Responsive Web Development

Portshowlio

Overview: Seattle Central Creative Academy is a graphic design and commercial photography program at Seattle Central College. Each year the Creative Academy hosts a portfolio show to present student work. A steering committee is elected to project manage various aspects of the show. Holly Torneby and I were elected and assigned to the web team.

Problem: Design and develop a website to promote the Seattle Central Creative Academy’s annual portfolio show and house the students’ work that follows the concept of “bigger, bolder, brighter.”

Solution: A responsive website with simple three page navigation that presents student work in a bright, colorful way.

Content Architecture

Holly and I decided that she would manage the design side of the project and I would manage the development side. We would work on the user experience piece together. We started by auditing the previous year’s portfolio show websites as well as several portfolio show sites from other schools. We discussed pros and cons of each site to determine the content architecture of our site. We also split up our team into visual designers and developers and assigned each person a part of the site to work on.

Content Architecture

Wireframes

At the first meeting we had with the while team, Holly and I led a whiteboarding session to hammer out the wireframes. This is what we came up with. After that, the designers took these photos from the whiteboard and developed them into finished wireframes in Illustrator.


Whiteboarding wireframes

Coming Soon

Since Holly and I knew that the actual site would not be finished for a few months, we thought it would be a good idea to make a placeholder page on the main directory and develop the site on a subdomain. We didn’t have very much information about the look and feel from the branding team, so we had to make due with some colors and typography. Holly designed the site and I built it.
portshowlio_comingsoon_screencapture

Skins

After the branding team established a style guide, the designers created skins for the developers to use for reference.


portshowio_skin_home
portshowlio_students_skin

Site  (Visit Site)

I led the development team to make the site as close to the comps as possible. Three team members primarily executed the development, and helped I troubleshoot and perform quality analysis. We ran into some issues along the way and had to reach out to some developer friends to consult on the javascript functionality of the masonry on the home page and the sorting capability on the students page.

Margaret Darcher Portshowlio Seattle Central Creative Academy

Home Page

Margaret Darcher Portshowlio Seattle Central Creative Academy

Students Page

portshowlio_event_screencapture

Event Page

portshowlio_studentdetail_screencapture

Student Detail Page

Share!

 Facebooktwittergoogle_pluspinterestlinkedinmailFacebooktwittergoogle_pluspinterestlinkedinmail