Design: select a design / theme for the application

[ivan-kleshnin]

1) Check "similar app/projects"? 2) Find or buy theme? 3) themeforest.net? 4) dribbble? (health app)

[ivan-kleshnin]

Requirements

0) Landing? (bonus) 1) Text Page (About + Help) 2) Log / History / Table (CMS themes) 3) Screen with Pulse measurements (sinus wave?) 4) ???

[dmitrij-schmidt]

react compatible admin themes https://themeforest.net/item/zest-multiconcept-react-admin-template/23706653 https://themeforest.net/item/react-admin/17647920 https://themeforest.net/item/apex-react-redux-bootstrap-admin-dashboard-template/22836902 https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383

logo https://dribbble.com/shots/4136090-Heartbeat-Animation https://dribbble.com/shots/5611429-Heart-Rate-Logo-Animation https://dribbble.com/shots/3533698--3

mobile app designs https://dribbble.com/shots/2023985-Heart-rate-app https://dribbble.com/shots/4223865-MyHeartCheck-app https://dribbble.com/shots/2673168-Health-App-for-the-Elderly https://projects.invisionapp.com/share/37FU4QK5BTA#/screens https://dribbble.com/shots/4081702-Ziiiro-Celeste-Heart-Rate-Tracker https://dribbble.com/shots/4238491-MyHeartCheck-a-UX-case-study https://dribbble.com/shots/2879067-Heart-Rate-Concept https://dribbble.com/shots/2419184-Heart-Rate-Monitor-Animation

wearable display designs https://dribbble.com/shots/1987860-Trackfit https://dribbble.com/shots/3492875-Pulse-Heart-rate-animation

[AntonKilk]

From those that @dmitrij-schmidt found I liked these two particularly: https://dribbble.com/shots/2419184-Heart-Rate-Monitor-Animation https://dribbble.com/shots/2879067-Heart-Rate-Concept

Similar projects/themes:

Kardia: https://www.alivecor.com/ https://apps.apple.com/us/app/kardia/id579769143

FibriCheck: https://www.fibricheck.com/ https://apps.apple.com/be/app/fibricheck/id1102327473

Apple Watch HealthCare app: https://support.apple.com/en-us/HT208931

SonoHealth: https://apps.apple.com/us/app/sonohealth/id1446448820

[ivan-kleshnin]

https://dribbble.com/shots/2879067-Heart-Rate-Concept

Dark designs are much harder to implement. I wouldn't personally consider them for this project.

[ivan-kleshnin]

https://dribbble.com/shots/2419184-Heart-Rate-Monitor-Animation

This is close to Google Material UI by style. We can take its elements if we select a design / animation like this. Which is a big plus.

[ivan-kleshnin]

My visual preferences for this would be RED + WHITE colors and Google MUI (as a styleguide, not necessary some particular library)

https://dribbble.com/shots/4223865-MyHeartCheck-app https://dribbble.com/shots/2419184-Heart-Rate-Monitor-Animation https://dribbble.com/shots/4238491-MyHeartCheck-a-UX-case-study https://gogo-react-web.coloredstrategies.com/ – if we replace violet with RED everything else looks very close to the above, don't you think?

[dmitrij-schmidt]

I agree on the above.

Also, Gogo React theme has a preview, where you can see how it looks like IRL https://gogo-react.coloredstrategies.com/app/dashboards/default You can even trigger red coloured theme by clicking on a magic wand to the right to have slightly better understanding.

28$ sounds affordable if we need rapid development. Or we can try and replicate it with something like https://material-ui.com/ - this seems to be mature enough to have in production. @ivan-kleshnin - it's up to you to decide on the stack :)

[AntonKilk]

I would rather buy it if it saves time.

[ivan-kleshnin]

Or we can try and replicate it with something like https://material-ui.com/ - this seems to be mature enough to have in production.

I tried Material UI not so far ago and my opionion was that:

1) It's good for mobile-oriented web apps 2) It's not good for desktop-oriented web apps

We need an admin panel which is certainly more desktop-oriented and we also need a mobile landing. To my understanding, mobile landing is basically a card so it's easier for a markup developer to fill this missing piece than anything else.

I propose @AntonKilk, after he succeeds with https://github.com/AntonKilk/FA_app/issues/3 to inspect https://gogo-react.coloredstrategies.com/ and create a list of real widgets 1) we need 2) the theme provides.

Like this:

Theme XyZ

• [x] Fixed Top Menu (link to the site page where the elements is demonstrated)
• [x] Info page
• [x] Contact Submission Form
• [ ] Logo

It will be an exercise in term learning. Product Manager has to have a perfect knowledge of UI element names. If the difference is minimal we can buy this design.

I can tell you, from my experience of buying themes, that even the best of them have mediocre markup quality (they sell design/visuals and the markup feels like extra burden). So for all real projects we had to apply tons of customizations and basically ended up with "from-scratch" markups each time. My hope is that, as this project is demo project, we won't need that depth.

So the first step is a draft of all pages. The more detailed it will be, the less mistakes we'll make further. The second step is an inventarization of the theme(s). What it provides and what it doesn't. Again, we should be as thorough and precise as possible. Finally, after we buy a theme, we have everything we need to mock up our pages.

[ivan-kleshnin]

I would rather buy it if it saves time.

It's hard to say what'll save more time: using something like Material UI / Bootstrap or using something like a theme. It depends on the elements we need so we have to make a list of them.

Libraries often have better coverage of low-level elements like buttons. Themes often have better coverage of high-level elements like registration-pages.

Consider that many themes are made on top of libraries and that is the best case when the design matches your needs.

I suspect a theme will be a better choice but we have to prove that by listing elements we need and elements theme provides side by side.

[ivan-kleshnin]

Created a separate issue for a widget enumeration task: https://github.com/AntonKilk/FA_app/issues/9

[dmitrij-schmidt]

sharing heartbeat svg animation https://www.youtube.com/watch?v=lmtNuCuriBg