UI design and layout about damselfly HOT 8 CLOSED

FYI, I'm going to embark on some work to tidy up the search bar, taking into account some of your points. https://github.com/Webreaper/Damselfly/milestone/9
I've also fixed the squared-off tags bug in the latest build.

from damselfly.

Why was this closed?

from damselfly.

Because it had been open for over a year, and in that time I've done a lot of work on the UI to clean it up and improve it.

Why would you reopen it? 😁

from damselfly.

Has it improves since the screenshots are taken? This product is interesting and it looks powerful but the UI in screenshots looks to be lacking

from damselfly.

Screenshots are pretty recent, so they represent the current state.

Are you a UI designer/developer? Do you have ideas on how to improve it, and would you be willing to build the design? If so, I'd love to hear your thoughts.

If you're not a designer, when you say the UI "seems to be lacking", can you elaborate and give details on what you think is wrong, and how you'd improve it? Happy to take on any good ideas!

from damselfly.

Sure, thank you for your interest. To preface this, I am not a web designer, but I do know CSS. I have yet to try it for myself, but let me point out what I notice so far before I do so

The biggest issue I think is lack of consistency.

• 

  • Why are these different shapes?

• 

  • Its a bit weird that the button color is different then the tag colors
  • Speaking of color,
    • Only thing on the page with that text color

• 

  • These two input boxes are too big compared to the others on the page
  • The keywords input is a different color (disabled? maybe) and is the only input on the page without a right button

Then you notice clipping

Hell, I might hide the select button, add a select mode, and replace it with a star button that only appears when you hover the image.

Overall, the visual style does not represent modern design trends, and as a result likely does not attract new users

• Button popout:
• Gradient:
• White line:

The search bars at the top could be combined into one that supports stuff like camera:sony

Yeah, massive dump of "issues", sorry to have it so overwhelming. If you need help do let me know.

from damselfly.

Thanks for the feedback. Some responses:

• The tag 'delete' is a different shape due to a bug
• Lots of colours need refactoring to create a common palette. It's on my list to tidy up.
• The 'add keyword' input box height has been fixed (I think) in a recent version. It's grey because it's disabled, and there is no right-hand box/control because there is nothing that needs to be there. The other controls which have a right-hand box do so because that is a 'clear' button, or has other functionality.
• The keywords are grey because they're disabled.
• The camera/lens fields clip because that entire control (the whole search bar) needs extra work - both to make the control work better, but to add new filters which are on the todo-list.
• The round selection buttons are designed to clip off the screen. I could add extra padding around the scroll area so they don't clip on the left border, but that would be a waste of whitespace, so I'm not too worried about it.
• Re: your suggestion about 'select mode' there is already a selection model. The round buttons are to indicate the image being in the basket, which is different from selection.
• As for "star buttons that only appear when you hover", no way - I absolutely hate the modern UX paradigm of hidden controls that give no affordances and don't even appear until you move over them with the mouse. A great example of this is the notifications UI in MacOS.
• If by camera:sony you mean a single google-like search bar with a language syntax, that's no use - because when you have 20-30 very specifically named lenses differentiated by focal lengths, it doesn't work so well.

The comments about the 'design trends' I get, but I also don't necessarily agree with. They are a little old-skool, and a couple of people have commented that the UI looks "dated" but others have said they like it. There are other themes which ditch the bevels and gradients to give a more modern clean look. I like it, but then I'm old-skool. 🤣

But yes, a lot of your feedback is valid, and many of those things are on the 'todo' list to fix (where they're bugs) improve (where they're obviously badly designed), make more consistent (it's a lot better than it was 4 months ago....) or even clean up. I may change the whole thing to use a form of material design, but the problem is that material design tends towards over-use of whitespace, and the type of app this is, it needs to be dense from an information/efficiency perspective.

I'd love to see a mock-up of what you think it might look like 'done right' though, and if it's good enough I'll try and implement it. 😁

At the moment, though, my time is limited, and there's a lot of functionality I want to add, and that always takes priority over the UI stuff, which is like a poor second-child to the main event, which is cool features!

Thanks for the feedback and comments though, very much appreciated.

from damselfly.

Released now, and screenshots updated. Most of the issues you raised are obviated by the new design, and some of the layout bugs are fixed.

The colour inconsistencies are still there, but I have an issue (#260) which will involve going through and completely re-vamping the CSS colours to give a more consistent feel across the app - which I'll tackle when I feel brave enough. ;)

from damselfly.