Rebranding SD Hacks

With SD Hacks 2017 over, I’d like to share the insights and process behind this year’s design and visual branding.

Accompanying styleguide

My role: Designer + Frontend Developer

Motivations

After SD Hacks 2016, I and some of the SD Hacks team took some steps back and evaluated where our visual brand stood as a whole. Our previous branding (and site) was a combination of themes, with a moderately corporate color scheme. Together we decided to start a rebrand SD Hacks 2017, deciding to keep the tried and true logo and fonts, but designing from the ground up.

Core Values

To begin, we asked ourselves what SD Hacks stood for, and what we’d like each and every attendee to experience when attending, summarized into three statements. We arrived at the three core values: empowerment, collaboration and innovation. In more detail, SD Hacks is about:

• Empowerment - We provide all hackers with expertise, hardware and software so they can build their dreams.

• Collaboration - We’re all here as fellow mentors, 4am-ers, and friends.

• Innovation - We strive to make each SD Hacks a memorable learning experience for all.

Colors

We sought to connect our core values and the sunny, beachy aesthetic of San Diego, arriving at a vivid (but not overly bold) color scheme. Some of our oceanic colors doubled as color signifiers for interactions - we were careful to not use those outside of our graphics except when their meaning was relevant.

We chose calm, cool backdrops to let our primary colors stand out.

For backgrounds and parts of some visual elements, we slightly lightened or darkened our primary colors to produce shadow.

Typography

For headers, we kept our Hack Day typeface Reem Kufi, an orderly font with circular o’s and a’s, but with slight quirks, like a z with a twist and upturned, optimistic e’s. For text, we kept last year’s tried and true Source Sans Pro.

Defining Visual Elements

Given our core values, we decided on a theme with isometricism to define our brand.

We focused first on the cube, the most basic of isometric elements and often the first 3D shape one learns to draw. Like our previously used hexagon, the cube easily tessellates, but adds a new dimension and visually builds upon itself into more complex designs.

Core Values Represented

With cubes and our colors in mind, we created small graphics representing each of our core values.

Isometric Graphics

I also created some isometric graphics for our splash page and various parts of the website and application, using our brand colors when possible.

Backdrop

For our website, I embraced the top-down visuals of isometricism, and created a slanted, striped backdrop showing the beach. I aligned the angles of our isometric stripes with our hexagonal logo, further anchoring their use.

Website

With the colors set, I began drafting high fidelity mockups, experimenting with isometric shapes and stripes that played well with our hexagon logo, and featurettes for each of the core values. I also created a styleguide to speed development.

After rounds of feedback and gathering finalized content, I set out to create this splash page in Pug, SASS and some JS for animations.

Shoutouts

Thanks to the design team members Ming Ming Liu, Nick Thomson, and Rishi Dhanaraj for help in the brainstorming process and feedback on UI designs. Big shoutout to Nick Thomson who seeded the isometric idea and made this initiative possible on the technical front.

See the finalized site here (link):