Redesign iOS Create Password about safe HOT 20 CLOSED

There are small changes here: https://invis.io/PYPF44ESJ6X

General comments:
• Make button’s shadow less prominent.

What's been done:

1. Concerning https://invis.io/PYPF44ESJ6X#/336311766_05_Start_Terms_Alert_. The terms are now on white backgroung and not on card.
2. Concerning https://invis.io/PYPF44ESJ6X#/336311767_06_SetPassword_. Replied on Invision
3. Concerning https://invis.io/PYPF44ESJ6X#/336311768_07_SetPassword-Error_. Replied on Invision
4. Concerning https://invis.io/PYPF44ESJ6X#/336311771_10_ConfirmPassword_. Replied on Invision

from safe.

What's been done in new iteration:

1. Updated Start screen with bigger font after Michel's Android version: https://invis.io/PYPF44ESJ6X#/336311762_01_Start_

from safe.

I like it and have no further comments at this point :)

• I like the card-style since it provides a connection between the start screen and the onboarding screens.
• When implementing the screens, we should pay attention to use the Safe logo with and without "Rinkeby" depending on the app, correctly.

from safe.

@biocom what's the plan for Android? Will we also have the card-style onboarding?

from safe.

There's a small change here:

1. Corrected this Start Terms Alert: https://invis.io/PYPF44ESJ6X#/336311766_05_Start_Terms_Alert_. Added individual links instead of links in text.

from safe.

• I still like the card style a lot.
• I also like the changes to the terms modal. It's now more clear and obvious how to access them.

I see only 2 open issues:
(1) Will we have the same card-style approach on Android? (@biocom )
(2) @DmitryBespalov What's your opinion on the design?

from safe.

@tschubotz @posthnikova In general I'm not opposed to the card style, where appropriate. For example for certain elements in the UI it does make sense.

I do think that the cards are perceived best when having enough contrast. That is the case in the on-boarding (blue/gradient background) but for instance here https://invis.io/FBPH0OFQ57P#/339971945_05_Send-ETH-Review_ I find the card with box-shadow not providing sufficient contrast. Using a light grey background, allows for a much more focused card.

An example: https://assets.materialup.com/uploads/e6b289a5-9992-4d85-bb85-3e7dd0dd4b7b/attachment.png

@tschubotz At this stage would you say that we'd try to go for card based elements for Android too?

from safe.

@tschubotz I like it!

all good, just had few comments about showing steps overview and resizing of the card to adjust according to text lengths in different languages.

from safe.

So the plan is to use the cards, right? I like them too.
Then we should also use them on Android.
@biocom what do you think?

from safe.

I think cards can work, but with some conditions to keep in mind:

• Asses carefully on what screens to use cards an what screens not. On some screens using cards will have as a side effect that there's less available width for content. Which could be problematic for larger screen devices (e.g. transaction send screens)
• I would recommend to use better color contrasts, in case of using cards. E.g. a grey background with white cards. In general we're doing this for Android. On iOS this is mostly not implemented (white cards on white bg). I know @posthnikova agrees on the idea but we need team consensus to decide for that. In terms of syncing Android/iOS visually, I think it's also important to decide this sooner than later.

Let me know your thoughts.

from safe.

I agree that cards look better on grey background and I'm already trying to use them this way, like here: https://invis.io/FXPSG91SV8B#/340277291_08_MakeFirstDeposit_. And here: https://invis.io/FXPSG91SV8B#/340277285_02_PairWithBrowserExtension_. But then we'll have consistency issues because on screens without cards background is white, and on screens with cards it's grey.

from safe.

Should we create a separate issue for this, so we can track discussion and implementation around the cards?

from safe.

commented in invision

from safe.

Should we create a separate issue for this, so we can track discussion and implementation around the cards?

Yes, let's do this.

from safe.

Project put for review here: https://invis.io/PYPF44ESJ6X

Main changes: added icon for touch id

from safe.

👍

from safe.

Looks nice, @biocom are we going to use cards on android too?

from safe.

@rmeissner I general yes, but as mentioned in a previous comment mine above, I'd carefully asses where to use/not use it. On some screens it will have a side-effect of allowing less horizontal placed text. For example on the 'Receive Funds' it works without issues.

from safe.

Can be closed once Zeplin screen have been added.

from safe.

Zeplin is here:

https://app.zeplin.io/project/5c49ce9866e3b3bee966f431/dashboard?seid=5c52c29e9696de3093f17f29

zpl://project?pid=5c49ce9866e3b3bee966f431&seid=5c52c29e9696de3093f17f29

from safe.