mozilla-lockwise / mozilla-lockwise.github.io

Take your passwords everywhere
https://lockwise.firefox.com
Mozilla Public License 2.0
46 stars 11 forks source link

Lockwise rebrand #117

Closed devinreams closed 5 years ago

devinreams commented 5 years ago

In progress for the rebranding tracked at #114

To be completed:

Home:

image

FAQ:

image

Mobile:

image

Built off the branch at #116

devinreams commented 5 years ago

Work in Progress preview @changecourse @sandysage

Screen Shot 2019-05-13 at 2 33 44 PM Screen Shot 2019-05-13 at 2 33 46 PM
sandysage commented 5 years ago

This is the latest I have from @changecourse for what the May 28th layout/design needs to be for the splash page: Lockwise Web (3)

The FAQ / internal pages look great to me, but I'll defer to Ryan if changes are needed.

devinreams commented 5 years ago

Ryan has updated above with requested changes.

@changecourse I may not be able to accomplish all these but will do a best effort. how are your CSS chops? 😏

devinreams commented 5 years ago

@changecourse for the FAQ updates, I think we still need one updated autofill-settings-android image:

Autofill_FAQ_-_Lockwise_– Web_-_Zeplin
devinreams commented 5 years ago

Here's how everything looks now:

Home:

image

FAQ:

image

Mobile:

image

I'm not super familiar with flex box so I think I've done as best I can to get the 3 buttons spaced and aligned and kinda centered to match the mocks, but struggled to get pixel perfect since we're dealing in percentages and stuff. 🤷‍♂

devinreams commented 5 years ago

I updated the Zeplin file to contain the new screenshot for Android autofill provider.

Done!

It looks like the background SVG is still not rendering properly with the blending modes, but certainly not a dealbreaker... I can bug JGruen about how he did it previously later.

Oh I just dropped in the SVG in as exported from Zeplin.

Looking at the diff, I see a style="mix-blend-mode:overlay" on elipse and circle that's in the old but not the new SVG.

https://github.com/mozilla-lockwise/mozilla-lockwise.github.io/pull/117/files#diff-9b2357fffe7f7da8670d38d4b2347592

I'm curious, if the footer is now fixed, does it need a white bg for instances where it may overlap with the devices?

Yeah I thought about that too and forgot to mention it, good call out.


Here's how everything looks now with the SVG blending and white footer on three screen sizes:

image Screen Shot 2019-05-24 at 9 06 10 AM Screen Shot 2019-05-24 at 9 06 56 AM

devinreams commented 5 years ago

@changecourse and while we're at it, do we want the Lockwise logo instead of the Firefox logo as the favicon in the address bar/tabs?

If so, I don't seem to have a good copy of just the icon (no text) so will need help getting a SVG (or ICO).

changecourse commented 5 years ago

Glpyh.svg.zip

devinreams commented 5 years ago

Final version with a PNG instead of SVG for background and a revised favicon:

image