AGI

  • Project type: Professional work
  • Roles: Designer
  • Tools: Figma, Photoshop, Illustrator

Overview

Mason Media is a new, upcoming production company that intends to buck the norms by innovating and creating media by diverse creatives.

Challenge

They had a branding identity already set to go, they just needed an awesome website to go with it. They wanted something dark that could sell their vibrant color palette well, and to include little doodads that could reflect on the "mason" part of their name.

The content of the site would be fairly standard, so the site needed some bells and whistles to make it interesting!

Solution

I created a design for them that fit their identity, made the content easy to be found and readable, but with touches of excitement to be found.

Deliverables

Homepage

Scroll

The site is meant to have a sticky sidebar-style "header", following the user as they scroll, as can be seen in this video of a prototype.

They wanted some design elements that noded toward the "mason" in their name, and one of the ways this was included was through the click-to-open menu, which would open blocks separately until they all come together in one cohesive screen. You can see the idea in action in these prototype videos, one for desktop view, the other mobile.

In this video are a couple miscellaneous interaction animations, one of which leans into the "mason" aesthetic again.

Team Page

Scroll

Contact Page

Scroll

Style & Components

Here are some bits and pieces of style guides and components for both desktop and mobile views I built to ship off to the developer.

Typography notes
Color notes
Card components
Components for blurbs
Components for footer and contact sections
Forms and buttons states