The Pittsburgh Foundation Website Redesign
Figma, HTML5, CSS3
The Pittsburgh Foundation wanted to refresh of their website. I worked with a team to update the styling and layout of the website, focusing on interactions to the people and events pages.
For this project, the team was tasked to update and freshen the look and feel of The Pittsburgh Foundation (TPF) website, adding new layouts and functionality. Additionally,the website retained the basic global structure (menus, headers, footers). I was tasked with designing the staff page, the individual member pages, the events pages, and prototyping some of the designs from Figma.
Typography and color palette
Buttons and Components
A part of the redesign was to create components that gave the Pittsburgh Foundation website a new and fresh look. This provided for an opportunity to explore different interactions that could trigger when users interacted with components.
Card and Event components
Individual Member Page
To test the design of the card component prototype, I developed 3 different interactions when the user hover overs the cards using HTML5 and CSS3. The team ultimately agreed that the colored border was too much because of resizing issues, and decided to go with the direction of the image scaling.