Google Creative Lab 5 website
2017 — 2018
Over 10 versions of a public-facing website to promote, provide information about, and receive applications for the Google Creative Lab 5 program. You can visit the live site at CreativeLab5.com.
This was the first seriously considered design for the Creative Lab 5 website—which sought to foreground the program's alumni in order to lend credibility to the program overall (which previously had almost no online information). It was eventually decided that featuring alumni would pose a legal challenge, so this design—that allowed searching through people via a colored tagging system—was discarded.
The five alumni on the homepage would randomize on load and cycle in new named periodically using a fade out effect.
Scrolling the full list of alumni. The Creative Lab 5 call to action is always visible, along with a small link to a page about the program.
Clicking apply opens a small application window that still allows the user to maintain their context within the overall site design.
Alternate sketches for how the application could appear.
The project brief stated that the site should be straight-forward and functional. This design plays off the idea of a functionalist archive, where all the essential information is compressed into an understandable one-pager.
An alternate version of the archive design, where all the site content is available on one clearly laid-out page. The "Apply" button in the background is positioned in the absolute center of the site and animates on scroll. The "Apply" button also changes state on hover to indicate that is is clickable.
The site is divided into two primary columns, with ever-present text and links on the left and bonus content (revealed on link hover) on the right. Alerts to application deadlines might also appear in the top right.
Blue links might change to color once hovered or clicked, encouraging visitors to explore the site.
Since the content of the site is primarily text, this version of the site foregrounds the type by simply making it large. A minimal directory at the top of the page helps the user navigate the long scroll.
A sketch for a simple navigation bar interaction that plays off the number 5; there would be five dots on load, that would need to be hovered in order to reveal their destinations.
Hovering project names in the projects section would open a large iFrame where visitors could explore the project sites themselves.
A slightly less bold version of the large-type direction. This design uses an accent color and subtle motion to bring the site to life.
The final design for the Creative Lab 5 website. This design uses large Google Sans and a numbered side navigation that stretches to fill the left side of the page.