A new design compatible with Dark Mode

Hey fam,

Let's take a look at what we have at the moment (I had to recreate these screens in Sketch as I didn't have source files):

Based on that, I propose the light version that is compatible with the Dark Mode

3 Likes

What can I say, it look so much more professional now.

Looks wonderful @Tomek! Also looks like it'll be sufficiently constrained in terms of scope, yet be quite a significant improvement in the UI.

PS: The address in the Blue_QR screen is a Bitcoin address and not Ethereum address.

Glad to hear that!

So let's think about the missing parts. @hboon @JamesB Please let me know what other screens you would like me to make with a lighter color scheme. "Change Wallet" screen with better icons? What else might you need? Is there any screen with unusual modules or layout that you want me to make?

You can drop a screenshot here.

I prefer avoiding dog-chase mode and support both iOS and Android with an updated design.

Can't think of any offhand. I think the only expected change is to change the background color and keep any other change to a minimal. Will buzz you if any other screen that warrants more changes comes up.

I suggest we change the segmented bar in White_Wallet and when we import a wallet to the native iOS version for iOS. The one in the screenshot is native to Android. But we should consider if we want to do it later, as another sprint or standalone issue.

I like this one as it is, it's restricted in scope.

Link to Zeplin (app) zpl://project?pid=5d088205bff2d15de6a4397b&seid=5d89e1d7d27f6b623175bcad

Link to Zeplin (web)

Looks good. On a quick parse I have the following points:

  • Gap between tokens on main wallet page too big now (looks better with a smaller gap). See text above 'Expand th'.
  • Transaction screen looks great.
  • Not sure about placement of certificate validity - check the temporary place the certificate validity is in on Android. It's currently an experiment. See below.

Is this an alternative selectable mode? If so I like the idea, we could explore different colour schemes. Also having an ability to change schemes more quickly will be good in the long run.

Android source is gradually being made to be far more easily configurable in different ways.

You have covered all the main screens. Do you think the two screens that have never been touched - Transaction confirmation and Transaction detail - need a redesign? Certainly confirmation is seen regularly, but maybe the detail page isn't used frequently enough.

certcap

Gap between tokens on main wallet page too big now (looks better with a smaller gap). See text above 'Expand th'.

What about the one below?

wallet_updated

Not sure about placement of certificate validity - check the temporary place the certificate validity is in on Android. It's currently an experiment. See below.

How about this?

Is this an alternative selectable mode? If so I like the idea, we could explore different colour schemes. Also having an ability to change schemes more quickly will be good in the long run

Not sure if I got what's alternative selectable mode? When you have 5 cryptos and you select 2?

You have covered all the main screens. Do you think the two screens that have never been touched - Transaction confirmation and Transaction detail - need a redesign? Certainly confirmation is seen regularly, but maybe the detail page isn't used frequently enough.

I made few screens.

Looks better with the smaller gap I think :slight_smile:

That's good. The 'pending' transaction usually has a spinner animation on wallets to show it's in progress. There should be a 'view on etherscan' button too.

What I meant by alternative selectable mode is skins. Having a selectable skin like Intellij has default and darkula.

Some context:

  • Tomek has visual designs which are envisioned for the long term. They look nice and we should expect them to evolve for many reasons one of which is our feature set is also evolving. Several reasons to have this "vision" is: we can't implement all the visual changes at one go and because some of them includes additional functionality which we don't provide yet.
  • We have scoped down iterations of visual design changes which brings us 1 step towards the final design (point above). This is one of them. — keyword "scoped down". Bear that in mind :slight_smile:
  • "Dark Mode" refers to the iOS feature that launched with iOS 13 (released publicly a few days ago). It lets users flip a system switch and every app that supports Dark Mode will switch their color scheme. A close approximate on Android is Dark Theme [1] but it's simpler and more standardised in terms of how the system handle it in iOS. It isn't referring to multiple selectable themes (but not saying that themes shouldn't be implemented). We aren't supporting Dark Mode/Theme yet, but the white background is going to make it easier to if/when we do.

[1] Android has a head-start on this because they have OLED screens before iOS devices.

What I meant by alternative selectable mode is skins. Having a selectable skin like Intellij has default and darkula.

Please do not make it a Settings option to change the skin. Leave it to the OS

Then, Android will stay white. There's nothing like Dark Mode yet AFAIK.

To Clarify: There's no dark mode in Android, so no switching. The actual UX implementation you outlined above would go in.

I still prefer the placement of the certificate icon in Android. Having a set of graphical indicators to illustrate debug/production signed looks clearer.

Although, you could argue the icon should go on the left hand side at the top, where users are used to seeing it on web pages. Having a single icon which quickly illustrates the certificate status, and being able to click on it to reveal detailed certificate data mirrors this behaviour, and is more consistent with expectation.