933893 - [Camera] 1.3 Camera visual refresh

Status: RESOLVED INVALID

(Firefox OS Graveyard :: Gaia::Camera, defect, P1)

Description

[Peter La]

Update the camera app with the new 1.3 visual design.  Specs and assets to follow.

Comment 1

[Peter La]

Updating whiteboard keywords.

-

User Stories:

Media 5
As a user, I want the video and camera icons to be clearly
distinguishable.

Media 6
As a user, after selecting either the camera or video mode, I want the
selected mode to be reflected on the screen clearly.

Media 7
As a user, when I select the video mode, I want to know whether

Comment 2

[Peter La]

Attachment: 1.3CameraVisualSpecV1_CameraMode_Nov1.png

Initial Visual Spec for Camera Mode.

This doesn't cover flash and zoom functionality.  More to come.

Comment 3

[Peter La]

Attachment: 1.3CameraVisualSpecV1_VideoMode_Nov1.png

Initial Visual Spec for Video Mode.

This doesn't cover video recording.  More to come.

Comment 4

[Peter La]

Attachment: Iconography.zip

Initial icon set to get started with.

Comment 5

[Peter La]

Attachment: Photo Capture Animation Video - Ideal

This is the photo capture animation that I would like to see implemented, if possible.

Comment 6

[Peter La]

Attachment: Photo Capture Animation Video - Simplified/Constrained

This is the simplified/constrained version that doesn't require cropping/masking of the circle shaped button.

Comment 7

[Peter La]

(In reply to Peter La from comment #5)
> Created attachment 828425 [details]
> Photo Capture Animation Video - Ideal
> 
> This is the photo capture animation that I would like to see implemented, if
> possible.

This is the link to the actual movie file.  I originally attached the After Effects file by accident.

https://www.dropbox.com/s/bnkiwffchlbched/PhotoCapture-Advanced.mov

Comment 8

[Peter La]

(In reply to Peter La from comment #6)
> Created attachment 828426 [details]
> Photo Capture Animation Video - Simplified/Constrained
> 
> This is the simplified/constrained version that doesn't require
> cropping/masking of the circle shaped button.


This is the link to the actual movie file.  I originally attached the After Effects file by accident.

https://www.dropbox.com/s/jc1bh3wk1iqhvlj/PhotoCapture-Simple.mov

Comment 9

[Peter La]

Video Recording Animation - ideal verison:

https://www.dropbox.com/s/86mwf7pboywoqn2/VideoRecording-Advanced.mov

Comment 10

[Wilson Page [:wilsonpage]]

Hi Peter I'm Wilson (new guy) :)

I'm missing the 'Flash Auto' asset, and also @2x variants for high density displays. Have we considered using vector graphics (icon font or SVG) to avoid having to maintain multiple variations of bitmap icon assets?

Comment 11

[Peter La]

Attachment: Iconography-Nov12Update.zip

Hi Wilson,

Welcome to the team. :)

I'm attaching an updated set of icons that includes the missing Flash: Auto icon as well as 2x versions.

Vector icons (via icon fonts) are something that is being explored for select parts of the UI currently by Patryk Adamczyk (another visual designer on my team), but we haven't yet considered it for the entire system.

I think it would be a nice to have in future versions of camera but for 1.3, I think completing the app is the priority.  Let me know what your thoughts are on this.

Comment 12

[Hema Koka [:hema]]

Hema Koka deleted the linked story in Pivotal Tracker

Comment 13

[Hema Koka [:hema]]

As discussed earlier in Sprint planning, the updated camera button and animations will not land into 1.3 (hud with flash and front/rear has already landed)

Comment 14

[Peter La]

Attachment: Icons converted to SVG

I made the colour of the flash icons black so they are easily viewable in a browser.  However, for the actual implementation, please use white as the colour as per the spec.

Comment 15

[Sri Kasetti]

Since the UX spec has changed quite a bit, we should close this and create new bugs if necessary.
Peter, Wilson, What do you guys think?

Comment 16

[Wilson Page [:wilsonpage]]

I think that makes sense. This issue references material and comments relating to the old designs, so could get confusing.

Comment 17

[Diego Marcos [:dmarcos]]

I created a bug to keep track of the 1.4 changes:

https://bugzilla.mozilla.org/show_bug.cgi?id=965489

Comment 18

[Diego Marcos [:dmarcos]]

Should we close this bug?

Comment 19

[Stephany Wilkes]

Not sure - looks like a child bug is still open. Is this 100% done?

Comment 20

[Sri Kasetti]

Both bugs can be closed. Peter or I will be filing new bugs.
The UX spec is completely different from what was asked here.

Comment 21

[Peter La]

Yes, I'm fine with this bug and child bugs being closed.

I will be created a whole new set of bugs to track visuals and implementation of every piece of UI, and I will be connecting them to existing engineering bugs as required.

Comment 22

[Sri Kasetti]

We are filing new set of bugs in 1.4 to track visual changes for camera