Welcome to our inclusive community of web designers, developers and makers.
Creating an account takes less than 30 seconds, start participating right away!
Create account

Development 🌬 Breathe Guide | Breathing Exercise Companion

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
517
Reaction score
495
Points
585
Location
United Kingdom
Local Time
Today, 18:54
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:

tom

Creator of StickerRun®
Gold Member
Community Team
Joined
Oct 13, 2019
Messages
165
Reaction score
149
Points
235
Location
Bregenz - Austria
Local Time
Today, 19:54
Website
www.stickerrun.com
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.
 
  • Love
Reactions: Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
517
Reaction score
495
Points
585
Location
United Kingdom
Local Time
Today, 18:54
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. 😄
 
  • Like
Reactions: ek1

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
572
Reaction score
441
Points
605
Age
26
Location
Hamburg, Germany
Local Time
Today, 19:54
Website
gummibeer.de
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.
 
  • Like
Reactions: ek1

namecame

Member
Joined
Oct 6, 2019
Messages
6
Reaction score
10
Points
5
Website
namecame.com
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 😍
 
  • Love
Reactions: Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
517
Reaction score
495
Points
585
Location
United Kingdom
Local Time
Today, 18:54
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:
  • Like
Reactions: VickiLanger and tom

ek1

Member
Joined
Oct 6, 2019
Messages
63
Reaction score
71
Points
275
Location
Halifax
Local Time
Today, 15:54
Website
erinknowles.com
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.
 
  • Love
Reactions: Adam

fbnlsr

Member
Gold Member
Joined
Oct 13, 2019
Messages
73
Reaction score
58
Points
80
Location
Bordeaux, France
Local Time
Today, 19:54
Website
www.primative.net
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! :)
 
  • Love
Reactions: Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
517
Reaction score
495
Points
585
Location
United Kingdom
Local Time
Today, 18:54
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

Well-known member
Joined
Oct 5, 2019
Messages
572
Reaction score
441
Points
605
Age
26
Location
Hamburg, Germany
Local Time
Today, 19:54
Website
gummibeer.de
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
 
  • Hot
Reactions: Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
517
Reaction score
495
Points
585
Location
United Kingdom
Local Time
Today, 18:54
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

Well-known member
Joined
Oct 5, 2019
Messages
572
Reaction score
441
Points
605
Age
26
Location
Hamburg, Germany
Local Time
Today, 19:54
Website
gummibeer.de
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
Joined
Oct 25, 2019
Messages
12
Reaction score
11
Points
5
One other visualization could be a silhouette of a person, with a circle shape filling it in. You could use an SVG mask.