Logo ideas

[jcgerhard]

It’s just a cosmetic adjustment, but I think it would be advisable to harmonize the appearance of all UI variants in terms of color. Hence I mean it would be nice to have the same colors on mobile and on desktop. At the moment the mobile apps are coming in blue while the desktop counterpart is coming in this shade of violet (or whatever). For creating a corporate design you should align the one with the others. I‘d like to have the blue color for all UIs...or maybe a new uniformed modern dark theme.

[laurent22]

Yes I find the blue colour a bit too generic that's why I was using something else in the desktop app, but it also makes sense to be consistent, so I've changed it to blue in the desktop app.

So unless someone with designing skills can come up with something more original, blue will be Joplin's colour for now.

[jcgerhard]

If you could help me, I would like to try to design a new theme...if that‘s ok for you?

[laurent22]

Yes that would be great, what info would you need to know?

[jcgerhard]

I‘d like to setup the development environment on my mac and would make changes to the desktop application.Would you please tell, where do I find the main style classes? I found color definitions in „style.css“ and „theme.js“. Or in other words: what‘s the preferred way to create a new color theme for Joplin?

[laurent22]

To create a new theme you would need to add the new theme ID in ReactNativeClient/lib/models/Setting.js. To make the theme option show up in the config screen, you need to set appTypes to appTypes: ['mobile', 'desktop'].

Then the theme itself is defined in ElectronClient/app/theme.js.

The way it works is that there's a base style defined in globalStyle, then each individual theme can override this style in the themeStyle() function. As you will see in this function the default style is "THEME_LIGHT" and any other style should be defined below this.

I haven't done any testing with this but normally it should work, it's the same logic as in the mobile app. If you have any question let me know. One issue I can think of is that the style defined in style.css is currently hard-coded but that shouldn't be too difficult to move it out of this file and it themable.

[jcgerhard]

Good morning @laurent22,

thank you for your answer! I will try to setup everything during this day. Before I start working on a new theme, I'd like to show you a brief overview of an idea I had yesterday. It is just an idea, just a suggestion about what I could imagine of how Joplin's design could look like. But foremost I am going to respect your opinion about that because it is your project...your app!
You should be positive about those adaptions, too!

---

Personally, I like those modern "dark" themes and in terms of color combinations a mixture of shades of grey and tones of bright green. I scribbled a logo yesterday that combines these colors.
I also derived a monochrome version for taskbars or something like that.

The logo contains the Joplin "J" (free google font face "Montserrat") and four lines representing the lines of note sheet.

---

I tried to take account of different resolutions and sizes. The thickness of the lines has do be adjusted. But for this first idea-preview it looks like that...

Maybe I trash one line and make the rest a big thicker...or so.

---

If you put everything together on a MacOS X desktop it could look like the following screenshot (please examine in full resolution!)...

---

As I said before: this is just an idea. If you don't want to change so much or adapt the logo for example...that's absolutely ok. At this point I'd only like to hear your opinion about that. The app itself would be adapted to this color combination of green and grey, too. I hope I'm able to setup the development environment today so that I can show you how I think the app could look like, soon.

So...just think about it and have a nice day! =:-)

[laurent22]

Thanks the logo looks pretty good and more certainly original than my own attempt!

However at this point I'd prefer not to change it, simply because of the work involved to update it - there's 5 apps multiplied by many icon variants and sizes, there are logos, backgrounds and screenshots + the app stores and websites, not to mention the websites that host the app independently like Softonic, Download.com, etc. Just to give an idea of what's required to change this :-)

Again thanks for your effort anyway - some rebranding could be possible at some other times though and that logo would be an excellent start (I'd also make the lines a bit thicker).

A custom theme is still ok thought since it doesn't require re-creating assets.

[mr-bolle]

Hi, with the current Android App v1.0.112 - with the Theme dark, the Tags Menü isn't readable.

edit thanks for the fix into v1.0.115

[alexdevero]

@jcgerhard do you have another iteration or idea for the logo? It doesn't look or feel good. It is not memorable. It will not stand out in the App Store or Google Play. It looks without tasteless, average, nothing special. There is nothing unique about it that could help Joplin stand out like a really good app, not to mention create a brand for Joplin. Notes -> lines of text, Joplin -> J, one neutral color + one accent. Like something done quickly in a few minutes in Photoshop.

[laurent22]

Someone also proposed a logo there, which is not bad: https://steemit.com/utopian-io/@bazla/new-iconic-logo-design-for-project-laurent22-joplin

Archive link: http://archive.is/3Hi4Z

[alexdevero]

This one looks much better Good work. The blue variant (first) is the nicest:

For icon:

[jcgerhard]

I‘d really line the first one and the icons, too! 👍

[tessus]

@laurent22 Please let me know, if you are interested in having the Joplin icon as a brand icon in ForkAwesome.

If so, do you have the J as an SVG somewhere?

[laurent22]

@tessus, sure I've added the J as an SVG here: https://github.com/laurent22/joplin/blob/master/Assets/JoplinLetter.svg Feel free to add it to ForkAwesome if it can be accepted.

[tessus]

@laurent22 thanks for the SVG. this will make it a lot easier.

Feel free to add it to ForkAwesome if it can be accepted

A valid use-case should be presented for an icon to be accepted. If you have one, please let me know. With a use-case, I'm pretty sure we can add it to ForkAwesome.

[tessus]

@laurent22 besides the use-case, how do you envision the icon?

• just the letter J in black
• or as on your web site (but instead of blue it will be a black square)

[laurent22]

@tessus, the macOS tray icon is already in black and white, maybe it could be used?

https://github.com/laurent22/joplin/blob/master/ElectronClient/app/build/icons/macos-16x16Template.png

https://github.com/laurent22/joplin/blob/master/ElectronClient/app/build/icons/macos-16x16Template%402x.png

For the use case, I'm not sure actually. It could be used within Joplin for example to denote a link to a note for instance?

[tessus]

@laurent22

the macOS tray icon is already in black and white, maybe it could be used?

I don't think that particular icon is well suited for a font. I'll create one and paste it here.

For the use case, I'm not sure actually. It could be used within Joplin for example to denote a link to a note for instance?

Right, except that this isn't possible right now. I mean linking to another Joplin note from a note. But it might be possible in the future, in which case a Joplin icon would make it easier to denote such a link. Anyway, the fact that React apps can use external fonts also means that other apps could refer to Joplin with an icon.
The nice thing about it is that should you ever decide to revamp the Joplin logo, the font can also be updated and all references will show the new icon.

[tessus]

@laurent22 how's that?

[laurent22]

@tessus, looks good 👍

[laurent22]

Another idea in this issue:

#447

[tessus]

Let me try to get the icon (#307 (comment)) into the font first, since it is the current icon.

As soon as an icon is part of the font, it is rather trivial to update it.

Btw, I like the proposal from #447. It looks really nice.

[alexdevero]

Good work @laurent22 with that new proposal. It looks very good. This is different than just putting J on different background, or tile.

[tessus]

FYI: the Joplin icon will be in the next release of ForkAwesome. I'm sure it will look better than the current icon for internal links. ;-)

[laurent22]

Brilliant, thanks @tessus!

[tessus]

@laurent22 you are very welcome.

[tessus]

@laurent22 here it is: https://forkawesome.github.io/Fork-Awesome/icon/joplin/

[laurent22]

Thanks, the icon looks good! It could indeed be used to show the internal links or resource links in Joplin.

[tessus]

It could indeed be used to show the internal links or resource links in Joplin.

It definitely would make sense and it'd be more meaningful than the current icon (which looks like a create new document icon).

[laurent22]

Another logo idea there:

https://steemit.com/utopian-io/@yasujizr/joplin-logo

http://archive.is/tAsDm

[laurent22]

And another one:

https://steemit.com/utopian-io/@realinfo/joplin-logo-design

http://archive.is/PM4Wh

(Not sure why so many logo proposals on this website)

[laurent22]

Last one (quite complicated and unusual design, but putting it too for the sake of completion)

https://steemit.com/utopian-io/@ogzking/joplin-new-logo-design

http://archive.is/3lF5i

[alexdevero]

@laurent22 few questions (all are related to logo):

• What do you think is the biggest benefit of using Joplin?
• Why people like use to it?
• What is your main goal with Joplin?
• What is your main motivation for working on Joplin?
• If Joplin was a person what personality and characteristics would it have?
• Do you have some apps you like to use as an inspiration you when you work on Joplin?

Please, take your time and answer all these questions.

[laurent22]

@alexdevero, that's quite open ended questions :-) I guess the answer to most of these questions are either in the readme or, if not, I probably don't know the answer (like why people like to use it). What motivates me is that I can use it myself and it's available on all my devices. The fact that it's markdown means it's future proof too, so it will always be safe to take the data out and move it to a different app if needed.

[alexdevero]

@laurent22 they are open ended for a reason :-). I use these and a lot more questions when I work with my clients on defining and creating a brand for their products. Can you try to answer at least the "If Joplin was a person what personality and characteristics would it have?" please?

P.S.: i like your reason for using markdown-future proof. This is why I write almost all my documents in markdown.

[saivan]

I definitely agree, a new logo sounds like a good plan, and alot of these are very nice :) +1 from me! (I was about to add another one, but it seems like you're spoilt for choice haha)

[laurent22]

Another one in this thread, quite a different approach:

[alexdevero]

@laurent22 interesting idea. It evokes child-like playfulness, leisure, Looks like a something about fairy tale. The last one looks like the above + a copy of Evernote.

• What emotions and perception do You want to evoke when people see the icon?
• What should be the first people think about when they see the icon?

[andrea-marini]

Another one in this thread, quite a different approach:

The swirly J to me reminds me a lot the debian and opensuse logos, below a comparison in black and white to remove any color point of reference.

Logo by alexdevero to me seems the best one, the J intertwined with the logo of a note seems smart to me, I also like the bluish color better than the brownish color of the previous logo.

[laurent22]

Pasting this here as it could give some ideas for a logo, which would set it a bit apart like the elephant logo above, but without the Evernote reference (and with a Joplin reference):

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "backlog" and I will leave it open. Thank you for your contributions.

[etho201]

Here are some ideas I came up with. It's basically 2 sheets of paper (or sticky notes) held together with a paper clip -- overall the paperclip looks like a J. Colors can be changed, but would love to get feedback.

Here's the same thing with a bit of shadowing to make the J look sharper:

[etho201]

OG Colors: