Designing Hack@Brown 2019
by G Cha (RISD ‘20) and Mark Séjourné (Brown ‘20), Design Leads
Hack@Brown Values
Since 2014, Hack@Brown has made its mission to create a space celebrating diversity, inclusivity, and mentorship. Specifically, this aim manifests in:
- Outreach toward first-time hackers and historically underrepresented minorities in the technology industry.
- Logistics to make the event accessible to all, regardless of physical ability.
- A branding language that goes against the grain of tech design (often slanted toward the masculine) in order to communicate approachability and inclusion.
This year, we wanted to emphasize the concept of playfulness through computer science in our theme “Recess.” Contextualized in a present geopolitical climate of conflict and constraint, and within an industry that often perpetuates a culture of stress and high stakes, we wanted our hackathon to offer an opportunity for escape, for free-for-all creativity, and for room to play.
Hack@Brown 2019 is a celebration of discovery, unbounded by classroom rules and strict guidelines. It is a recess in its truest form.
Building Blocks
Fonts
Hack@Brown has always used clean, appealing sans-serif fonts like Apercu in 2017 and Circular in 2016 & 2018. GT Haptik stood out to us as a fun, friendly, yet unique display font especially for the extending legs of the “R” and “Q” into the counters and the target-like “0”. It’s geometric and grotesque and interestingly designed to be easily read blindfolded and tracing with one’s hands. Work Sans served well as a secondary typeface, used for body text and more functional purposes.
Colors
In the past, our design had often employed pastel colors to communicate approachability. This year, in accordance with our theme, we opted for a more varied and saturated palette. We wanted a bold look, in line with the call to take risks and learn through doing.
Graphics
The primary way in which we differentiated our brand from the ones before it was through creating imagery in three dimensions. We, like the entirety of the tech community, have played with isometric illustrations for some time now, but we decided that it was time to make a clean break from simple gradients, geometric shapes, and “human” illustrations. We aimed to push a boundary in tech’s design standard. Instead of trying to create an organic aesthetic, we moved in the opposite direction: We used Cinema4D to model inorganic scenes in unexpected ways.
Website
The use of 3D renderings presented new challenges in our web design. We wanted to build an immersive and interactive experience — a lofty goal for a team with no prior experience in 3D modeling or Cinema4D. In particular, we learned the necessity of maintaining consistency among lighting settings, camera perspectives, and material settings.
In order to seamlessly integrate our 3D imagery into the website, we created the illusion of full bleed images. Each section of the landing page had a new background color and accompanying rendered scene. The imagery clearly conveys a “recess” setting, but with a technological twist: a seesaw made of a video game controller, a hopscotch game comprised of binary numbers, tic-tac-toe played with buttons.
Among our biggest challenges was creating a responsive framework for our site. We needed our images and text content to be able to move around without ruining the seamless effect we worked so hard to achieve. In order to accomplish this, we made our renderings transparent and placed them on top of a solid color background, so the imagery and text could move freely within its section of the page in order to fit any screen or window size.
To diverge from the vertical directionality of the landing page, the registration form was designed to move horizontally and the individual pages would appear to seem like one long scene. The dashboard is static itself, with all the elements from the registration slides all together in one scene.
Coded by our wonderful Dev team: Lena Renshaw, Kevin Du, Noah Hashmi, Cintia Araujo, Serena Martin, Brandon Lee, Yilu Zeng
Publicity materials
We carried our three-dimensional branding into our print and web publicity materials as well. All in all, we made over 40 scenes. This year, for each workshop, the team produced both a horizontal banner (to be used as Facebook event cover photos) and a vertical poster to be printed and hung. Advertising the events in real life offered another chance for a more immersive brand experience at the event itself.
To build anticipation for the hackathon weekend on social media, we created a series of motion graphics, counting down the days until hackers arrived. This allowed us to dive deeper into the workings of soft body mechanics, gravity, emitters and randomizers as well as refreshing our knowledge of keyframes and animation.
One of the things we found challenging with merchandise was translating our 3-dimensional theme to 2-dimensional vector designs (limited due to manufacturing processes and budget). We focused more on typography and recreating as much of the 3-dimensionality as possible using perspective lines.
To bring the idea of 3-dimensionality to life, we wanted to make giant life size versions of our logo to further the experience. These 4-foot tall foam letters took 2 weeks for 2 members (~50 hours each). We severely underestimated the amount of work (and glue) it would need. In particular, we discovered:
- spray paint is not friendly to foam
- spackling/sanding takes a lot of time
- joining over 8 pieces of foam to create a curve is really difficult even with support rods, styrofoam glue, cement glue, and spray adhesive.
We’re proud to say this year we had around 400+ attendees participate in our hackathon. We had a great keynote speech by professor and designer Cas Holman about the essential elements of risk, exploration, and imagination in her work designing toys for children.
~52% of our hackers were non-male identifying and ~55% were first-time hackers.
We’re so thankful for everyone who came to hack, mentor, or volunteer and we hope our design helped make the event a more friendly, inclusive hacking environment. You can watch a recap of the event at https://bit.ly/2Hmn7Cq! (Made by the amazing Anessa Petteruti)
Made by our wonderful design team: G Cha, Mark Séjourné, Lulian Ahn, Ryan Kang, Ryan Nguyen, Yilan Sun, Alberta Wang, Gabby Widjaja.
Hack@Brown is an annual event at Brown University where hundreds of students from across the country come together to learn how to build things using technology and design. If you’re interested, you should follow us on Facebook or Twitter to see what we’re doing next year!
