Lily Sarah Grace
In April of 2014, we received an email from our friends at Osk Studio about building a website for an arts foundation. Osk was looking for a partner to build the front-end of the site. After a few emails back and forth, we had a phone call with Osk to go over the details of the project.
The project was a new site for the Lily Sarah Grace Foundation. The more we learned about the foundation, the more excited we were about creating a site for them worthy of the work they were doing. Arts education is being cast aside in America, and LSG is doing wonderful things to counter that trend.
Osk had already completed most of the design work in-house. What was left for us to complete were the interaction states and the ways the design would need to be altered for smaller screens. We created a project outline that set out three distinct deliverables that would get us to an on-time launch.
We believe strongly in taking a systematic approach to the sites we build. While this works best with large sites with generous deadlines, we don't like to shortcut it. Thinking of a website as a system made up of smaller components is beneficial even for a smaller site like the one we were building. Osk had given us a really beautiful and well-structured set of design comps to work with, so we set about breaking them apart.
Once we had our timeline together, we started building out a working prototype of the design that would eventually become the completed site. We love to get to a functioning prototype as soon as we can, and Osk was totally on board with reviewing our work and suggestions as a fully functioning website.
Working with the desktop designs as our starting point, we quickly set up the page templates and styled them to match the designs that Osk had given to us, with consideration for a flexible width. From there we made specific adjustments to the components that were not working on smaller screens. The navigation needed to be redesigned, and many of the large typographic elements of the site needed resizing. This process was repeated as we continued to build out the site's functional pieces.
One of the more challenging aspects of the build involved the seamless transitions that we incorporated into the bottom of each page. The goal was to have a preview of the next page that would seamlessly animate the transition to the new page when the user clicked on it.
Aside from the page transitions, we also spent considerable time getting the typography right for the page headers, and experimenting to apply the purple cast to all of the site's images. For the latter, we experimented with SVG filters, but in the end, the simple approach of a semi-opaque color overlay provided the most desirable results.