A Designer’s Intro to Hackathons
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.
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):
My Bathroom Mirror Is Smarter Than Yours
When I couldn’t buy a smart mirror and made one instead
VIA - Visual Impairment Assistant
A few months ago, a member of the VIA group had an experience in the Philadelphia SEPTA subway where he saw a visually…
PocketLab - A field blood diagnosis tool for doctors in third world countries without access to big expensive lab…
COG Hackathon Air Quality Monitor
The idea of this project is to make and inexpensive WIFI enabled air particle sensor that can log it's historical data…
Alco-Mate™ - Pocket breathalyzer that orders you tacos, calls an uber, and much more
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,
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.
Visualization + Procedural Art:
The urban environment is alive with hidden currents of electromagnetic signals. Streams of wireless data surge from…
Plan a ride with Surface, Directions, and Turf.js
View full-screen demoCity bikeshares are a great way to get around if your town has them. But they're only convenient…
The World's Wifi
This is what more than 900 million Wifi routers and cell phone towers looks like. That's one router for every 8 people…
Algorithms are a fascinating use case for visualization. To visualize an algorithm, we don't merely fit data to a chart…
Visualizing MBTA Data
Boston's Massachusetts Bay Transit Authority (MBTA) operates the 4th busiest subway system in the U.S. after New York…
A Visual Introduction to Machine Learning
Let's revisit the 240-ft elevation boundary proposed previously to see how we can improve upon our intuition. Clearly…
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.
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.
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.
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!
3D Worlds, Games, and Virtual Reality
SOMNIACS - Birdly
After conducting flights with thousands of participants all over the world in 2014 and 2015, SOMNIACS decided to take…
Along the Trail
Along the Trail invites you to take a walk around landscapes generated from the data you left on social medias…
Virtual Reality offers the potential to experience wonders like never before. In a matter of seconds, one can emerge in…
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 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.
We set out to help people gather the photos they take with friends. A strong collaboration among our multidisciplinary…
Protray.me - Get a live & dynamic written account of your life based on details you never thought existed.
Parrot | Brian Chuk
So at McHacks 2015, we made Parrot. Parrot is an app that lets you save articles, blog posts, or books to read later…
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:
A more comprehensive list of styleguides and design languages I like:
A list of visualization and visual communication experiences:
Exporting assets from Sketch, and Photoshop:
Exporting Artwork Using Sketch (Video)
Learn how to easily export your UI design using Sketch by labeling and grouping your layers. Sketch has simplified the…
Understanding Sketch's Export Options (Text)
Exporting assets from your designs is a common task. You start by creating and preparing your graphics, then you choose…
Export layers and artboards in Photoshop
Using Photoshop, you can export artboards, layers, layer groups, or an entire Photoshop document as JPEG, GIF, PNG, or…
A fantastic introduction to Product Design:
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!