I am replying without a quote so we aren't copying the images 100 times.
Keep in mind, these are my personal thoughts because I want to discuss it and you guys know I am always open to ideas and changes if they make sense.
I do like the more subdued colors seeing them side by side, as I always thought the original green seemed bright. So that one I think might be worth a look.
The drop shadow on the sidebar avatar image box, I think could be changed to be more level / flat (like you have it), but I have seen many design it with the heavy box there and don't think it's bad in the current form either.
As for the large fonts and types, I definitely would side with the current version and not the changes you made. I like the original look much better in the comparison screenshots.
I also actually like the blue header, lol, so I'm not feeling you on that one. Maybe it would look better in the little bit lighter blue you used?
As far as the colored headers with the icons, seeing them side by side, I am kind of 50/50 on them. If you add the colored headers you kind of have to remove the blue header up top. I'm not sold that either one is better or worse than the other.
Either way, thank you for taking the time to care and post some feedback. I can't promise that any of the changes will be made but I can promise it will be an item for the meeting. Also, as Max said, we now discussed the option of allowing community submitted themes that people can choose, so that is a win.
Anytime GreXX. Let me try and provide the reasoning behind some of my changes to the UI, maybe if you hear the reasons behind the changes I might get you to sway your opinion on some of the changes that you are undecided on. You and a few others already have taken a liking to the color palette I proposed, so I won't need to provide an in-depth explanation for that. I will provide an in-depth explanation for the font at a later stage.
This seems to be the most controversial change, so I'm going to try and tackle this one first. Okay. One of the side effects of a distinctly colored navbar and a distinctly colored header is that the design feels "congested" and "claustrophobic". One of the "rules" (I put this in brackets because these are not actually rules, but commonly accepted practises) when creating a UI is that you give as much white space to allow your design to "breathe". And take take that I'm speaking strictly in metaphorical terms here, this is the best comparison I can make. This post here by a fellow designer explains the practice of adding more whitspace to allow your design to "breathe". Take a look at Rule 3 :
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cdaExamples of "Breathable DesignThe addition of the colored header leaves less room for expansion in the elements below it, and also kills creativity by subduing the colors that can be used below it as well. But the best evidence to support the removal of the colored header comes from Material Design itself. Specifically websites and apps made by Google which are the best examples anywhere on the web of how Material Design should be executed. I've not only removed the header for personaly preference and to allow the design to "breathe", but also to adhere to Material Design guidelines better.
Examples of Headers & Their Effects - I'll Add More SoonGoogle Mockup :
Facebook Material Redesign :
In the examples below, you will see in most cases that if there is a colored header being used in the design, then the navbar/sidebar is always either the background color of the page or white, and if the navbar/sidebar of the page has a distinct color then the header, will usually be transparent.
You can have one, but you can't have both. So I choose to keep the navbar's distinct color and opted then to remove the header's color. In some of the examples below you'll see that if there is a colored header, then the navbar will either be white or transparent, as I said you can one, but you can't have both.If you take a look at the changes I made to the navbar, you'll see that not only did I remove the box-shadow, but I also adding padding to the logo, profile section, as well to the top of the menu section. In the current design the logo, is almost touching the top of the screen and there is very little "breathing" space between the different elements/sections in the navbar.
Comparison of Padding between UI'sAs with the removal of the header, which I detailed above, I've also removed the box shadow, not only to make the UI look better/flatter, but also to adhere to the Material Design guidelines better. Again to prove my point I will use examples of Material Design implemented in websites and apps. If you look at all the examples I posted below, you'll notice that in every navbar, there is what is called a "cover image", which is used in the design of most Android apps, which exhibit Material Design. The "cover image" is kind of like a profile image (with a background) for your account while using the app. This "cover image" is the closest comparison that I can make with the "profile" section in the Crypti Wallet UI.
So if you take a look at the "cover image" you will see that there are no box-shadows on it at all. None whatsoever.
I'm fine with the background color being darker than the rest of the navbar, but there can't be any drop-shadows at all. Navbar ComparisonsThese are all screenshots from Google developed apps.
One of the major problems that designers get wrong with Material Design is the use of drop-shadows, when to use them and when not to use them. This is a case when no drop shadows should be used at all. The reason for this is that the designers who create these problems don't understand the fundamentals of Material Design. Material Design at its core is a set of guidelines that are intended to make design mimic the real, physical elements in our world.
Read :
http://www.google.com/design/spec/material-design/introduction.html Taken directly from the link above : "A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic."
See :
http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-propertiesThe last major problem I had with the current UI, was the table design that was used. Tables feature a lot in the current UI, which is why I feel that is critical to nail their design as it features so heavily in the UI itself.
I mentioned that the tables seemed like generic Bootstrap 3 tables, but upon seeing that comparison image that you showed me, I guess I'd have to retract that statement. So I did some research and the best evidence I can find to support my argument is the tables used in Polymer
Polymer (
https://www.polymer-project.org), for those of you who don't know is a JavaScript library, built and maintained by Google, based ENTIRELY off Material Design. Polymer was created to bring Material Design principles to the web. All the recent UI updates to Google's existing products and all of Google's newer products are built using Polymer to power their UI's. Examples of Google Products already using Polymer :
- Google - Inbox
- Google - Keep
- Google - Calendar
- Google - Support
- Google - Product Forums
Now below is a screenshot of a sample table using Polymer, which is basically a showcase as to how a Material Designed table should look.
Things to take note of :- There are no striped rows in the table
- There are no borders between tows or columns within the table
- There is only a tiny border (I'd say around 2px) around the table and between the header of the table and the rows beneath it.
- The background color of the header and the rest of the table is the same.