What's wrong with my ui :(

[half olive]

copy designs from professionals for starters

not sure what kinda app youre trying to make. but personally, i have never seen a light aqua nav bar. color is mainly used to draw attention to crucial elements (CTAs etc.) and a nav bar is not something that should take focus away from your content.

i could see it being applicable if your entire app in general is kinda quirky and playful, even then, there are other elements on your screen that would utilize bold colors better.

stick to one primary color. i cant tell what the main color for your theme is, blue? pink? aqua?

2 colors max and the 2nd should complement the primary

i know it wont look as colorful or intersting. but when starting out its better to play it safe

[prisma cradle]

Should I make the nav bar just white?

[half olive]

nail the basics and then experiment

yea, white is a great neutral color

[prisma cradle]

Okok

Thanks a lot!!!

[half olive]

not a problem

have fun!

[mental pivot]

looks amaturish because of the font color and drop shadows

the black is just too black on those colorful buttons

[prisma cradle]

What do you recommend instead of drop shadows?

[mental pivot]

You dont even need to use them on navbars

If you do want to then tone them down

[mortal kelp]

in my opinion the white background and light colors collide and make it hard to pick out what is interactive and what isn't, And you can make dhe shadows underneath the navbar blurry or make them a darker color of green.

[brisk zealot]

If you found challenging in playing with colors, Start from maybe less then 4 colors could help you handle them easier.

Then, you could start from defining colors.

eg. what is primary color, secondary color?

When to use certain color?

https://app.uxcel.com/courses/ui-components-n-patterns/cards-best-practices-038

https://www.nngroup.com/articles/cards-component/

Hope you find these resources helps

You could also study on “UI state” to learn about component ‘s variation 🙂

[prisma cradle]

They were and I did learn useful stuff, thanks! 🙂

I only left blue and yellow for money related stuff that isn't there yet

It's def not perfect, but doesn't make me cringe as much as the first one xd

[tight remnant]

Looking much better! Another color consideration is contrast for general readability and those with visual disabilities. I would check your grays to make sure they are dark enough to meet AA contrast standard: 4.5:1 for regular sized text. And you also want to make sure that greys on blues have enough contrast. You can check here for more info: https://webaim.org/articles/contrast/

[brisk zealot]

wow! I can see the progress. I bet you do as well

Next, you could study the UI spacing and alignment principles

Like padding

Tips about wireframe: if you are creating low fidelity ui, you could use symbol for portrait as well to avoid distracting other ppl in reviewing it

Like you are using dummy text, but also could use symbols

Example

[prisma cradle]

Yeah, I wish I started from that, because I spent hours manually making things aligned xd

[prisma cradle]

I did not think of that

[brisk zealot]

Configuring alignment is easy. If you can allocate more time on studying the rule / principle, it definitely helps a lot - which is understanding the UX first, then deliver it via UI

[prisma cradle]

Thanks! Yeah I was bothered by it too, will fix soon 🙂

[brisk zealot]

No worries, it takes time

I highly recommend newbie studies Design System first. It’s kind of a short cut on creating “looks” makes sense ui

https://atlassian.design/components

https://m3.material.io/components

[tight remnant]

I only bring it up because figuring out you have to change all your colors near the end of the project is 😱 and might or might not have happened to me. 😂

[prisma cradle]

Thanks again everyone for the advice! Will send the first pages after figuring out how to align and layout things 🙂

[brisk zealot]

https://designcode.io/ios-design-handbook-dos-and-donts

[weak dragon]

for the nav bar, I'd make the selected box bigger. Icon sizes are good, but there isn't enough breathing room/padding inside the boxes

[prisma cradle]

Yes, I did notice that icons were crowded so I adjusted them to look like some of the apps on my phone 🙂 thanks

This is my first ever page, I am already stuck haha. I don't see what's wrong, but I feel like there's something odd