Development 🌬 Breathe Guide | Breathing Exercise Companion

Adam

Mr. Webwide
Administrator
Local time
07:35
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

Hi everyone!

I am building Breathe Guide as a free breathing exercise companion. Prompted by my own therapist recommending me breathing exercise videos from YouTube with ads, uncustomisable and mixed quality. The alternatives in this space aren't great. I have an huge amount of feature ideas that I am going to try very hard to keep in a very simple interface.

Very very early development but thought it would be fun to keep a little development log to see it progress. 😄

So far...

  • Basic UI shell up with collapsible sidebar
  • Customisable timings with 'bubbles' visualisation powered by anime.js
  • Basic audio cues with a custom voice over, looking to add some variety to this with the same person saying the cues in different ways to feel less robotic
  • Added background ambient sound picker
  • Some basic SEO set-up to get a head start in Google

_Users_adam_Desktop_breathe.guide_index.html.png

 
Last edited:
Upvote 6

tom

Creator of StickerRun®
Community Team
Local time
08:35
Joined
Oct 13, 2019
Messages
258

I love this. Awesome idea and great first version. Good job! 😍
A responsive version or PWA would be nice too as an upcoming feature.
For the settings, have a look at dribbble.com - there are quite a few examples of filters or settings pages/panels.

 

Adam

Mr. Webwide
Administrator
Local time
07:35
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

I love this. Awesome idea and great first version. Good job! 😍
A responsive version or PWA would be nice too as an upcoming feature.
For the settings, have a look at dribbble.com - there are quite a few examples of filters or settings pages/panels.
PWA is an absolutely! The main app itself is a SPA so could be run totally offline as a bonus. Dribbble is great idea. Thanks so much. 😄

 

Gummibeer

Astroneer
Moderator
Local time
08:35
Joined
Oct 5, 2019
Messages
1,156
Pronouns
he/him

I would create a fast wrap with one of these JS app tools to get attention in the real app stores. Or you even get into real app development or rest native to create a cool and native app.

The app could come with reminders to do a breathe exercise, some statistics and so on.

 

namecame

Member
Local time
02:35
Joined
Oct 6, 2019
Messages
9

Great idea and straightforward design, immediately clear what it's all about. Found myself breathing along without even thinking, draws the user in instantly, love it 😍

 

Adam

Mr. Webwide
Administrator
Local time
07:35
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

Making good progress!

  • Save exercises to local storage array
  • Load exercises in to picker
  • Select exercise from picker and start immediately
Was a fun challenge as I have not worked with local storage before. Surprisingly straightforward after lots of Googling!

Looking forward to working on the UI and design soon. 😬

 
Last edited:

ek1

Member
Local time
03:35
Joined
Oct 6, 2019
Messages
81
Pronouns
She/her

Ooo I especially like the click to hide/show controls, very intuitive+discoverable. I might actually use this! Definitely if it were a PWA I could use on my phone.

 

fbnlsr

Member
Local time
08:35
Joined
Oct 13, 2019
Messages
78

Hey Adam I love what you did there. It's simple and on point. I remember doing some Mindfulness meditation a few months ago and it helped with my anxiety (probably going to see a therapist soon too). Definitely bookmarking this! :)

 

Adam

Mr. Webwide
Administrator
Local time
07:35
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

Started on some styling! I am going to have the ability to pick some themes and I had the idea for the logo to be transparent so that it always matched the background. As it turns out, clipping through a div in this way is quite difficult and seemingly impossible in IE11 (which I am keen to support). Instead, I got it working using a transparent PNG and using white borders for padding! Working well.

Screenshot 2019-11-06 at 13.17.02.png

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
08:35
Joined
Oct 5, 2019
Messages
1,156
Pronouns
he/him

The "hold" should get some kind of countdown. Could be a real 3-2-1s countdown or a progress bar or a "filling the circle with water" animation or a simple circular degree progress.
I would most like the filling animation. This could be combined with two different colors - like: breath in fresh white air, during hold the circle fills with a light grey and this colors keeps to breath out and transitions back to white if you had breathed out.
I would also prevent the font scaling.
animation like the second suggestion here Filling water animation

 

Adam

Mr. Webwide
Administrator
Local time
07:35
Joined
Sep 24, 2019
Messages
1,248
Pronouns
he/him

The "hold" should get some kind of countdown. Could be a real 3-2-1s countdown or a progress bar or a "filling the circle with water" animation or a simple circular degree progress.
I would most like the filling animation. This could be combined with two different colors - like: breath in fresh white air, during hold the circle fills with a light grey and this colors keeps to breath out and transitions back to white if you had breathed out.
I would also prevent the font scaling.
animation like the second suggestion here Filling water animation
I love that filling animation! Great idea. I have 2 more visualisations in the work, a square: up inhale, across hold, down exhale which would illustrate the hold better and an infinity one. I was thinking about how best to illustrate hold on that bubbles so thank you very much for the idea. 😄

 

Gummibeer

Astroneer
Moderator
Local time
08:35
Joined
Oct 5, 2019
Messages
1,156
Pronouns
he/him

My problem with the scaling font was that I missed the moment out&in switched during the 7/11 exercise. It's one tiny letter difference. If the font stays large and a color difference would make it clearer.

 

ZillieZephyr

Member
Local time
01:35
Joined
Oct 25, 2019
Messages
16

One other visualization could be a silhouette of a person, with a circle shape filling it in. You could use an SVG mask.

 

avena

Member
Local time
02:35
Joined
Oct 19, 2019
Messages
149

Cool idea @Adam!

Have you considered allowing the voice over to reproduce in the background too? This way you don't require to see the page to hear the exercise intervals.

Btw, I think I broke something XD, at some point the hold-breath intervals went nuts and really fast (like half seconds). 😅

 
Top