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

Logo ideas #307

Open
jcgerhard opened this Issue Mar 16, 2018 · 39 comments

Comments

Projects
None yet
7 participants
@jcgerhard
Contributor

jcgerhard commented Mar 16, 2018

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

This comment has been minimized.

Owner

laurent22 commented Mar 18, 2018

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.

@laurent22 laurent22 closed this in 90fad2a Mar 18, 2018

@jcgerhard

This comment has been minimized.

Contributor

jcgerhard commented Mar 18, 2018

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

@laurent22

This comment has been minimized.

Owner

laurent22 commented Mar 19, 2018

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

@jcgerhard

This comment has been minimized.

Contributor

jcgerhard commented Mar 19, 2018

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

This comment has been minimized.

Owner

laurent22 commented Mar 19, 2018

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

This comment has been minimized.

Contributor

jcgerhard commented Mar 20, 2018

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.

icons

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

icon-sizes

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!)...

desktop-macos


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

This comment has been minimized.

Owner

laurent22 commented Mar 21, 2018

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.

@laurent22 laurent22 reopened this Mar 21, 2018

@mr-bolle

This comment has been minimized.

mr-bolle commented Mar 24, 2018

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

joplin android - theme dark tags

@alexdevero

This comment has been minimized.

Contributor

alexdevero commented Mar 24, 2018

@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

This comment has been minimized.

Owner

laurent22 commented Mar 26, 2018

@laurent22 laurent22 added the question label Mar 26, 2018

@alexdevero

This comment has been minimized.

Contributor

alexdevero commented Mar 27, 2018

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

For icon:
u5dr9nlxgagynhcelxaknldgacm6p4y_1680x8400

@jcgerhard

This comment has been minimized.

Contributor

jcgerhard commented Mar 27, 2018

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

This was referenced Mar 31, 2018

@laurent22 laurent22 changed the title from Unify the color appearance to Logo re-design? Apr 4, 2018

@tessus

This comment has been minimized.

Collaborator

tessus commented Apr 13, 2018

@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

This comment has been minimized.

Owner

laurent22 commented Apr 16, 2018

@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

This comment has been minimized.

Collaborator

tessus commented Apr 16, 2018

@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

This comment has been minimized.

Collaborator

tessus commented Apr 17, 2018

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

  • just the letter J in black
  • or as on your web site screen shot 2018-04-17 at 02 42 48 (but instead of blue it will be a black square)
@laurent22

This comment has been minimized.

Owner

laurent22 commented Apr 18, 2018

@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

This comment has been minimized.

Collaborator

tessus commented Apr 19, 2018

@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

This comment has been minimized.

Collaborator

tessus commented Apr 20, 2018

@laurent22 how's that?

joplin

@laurent22

This comment has been minimized.

Owner

laurent22 commented Apr 20, 2018

@tessus, looks good 👍

@laurent22 laurent22 changed the title from Logo re-design? to Logo ideas Apr 20, 2018

@laurent22

This comment has been minimized.

Owner

laurent22 commented Apr 20, 2018

Another idea in this issue:

#447

@tessus

This comment has been minimized.

Collaborator

tessus commented Apr 20, 2018

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

This comment has been minimized.

Contributor

alexdevero commented Apr 21, 2018

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

@tessus

This comment has been minimized.

Collaborator

tessus commented May 9, 2018

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

This comment has been minimized.

Owner

laurent22 commented May 9, 2018

Brilliant, thanks @tessus!

@tessus

This comment has been minimized.

Collaborator

tessus commented May 9, 2018

@laurent22 you are very welcome.

@tessus

This comment has been minimized.

Collaborator

tessus commented May 12, 2018

@laurent22

This comment has been minimized.

Owner

laurent22 commented May 14, 2018

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

@tessus

This comment has been minimized.

Collaborator

tessus commented May 14, 2018

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

This comment has been minimized.

Owner

laurent22 commented May 18, 2018

@laurent22

This comment has been minimized.

Owner

laurent22 commented May 18, 2018

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)

image

image

@laurent22

This comment has been minimized.

Owner

laurent22 commented May 18, 2018

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

image

image

@alexdevero

This comment has been minimized.

Contributor

alexdevero commented May 18, 2018

@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

This comment has been minimized.

Owner

laurent22 commented May 21, 2018

@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

This comment has been minimized.

Contributor

alexdevero commented May 22, 2018

@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

This comment has been minimized.

saivan commented Sep 1, 2018

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

This comment has been minimized.

Owner

laurent22 commented Sep 9, 2018

Another one in this thread, quite a different approach:

image

image

image

@alexdevero

This comment has been minimized.

Contributor

alexdevero commented Sep 9, 2018

@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

This comment has been minimized.

andrea-marini commented Oct 28, 2018

Another one in this thread, quite a different approach:

image

image

image

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.
comparison

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.

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