1

I would like to know how this looks and an overall critique, but just answering the question in the title is enough (:

So in this screen the user would select what he wants to advertise, all that is shown is a 'progress tracker' and the buttons which the user will select. Both are made out of gradients, so I would like to know if the gradients are too much, or if I should design it in another way.

This is how it looks: Screen

And this is how the animation would look (Colors shouldn't change in the progress tracker, but the effect I am looking for is that the user is kind of 'unveiling' the gradient).

enter image description here

Edit:

Followed your recommendations, is it better? I personally really like how the semicircle looks with a part of the icon coming out at the top, but it really doesn't follow your advice of 'enclosing' the icon, does it look good? Will the user recognize it as a button?

enter image description here

Edit 2: Changed to circle, and decided to use the brightest color of the 'unveiling' circle at the top as the accent color for every screen (So as you progress through the accent color will get darker, I hope that is understandable). enter image description here

|improve this question
0

Probably not over-using, as the area covered by the gradients is not that large. But i would say mis-using, as these icons do not really need to be gradient filled, as they're quite tiny and you don't want gradients to restrict visibility.

Maybe keep the gradient for the 1-2-3-4 progress bar, that kind of makes sense, but definitely not for the 4 large icons below.

Also, i would totally remove the shadows around the larger icons and maybe try to place these inside a thin circular button-like shape instead. The shadow is really not needed as the icons are sharp enough against the light gray background.

ps. check out the Revolut interface

|improve this answer
  • re: shadows, i would agree. The gradients don't seem superficial, but the shadows do. – Yorik Aug 29 '18 at 15:04
  • Thanks for answering! I edited my post, what do you think? – Levon Aug 29 '18 at 20:12
  • Better, but i would still make those round. Nothing yells 'button' more than a circular blob. Don't try to reinvent the wheel i guess. – Lucian Aug 29 '18 at 20:57
  • Makes sense. Edited one more time, I would love if you shared your opinion (: – Levon Aug 30 '18 at 0:55
  • Even better now. – Lucian Aug 30 '18 at 4:40
1

The main problem I see with this is that the outline of the buttons is not consistent - which is logical when you have different shapes - but I think adding some basic shape that would enclose the icon (circle, rounded square, ...) would make them look more button like. Especially on mobile where everything is more button-oriented.

As for the gradient, I don't mind it very much. I personally wouldn't use it on the icons and would work on them more in the way stated above. What I like is the idea of 'unveiling' in the progress tracker.

|improve this answer
  • Thanks for answering! I edited my post, what do you think? – Levon Aug 29 '18 at 20:13
  • Yes, the version with the round button works. It's up to you whether to add a bit of a shadow to make it more clickable but now it definitely looks like a button. – fanaticalsmile Aug 30 '18 at 4:29
0

If you feel like using the same gradient on each logo is a bit too visually repetitive, then you could simply use the gradient across all icons (as shown) for a more unified feel.

enter image description here

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.