Logo design ideas

[nephros]

Playing around in Inkscape a bit with the intention to improve the very plain logo, I came up with the idea of replacing the U with a fish hook.

The image I found for doing this had a C-like appendage and a long stem, which after a bit of shuffling became this:

Now obviously, the M is missing there - and having a fish hook and a missing m, well, M is for Moray, so the next step was this:

which looks terrible because unfortunately my vector drawing skills are non-existent.

Still, I wanted to share this here in the hopes someone actually talented might pick up on it.

So find below the "final" SVG I have now, and if you like, please improve.

[nephros]

[Olf0]

Though I like the idea(s) a lot, after thinking about these for a while, I believe they are way too hard to decode. The vast majority of SailfishOS users are not native English speakers, hence all those who have not explored the topic "fishing" will not even know that "Chum" is related to that. Additionally the fishing hook has become hard to perceive as such due to its two attachments. And I would not have managed to figure out that these attachments are meant to be read as the letters "reversed, copylefted C" and "H", the fishing hook as "U" and the worm as "M", without reading your initial message twice.

In short, IMO this way too overloaded and near impossible to comprehend for most.

A simpler idea: Put the SailfishOS logo atop the word "CHUM" in the existing logo. I should still have the SFOS-logo around somewhere, but as it is copyrighted by Jolla, and Thaodan received it for the SailfishOS afternoon at FrOSCon 2019 I organised, you might rather request it from Jolla again (they do allow for many SailfishOS-specific uses of this logo). Furthermore it was in a bitmap ("raster) format, but it would be much better to obtain it in a vector graphic format, usually Adobe Illustrator .ai or SVG; do not be afraid of .ai-files, Inkscape handles them well and they are what customers usually receive from graphics design studios, i.e., Jolla might not have it as SVG and your contact may nor know that these two file formats are basically equivalent. Idea to circumvent the latter: Ask @llewelld ("flypig" at FSO).

Edit: I just found the SailfishOS logo as a vector graphic in SVG format, see https://sailfishos.org/content/uploads/2021/02/SF4.svg

BTW, I had this idea, because I looked at the Storeman logo (by Laurent Chambon (Laurent_C)) quite often lately, which also incorporates the SailfishOS logo.

[Olf0]

I gave it a try, because I gained some experience with vector- and bitmap graphics handling and design on my real job in the past two years. It all the same SVG, just with different layers visible: sailfishos-chum_which-font-to-use.svg

The first three are a logo for SailfishOS:Chum in general, an icon for the SailfishOS:Chum GUI application and a version with the original text inserted:

   

This one I generated to compare the fonts which seemed to be suitable (and close to the original glyphs):

The six fonts I preselected look almost the same, but none does exactly match the original font which I like a lot: Does somebody (e.g., @rinigus, @piggz) know which font that is, because separate glyph outlines were exported (as vector paths) for each character (Adobe Illustrator does that by default), hence I have no chance to technically determine which font was originally used. I ultimately used the font System-ui, but would gladly switch to the original font (if it carries a suitable license).

Edit 2: I also understood now, why Adobe Illustrator by default inserts each character of a text as an individual glyph: If it is inserted as text, it is rendered at slightly varying positions by different SVG renderers (the "text" is shifted a bit off its intended place); the classic explanation would be that some renderers do not have the font used available, so they use a substitute font, but it is the position of the first character which moves, so is not displayed at the same location. This is why I exported PNGs from Inkscape to show here as a quick & dirty workaround.

Next I will try to determine how to tell Inkscape to break up text into individual glyphs.

[Olf0]

Found how to convert font-glyphs to paths (it is very simple, actually), e.g.: https://linuxhint.com/convert-text-to-path-inkscape/

I would be glad to receive some feedback, before I carry on finishing my logo / icon ideas.

[wheelseal]

Though I like the idea(s) a lot, after thinking about these for a while, I believe they are way too hard to decode. The vast majority of SailfishOS users are not native English speakers, hence all those who have not explored the topic "fishing" will not even know that "Chum" is related to that. Additionally the fishing hook has become hard to perceive as such due to its two attachments. And I would not have managed to figure out that these attachments are meant to be read as the letters "reversed, copylefted C" and "H", the fishing hook as "U" and the worm as "M", without reading your initial message twice.

In short, IMO this way too overloaded and near impossible to comprehend for most.

A simpler idea: Put the SailfishOS logo atop the word "CHUM" in the existing logo. I should still have the SFOS-logo around somewhere, but as it is copyrighted by Jolla, and Thaodan received it for the SailfishOS afternoon at FrOSCon 2019 I organised, you might rather request it from Jolla again (they do allow for many SailfishOS-specific uses of this logo). Furthermore it was in a bitmap ("raster) format, but it would be much better to obtain it in a vector graphic format, usually Adobe Illustrator .ai or SVG; do not be afraid of .ai-files, Inkscape handles them well and they are what customers usually receive from graphics design studios, i.e., Jolla might not have it as SVG and your contact may nor know that these two file formats are basically equivalent. Idea to circumvent the latter: Ask @llewelld ("flypig" at FSO).

Edit: I just found the SailfishOS logo as a vector graphic in SVG format, see https://sailfishos.org/content/uploads/2021/02/SF4.svg

BTW, I had this idea, because I looked at the Storeman logo (by Laurent Chambon (Laurent_C)) quite often lately, which also incorporates the SailfishOS logo.

I Agree with Olf0. It looks good but is too difficult to understand. I´m a German user and first I don´t understand it.

[wheelseal]

Do we really need the words Chum GUI inside the logo? It is written under the logo. I have been thinking about a new logo and want to share it with you if it's ok:

> > > > > >

For the round logos I was inspired by a CD as a storage medium.

[piggz]

Out of the above, id vote for the 5th

[Olf0]

Do we really need the words Chum GUI inside the logo?

Well, it is not strictly necessary, but it continues to evolve the first and current icon and …

It is written under the logo.

that is solely the case for the icon of an installed SailfishOS:Chum GUI application on SailfishOS-Desktop ("launcher"). I.e., even for the specific SailfishOS:Chum GUI application icon that is usually not true. And I assumed we need a second, separate icon for the SailfishOS:Chum community repository proper and the repo config RPM (one icon will do for both IMO).

This is why I created a "Chum" and a "Chum GUI" icon (now proper SVGs on 86×86 Px² canvas), plus an "all-in-one" one with the texts as editable texts (not paths, except for the original text "CHUM"):

           

Edit: Thinking about it, a single icon may suit all purposes, depending on what it depicts.

[Olf0]

Out of the above, id vote for the 5th

So do I.
The issue I see with these drafts is that they contain too many too tiny elements (these two aspects correlate strongly) for a mobile screen: Take a look at this page on your mobile phone and look at the logos from your regular viewing distance: I can hardly recognise anything (No. 5 & 6 are also the best in this aspect).

If you want to pursue No. 5 @wheelseal, can you please try to significantly enlarge the Sailfish(OS logo), which requires to shorten the topmost streaks. The size of the "app icons" is fine IMO, it may help to reduce their number to 4 or 5 in order to enlarge the Sailfish. Please also make the Sailfish and the streaks a bit bolder, but not as bold as the Sailfish in No. 6 (that is a bit too much, for me it already becomes harder to recognise, because it is slightly too bold).
Side note: The "app icons" do not have to be slightly scattered (but sure can), they also look fine if strongly ordered, as in No. 6. They may even look better ordered, but I would have to see a scattered variant (No. 5) with an ordered one having the same outline as No. 5 side-by-side to come up with a clear preference.

[Olf0]

Here a pretty extreme example how easily recognisable icons should be: Take a look at the source code repository icons at the lower left in the open browser tab (in 1920x1080 Px², I look at this on my 15" laptop screen, please view this PNG full screen on your computer). The Patchmanager icon is hardly recognisable, the current SailfishOS:Chum icon is worse (I am not able to read "CHUM" there).

Edit: One take-away might be that colour-contrasts are helpful.

[nephros]

Are we commited to the color scheme?

Here are some tries switching to another, in this case the gradients from "icon-launcher-system-update" from Jollas Apss icon library - and using the swirly logo from there while we're at it.

,
,

[nephros]

Using an image search I just came buy the rather "playful" and somehow very un-jolla-like logo for harbour:

https://harbour.jolla.com/assets/images/harbor-logo-8d610d8a7fce1c9f08c00bf78160a81e.png

So if the anchor-and-rope image is for harbour, chum could be hook-and-fishing line (or also rope) for its logo/banner.

[Olf0]

Are we commited to the color scheme?

Not necessarily, for such things it is always tricky to find the right balance between continuity (of the old [icon]) and enhancements (which implicitly results in something new). I assumed the dark greenish blue to represent water.

I am no so happy with strong gradients, because they decrease visibility. Light gradients are fine, but hard to perceive so they might be omitted. And what does a gradient represent? But if it improves aesthetics and does not negatively affect any other aspect, a gradient is sure fine.

For the background, a strong gradient is even more problematic, as you can see above: it is "dissolving" the logo to the right into the white background of the web-page; the same will happen for "light ambiences" (IMO they are rather "bright").

Here are some tries switching to another, in this case the gradients from "icon-launcher-system-update" from Jollas Apss icon library - and using the swirly logo from there while we're at it.

The old, "swirly" SailfishOS logo is a good example for over-designing IMO: I have seen it so many times since in 2014 and only today in the context of this logo discussion I comprehend that it also represents a sailfish! Furthermore, Jolla ceased using it with the introduction of SailfishX (the end-user license programme for Sony Xperias) in 2016, so a whole generation of SailfishOS users will not know it, but the newer, much easier to recognise Sailfish logo.

WRT then old harbour logo (Jolla ceased using it long ago): Yes, a harbour as a anchoring place is common knowledge in contrast to a chum, hence the anchor is much easier to interpret for most. But I never detected the rope as such, until you hinted that this is what the letters are made of. Furthermore it is a good example of a logo being too "un-contrasty", especially the white, broken letter stroke on a bright gray background.

What your examples nicely show is that playing with colours is worth it. Additionally that white and light grays plus black and dark greys are unsuitable as a background on light rsp. dark ambiences. I also would like to reuse the extant dark greenish blue for something (for visual continuity to the old logo), though it does not matter what. What I am currently pondering about is:
What is a suitable, second colour with a high colour- and brightness contrast to the extant dark greenish blue?

[Olf0]

I tried to play with a background gradient, as I liked the idea. I am nor really satisfied, but maybe the start- and end-colour of the gradient are just not well chosen:

             

The basic idea was to create the impression of the sailfish jumping out of the water into the sky. I also liked to retain that dark greenish blue-gray of the old background as the body of the sailfish and the glyphs.

[Olf0]

I continued to play with it:

• I was not able to find any better start- and end-colour for the background-gradient. If someone has a suggestion, just name them as "HTML colors" (six digit hex numbers).
• I was dissatisfied with the contrast of the letters, so I experimented with darkening them and using black and white outlines (as already with the sailfish):

         

While it is impressive how different the same colour inside a black or white outline looks, the outlined versions do not look good IMO, when small. And the fully black glyphs are just too black from my POV.
The remaining three ("darker glyphs", "much darker glyphs" and "white glyphs") are O.K., IMO; I like the first one best.

Opinions?

[piggz]

Of the above, no4 ... could the graphic be simpler? with the outline it looks a little busy

[Olf0]

Of the above, no4 ... could the graphic be simpler? with the outline it looks a little busy

The outline is "the graphic", i.e., the SailfishOS logo since 2016. I can fill it with whatever colour, transparency (100% in the original, so the background shines fully through; see all former examples from all three of us) or a mix of these two. I can also set the outline colour, but only white and black do work well. Or its width, which I increased by a factor of ~ 1,25 to enhance visibility (idea "stolen" from @wheelseal).
But to do away with the outline results in having five strangely shaped patches hovering above the glyphs / letters.

What I do like is to give the body of the sailfish a different colour than the background, because it looks more than a sailfish than a logo, then. Hence I used the background colour of the original, first SailfishOS:Chum icon to colour then fish.

@rinigus, @nephros, @wheelseal, do you have a preference for one of these three:

1. Preferred by: @olf
   
2. Preferred by: @olf
   
3. Preferred by: @piggz
   
4. Maybe that comes closer to what @piggz envisioned:
   

[piggz]

Something i knocked up

[llewelld]

Jolla might not have it as SVG and your contact may nor know that these two file formats are basically equivalent. Idea to circumvent the latter: Ask @llewelld ("flypig" at FSO).

Sorry for not replying earlier and thanks for your prod via the forum @Olf0. There's a lovely variety of icons here. Since @Olf0 asked if there's a licence (or convention) for using the Sailfish OS logo in app icon designs, I've asked about it internally and will get back here when I find out.

You already found an SVG of the Sailfish OS logo, but for completeness and future reference, it's also available on the Press page (scroll to the bottom of the page). The PDF version is in vector format and can be converted to SVG.

Finally, I didn't see mention of the App Icons Story and Template here. You should have your icon design however you want of course, but personally I prefer a launcher where all the icons broadly follow the guidelines (e.g. padding dimensions) described there and it's definitely worth a look.

[Olf0]

@marbalf (MBF) contributed this:

I am sending you an icon I made for me some time ago. I hadn’t realised that there had been a discussion and some proposals about icons already.

Feel free to comment on it, dump it, adopt it, or adapt it.

[wheelseal]

If you want to pursue No. 5 @wheelseal, can you please try to significantly enlarge the Sailfish(OS logo), which requires to shorten the topmost streaks. The size of the "app icons" is fine IMO, it may help to reduce their number to 4 or 5 in order to enlarge the Sailfish. Please also make the Sailfish and the streaks a bit bolder, but not as bold as the Sailfish in No. 6 (that is a bit too much, for me it already becomes harder to recognise, because it is slightly too bold).
Side note: The "app icons" do not have to be slightly scattered (but sure can), they also look fine if strongly ordered, as in No. 6. They may even look better ordered, but I would have to see a scattered variant (No. 5) with an ordered one having the same outline as No. 5 side-by-side to come up with a clear preference.

>>

Sorry for my late reply. Left is the original (Nr. 5) and on the right a reordered version. I also deleted the gradient from the lines because if i opened it in the browser the gradients are shown as black lines.

@marbalf (MBF) contributed this:

I am sending you an icon I made for me some time ago. I hadn’t realised that there had been a discussion and some proposals about icons already.
Feel free to comment on it, dump it, adopt it, or adapt it.

Also a nice idea. However, I'm afraid that the packages in your logo version will be very difficult to see, because they become very small on the cell phone display.

@rinigus, @nephros, @wheelseal, do you have a preference for one of these three:

1. Preferred by: @olf
   ![sailfishos-chum_visible_v3+darker](https://user-images.githubusercontent.com/16547876/213528881-d14d6211-3ed6-412d-b4de-102a144b267e.svg)

2. Preferred by:
   ![sailfishos-chum_visible_v3+much-darker](https://user-images.githubusercontent.com/16547876/213528887-8ff0022f-eaac-4129-bf1b-8d8723e76b8d.svg)

3. Preferred by: @piggz
   ![sailfishos-chum_visible_v3+white](https://user-images.githubusercontent.com/16547876/213528893-f6a8d0ee-f41f-4a55-8fc7-1620b8c4f687.svg)

4. Maybe that comes closer to what @piggz envisioned:
   ![sailfishos-chum_visible_v3+white-white](https://user-images.githubusercontent.com/16547876/213554410-6eabf2a3-fb86-41a1-bbdb-f632f75b5b33.svg)

@Olf0 You have asked for one of the three versions. But my favorite is the 4. version here. This is the most coherent in my opinion. The best way to see the sailfish is if the body has no color. And Please use Black or white and NOT Gray as color for the Sailfish and the word Chum if you would us a gradient in the background. Because Gray is difficult to see on it.

By the way: If I tap on every SVGs uploaded here (your and mine) The Preview in Firefox is Black.

[Olf0]

@wheelseal, thank you for your feedback.

Yes, number 4 was added later. It was an experiment to hear from piggz if he meant that, which turned out to be a failure.

Your comments helped me understand, that perception differs a lot: For example the black letters in the third icon here are outright ugly IMO. The same applies to the perception of the transparent Sailfish logo: The sailfish is hardly recognisable for me, I only see the well known logo; I start to easily see the fish when its body has a colour a fish might have.

By the way: If I tap on every SVGs uploaded here (your and mine) The Preview in Firefox is Black.

Firefox's SVG renderer was always weak. This is why GitHub renders them independently.

[Olf0]

weelseal's comment made me rereading this thread:

• Only his and my designs are technically usable, all others are not SVGs.
• His designs do not obey the keep out area ("padding area") as llewelld indicated. See the designs from piggz and marbalf, which make this area explicit by shading it differently, and page 10 of Jolla's App icon story PDF.

I think we all spent too much time on this (for me I can say that for sure) and my tries to gather conclusive opinions on specific designs mostly failed. I will see what to make out of this, as there seems to be no common understanding of a constructive process towards a logo which fulfils all three, the basic design criteria by Jolla, technical necessities and readability necessities.

Thank you all for you ideas and feedback.