0

Hi I need some professional visual design advice here. Pls see the following prototype and take note of the visual design of the dropdown elements + the filter button.

https://www.figma.com/proto/boTuxoainmeLukZpmQ2tmBdg/Homepage?node-id=644%3A407&scaling=min-zoom

I have a weird feeling it doesn't really match the rest of the site's design aesthetic (which is flatter). How I got the idea for the dropdown was from Kickstarter, which made the filter dropdowns very prominent. On the other hand, I tried to use a Google Material Design dropdown in an earlier prototype version and it didn't work. It kind of confused users as to whether there was even a dropdown in the middle of the sentence.

How can I make the dropdown design distinct and yet flat at the same time? Any suggestions? Or am I just paranoid about the design?

Kickstarter dropdowns in filter view: enter image description here)

closed as off-topic by Shreyas Tripathy, RobbyReindeer, maxathousand, Wanda, Devin Aug 14 '18 at 23:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – Shreyas Tripathy, RobbyReindeer, maxathousand, Wanda, Devin
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Can you provide the Kickstarter dropdown example that you referred to in your question? If you can also provide the example of the Material Design dropdown for comparison it will help with clarifying the context of your question. – Michael Lai Aug 12 '18 at 21:49
0

The drop down buttons contrast with the other buttons, the ones with the black border, and the slightly grey ‘buttons’ with campaign details; except the drop down buttons are not slightly grey. And the blue text color also adds a distinguishing feature.

I cannot zoom in to check closely, but my guess is that the border styles diverge too much. The solid black border which is equally thick on all sides, versus a slightly beveled border with drop shadow that is mainly at the bottom and the right side.

I think it is the uneven shadow that creates too much depth, so I would start tweaking there.

  • I'm not sure what you meant by slightly grey ‘buttons’ with campaign details, because I don't have a grey button. There's the primary button which is dark blue, and the black border secondary button. All the tags have a slight shadow to make them seem raised and sticked on like a sticker. I didn't want the drop down to resemble too closely to a button, I wanted a bit of distinction from the normal buttons. But fair enough comment – Jasmine Aug 14 '18 at 4:01
  • @Jasmine I meant the boxes with light green campaign properties, positioned in front of each campaign. – gerstemout Aug 14 '18 at 12:56

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