Jefferson227 / busca-cinema

Simple app to check movies on theaters

https://busca-cinema.firebaseapp.com

14 stars 2 forks source link

Enhance app UI/UX #3

Open Jefferson227 opened 6 years ago

Jefferson227 commented 6 years ago

I'm trying to make the UI similiar to this example from Dribbble https://dribbble.com/shots/3349838-Cinema-App-UI

Any improvement is welcome, feel free to contribute :)

fzxt commented 6 years ago

Don't mind helping out with this.

Was thinking about starting with the movie-detail component, work our way up from there.

Change the rotation of the gradient, it's actually going from light to dark in the dribble shot.
Make a generic button component, that will be sticky to the bottom.

Jefferson227 commented 6 years ago

@fzxt that's great! Feel free to do your art :)

For now, I don't see any usage for a button sticked to the bottom, but it certainly will be useful for some new functionality.

fzxt commented 6 years ago

@Jefferson227 Curious about your thoughts on the following small changes:

Movie detail

Movie info

Reorder the movie details with icons

Demo

Button

On hover, changes to yellow accent color
Implemented as a directive which can be added onto a button to be flexible

Demo

Also, how similar do you want the final result to look like the dribbble shot posted?

Jefferson227 commented 6 years ago

@fzxt I like the movie details with the icons and the button with the hover effect, it looks better and more intuitive. I'm looking forward for your pull request with these implementations.

Regarding the similarity with the dribbble shot, it's not my intention to make the layout exactly equal to it. It's more like an inspiration. I wanted to work on the fonts, because it's the ionic's standard. But so far, I couldn't find a good font to fit to it (even because I'm working on this project on my free time).