MHacks is a 36-hour hackathon run by University of Michigan students. At MHacks, we want to help you turn your ideas into reality. You’re welcome to come with or without a team. We’ll provide you with all the resources and mentors you need to help you work on something cool or learn new skills. You’ll have the freedom to create a product, learn new techniques for your future work, or just have fun working on a project with friends. Moreover, we will offer you a chance to network with other creators and professionals. For newcomers and veterans alike, MHacks is a weekend experience you won’t want to miss.

November 7, 2019

Intramural Sports Building

36 hours

Brand Guidelines

Logo

The ‘M’ is a mark that has been associated with MHacks since its inception. While it remains similar from year to year, there have been detours in the ways it has been represented. Since we were going with an arcade/retro theme this year, we decided to make it sharper, with angular cuts that reminded us of the splash screens and logos of arcade games we loved.

We also needed a wordmark that we could confidently place anywhere we saw fit. Instead of looking for a font that we thought would work, we developed our own based on prominent game titles to make the MHacks experience feel more immersive, as if our hackers were taking part in a game.

The resulting mark took life of its own and we used it in most of our videos and promotional materials. It opened new opportunities for animation and motion graphics to what would have been and otherwise static brand.

Type

Our decorative font of choice was Arcade Classic, a pixel-based font that was great when printed and looked clear on screens too. It looked especially great in our SimHacks app, where we displayed usernames in the form of a scoreboard, much like an arcade cabinet.

Any excuse to use a monospace font is a good one, and we didn’t want to pass up the opportunity. We felt it would have instantly resonated with our hackers and rounded out our retro arcade theme. Monofur in particular is a font with friendly curves and a distinct profile.

Usage

Playing with the logo is encouraged; the color, texture, and visual effects applied to the marks can be varied from case to case. However, some guidelines have been written in order to preserve the readability and consistency of the brand.

do NOT outline the logo

do NOT stretch the logo

do NOT blur the logo

do NOT take the logo apart

make sure the margins around the wordmark are greater than or equal to half its height.

The sizing of the ‘M’ can be highly variable, scale it however you see fit. Just make sure the signature angles and points are recognizable.

Collateral

business card (front)

business card (back)

nametag

Takeaways

There was an innate drive to make this a big event from everyone involved. MHacks has a legacy and there was a lot riding on us to make sure it was an event worth attending. Stressful, and at times frustrating, it was hard to get it off the ground during the initial stages.

After a few meetings in person, we managed to pull a few visual references we all understood and felt inspired by. We iterated separately and came together during the week to converge and decide what worked and what didn’t, which is how we arrived at the wordmark. It started with just plain text, which turned into custom type, and then it was given dimension, a quality we liked about old video game titles.

d

The logomark was a result of us drawing on paper until we arrived at a form we liked, and then vectorizing our favorites, choosing the one that fit naturally with the wordmark.

What you see above wasn’t finalized of course, but it enabled us to work on other parts of the branding until it felt like we were piecing together parts of the puzzle. We finally started to understand what the brand was and what we wanted to do with it.

I started rendering the logo over an animated 3D background, and got it looking pretty cool. That was a good start but there was more to be done, which is what avalanched us into what we ended up with. It didn’t take long before I started experimenting with the logo in its own 3D space, giving it new properties and treatments I hadn’t considered before.

My favorite part was the creation of the animated teaser video. I had a good intuition for the motion and animation, but sound editing was unfamiliar to me. It got a lot easier once I nailed the timing for the individual transitions and animations, because I started hearing it in my head.

It was an exciting project, this was the first time I got a chance to try some more advanced compositing techniques. I juggled Illustrator, Blender, After Effects, Premiere, and Photoshop which is more than I’ve used for a single project to date.