A Designer’s Intro to Hackathons

(WIP)

Chen Ye
Chen Ye
Feb 2, 2016 · 11 min read

A guide for students coming from traditional design school backgrounds who are interested in diving deeper into tech, hacking, and product design. I’ll focus on how you can apply your design experience to hackathon-scale projects, give examples of cool things people have done in the past, and link you to resources for getting started with similar projects.

You’ve gone through Foundations. You know your aesthetics, your principles, your color theory, and how to challenge people with design that rllymakesuthink.

Now you’re at a hackathon. You’ve gotten your swag, eaten some food, and sat through hours of API talks. What now?

There are lots and lots of different kinds of hackathons, with different emphases.

Some, like HackDuke, CivicHacks, and PennApps Health, are focused on projects for social good, and exploring the practical ways technology can improve everyday lives.

Others, like Hack@Brown, Unhackathon, and Hack@Smith, are focused on learning new things, and having a terrific experience for newcomers.

There are also the large mainstays like PennApps, MHacks, and HackMIT, that try to do a little bit of everything.

And finally, many tech companies like Microsoft and Facebook host internal hackathons, which produce everything from Facebook’s like button, safety check, and profile filters, to a Microsoft project to allow ALS patients to move their wheelchairs using only eye-tracking.

Luckily, these things are all about trying new things out, and working on things you normally don’t, so there’s not really a wrong way to rock a hackathon. But, I’d like to give out a few pointers and ideas of what people have done in the past, and give out a few links to resources and guides that will get started in the right direction!


Interesting Hacks (and how to get started):

Hardware hacks are all about messing with the physical. They range from things that are super linked to the traditional digital world, like smart mirrors or tables, to things that don’t require a single line of code, like a portable shower, and everything in between,

They can range from the silly to the serious, and be relatively simple, relying on prebuilt hardware, or complex, developed from component circuitry.

Getting Started:

If you’re going to an MLH Hackathon, they will likely have a Hardware Lab set up. You’ll be able to check out equipment for the duration of the event.

At the top, there are “self-contained” devices like the Pebble smartwatch, and Google’s Project Tango — a phone that can scan the real world into 3d. These devices have their own software suites and experiences that allow you to start developing on their platform. They don’t need to be combined with other things in order to be useful (but you are at a hackathon, so there might be some interesting projects that do use them!).

There are high-level “complete package” sensors and devices like the Oculus Rift, a virtual reality helmet, the Leap Motion, a sensor that can read your hand gestures, and the Muse Headband, a device that can read your brainwaves and detect your emotions. These devices all offer high level SDKs, which are software kits that help you integrate them into what you are making, and can do a lot of processing work for you (interpreting an emotion or hand gesture for you, instead of you manually reading the sensor signal, for example). They are generally used in combination with phones and computers.

Low-level circuit controllers like the Ardurino, Particle Core, and associated circuitry and chipboards fill out the hardware lab. If you’ve taken an engineering class, you’ll be right at home, but it’s also really easy to get started by going to a workshop, reaching out to a mentor, or simply following the extensive online guides and resources (and a hackathon is a great way to learn something completely new!). These products are designed for rapid prototyping, being easy to use, and allowing people with no hardware experience to get up and running fast!

Most hackathons will also offer 3D printing and laser-cutting, allowing you to build out structural components of your hack. Laser cutting is generally pretty simple, and most printers can interpret formatted vector documents you can create in vector tools like Illustrator and InDesign.

If you’d like to 3D print, you can either download and print pre-built models from online sites like Thingiverse and Shapeways, or model things yourself. Thanks to the power of modern web development, CAD software that would ordinarily take hours to download and install can operate straight out of your browser, like Tinkercad.

Consider partnering up with an engineer — all of these guides are completable with no hardware experience, but working together with someone is often the best way to learn!

As a designer, the unique skills you’ll have to offer will be your rapid prototyping experience, and UX knowledge. It’s easy to get overly focused on features and capabilities when building a hardware hack, so your role as the storyteller and the amanuensis of the user is particularly important, especially if you’re focusing on a more serious or sensitive issue, such as healthcare and disability assistance.


These projects are my favorite things to do at a hackathon — they’re fun, challenge both my technical and artistic skills, and are usually completable over a week. A hackathon is also a perfect place for them, since it would normally take me much longer to find time for some of the more conceptual ideas I have rattling around my head.

Getting Started:

There are tons of libraries and tools for visualization, generative art, and novel digital experiences. I’ll break them down, going from practical to conceptual.

Mapbox is a fantastic online mapping platform — basically a Google Maps that you can finetune the look, functionality, and experience of. Mapbox allows you to style maps using a version of CSS, and build cartographic visualizations that can be both realtime and static. Mapbox is a great choice for displaying geographic data, telling stories and reporting news, and also for integrating into more general apps that require mapping information, like a public-transit app. Mapbox is supported on the web via Javascript, and on Android and iOS. Get started here.

D3 is a general purpose datavisualization library. D3 supports classical charts and graphs, mapping, interactive graphics, and more abstract, custom visualization. You can use D3 to make games, tell interactive stories, illustrate diagrams, create art (psychedelic), and much much more. Like Mapbox, D3 is a Javascript library, and is simple to integrate into webapps. Get started here.

Chartist and chart.js are also great high level libraries for more traditional graphs and charts, but generally, they’re only useful in conjunction with more standard web development, and less for visual programming.

Finally, Processing and p5.js are the classical general-purpose low-level visual programming languages. The two languages been used to create music videos, compose interactive canvases, draw abstract backgrounds, power large-scale art projects, and run highly custom centerpiece visualizations. Processing is based on Java, and runs on your desktop computer. It’s the older, more mature, and better-supported language, and you can get started here. p5 is a Javascript successor to Processing, and can run directly in your web browser. Get started here.

Many of these tools run on Javascript. I’ll elaborate a bit more on developing with Javascript down below.

As a designer, you’ll bring to the table your knowledge of aesthetics and visual principles, and your experience with conceptual projects. These projects are really great ways to collaborate with developers interested in doing something other than yet another app. A successful visual hack will require everyone to closely collaborate and understand what is going on, and so everyone will get hands-on experience with both development and design!


Virtual Reality. By far one of the most visually stunning, exciting, oh-man-there’s-so-much-possibility fields in hackathon development. From a designer’s perspective, VR is exciting because it is such a new interaction space, where the canvas is still largely blank, and where few standards have crystallized. Who knows, maybe you’ll set the patterns for the next generation of interfaces.

Getting Started:

Getting started is easy, since Oculus Rift has out-of-the-box integration with Unity, a 3D game engine, but VR really lights up when integrated with other devices, sources of information, and experiences. It’s challenge scales to your skill level. Here are some of the tools we use:

Unity is a 3D engine. It’s most well known for games, but its uses, especially at hackathons, are far and wide ranging. Working in 3D is far easier than you’d expect. You import objects into the 3D world, and give them logic, allowing them to interact with each other, giving them physics, texture, and form. You can think of it as a super hackable, customizable version of the Sims. Get started here.

Unity allows you to give 3D objects logic — but how do you create these 3D models in the first place? If you’re a ID major, you might already have 3D experience — Unity supports obj and fbx import. If not, check out Clara.io — a browser based 3D modelling application. You can also find and use prexisting models — models from Thingiverse and Shapeways will usually work, but they are optimized for 3D printing, not digital 3D, and you might run into performance issues using them. The Unity Asset Store also has collections of free models.

I mentioned the Oculus Rift before — it’s a virtual reality head mounted display. It has extremely good support for Unity — once you install the necessary software, you can drag a object into your Unity scene, and you’ll get Oculus Rift support, with all the interactions — like being able to look and move around — you’d expect. As mentioned before, MLH events allow you to check out Rifts at the hackathon. You’ll need a relatively powerful computer to run the device — a MacBook Pro or equivalent should work for the hackathon. Download the drivers here, and follow the guide to integrate the Rift into your Unity project here.

The Rift will work with mouse and keyboard input, but you can also try integrating support with other sensors. The Leap Motion is an infrared sensor that works like a Kinect — you place it on a table or tape it to your Rift, and it can read the space it faces for your hand and finger positions. Get started with the Leap Motion here. The Myo is an armband that uses electrical sensors and motion sensors to sense the orientation of your arm, and a set of hand gestures. Get started with the Myo here. Both the Myo and the Leap Motion have great Unity support.

As a designer, you’ll bring your experience working spatially, understanding how systems tie together, and your visual and aesthetic sense. You might also have pre-existing knowledge of 3D design and modelling, which will be extremely valuable.


Apps

The bread and butter of a student hackathon — there’s a lot of app development going on, and teams often need a lot of design help.

Resources for app design are still a work in progress — and this guide will be updated the next couple of days with more focused resources for onboarding visual designers. For now, the following links will provide a great start:

A general list of resources for designers. Links to free icons, typefaces, colors, patterns, and more, and links to Platform Guidelines for Apple, Google, and Microsoft products:

A list of fantastic design flows and processes writeups I take inspiration from:

https://medium.com/hh-design/great-examples-of-product-design-821c9b29140f

A more comprehensive list of styleguides and design languages I like:

https://medium.com/hh-design/styleguides-design-languages-36b9e6449e60

A list of visualization and visual communication experiences:

https://medium.com/hh-design/visual-communication-dff28f554a7e

Exporting assets from Sketch, and Photoshop:

A fantastic introduction to Product Design:

https://medium.com/hh-design/intro-to-product-design-c2dbbc7809d3


That’s all for now! This is a work in progress. This article will get updated in the next couple of days with more resources, and a more guided experience. Thanks!


HH Design is a community around design in the context of technology.

contribute

HH Design

Thoughts from a community built around design within the context of technology.

Thanks to Stephanie Engle.

Chen Ye

Written by

Chen Ye

Builds; explores worlds when not distracted by cats. SpaceX Design. Ex-@FacebookDesign, @IBMWatson, @Microsoft, @hackatbrown. Brown ’17.5 http://cye.me

HH Design

HH Design

Thoughts from a community built around design within the context of technology.