And if you make a portmanteau of make+marathon, you get…makeathon. How fitting. And so begins the first week of not working frantically at Food+Future coLab and I miss the bright Post-its already.
So to respond to some interest in becoming (holistically and technically) better prototypers and designers, here’s a mental (and I suppose a little bit physical) workout to become a bitchin’ maker. I’ve always had a design philosophy that anyone can get the technical know how to make awesome stuff, no matter how sparse your tools, it’s more how talented at applying those tools and how inspired you are that counts. If you were this good with a pencil you could get away with not having a camera, it’d just be a lot more time intensive. Ergo, this 5 day makeathon is only meant to be a jumping off point with the most basic tools just to give a lay of the land for what’s easily possible.
MONDAY: THE #FANGIRL
The good artist copies, the great artist cheats. -Pablo Picasso
And the same applies to design and prototyping. There’s no reason to reinvent the wheel and it’s really okay to use templates. It’s a great way to start figuring out how things work when you have no idea where to start.
The other question to ask yourself is “What is considered good?” Intuitively, you already know, but it pays off to really study and be inspired. So start off fangirling about beautiful work already out there to start developing your own style. Every designer has a signature and you need yours. (I fangirled about Mitch for years. It’s not thaaat creepy.) You’ll probably imprint on your design hero a little bit and see their influences later on. Pick wisely.
Start off with Dribbble, the ultimate show and tell platform for designers. Drool over the pretty stuff and save the links and screenshot like mad. You might want to save certain pictures for their color palettes (more on that later) or reuse a font pairing (use Font Ninja, a magical Chrome extension that lets you mouse over fonts and tells you what they are, right down to the kerning and px size). Actually, fonts are the unsung heroes in a lot of design, so check out myfonts.com to get a feel for how impactful they can be and scroll through http://fontpair.co/ to find some go to font pairings (this is limited to Google webfonts; do some more Google font pairing for print and graphics suggestions!) This is as much an art as pairing wine and cheese.
You need somewhere to put your stuff, whether in the cloud for on the go, or locally. Make a designspiration folder on your desktop for pictures and snips and start downloading stuff, or Pinterest is great. I also love Tumblr as a platform for keeping multimedia inspiration.
tl;dr your workout for day one is:
3. Save a picture with a color palette that really speaks to you. 3 reps.
4. Download Font Ninja and explore some of your favorite websites/brands.
TUESDAY: THE FLATLANDS
If you have a Mac, just go get Sketch. It’s the best $99 you’ll ever spend and it covers you for cross platform UI and so far as I can tell is basically a powerful Photoshop+Illustrator combo made for the digital age. Then go make the basics of an app interface. Tutorial here. It seems pretty clear and intuitive. After that, why not take a concept from the last three weeks and design an app/website based on it? Find tutorials as necessary, although they’re a bit sparse for Sketch because it’s so new. That’s about as far as I can take you there, because I’m a PC user.
BUT if you want something more traditional with more resources for tutorials, I suggest the Photoshop+Illustrator combo. What’s the difference/why should I use both? Read here. Adobe’s Project Comet is the answer to the complaint of two separate applications, Sketch is the competitive reason why Project Comet was born.
In simple terms, use Photoshop to manipulate graphics to import into Illustrator to layout. Photoshop is where you do all your modifications of existing images and to tweak things, Illustrator is where you create logos and images that can be scaled up or down. It’s like if Photoshop were a painter’s brush and Illustrator were more of a chisel. Download both from Adobe for a trial, and do some tutorials!
You pretty much have the 2D world at your feet with those. But remember what Picasso said about stealing…go find some templates and manipulate them for yourself. Usually instructions are included with the zip files. Collections like these might seem like they took a lot of time, but actually these are templates where only the logo art needed to be changed out. So start curating a collection for yourself that you can go back to and use for rapid prototyping.
tl;dr your workout for day two is:
1. Download Sketch and do this tutorial (but if you don’t have a Mac or don’t have $99 lyin’ around, go to #2)
2. Download Photoshop and Illustrator here for a 30 day trial. If you don’t want to commit to the download, pixlr.com from Autodesk is a browser alternative that’s pretty similar. Walk yourself through some Photoshop tutorials and then some Illustrator tutorials. Adobe does them really well, but here are extra helpful ones. Really, you can do a lot with just a few tools though.
3. Design yourself a simple logo in Illustrator. And then read this to educate yourself on what format to save images in.
4. Grab a template from here or bonus points for finding more templates elsewhere, and put in your own logo. DesignBurger and Dribbble have good ones sometimes. Share!
5. Acquaint yourself with other ways to speed up your design process. Pre-made icons (Noun Project), UI kit (thanks, InVision!), iPhone interface templates, etc. Think about interfaces you interact with daily — there’s probably a template for it. Download them, and share!
6. If you’re feeling extra crafty, just take that iPhone template or UI kit and build out a sample website. Save them as .jpegs to use tomorrow.
WEDNESDAY: THE DIGITAL AGE
It’s no lie that we have a lot of daily screen time, and a lot of solutions we come up with are tech laden. How do you deploy them to reach a lot of people, quickly? The internet.
Prototype level: InVision and Keynote (iOS app) you’ve probably heard of (the output is an awesome, real seeming prototype, the input is those app screens you tried making yesterday!) Wix, Squarespace, Tumblr, Wordpress, Weebly are also options for making your own website. Theses are quick drag and drops with varying levels of customization and a giant berth of tutorials.
- Download a web template. Just Google ‘bootstrap template’. Twitter Bootstrap is a powerful tool for building webpages and here are some of my favorite free ones.
- Download Sublime as a text editor to play around with your template. I believe there are better ones specifically for web dev but I love this one for multipurpose use. Open up index.html from your web template both in your browser AND in Sublime and play around with what’s in Sublime. Refresh your browser to see what happens.
- Read this. It’s a lot of basics. Now go play around with index.html and the corresponding things in the css files. Also, check out the img folder and see what happens when you change the images. Trial by error is a good way to go here, but if you want a walk through, read this. It’s got nice links to other resources too, but really all you need is to change the assets in the img and in index.html.
- If there’s anything you don’t understand (like LESS and SASS) go back to it later, as long as you understand what you’re changing (which is really just HTML). Desensitize yourself to working in a code environment and hack quickly!
- Get yourself a Github account. I’ve never had a more love//hate relationship with anything. We’re going to quickly release this template you just customized to the world wide web. Make a new repository and download the zip folder containing it. While you’re at it, download Git. (There’s also a nicer looking UI but I’ve never gotten it to work…).
- OPTIONAL: Buy yourself a domain name from Register.com or GoDaddy. It doesn’t matter, it’ll be like $5 just make sure you have access to the account manager. I took shuyagong.com as my practice shot. Now. Here’s the wild ride.
- This is the best tutorial I’ve ever seen for Github Pages and it’s still confusing. But just hang tight and ask questions and you’ll get it. (If at any point you’re frustrated, remember that there’s always Squarespace).
- Congrats your site is live! You can now make your custom domain name go to it by redirecting the DNS A files to 22.214.171.124 and 126.96.36.199, which are Github’s addresses. Follow this tutorial.
Phew. If you got through all of that go get yourself a drink. I’ve never actually deployed a site on Heroku but I’ve heard that’s great (maybe easier).
tl;dr your workout for day three is:
1. Make an InVision app or website from the screens you made yesterday! Or…screenshot an app (from sign up process to all the other screens) and port them into InVision and see if you can recreate the feel of it. There’s some hella powerful stuff in there (including gesture controls on mobile apps woahsnap) and here’s an article if you want it.
2. Meh. Making and deploying your own website is pretty daunting if you’ve never done it before but put on some bad television and butcher your way through it. Pat yourself on the back once you do finish it and realize that steps 1–8 were basically an entire computer science course for me.
3. Look into how mobile apps are made and deployed for real because…I have no idea how to do this quickly without faking it on InVision. Testflight seems like a good place to end up for pre-launch.
THURSDAY: THE 3-D SPACE
This is going to be short, even though there’s so much to do with this topic. There’s 3-D space in the digital world, and then there’s 3-D space in the physical world. All I’ve got to say with the latter is to pick up some scissors, grab some cardboard and duct tape, and go ham. There is some seriously awesome examples out there.
But in the digital world: Autodesk Fusion 360. Download here. It’s free for three years and works on iOS and PC. Pretty much Solidworks/Inventor with a whole lot of upgrades. Remember how Sketch is the new Photoshop+Illustrator? Fusion is the new…everything CAD.
You can pretty much make everything you could possibly imagine and make it look very convincingly real. Combine your results with your Photoshop skills from Tuesday and you can pretty much shift reality whenever you want. The tutorials built into the program and the ones here are really good but a quick YouTube search will also give you a lot. Things it does well: additive manufacturing, CAM (toolpaths and subtractive manufacturing), renderings (you want a part in maple, oak, brushed aluminum, and rose gold? No problem. There’s a tutorial for that.). There’s a fun sculpt feature for making weird geometries and questionable recreational activities and again, no need to reinvent the wheel, build on someone else’s by grabbing a template. This is great for gadgets and furniture and cars. See what people have done here. It’s some pretty jaw dropping stuff. You can also import things that you made in Illustrator and Photoshop to Fusion for appearance sake.
For architecture and larger scale things, try out Sketchup. Again, good built in tutorials but even better if you just go and download some templates and play around with it. You can very quickly build entire city blocks.
tl;dr your workout for day four is:
1. Make something in 3-D using Fusion or whatever other CAD software you like. Paperweight, a lamp, anything! (Also the collaboration features are sweet if you want to team up.) Share!
2. Try modding a building or something in Sketchup/Rhino/another architectural layout.
FRIDAY: THE WHOLE ENCHILADA
So most of these things have been in the digital realm, but how do we translate that into the real world? Objects have a lot of power and it’s still so magical to have something physical to interact with and respond to. It’s hard to do tutorials without machines handy so this is more like a Monday thought exercise/inspiration day, just to open up what seems possible.
Let’s think about any object as a system and break down things into three parts: forms, sensors, reactions.
Forms: the aesthetic and physical part of the whole thing. This is where your 3-D space stuff comes in handy. You’ve pretty much got everything you need to make almost everything. Fusion 360 is streamlined for 3-D printing (it’s literally like three button clicks), and for any CNC milling you might need so you’ve got additive and subtractive manufacturing covered. Cutting things out on a laser cutter you totally know how to do if you’re good with Illustrator. Slap on some paint and you’ve got something that looks awesome. But really…foam core/cardboard goes a really long way.
Sensors: this kind of goes into magic with electricity and microcontrollers. If you can get your hands on LittleBits, it’s a good place to start prototyping with what’s possible. Seriously awesome. To step it up, Arduino is your all powerful driver for DIY electronics. YouTubing some Arduino projects is really mindblowing but to realize the wide expanse of sensors that are available, check out Adafruit for inspiration on what can be done. There are direct sensors for light, pressure, temperature inputs, and then there’s some next level crazy stuff like Bluetooth controls and etc.
Reactions: when you have something that senses something, you want there to be a reaction, whether it’s haptic and vibrates, or lights up, or whatever. Adafruit again is a great place to look, as well as YouTubing robots (and robot fails.)
Really, the best way to do this is to just go make something, even if you fail. (Especially if you fail.) So Instructables is like the Holy Grail of how to make. Just browse for a project or two and mash them together or just try to make one of them or make one of them better.
tl;dr your workout for day five is:
1. Making = Learning. It’s the weekend, start a small project!
THE WEEKEND: THE YEAR 2030
Oh man oh man oh man. I didn’t use images throughout the whole thing because I linked them all but this is some next level stuff. I present Microsoft HoloLens and Fusion 360 used together:
Umm….yeah. That’s not a computer simulation, it’s real. So imagine using Sketchup with this, or Photoshop with Fusion and this. We could build out a grocery story in the coLab. It’s just a lot of cool stuff waiting to happy. Here’s a DIY small version:
But really when it comes down to it, it’s not the tech you have or the tools, it’s what you can imagine and decide to create. So be #resourceful and I hope this was fun. Add and refine this as you see fit!