search

autodo-app / autodo

A flexible, intuitive ToDo list app for keeping track of your cars' maintenance needs.
https://autodo-app.herokuapp.com
Other
51 stars 5 forks source link

Create cohesive UI theme #304

Closed baylessj closed 4 years ago

baylessj commented 4 years ago

The addition of the Garage screen changed the feel of the UI on that page and the other screens need modified to fit with it. This would also be a good time to standardize on text styles and colors across the app.

baylessj commented 4 years ago

Originally a bullet point on #301

baylessj commented 4 years ago

todos-screen-redo refuelings-screen-redo stats-screen-redo

Here are some mockups of a possible redesign of the other three screens to match the vibe of the Garage screen. Incorporates the same text and color styles between the screens and they have similar headers.

@DavBfr what are your thoughts on these mockups? Think they would be an improvement?

baylessj commented 4 years ago

I think this also relates to #314 where we're trying to make a more useful first tab with the most relevant information displayed. I think it would still be best to put an emphasis on the ToDo list tab since they will serve as reminders, and my hope for the Garage tab is that it would function a bit more as a settings menu that you don't access all that often. Hopefully the changes in the mockups above make the ToDos screen a better fit for the first tab than it currently is.

All of this is conjecture of course, and it would be good to keep an eye on the analytics data to see where users spend the most time. Whichever tab the users spend the most time should be the default IMO.

DavBfr commented 4 years ago

I like the content style for the Todos. The refueling could be improved: they look too much the same.

The Tab bar has a different color which is good, I would add a text below each icon. This way all is more obvious.

The top drawer style is strange and somehow disturbing with this reversed shadow. What is the purpose of the top rectangular notch? It looks like it's to reveal something below.

On google maps, they use this kind of design but for secondary information displayed on top of the map. It can occupy the full screen or be totally hidden. It's the only app I can think of with this design, and it's not the part I prefer.

baylessj commented 4 years ago

I understand your concern with the bottom sheet style, it is a bit different than the norm. Perhaps removing the darker, "handle"-esque rectangle at the top of the sheet could help make it look more normal?

The trend is quite popular on Dribbble as of late, which is where I got the inspiration. A few examples here:

Also your point on the refuelings is good, they tend to blend together a bit. I can try to increase the separation and/or difference between the items. One other potential option for this would be to show a calendar view instead of or in addition to the list view for the refuelings, that could be interesting.

DavBfr commented 4 years ago

I see. If it's not intended to be interactive that's fine. I also note that dribble has no reversed shadow. Which makes it just a header with a specific design.

baylessj commented 4 years ago

Yeah, removing the shadow should help make the design clearer. I'll add the updated refuelings screen on here when I figure out how I want to represent those.

DavBfr commented 4 years ago

maybe the full listview and header should be part of a SilverList/CustomScrollView https://api.flutter.dev/flutter/widgets/SliverList-class.html That's what I used for the Wizard screens

baylessj commented 4 years ago

That could work, I'll reference your Wizard screens as an example

DavBfr commented 4 years ago

The colors are deliberately garish.

output

baylessj commented 4 years ago

refuelings-screen-redo-2

thoughts on this option?

DavBfr commented 4 years ago

I like it!