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

New Icons #791

Open
Aoiike opened this Issue Mar 2, 2017 · 30 comments

Comments

6 participants
@Aoiike

Aoiike commented Mar 2, 2017

I saw that you were looking for some new Icons, so I made these and adjusted the layout slightly
preview
This is just a heavily modified screenshot as a preview.

My Thought Process:

  1. Most of the Icons Vienna currently uses are for sharing the current article on various services, which would make a lot more sense to all be consolidated into a system Share button introduced in 10.8.

  2. The titlebar only seems to show the unread count, which is a bit of a waste on 10.10+, I don't know if it can be set this way and still function on Mavericks, I think there is a fallback function somewhere.

  3. I added a SegmentedControl for the View modes because it's a really useful option that I didn't realize was available until I was going through all the menus.

  4. The Icons themselves are PDFs for template images, mainly to get the native styling on any version of macOS/OS X as recommended by Apple Guidelines, it would also save some time next time they revamp the UI.

I also redid the main Application Icon
iconpreview
It's different, but I really like it.

@josh64x2

This comment has been minimized.

Show comment
Hide comment
@josh64x2

josh64x2 Mar 2, 2017

Member

Oh thank you! I really like these!

  1. I thoroughly agree with using the share button. We would also need to work out how to integrate our custom share services with the system provided share services.
  2. We might be able to provide a toggle to hide the titlebar. I recall seeing it in some applications.
  3. Segmented control for the view modes is a good idea! I'm sure it would be useful for some people.
  4. Using PDFs will be great for providing resolution independence for retina, 4K and 5K systems.

I like the new application icon as well. I also like the current icon but with the amount of UI changes we are performing we need to reflect this in the app icon somehow so a new icon would be perfect.

@barijaona @Eitot what are your thoughts? @Eitot these would integrate with your toolbar ideas wouldn't they?

Member

josh64x2 commented Mar 2, 2017

Oh thank you! I really like these!

  1. I thoroughly agree with using the share button. We would also need to work out how to integrate our custom share services with the system provided share services.
  2. We might be able to provide a toggle to hide the titlebar. I recall seeing it in some applications.
  3. Segmented control for the view modes is a good idea! I'm sure it would be useful for some people.
  4. Using PDFs will be great for providing resolution independence for retina, 4K and 5K systems.

I like the new application icon as well. I also like the current icon but with the amount of UI changes we are performing we need to reflect this in the app icon somehow so a new icon would be perfect.

@barijaona @Eitot what are your thoughts? @Eitot these would integrate with your toolbar ideas wouldn't they?

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Mar 2, 2017

Member

This would fit indeed perfectly with my ideas too. I am currently rewriting the plug-in manager so that it takes advantage of NSSharingService.

I am not sure about putting them into the share button though. Putting them into that button will probably change the workflow of some users. Moreover, the menu is not really meant for dropping as many custom services into it as Vienna currently has plug-ins, because the user might have set their own preferences in System Preferences → Extensions. We don’t have much control over how to menu is arranged, so all Vienna services would just be stacked at the top of the menu. We would need some kind of interface so that users can manage and rearrange them. Though I would not mind keeping the separate toolbar icons as well (we don’t have to show them in the default toolbar).

@Aoiike, thanks for the icons! Have you tested them on Mavericks too? I think they might need a wee bit of tweaking to make them less blurry on non-high-resolution displays. The rubbish bin is perhaps too detailed; it looks a bit ‘heavy’.

As for the application icon, I prefer the current one. Apple has chosen to leave some richness in their icons rather than going all flat. Having this tilted, thick icon fits a bit better, in my opinion.

Member

Eitot commented Mar 2, 2017

This would fit indeed perfectly with my ideas too. I am currently rewriting the plug-in manager so that it takes advantage of NSSharingService.

I am not sure about putting them into the share button though. Putting them into that button will probably change the workflow of some users. Moreover, the menu is not really meant for dropping as many custom services into it as Vienna currently has plug-ins, because the user might have set their own preferences in System Preferences → Extensions. We don’t have much control over how to menu is arranged, so all Vienna services would just be stacked at the top of the menu. We would need some kind of interface so that users can manage and rearrange them. Though I would not mind keeping the separate toolbar icons as well (we don’t have to show them in the default toolbar).

@Aoiike, thanks for the icons! Have you tested them on Mavericks too? I think they might need a wee bit of tweaking to make them less blurry on non-high-resolution displays. The rubbish bin is perhaps too detailed; it looks a bit ‘heavy’.

As for the application icon, I prefer the current one. Apple has chosen to leave some richness in their icons rather than going all flat. Having this tilted, thick icon fits a bit better, in my opinion.

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Mar 3, 2017

They are optimized for 1x scale, and this is how they look in Mavericks style.
composition-m

Aoiike commented Mar 3, 2017

They are optimized for 1x scale, and this is how they look in Mavericks style.
composition-m

@josh64x2

This comment has been minimized.

Show comment
Hide comment
@josh64x2

josh64x2 Mar 7, 2017

Member

They look great 👍 but I'd like to hear @barijaona's thoughts as well.

Member

josh64x2 commented Mar 7, 2017

They look great 👍 but I'd like to hear @barijaona's thoughts as well.

@barijaona

This comment has been minimized.

Show comment
Hide comment
@barijaona

barijaona Mar 7, 2017

Member

I like all these icons, but like Eitot, I‘d prefer a tilted app icon (seems more Mac like to me).

Member

barijaona commented Mar 7, 2017

I like all these icons, but like Eitot, I‘d prefer a tilted app icon (seems more Mac like to me).

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Mar 7, 2017

icon_128x128
Nine degrees later

Aoiike commented Mar 7, 2017

icon_128x128
Nine degrees later

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Mar 7, 2017

This is how the HiDPI versions look
hidpi

Aoiike commented Mar 7, 2017

This is how the HiDPI versions look
hidpi

@JanX2

This comment has been minimized.

Show comment
Hide comment
@JanX2

JanX2 Mar 8, 2017

@Aoiike
Observations:

  1. I may be wrong, but to me it feels like the four icons in the center don’t have enough whitespace around them. They fill much of the area available. Do you think they would look better, if shrunk down, so they have one Cocoa point/1x pixel more breathing room in all directions? Like the second group for showing/hiding sections of the window.
  2. The back and forward arrows are split into two filled shapes, while in the third icon, the arrow is a solid shape.
  3. To me, the filter icon sits one point too high in its button.

Thank you for doing this!
The icons are very well done. :)

JanX2 commented Mar 8, 2017

@Aoiike
Observations:

  1. I may be wrong, but to me it feels like the four icons in the center don’t have enough whitespace around them. They fill much of the area available. Do you think they would look better, if shrunk down, so they have one Cocoa point/1x pixel more breathing room in all directions? Like the second group for showing/hiding sections of the window.
  2. The back and forward arrows are split into two filled shapes, while in the third icon, the arrow is a solid shape.
  3. To me, the filter icon sits one point too high in its button.

Thank you for doing this!
The icons are very well done. :)

@josh64x2

This comment has been minimized.

Show comment
Hide comment
@josh64x2

josh64x2 Mar 8, 2017

Member

So according to https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/ToolbarIcons.html#//apple_ref/doc/uid/20000957-CH89-SW1 the template images should be:

  • Create images that measure no more than 19 x 19 pixels.
  • Make sure the image is visually centered in the control (note that visually centered might not be the same as mathematically centered).

19 x 19 seems a little small so I'm assuming thats 38x38 @2x etc .. which still seems small but anyway. if we follow those guidelines then macOS should size them correctly for the toolbar control. The only one that looks like it may be a little too large for me is the new subscription icon.

@JanX2 The filter icon might look a little bit high because of the anti-aliasing on the bottom of it?

Anyway I love the icons @Aoiike and I can't wait to have them in Vienna!
I do have a suggestion for the app icon itself, but I need to find some time to mock it up - hopefully tomorrow!

Member

josh64x2 commented Mar 8, 2017

So according to https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/ToolbarIcons.html#//apple_ref/doc/uid/20000957-CH89-SW1 the template images should be:

  • Create images that measure no more than 19 x 19 pixels.
  • Make sure the image is visually centered in the control (note that visually centered might not be the same as mathematically centered).

19 x 19 seems a little small so I'm assuming thats 38x38 @2x etc .. which still seems small but anyway. if we follow those guidelines then macOS should size them correctly for the toolbar control. The only one that looks like it may be a little too large for me is the new subscription icon.

@JanX2 The filter icon might look a little bit high because of the anti-aliasing on the bottom of it?

Anyway I love the icons @Aoiike and I can't wait to have them in Vienna!
I do have a suggestion for the app icon itself, but I need to find some time to mock it up - hopefully tomorrow!

@JanX2

This comment has been minimized.

Show comment
Hide comment
@JanX2

JanX2 Mar 8, 2017

That probably hasn’t been updated and should say “points”. ;)

BTW: the filter icon is a case of not being “visually centered” as per the docs.

JanX2 commented Mar 8, 2017

That probably hasn’t been updated and should say “points”. ;)

BTW: the filter icon is a case of not being “visually centered” as per the docs.

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Mar 8, 2017

Member

Keep in mind that we have not made up our minds on how the toolbar is going to look in the near future. For instance, there were some suggestions for a combined search field, so we might not need a toolbar icon for the filter. I have also seen a request for a ‘mark as read’/‘mark all as read’ toolbar item. We currently also have ‘Style’ and ‘Get Info’ toolbar items.

We would also be needing some template icons for the sidebar eventually, like in Finder or Mail. Specifically icons for: folder, smart folder, feed (for those without a favicon) and trash.

Member

Eitot commented Mar 8, 2017

Keep in mind that we have not made up our minds on how the toolbar is going to look in the near future. For instance, there were some suggestions for a combined search field, so we might not need a toolbar icon for the filter. I have also seen a request for a ‘mark as read’/‘mark all as read’ toolbar item. We currently also have ‘Style’ and ‘Get Info’ toolbar items.

We would also be needing some template icons for the sidebar eventually, like in Finder or Mail. Specifically icons for: folder, smart folder, feed (for those without a favicon) and trash.

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Mar 8, 2017

The HiDPI screenshot is what I hacked together (I'm not good at Xcode), and I haven't figured out alignment yet, so everything including the buttons themselves are misaligned.

@JanX2 I did consider the whitespace and dimensions of the Icons while I was making them, and I opted for clarity of purpose over fitting the size guideline. Now that I've been looking at them for a while they look totally fine, so maybe see how they feel after a week or so. The Arrows are intended to look noticeably distinct from the Skip button.

@josh64x2 Regarding the 19x19 limit, it doesn't explain why this specific number, especially the use of an odd number in the vertical for icons designed to fit in a 22pt button, so I am assuming this guideline is either outdated or optional. I've also been working to a 26x18 guide, so most of the Icons are wider than 19pt.

@Eitot Folders, Smart Folders, Trash, and Get Info all have System Icons which makes things easier.

Aoiike commented Mar 8, 2017

The HiDPI screenshot is what I hacked together (I'm not good at Xcode), and I haven't figured out alignment yet, so everything including the buttons themselves are misaligned.

@JanX2 I did consider the whitespace and dimensions of the Icons while I was making them, and I opted for clarity of purpose over fitting the size guideline. Now that I've been looking at them for a while they look totally fine, so maybe see how they feel after a week or so. The Arrows are intended to look noticeably distinct from the Skip button.

@josh64x2 Regarding the 19x19 limit, it doesn't explain why this specific number, especially the use of an odd number in the vertical for icons designed to fit in a 22pt button, so I am assuming this guideline is either outdated or optional. I've also been working to a 26x18 guide, so most of the Icons are wider than 19pt.

@Eitot Folders, Smart Folders, Trash, and Get Info all have System Icons which makes things easier.

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Mar 8, 2017

Member

They still have to be drawn though, there are no such template images in the APIs.

Member

Eitot commented Mar 8, 2017

They still have to be drawn though, there are no such template images in the APIs.

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Mar 8, 2017

Can you load them in from /System/Library/CoreServices/CoreTypes.bundle/Resources, or did SIP break that?

Aoiike commented Mar 8, 2017

Can you load them in from /System/Library/CoreServices/CoreTypes.bundle/Resources, or did SIP break that?

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Mar 8, 2017

Member

I do not think so, but it is not a good idea. The paths could change in future macOS versions and as far as I know, we are aiming for sandboxing one day. Best to bundle our own resources or use documented Cocoa APIs.

Member

Eitot commented Mar 8, 2017

I do not think so, but it is not a good idea. The paths could change in future macOS versions and as far as I know, we are aiming for sandboxing one day. Best to bundle our own resources or use documented Cocoa APIs.

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Mar 8, 2017

Okay, I'll add those to the list.

Aoiike commented Mar 8, 2017

Okay, I'll add those to the list.

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot
Member

Eitot commented Mar 8, 2017

@JanX2

This comment has been minimized.

Show comment
Hide comment
@JanX2

JanX2 Mar 8, 2017

@Aoiike
I believe that the 19x19 recommendation is, because this way, there always is a row of pixels horizontally and vertically that coincides with the exact center of the icon.

You can break with the guidelines, of course. The issue I described comes in part from the variation in whitespace across the icons. :)

JanX2 commented Mar 8, 2017

@Aoiike
I believe that the 19x19 recommendation is, because this way, there always is a row of pixels horizontally and vertically that coincides with the exact center of the icon.

You can break with the guidelines, of course. The issue I described comes in part from the variation in whitespace across the icons. :)

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Mar 9, 2017

Member

Unfortunately, we cannot use those folder icons. Apple provides no templates for the sidebar. 😒

Member

Eitot commented Mar 9, 2017

Unfortunately, we cannot use those folder icons. Apple provides no templates for the sidebar. 😒

@josh64x2

This comment has been minimized.

Show comment
Hide comment
@josh64x2

josh64x2 Mar 10, 2017

Member

We should probably make a list of the actual icons 😄 edit: Toolbar templates
I'll start!

  • Refresh
  • Subscribe (New Feed)
  • Skip Folder
  • Empty Trash
  • Action (Perform Task)
  • Send Link (Email)
  • Get Info
  • Style
  • Back
  • Next Unread (Forward)
  • Show Filter bar
  • Share - Blogo
  • Share - Buffer
  • Share - Google+
  • Share - Cocoalicious
  • Share - Evernote
  • Share - Hootsuite
  • Share - Ecto
  • Share - Facebook
  • Share - Instapaper
  • Share - MarsEdit
  • Share - Twitter
  • Share - Pocket
  • Share - Delicious
  • Share - Pukka
  • Share - Safari Reading List
  • Vertical Layout (New icon)
  • Horizontal Layout (New icon)
  • Unified Layout (New icon)
Member

josh64x2 commented Mar 10, 2017

We should probably make a list of the actual icons 😄 edit: Toolbar templates
I'll start!

  • Refresh
  • Subscribe (New Feed)
  • Skip Folder
  • Empty Trash
  • Action (Perform Task)
  • Send Link (Email)
  • Get Info
  • Style
  • Back
  • Next Unread (Forward)
  • Show Filter bar
  • Share - Blogo
  • Share - Buffer
  • Share - Google+
  • Share - Cocoalicious
  • Share - Evernote
  • Share - Hootsuite
  • Share - Ecto
  • Share - Facebook
  • Share - Instapaper
  • Share - MarsEdit
  • Share - Twitter
  • Share - Pocket
  • Share - Delicious
  • Share - Pukka
  • Share - Safari Reading List
  • Vertical Layout (New icon)
  • Horizontal Layout (New icon)
  • Unified Layout (New icon)
@josh64x2

This comment has been minimized.

Show comment
Hide comment
@josh64x2

josh64x2 Mar 30, 2017

Member

Hey @Aoiike do you need any help with this? 😄

Member

josh64x2 commented Mar 30, 2017

Hey @Aoiike do you need any help with this? 😄

@josh64x2 josh64x2 added this to Done in Modernise UI Mar 30, 2017

@josh64x2 josh64x2 moved this from Done to Backlog in Modernise UI Mar 30, 2017

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Apr 25, 2017

Okay, I've been a lot busier than I expected so it took me a while to get back, I reworked all the icons to fit within 19x19, and look better at 3x.

The list of Icons done so far is:

  • Previous
  • Next
  • Horizontal View
  • Vertical View
  • Continuous View
  • New Feed
  • Mark Folder/Feed Read
  • Sync (Refresh All)
  • Cancel Sync
  • Empty Trash
    And for the Sidebar
  • Generic RSS Feed
  • Folder
  • Smart Folder
  • Trash

I had some ideas to repurpose the Filter Bar and have it persistently enabled to make this the Folder-specific settings bar. I'll open a separate issue for this because it means moving and expanding the Style Menu's functions.

The Skip Folder button is pretty much redundant if there is a Mark Folder Read button. I don't know about anyone else but I would find it more useful if I could mark a folder or feed as read without then jumping to the next folder and marking the first article in the next folder as read by navigating to it.

I've probably forgotten something so I'll update this if I remember.
compositionv2

Aoiike commented Apr 25, 2017

Okay, I've been a lot busier than I expected so it took me a while to get back, I reworked all the icons to fit within 19x19, and look better at 3x.

The list of Icons done so far is:

  • Previous
  • Next
  • Horizontal View
  • Vertical View
  • Continuous View
  • New Feed
  • Mark Folder/Feed Read
  • Sync (Refresh All)
  • Cancel Sync
  • Empty Trash
    And for the Sidebar
  • Generic RSS Feed
  • Folder
  • Smart Folder
  • Trash

I had some ideas to repurpose the Filter Bar and have it persistently enabled to make this the Folder-specific settings bar. I'll open a separate issue for this because it means moving and expanding the Style Menu's functions.

The Skip Folder button is pretty much redundant if there is a Mark Folder Read button. I don't know about anyone else but I would find it more useful if I could mark a folder or feed as read without then jumping to the next folder and marking the first article in the next folder as read by navigating to it.

I've probably forgotten something so I'll update this if I remember.
compositionv2

@RobFog

This comment has been minimized.

Show comment
Hide comment
@RobFog

RobFog commented Apr 25, 2017

Neat!

@josh64x2

This comment has been minimized.

Show comment
Hide comment
@josh64x2

josh64x2 Apr 26, 2017

Member

Thank you so much :)

Member

josh64x2 commented Apr 26, 2017

Thank you so much :)

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Apr 26, 2017

Member

I had some ideas to repurpose the Filter Bar and have it persistently enabled to make this the Folder-specific settings bar. I’ll open a separate issue for this because it means moving and expanding the Style Menu's functions.

How does this look when the article list is on the left side rather than at the top?

Member

Eitot commented Apr 26, 2017

I had some ideas to repurpose the Filter Bar and have it persistently enabled to make this the Folder-specific settings bar. I’ll open a separate issue for this because it means moving and expanding the Style Menu's functions.

How does this look when the article list is on the left side rather than at the top?

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Apr 26, 2017

Pinned above both, like this
layout-1

I also remembered what I didn't mention, the Sidebar's Search is hidden in the overscroll like in Safari and Notification Center.

Aoiike commented Apr 26, 2017

Pinned above both, like this
layout-1

I also remembered what I didn't mention, the Sidebar's Search is hidden in the overscroll like in Safari and Notification Center.

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Apr 26, 2017

Member

Putting the search box into an overflow area is not really doable with the components that Apple provides. I’ve looked at this weeks ago and I noticed that it cannot be done without some IMO nasty workarounds and it probably would not be very elegant. The fact that we still support Mavericks makes things more difficult. This is a lot easier on iOS where UISearchController provides for this functionality.

I am also not sure about making the filter bar a persistent element. I would actually like to merge this functionality into the main search box and move the filter button to the toolbar as well (like your first proposal).

Member

Eitot commented Apr 26, 2017

Putting the search box into an overflow area is not really doable with the components that Apple provides. I’ve looked at this weeks ago and I noticed that it cannot be done without some IMO nasty workarounds and it probably would not be very elegant. The fact that we still support Mavericks makes things more difficult. This is a lot easier on iOS where UISearchController provides for this functionality.

I am also not sure about making the filter bar a persistent element. I would actually like to merge this functionality into the main search box and move the filter button to the toolbar as well (like your first proposal).

@Eitot

This comment has been minimized.

Show comment
Hide comment
@Eitot

Eitot Jun 25, 2017

Member

@Aoiike: I have managed to separate the toolbar. It should be easy now to use the default NSButton look with template images. Would you be willing to submit the toolbar icons?

Member

Eitot commented Jun 25, 2017

@Aoiike: I have managed to separate the toolbar. It should be easy now to use the default NSButton look with template images. Would you be willing to submit the toolbar icons?

@Eitot Eitot moved this from Backlog to In Progress in Modernise UI Jul 1, 2017

@Aoiike

This comment has been minimized.

Show comment
Hide comment
@Aoiike

Aoiike Jul 1, 2017

An update to the list, I added Skip Next and Skip Previous buttons
arrows

I think it would be very useful to enable holding the Option key to switch the standard Next/Previous Buttons into the Skip N/P versions, and the Skip N/P buttons to the regular Next/Previous, it would add a lot of customization flexibility.

Aoiike commented Jul 1, 2017

An update to the list, I added Skip Next and Skip Previous buttons
arrows

I think it would be very useful to enable holding the Option key to switch the standard Next/Previous Buttons into the Skip N/P versions, and the Skip N/P buttons to the regular Next/Previous, it would add a lot of customization flexibility.

@Eitot Eitot moved this from In Progress to Done in Modernise UI Feb 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment