UI/UX Discussion

[suzanpradhan]

[suzanpradhan]

I have created a color palette for app based on existing primary and secondary colors.

And, here all the colors codes:

#34D2C1
#31A6DC
#2E3956
#28314A
#2D2B41
#ACACB4
#B4B6BC
#F6FAFD
#FFFFFF
#FFB600
#F7ACAA
#EE3026
#F7ACAA

Please review it and give you suggestions.

[suzanpradhan]

Login and Register UI Update.

[theDeal]

This design looks great! What do you think about a general Signup Tutorial with a Start Splash screen?
What do you guys think about a Material You Android 13 Maskable Icon that can change colour depending on your Background Image? Informations: https://siddroid.com/post/android/supporting-adaptive-themed-icons-on-android-13/

General signup tutorial, you mean something like onboarding screen?

And the Maskable Icon seems great. I guess we should add it.

Yeah

[theDeal]

@suzanpradhan feedback:

1. "Or Sign-in with" looks weird to me for some reason. Maybe we can just use "Or".
2. The UI is center aligned. But the Sign in with Google and apple button looks odd. Given the icons are left-aligned, the right side looks empty. Can we center align the internal components of the alternative sign in CTA?
3. Confirm your password is missing the leading icon, is that intentional?

We could also just put the two Buttons next to each other.
Here are some Options:

In general, we have to keep in mind there are Design rules from Google and Apple we have to keep to be allowed to use these Buttons.
FYI:
Apple:
https://developer.apple.com/design/human-interface-guidelines/technologies/sign-in-with-apple/buttons
Google:
https://developers.google.com/identity/branding-guidelines

[suzanpradhan]

@suzanpradhan feedback:

1. "Or Sign-in with" looks weird to me for some reason. Maybe we can just use "Or".
2. The UI is center aligned. But the Sign in with Google and apple button looks odd. Given the icons are left-aligned, the right side looks empty. Can we center align the internal components of the alternative sign in CTA?
3. Confirm your password is missing the leading icon, is that intentional?

Thanks for the feedback.

I will make an update with these changes soon. And yeah, it was intentional to not put icon in confirm password. If you can suggest me icon for it, i will add that too.

[suzanpradhan]

@theDeal I guess I will go with the second option then. Thanks for the suggestion.

[momshaddinury]

I will make an update with these changes soon. And yeah, it was intentional to not put icon in confirm password. If you can suggest me icon for it, i will add that too.

I'm thinking same one as password. Since it's password after all.

[theDeal]

General Discussion | Software we should use

What do you think about using Figma?
I think a good thing about Figma is we can create Components and Component styles we can reuse for designing new Screens.
We could hard code these Components in Dart and can easily access them. With Figma developed have the opportunity to see an interactive Prototype.

@suzanpradhan do you know how to use Figma?
@KalleHallden what is our Opinion?

[suzanpradhan]

No, I haven't used Figma. We can create components in Adobe XD too, though. But, what do mean by hardcoding Figma components in dart?

[jorre127]

I'm guessing making the design with reusable components in mind, and if we turn those components into widgets in flutter we can quickly make new screens? But yeh I think that's possible with any design tool, I'm a fan of Figma too because it's a web app and easily accessible. But you should use what you're most comfortable with.

[KalleHallden]

Yeah I think it seems easier to collaborate (for free) using Figma. Although it also seems like this could be done with Adobe XD, it's just not super clear from what I can tell, how easy that actually would be.

On the other hand if @suzanpradhan is going to be in charge or doing a bit of the UI design (provided he wants to) then maybe it would be better to take the potential trade off of using Adobe for the speed and ease of use advantage for someone who is used to working with it?

[momshaddinury]

I get what @theDeal is talking about. But all the above-mentioned features are also available in Xd. The only problem with XD is, that it doesn't have a web app. As such, we need to use the desktop application. But that's not a major problem. If @suzanpradhan is fast with Adobe XD, he should stick to it. After we settle on a UI, we can slowly transition to Figma. We don't have that many screens yet. So I think it's okay for now.

[theDeal]

Okay, that sounds good.
I just wanted to ask before someone is designing screens and they are not used because the Designer used the wrong Program :-)

[momshaddinury]

@suzanpradhan just thought I will list the screens we have so far

1. Splash Screen
2. Landing Screen (Login and Sign up Tab View)
3. Calendar screen
4. Workout Screen
5. Previous Workout Screen

Things you can do in the app so far:

1. Sign up, Login
2. See your activity marked in the calendar
3. View your past workout
4. Redo past workout
5. Create a workout
6. Delete a workout

@KalleHallden am I missing anything?

[KalleHallden]

I think that is it :)