Namasketch

Mini yoga session for beginners, told in doodles.

get it

Namasketch is a short yoga session for beginners, told in doodles. This sequence consists of ten basic poses in a six-minute flow. The goal is to help you create a strong foundation and develop a love for yoga before you move on to the next level.

Reviews

  • AhmediOS/macOS Engineer. Founder of Flawless
    Pros: 

    1. Super simple to get started with yoga.

    2. It's a web application so it works everywhere.

    3. Animation & voice over. No mentor needed.

    Cons: 

    No cons really

    Simple and powerful application. No more words, just try it out 🙂

    Ahmed has used this product for one day.
  • Chhavi ShrivastavaDesign & FOSS. Almost-ish Blogger.
    Pros: 

    Web application, can bookmark it for between sessions

    Cons: 

    Actual names of the yoga poses maybe?

    What else can you recommend to your millennial friends and your grandparents at the same time, that you found on ProductHunt? :p

    Chhavi Shrivastava has used this product for one day.

Discussion

You need to become a Contributor to join the discussion - Find out how.
Pablo StanleyMaker@pablostanley · UX Designer
Hey, hunters! I just want to share a bit of my process and the tools I used to make this app. I'm a designer, not an engineer, so you might find it interesting how I got to make a web app with no code. Ok, here goes! HTML5 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 create 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 🤯 You can create interactions adding “actions” to any layer. For example, you can create a rectangle and then add an action where “On Mouse Click” it “Start Timeline” or “Run Javascript” or “Play Sound,” etc., etc. 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. - Hype: http://tumult.com/hype/ ANIMATED DOODLES 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/... - Livestream: https://youtu.be/qr2hgJRMQR4?t=3... DESIGN 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/ SOUND 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/B001QW... - Shure SM7B Mic: https://www.amazon.com/dp/B0002E... - Adobe Audition: http://www.adobe.com/products/au... - Adobe Premiere: http://www.adobe.com/products/pr... MUSIC 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/i52dx... - 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 Color Picker, HTML-CSS-JS Prettify, Nodejs, 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!
Julian Lozano@julianlozanoaz · Designer at Fishermen Labs.
@pablostanley Dude you are simply incredible, good job to you two!
Aaron Lee D'Souza@aaroniclee · Designer/Executive
@pablostanley This is such a great bit of info and resources. Good stuff!
Shoaib Khan@uxd_shoaibkhan · UX Designer
@pablostanley Cool Stuff! Keep rocking Pablo :D
Ashu Syal@ashu_syal · Helping makers make.
@pablostanley this is pretty cool. I'd recommend this to any new yoga practitioners. It makes it seem more accessible.
Chad WhitakerHiring@chadwhitaker · Design at Product Hunt
My yogi girlfriend said this is the best app of 2018. 😄
Pablo StanleyMaker@pablostanley · UX Designer
@chadwhitaker That's a great compliment coming from a Yogi. Tell her she has great taste, lol.
Ahmed@geek_1001 · iOS/macOS Engineer. Founder of Flawless
@pablostanley Namasketch looks simple and powerful! A perfect way to start every morning before hard working day. Congratulations on the launch! I’ve seen your video with a process of creating these doodles. It’s really amazing how much work is hidden behind every animation. In any case, I believe the end result worth it. 😊
Pablo StanleyMaker@pablostanley · UX Designer
@geek_1001 That's really nice of you, man—it really means a lot. Haha, did you see my livestream where I spend almost half an hour on a single animation? lol. Thanks for watching too!
Ryan HooverPro@rrhoover · Founder, Product Hunt
Love the illustrations, @pablostanley 👏🏼
Pablo StanleyMaker@pablostanley · UX Designer
@rrhoover I love that you love them, Ryan!
Abadesi@abadesi · 🙋🏽‍♀️ Product Hunt | Hustle Crew | NTT
I just love everything about this, sending it to everyone I know now 🧘‍♀️
Pablo StanleyMaker@pablostanley · UX Designer
@abadesi That's really thoughtful of you, Abadesi—thank you! I hope your friends enjoy it :)