New Icons

[Aoiike]

I saw that you were looking for some new Icons, so I made these and adjusted the layout slightly

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

It's different, but I really like it.

[josh64x2]

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 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]

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

[josh64x2]

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

[barijaona]

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

[Aoiike]

Nine degrees later

[Aoiike]

This is how the HiDPI versions look

[JanX2]

@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]

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]

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]

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]

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]

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

[Aoiike]

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

[Eitot]

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]

Okay, I'll add those to the list.

[Eitot]

In case you haven’t seen it, Apple has guidelines for those icons too: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/SidebarIcons.html.

[JanX2]

@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. :)

[josh64x2]

Here is a list of the system provided images we can use for controls https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/SystemProvided.html#//apple_ref/doc/uid/20000957-CH92-SW3

And here is the list of icons (including a smart folder icon) https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/SystemProvided.html#//apple_ref/doc/uid/20000957-CH92-SW8

[Eitot]

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

[josh64x2]

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]

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

[Aoiike]

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.

[RobFog]

Neat!

[josh64x2]

Thank you so much :)

[Eitot]

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]

Pinned above both, like this

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

[Eitot]

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]

@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?

[Aoiike]

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

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.