[REQ] New app icon for v3?

[gingerbeardman]

I think the app has come a long way, I'd be happy to submit a new logo for the next big milestone v3!

Old thread: https://github.com/glushchenko/fsnotes/issues/197#issuecomment-383888900

Thoughts?

[peavine]

I've always liked the current icon because it's distinctive. However, it does lack a bit in the polish department, and FSNotes is no longer the brash upstart and is instead a fairly polished app. I'll be interested to see what you design.

[glushchenko]

@gingerbeardman i think this is a good idea

[peavine]

The earlier thread contained a link to Apple's Human Interface Guidelines for app icons. Just for background information, I thought it might be helpful to repost that link, which is:

https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

One point raised in the linked document is:

"Your macOS app icon should be recognizable, but not an exact copy of your iOS app icon. In particular, the macOS icon shouldn’t use the same rounded rectangle shape that the iOS icon uses."

It probably makes sense to first design the macOS icon?

[peavine]

I warned you guys that I have no design skills, but I did a google search and looked at some icons. Anyways, some ideas that came to mind are:

• The basic icon would be a spiral notebook with binding on the left and tabs on the right. A rough example of the notebook--before tabs are added--is:

https://www.iconfinder.com/icons/1154101/diary_note_book_spiral_notebook_icon

• A color to distinguish it from all the yellow macOS note icons. My preference would be a sky blue, which stands out but is not pushy.

A window near the top of the notebook with some typing in it to indicate the app's text-file origins. An example of the window is:

https://webiconspng.com/icon/7839

Below the window, a lightning bolt to indicate FSNotes lightning-fast operation. The red thunderbolt on the Fastscripts icon (see graphic below) looks great IMO.

This might all be too busy--especially with the window--but it's some initial thoughts.

[gingerbeardman]

@peavine I see where you are coming from, and I think I can come up with something everybody will like. it won't be exactly your idea, but it will contain its DNA.

[peavine]

@gingerbeardman. I'll look forward to the icon you design. It's absolutely OK if it incorporates none of my ideas. FSNotes is a good app and deserves a nice icon.

[gingerbeardman]

What about this lightning bolt shaped notepad?

first draft:

• I'm not happy with the size and colour of the rings
• need to experiment with look of the page edges
• will need some glow/shadow
• need to try it on different backgrounds

[peavine]

I like that a lot--distinctive and very attractive.

[gingerbeardman]

Another good "guide" on icon style http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/

Here is where I am right now (work in progress—not final!):

And here's the AppIcon.icns for anybody else that wants to live on this for a while: AppIcon.icns.zip

• Get Info on FSNotes.app
• Drag the .icns file onto the icon image in the Get Info window
• Tada! Non-destructive icon replacement
• (to remove: on get info window, click to highlight the icon and press backspace/delete)

[peavine]

The new icon looks nice but it seems that the lightning bolt is too prominent compared with the note. It's good though to go thru many ideas before settling on one.

[luckman212]

Love this new design, I agree the lightning should either be a little bit smaller/less prominent OR just get rid of the "note" part and leave it closer to the original with just the lightning bolt and the spiral rings.

[gingerbeardman]

@luckman212 great to get a comment from a new name! Hi!

Here it is with just one lightning bolt, without the "stack". Also managed to get a subliminal F in there so it now reads like "F⚡️" which is quite close to "FS". I'll refine that idea and add detail to the bolt.

I gave up on the spiral springs for a number of reasons (too difficult for my free time right now)

Icon file for those who want to live with it AppIcon.icns.zip

[peavine]

I installed the new icon file and then looked at the FSNotes icon in launchpad. It looks very nice and gets my vote so far. The subliminal F is a great touch.

BTW, have you tried different colors for the lightning bolt? The reason I ask is that you had a yellowish one in the text of your previous post and I wondered how that would look.

[gingerbeardman]

Will give it a go, I do like yellow. And blue.

[jeff-h]

Nice work @gingerbeardman :) I reckon it's a good direction and worth fine-tuning.

I tried it in my dock; I have too many apps in my dock so the icon ends up being ~32x30px (albeit 2x retina). Unfortunately when it's that tiny it's a little undistinguished, so when you have settled on the overall direction, I'm hoping you might take a peek at it tiny and see if there are some optimisations that might be made for small sizes.

(Ironically my first thought (at this size) is in contradiction with the consensus above — I feel the lightning bolt could be larger at this dimension).

[gingerbeardman]

Once we think we've got it, I'll redraw it optimised at every smaller size. For really small sizes, and iOS, I imagine it will be only the lightning bolt.

[gingerbeardman]

Mellow Yellow: AppIcon.icns.zip

[peavine]

I installed the new icon (yellow thunderbolt) and viewed it in launchpad and dock. It gets my vote.

[gingerbeardman]

Ooh that does look good. Not quite done with it yet, though.

[glushchenko]

Difficult to see yellow on white, my vote goes for blue :)

[gingerbeardman]

I think I will be able to call in a favour and have the app considered for a Mac App Store feature. @glushchenko it will require some coordination help from you regarding the release. What do you think?

[glushchenko]

I think I will be able to call in a favour and have the app considered for a Mac App Store feature. @glushchenko it will require some coordination help from you regarding the release. What do you think?

I'm ready to go. What do we have to do?

[quinncomendant]

I installed the new icon (yellow thunderbolt) and viewed it in launchpad and dock. It gets my vote.

It's nice that the yellow is the same as the Apple Notes app. Also a nod to old-style yellow-paper legal pads.

[glushchenko]

https://github.com/glushchenko/fsnotes/issues/481

[gingerbeardman]

Let's get in contact on Telegram/Whatsapp/iMessage etc.

[glushchenko]

@gingerbeardman https://t.me/og_ua

[gingerbeardman]

Latest (in yellow only for now) AppIcon.icns.zip

[peavine]

The yellow thunderbolt icon looks good on a blue screen background but not on white. The blue thunderbolt icon looks good on a white screen background but not on blue. I wonder if a deep-red thunderbolt icon (like the Fastscript's color) might look good on both both blue and white screen backgrounds? In all of these cases we would keep the notepad background for the macOS icon.

BTW I installed the latest yellow thunderbolt icon and it looks great. The following is a screenshot of a portion of launchpad with FSNotes and similar icons.

[gingerbeardman]

I think the visibility of the icon on white an be mostly solved using some tweaks to the outlines and adding contrast.

A quick rearrange for iOS gives this (not happy with it so I will probably keep the sentiment of the icon but do a bespoke arrangement)

[keymasterr]

I really like the idea of lightning and hidden letters FS.

Yet I'll put my two cents: In its current state icon looks more like a document type than the app. It's totally ok when the idea of the app is to create a document. But I believe FSNotes is mostly utility app, unique not with its filetype but with the way it's working itself. Possible solve is to draw a stack of paper (or some kind of an app block with note in it) instead of a single sheet. I really don't like an existing icon of v2 but I see it is much more solid as an idea.

And small visual buts:

1. The spike of the lightning below the bottom border of note is too thin and sharp, making uncomfortable tremble
2. While text lines and list bullets aren't meaningless, they are too thin and low-contrast. I guess, there is no need in that amount of lines to draw F letter

[gingerbeardman]

Another iOS idea

[gingerbeardman]

@keymasterr thanks for the feedback — much appreciated!

My inspiration for the macOS icon were TextEdit and Pages. Both feature a "pen" and "paper". It's kind of "Apple style" and you can see more up this thread, and at the Apple HIG and Martian Craft links.

Your points:

• spike
• low contrast lines

Both intentional, but I kind of agree, will take a look.

Not sure what you mean about amount of lines needed? Can you demonstrate? Do you mean fewer lines, of higher contrast, more spaced out?

[keymasterr]

@gingerbeardman Yep, I had a thought about the roots of your inspiration :-) But there is a catch: the idea of TextEdit is to be the most common OS default text editor, and Pages have unique filetype which is clearly demonstrated in its icon. And both are working with certain “files” while FSNotes' context is something like “database” (something you don't mind until you want to backup or sync :-)

About lines and F Both higher contrast and fewer lines. Also, bullets have to be a bit bigger than the text line for visual compensation needs. Roughly and a little bit hyperbolic:

[gingerbeardman]

@keymasterr OK, I see, the latest icon is more like what you describe. You're using a very early version of the revised icon. Try the one in https://github.com/glushchenko/fsnotes/issues/477#issuecomment-460642409 and I'll continue to improve it.

I will think about your idea of FSNotes as a "database" idea. 🤓

[gingerbeardman]

Meanwhile, latest: AppIcon.icns.zip

[sweenzor]

wow that looks great!

[keymasterr]

Just a quick sketch of a little bit modified idea of the proposed icon. Few thoughts behind this image:

• Not just lightning but lightning-fast and those strings of text can also be a swoosh of speed
• Rounded corners and a little bit of volume of background to make it more solid (more of an app than the schematical sheet of a document)
• Keeping hidden F
• Keeping the angle of the icon
• Text/swoosh/F is on the same layer with lightning
• The left border of background plate with protruding bars of text can look like a notepad spring
• Yellow on white is too bright, making mess in small sizes. Therefore yellow lightning should be darker, have a border or be of different color. Here I choose the latter

What do you think?

[gingerbeardman]

I love it, great improvements. I'll pursue this direction. Thanks!

[quinncomendant]

Don't forget to make a dark theme icon too! 😜

But seriously, don't get too focused on finding the exact color right away, just make sure the icon looks good with any color choice. Perhaps someday you'll want to provide multiple icon choices for the user to choose. E.g., here's what the Apollo and PCalc apps offer (with some icons unlocked via in-app purchase):

[keymasterr]

@quinncomendant yep, take a look at dark-mode Dock on the right of my image. There is the same icon in the real-life small size for testing purpose. (And readability on dark is why text bars are brighter from the left)

[gingerbeardman]

Will resume work on this on Monday.

[glushchenko]

@gingerbeardman see menu bar icon in 2.9.5. May be we can improve it?

[gingerbeardman]

@gingerbeardman see menu bar icon in 2.9.5. May be we can improve it?

Definitely, will include a "monochrome" version for there.

[peavine]

I had earlier posted screen shots of launch pad with the then-current FSNotes replacement icon and thought I would do this again with the most recent replacement icon. I think it looks great, but it's important to see how it would look on backgrounds other than blue.

[gingerbeardman]

Yes, the yellow really becomes a problem at small sizes.

[peavine]

@gingerbeardman. You have a tough job. You not only have to draw a nice icon but one that works on different backgrounds and at varous sizes. It's a lot of work.

BTW, I posted above the Fastscripts icon, which I think is very nice looking. It's hard to discern what the Fastscripts menu-bar icon really is. So, at really small sizes, there's probably only so much that can be done.

[keymasterr]

@gingerbeardman I can help with the final icon creation. (i don't want to interrupt your work if you started it already though).

Just in case, my telegram is @keymasterr and mail is kmstrr@gmail.com

[gingerbeardman]

Hi, feel free to go for it. We're actually having a baby today/tomorrow! So my free time will only become less.

Team Effort 🙏

[gingerbeardman]

@keymasterr did you make any progress? I have some time today to pick it up.

[keymasterr]

Yep. I was going to show it in a little bit more complete view, though I can take some comments already. I tried several completely different mockups and returned back to what I showed here. Now searching for the best elements forms and colors.

Dark Dock icon, iOS one and big icon on white. Small icons for lists in Finder (like filetype ones) and black-and-white for menubar are coming. What do you think about this? @glushchenko ?