Berkeley approached us to not only build a website for an exciting new project but to also develop its brand identity from scratch.
The project was the Berkeley Institute for Data Science (BIDS), a new initiative to provide a common collaborative space for research fellows, faculty and anyone at Berkeley working with data science in some way.
The White House hosted an event to announce the initiative, which is funded by a $37.8 million grant from the Gordon and Betty Moore Foundation and the Alfred P. Sloan Foundation. Berkeley is one of three institutions to receive this funding, in addition to New York University and the University of Washington.
Now that the site is live, I’d like to share some of the processes I used to develop the identity and site design.
Mood Boards
I started with some exploration. What is big data? What does data science look like? How far can we push a visual motif that implies big data without being too literal or narrow in focus?
With some smart keyword guessing I hunted down images from Designspiration and Google Image searches, and used Niice to collect a moodboard of related reference images. This got me familiar with some data visualization techniques and started turning the gears in my brain.
Time to sketch! I like to limit my creative output to paper early in the process to explore more ideas quickly. I don’t expect much from the sketches at this point; I tried a lot of different things and hunted for visual clues that could lead me in new directions.
Getting Digital
Sketching yielded a few interesting ideas; I was ready to digitize some of them and start to explore typography in Illustrator. This included some pretty rough options (shown below) that I never presented to the client, and a handful of acceptable options that I refined into our first deliverable.
Presentation
I boiled these rough explorations down to three distinct design directions. I had a good feeling about using a dot-and-line motif in some form. Here are a few of the highlights from the first round:
Refinement
From here we were able to narrow to two possible directions for refinement:
We also needed to account for an acronym version of the logo to be used in some situations:
The client selected the second option with concentric, curved lines. For the final logo we moved the lower dot to the bottom-right to function as visual punctuation. We were already doing this in the acronym version and it kept things a little cleaner:
Honoring the Brand
I knew we would need to comply with Berkeley’s brand guidelines, which are conveniently available on this public website. However, the guidelines provided a lot of flexibility in both color and typography, which gave me opportunity to explore.
I used Freight Sans Pro for both the logo and throughout the entire site design. Some of our early concepts included Freight Text Pro (a serifed typeface), but we opted for the more contemporary feel of all sans-serif typography.
The core color palette was lifted directly from the brand guidelines, with some minor modifications made for hover states or secondary UI elements.
Fortunately, the brand guidelines are well designed and already very functional for use on the web! This made it easy to design a site that both matches the Berkeley identity and has a unique identity.
