I know this looks like it has NOTHING TO DO WITH DESIGN! But, before you raise your pitchforks, let me share with you the tools I used to create this little app with almost no code.
I used Hype 3 to put together all the interactions, audio, animations, scenes, etc. and export it everything as HTML5. This app is awesome. It’s a mix of Flash and Keynote but in HTML5. It has a graphic interface where you can manipulate all types of layers (text, basic vector shapes, images.) You can animate anything using a timeline, pretty similar to After Effects. You can make buttons, add HTML widgets, embed a CSS sheet, use video and audio, create different scenes, create different designs for different breakpoints, use auto-layout, and even use physics.
I have used this app in the past only for prototyping—this is the first time I use it as a final product. The code is not beautiful, and it places everything in an absolute position. But if you want to create something small by yourself (without the need of coding), I highly recommend it.
Photoshop and Adobe Draw. I drew most of the poses on an iPad app called Adobe Draw. This app is great because you can create hand-drawn illustrations and export them as vectors (resolution-independent, baby!) I animated the doodles using the “Timeline” feature in Photoshop. I pretty much made a different drawing for every frame, just like you would make old-school animations, and then put them together turning on and off each layer on different keyframes. The squiggly lines look like that because each frame is drawn individually (so they’re not perfect) creating that effect. I made a live stream where I share my process, in case you’re interested!
- Adobe Draw: https://itunes.apple.com/us/app/adobe-illustrator-draw/id911156590
- Livestream: https://youtu.be/qr2hgJRMQR4?t=3m20s
Sketch! I made my wireframes and initial prototypes on Sketch, before starting to implement on Hype. I also made the icons on Adobe Draw, then sent them to illustrator, and then copied it to Sketch. Once in Sketch, I exported them to SVG so that I could use them on Hype
- Sketch App: https://www.sketchapp.com/
First, I have to thank Gabi Fox for helping with her energetic and soothing voice. You rock! I used a Zoom audio interface and a Shure SM7B to record the audio. Then I cleaned up the audio files with Adobe Audition. And finally, I used Adobe Premiere to edit them. I know “But Premiere is for Video!” I’ve been using Premiere for editing stuff for the longest time, so editing audio is pretty much the same. You can export every composition as an MP3 file too
- Zoom: https://www.amazon.com/dp/B001QWBM62
- Shure SM7B Mic: https://www.amazon.com/dp/B0002E4Z8M/
- Adobe Audition: http://www.adobe.com/products/audition.html
- Adobe Premiere: http://www.adobe.com/products/premiere.html
I used Ableton Live to create the musical UI elements. I made the bell sound with a mix of Native Instrument’s FM8 and a Microkorg. I made a library for UI sounds that you can use on your projects!
- Library: https://www.dropbox.com/sh/i52dxwl8hm9rr34/AAA3PMEbOrSUKJiJzRODDSn1a?dl=0
- Ableton: https://www.ableton.com
CSS STYLE SHEET
I love Sublime! This text editor is super simple out-of-the-box, but you can add packages to it that can make it powerful. My favorites are: ColorPicker, HTML-CSS-JS Prettify, Nodejs, and SideBarEnhancements.
- Sublime Text: https://www.sublimetext.com/
USER TEST FEEDBACK
I mostly just asked friends to test the app for me. Some were on Slack video chats, some on Google Hangouts, some texting back and forth using SMS and FB’s messenger, some in-person—the old-school way. I took all of my notes on Evernote, and I would keep a checklist of bugs and usability stuff.
That’s it. I hope this is helpful. I’m down to answer any questions!
I'm a big fan of Sketchapp and Sublimetext. Hype 3 is awesome! Thank you.
Thank you for sharing your process making the app :)
I loved you Framer Intro Course, by the way
I love this but downward dog seems like a tough pose to start with, if this really is for beginners. At least I know it's one of the hardest poses to do for me especially with no prior warm-up!
So cool dude! I'm going to share on Facebook with some friends
Thank you, Taylor—that's really cool of you!
I would've written the same content as a medium story with a title "How to be a Product designer within a week of time?"
I don't know if you're being sarcastic, lol. But I like the idea of sharing my process on Medium, will give it a try. Thank you!
I love this mate, well done
Thank you, Russ. I'm glad you like it!
Loved it too! Ux and animations done right. My goal is to create stuff like this in the near future. Great thing sharing tech stack and process.
That's a great goal, André! Share what you create and learn! We'll love to got stuff done. Thank you :)
I like this. Thank's for sharing! I will send this to my gf and her friends. haha
Awesome, Noel! Let me know what they think if you do share it :)
Some nice twerking on these poses ;)
Aww yeah! Yoga+Twerking=Maximum Gains!
Simple with a whimsical feeling :) Love it!
Thank you, Shridhar! I'm glad you got that feeling :)
One suggestion: Why don't you add the real Yoga Name (Asana) along with the English Name?
Eg: Cobra Pose is called "Bhujangasana"
Hey, not a bad suggestion! Thank you :)
you are the man!