search

letakeane / emotican-app

1 stars 4 forks source link

Edit face oval to match comp more closely - closes Issue #30 #37

Closed letakeane closed 7 years ago

letakeane commented 7 years ago

What's this PR do?

Edit the face oval in ImageCapture to more closely match the original comp and improve UI.

Where should the reviewer start?

Let me know if this improves UX/UI or is more intuitive.

Screenshots

Original design (please ignore the black background - the difference to focus on is the oval): before

Updated design: after

And with the webcam running: after with video

cbandrow-zz commented 7 years ago

I think the oval looks good! Much more understandable for a user to know where they should put their face.

Adamj1232 commented 7 years ago

I totally agree with Chris, the oval looks a lot better and makes for a lot smoother look throughout the UI

cjorda15 commented 7 years ago

The oval certainly makes a difference. I want to put my face in it now compared to scary ants lines around me

Jeff-Duke commented 7 years ago

not sure if you're worried about mobile responsive etc but the <article> wrapping the video area is sized relative to the viewport. when the viewport shrinks to a certain point the buttons and the face oval get really misaligned. screen shot 2017-06-06 at 9 33 10 am

If you change your styling on .image-capture from width: 30vw to something fixed like min-width: 320px your canvas, face oval and buttons will all look correct and be properly aligned at all screen widths. you can use media queries to reorganize the rest of the page for a mobile view if you want to go down that route.

letakeane commented 7 years ago

@Jeff-Duke Yeah, the responsive is not in place. I think I'll wait until after Demo Night; I do want to make it fully responsive and available for mobile!