Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing icons from release review polishing #856

Closed
6 of 7 tasks
Bugsbane opened this issue Aug 13, 2016 · 24 comments
Closed
6 of 7 tasks

Missing icons from release review polishing #856

Bugsbane opened this issue Aug 13, 2016 · 24 comments
Assignees
Labels
2. developing Work in progress design Design, UI, UX, etc. papercut Annoying recurring issue with possibly simple fix.

Comments

@Bugsbane
Copy link
Member

Bugsbane commented Aug 13, 2016

There are currently icons missing for:

as requested in #735 .

@Bugsbane Bugsbane added design Design, UI, UX, etc. 2. developing Work in progress papercut Annoying recurring issue with possibly simple fix. labels Aug 13, 2016
@Bugsbane Bugsbane added this to the Nextcloud 10.0 milestone Aug 13, 2016
@Bugsbane Bugsbane self-assigned this Aug 13, 2016
@Bugsbane
Copy link
Member Author

Bugsbane commented Aug 13, 2016

Here are the current drafts for federation, update notification, theming and survey client. They're not properly aligned to the pixel grid yet, or with line widths and positions perfected. They're intended here to get feedback on the general concept of each from @nextcloud/designers, first. They're also currently displayed here at double size, too, to compensate for not being pixel grid aligned yet.

Survey client:
I want to change the ? font, but I like the speech box, other than the line width:
nextcloud-survey-client-icon

Update notify:
It's hard to find a concept that is easily recognizable for this, that doesn't look like either the browser refresh icon, an upload icon, or a power on icon. Still, other than some needed tweaks, I'm faily happy with this:

nextcloud-update-notify-icon

Federation:
As noted previously by @jancborchardt , we could still just use the well known "share" icon for this, however it seems to me that we'd benefit from a new icon, as users have a pretty specific expectation of "share" which is different. This is similar, expressing the ability to share to other clouds, but (hopefully) different enough to be recognized as a different function:
nextcloud-federation-icon

Theming:
Surveying what's used elsewhere, there's a strong dominance of only two basic icons for theming. A thin and a fat paintbrush. I went with thin, as it looks more elegant imo. Line widths still need adjusting:
nextcloud-theming-icon

@juliusknorr
Copy link
Member

Great work @Bugsbane. Here is some feedback from my side on those icons.

Survey client: I like the idea, just the speech box looks a bit odd, maybe just turning it 180° might fix that already.

Update notify: I don't see the notify-part of it in the icon, but as you said, this is harder than the rest. Maybe we could go with some kind of bell icon, as the notifications app uses combined with some arrow. (Possibly something like this one: http://www.shutterstock.com/pic-224752771/stock-vector-update-time-icon-with-shadow-vector-illustration-eps.html)

Federation: I like it, you could try to add one more "node" to it and connect it to one or 2 of the others, so it will get more the look of a network graph, but I'm not sure, as that might already be to much

Theming: Great one. In my opinion it would make sense to draw the brush from the bottom left to the upper right, as it would be used. Apart from that 👍

@Bugsbane
Copy link
Member Author

Hey Julius,
Thanks for the feedback. Here are my thoughts on what you added:

Survey client:
I mainly did it in that orientation, as my understanding of the app, is that it will appear as a pop over from the notification area, and thus will have the "spoke" at the top from the notification bell, with the survey below, as with the current user menu and this icon.

Update notify:
Yes, you're right, using the bell in some way would be consistent with the current notification icon. I'm thinking I might try the current bell icon with an arrow taken out of it as a negative space. I'll just have to see if it's still ready to read, visually, at small sizes.

I should also mention that the icon you linked to at shutterstock looks almost identical to the icon I just did that was added to the new "Recent files" feature by... Icewind from memory?

Federation:
Yeah, I was torn as to whether or not to show more nodes/connections. Doing it would more clearly denote a decentralized network, but at the expense of visual clarity. :/ What about if I just put a thinner line between the bottom two nodes?

Theming:
How would flipping this horizontally make it more like how a paintbrush is used in real life? Most people are right handed, and when you hold a brush in your right hand to paint, it orients the way it is in the draft above... Personally I'm not fussed either way, but I don't quite follow the logic. If there's a general consensus that flipped horizontally would look better though, I'm happy to oblige.

@juliusknorr
Copy link
Member

Update notify:
I should also mention that the icon you linked to at shutterstock looks almost identical to the icon I just did that was added to the new "Recent files" feature by... Icewind from memory?

I remember I saw an icon like that in the Nextcloud repo already, but i couldn't find it. Don't we just have your the clock icon there?
https://github.com/Bugsbane/server/blob/bc0323d4ad3d7f17250e5d811a26c2a475d39c28/apps/files/img/recent.svg

Federation:
Yeah, I was torn as to whether or not to show more nodes/connections.
Doing it would more clearly denote a decentralized network, but at the
expense of visual clarity. :/ What about if I just put a thinner line
between the bottom two nodes?

Right, that sounds reasonable to me.

Theming:
How would flipping this horizontally make it more like how a paintbrush
is used in real life? Most people are right handed, and when you hold a
brush in your right hand to paint, it orients the way it is in the draft
above... Personally I'm not fussed either way, but I don't quite follow
the logic. If there's a general consensus that flipped horizontally
would look better though, I'm happy to oblige.

I guess that's just my kind of feeling, let's wait what other @nextcloud/designers have to say. :)

@Bugsbane
Copy link
Member Author

Ok, here's the latest versions:

Survey client:
nextcloud-survey-client-icon

Update notifier:
nextcloud-update-notify-icon

Federation:
nextcloud-federation-icon

Theming:
nextcloud-theming-icon

I had trouble finding the original svg we're using for the notify bell, but when I do, I'll replace the bell I'm using here with it.

@MariusBluem
Copy link
Member

Thank you @Bugsbane ... I am not sure whether they would fit into our other icons 😕
Lets wait until we have a statement from other @nextcloud/designers and especially @jancborchardt ;)

An addition to federation: Maybe we should have one federation logo that is representing the "Federated Cloud Sharing" by the Open Mesh Initiative across the clouds (ownCloud, Nextcloud, pydio, ...) ... Just for the recognition value of Federation 😁 @schiessle

@schiessle
Copy link
Member

@jancborchardt can you have a look at it? We should sort this out in time if it should go in Nextcloud 10. Thanks!

@jancborchardt
Copy link
Member

@Bugsbane since these icons mainly show up in the Apps management I would like to not introduce too much complexity there. That’s why I think Federation should use the share icon (it is in the »Sharing« section of the admin settings too). And Update notifier should just use the notification app icon as well (the simple bell).

Survey client looks good, but a bit too complex in form. Try making the speech bubble filled and the question mark a negative (white) form inside it.

For theming a painter’s palette might look better as icon cause a brush is very small, thin and delicate.

@MorrisJobke
Copy link
Member

That’s why I think Federation should use the share icon (it is in the »Sharing« section of the admin settings too). And Update notifier should just use the notification app icon as well (the simple bell).

I did the easy ones in the above linked PRs ;)

@eppfel
Copy link
Member

eppfel commented Aug 28, 2016

Hey, let's see if I can contribute something here:

Survey client:

I agree with @jancborchardt. Based on the existent comment icon it could look something like this:
comments-preview
Although compared to most other (newer?) icons this one has sharp edges, so maybe should be more rounded...
Actually I think question mark in speech bubble is not the best symbol to use, because – as I understand it – the survey client is more of a passive reporting tool. (Maybe it even has to renamed; the actually copy speaks of usage reports, not surveys.)
With this in mind some icon implying statistics, a report and/or uploading would be more fitting.

Theming

For theming I think a palette (without any brush) could look a bit to ambiguous.
I could create something with a paint roller or a wider paint brush, to not give the impressions of being to precise.
https://thenounproject.com/term/paint-roller/
https://thenounproject.com/term/paint-brush/
One could additionally embed one of these in a simplistic "browser Window" to make clear what can be "painted".
https://thenounproject.com/term/browser-window/

Password Policy
I propose a key: https://thenounproject.com/term/key/

Retention
Based on the delete icon (a simple trash with lit): Maybe adding a simplified clock on the trash can?

Let me know what you think, than I will gladly put some more effort in to it.

@MorrisJobke
Copy link
Member

(Maybe it even has to renamed; the actually copy speaks of usage reports, not surveys.)
With this in mind some icon implying statistics, a report and/or uploading would be more fitting.

Yes. It is indeed only a background task that can be configured (what to send). So this makes sense.

For theming I think a palette (without any brush) could look a bit to ambiguous.
I could create something with a paint roller or a wider paint brush, to not give the impressions of being to precise.

I really like the paint roller! :)

I propose a key: https://thenounproject.com/term/key/

What about a lock? https://thenounproject.com/term/lock/

Based on the delete icon (a simple trash with lit): Maybe adding a simplified clock on the trash can?

Yes! Makes total sense to combine this.

@eppfel I really like your ideas :) @nextcloud/designers How about you?

@eppfel
Copy link
Member

eppfel commented Aug 30, 2016

What about a lock? https://thenounproject.com/term/lock/

A lock more generally describes security. A password is more of a key to me. But again this is a question of complexity, as a lock could be used for others apps as well.

I'll draft the other proposals.

@MorrisJobke I'll gladly join @nextcloud/designers

@MorrisJobke
Copy link
Member

@MorrisJobke I'll gladly join @nextcloud/designers

I invited you 🙌

@LukasReschke
Copy link
Member

LukasReschke commented Aug 30, 2016

@eppfel Seeing that you're from Germany, you may be interested in our upcoming conference: https://conf.nextcloud.com :-)

@eppfel
Copy link
Member

eppfel commented Aug 30, 2016

@MorrisJobke 🙌 🎉
@LukasReschke Already crossed my mind.. Let's see if I find the time.

@eppfel eppfel self-assigned this Sep 2, 2016
@eppfel
Copy link
Member

eppfel commented Sep 2, 2016

Password Policy
Used the Lock from Password action

Retention
Up for discussion:

  1. arrow 3x
  2. clock-arrows 3x
  3. clock 3x
  4. donut 3x
  5. clock-arrows 3x

My favorite is 3, although 5 might already be sufficient.

Theming

  1. background 3x
  2. theming 3x

Did not come up with something concrete for survey client / usage report, yet.

@eppfel
Copy link
Member

eppfel commented Sep 4, 2016

Ok, I found a clock already used in nextcloud. Would favor this one for consistency: clock-original 3x

@MariusBluem
Copy link
Member

Ok, I found a clock already used in nextcloud. Would favor this one for consistency:

Lets take this one 😉

@MorrisJobke
Copy link
Member

Ok, I found a clock already used in nextcloud. Would favor this one for consistency:

Looks good 👍

@eppfel
Copy link
Member

eppfel commented Sep 5, 2016

Any thoughts on the Theming proposals?

  1. background 3x
  2. theming 3x

Paint roller it is?

@MorrisJobke
Copy link
Member

I would go for 1.

@MorrisJobke
Copy link
Member

Okay - only the survey client is missing and I moved this then to the repo: nextcloud/survey_client#33

I will close this ticket here.

@eppfel @Bugsbane Thanks a lot for all you nice work :) We really appreciate this :)

@Bugsbane
Copy link
Member Author

Bugsbane commented Sep 15, 2016

@eppfel - The clock on the garbage can looks like it's placement a little high. Could we get it aligned so that the space above it is equal to the space below (and the spaces on the sides)?

I quite like the first theming icon (the paint roller) though.

@MorrisJobke
Copy link
Member

@eppfel - The clock on the garbage can looks like it's placement a little high. Could we get it aligned so that the space above it is equal to the space below (and the spaces on the sides)?

@Bugsbane I opened this as separate issue in the retention bug tracker: nextcloud/files_retention#11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress design Design, UI, UX, etc. papercut Annoying recurring issue with possibly simple fix.
Projects
None yet
Development

No branches or pull requests

9 participants