thenickdude / chickenpaint

An HTML5 Port of the ChibiPaint multi-layer Oekaki painting tool
GNU General Public License v3.0
120 stars 21 forks source link

Logo Design #37

Open Anteira opened 3 years ago

Anteira commented 3 years ago

I think it will be nice if ChickenPaint has it's own logo, and starts to look a bit more professional. As mentioned in the issue about the new icons set, I've been working on some different logo iterations.

Here is the initial sketch:

Chicken_Paint_Logo_Sketch

Here are all versions vectorised:

Chicken_Paint_Logo-01

I've decided to use the typeface Montserrat (as it has an open source licence) in SemiBold and in Regular Fonts. After outlining the logotype I've added some roundness to the letters to complement the rounded characteristics of the logo symbol. So, I think we might need to use an image for the logo as the initial fonts have been modified.

You can see that on some of them like Version 2, Version 4, Version 4.1. and Version 5, there are stylised highlights on the chicken's beak, comb or wattles or in some instances in the eyes too. The highlights are left only on the black coloured version (on the coloured I've left only the highlight on the eyes in some cases) so you can make a comparison and decide which one do you like best. My personal opinion, as this logo will be used for an app and will serve as an icon in some instances, I think it needs to be very clean, without any highlights that might make the overall look more complicated.

You can check the detailed explanations for each logo on the image above, where all of them are illustrated, but I will paste them here as well.

Version 1.0 Side silhouette of a chicken head at an angle, shaped like a pencil tip.

Version 1.1 Side silhouette of a chicken head at an angle, shaped like the letter “c” and resembling a pencil tip.

Version 2 Silhouette of a chicken head shaped like a short pencil.

Version 3 Silhouette of a chicken head shaped like a palette.

Version 4.0 Chicken head shaped like a combination between the letters “C” and “P”. The comb represents the letter “C”, whilst the head + beak + wattles represent the letter “P”.

Version 4.1 Similar to version 4.0. The only difference is that the comb, in this version has more “Elvis” look. Also, because of it’s shape the letter “C” is more noticeable.

Version 5 Chicken head shaped like a brush. The comb represents the tip of the brush and the neck looks like the brush’s grip.

My personal favourites are Version 1, Version 1.1 and Version 3, for the sole reason that they look very clean and are quite well suited for the intended purpose.

Here you can see how each one of them will look mocked up on an iPhone X screen:

Version 1 and Version 1.1

Screenshot 2021-08-04 at 19 25 24

Version 2 and Version 3

Screenshot 2021-08-04 at 19 25 36

Version 4 and version 4.1

Screenshot 2021-08-04 at 19 25 49

Version 5

Screenshot 2021-08-04 at 19 25 57

In all instances the "Hamburger" Menu icon has been replaced with a button that has the logo symbol as an icon. I also think that the widget buttons will need some icons too, because their looks at the moment is quite confusing if there are only letters, so I will come up with something and will post it in the icon's issue.

Here is a different view, this time in 767 x 1143px:

Chicken_Paint_Logo-09

Here is how it will look on an iPad:

Chicken_Paint_Logo-10

And another variant of the same logo.

Chicken_Paint_Logo-11

I haven't mocked up the rest of the logo versions for the desktop and medium sized screens, as this post will become too long :)

Each of these mockups are just suggestions, we can decide what works best.

I am eager to hear what you think about the logo designs :)

gastronomical commented 3 years ago

I think these all look amazing. 1.1 might be my favourite, I like the simplicity and the concept behind thee design. 2 is also very charming.

satopian commented 3 years ago

The color of the Chicken Paint logo is red, so it stands out. People who draw illustrations want to concentrate on the colors of their paintings, so I thought it would be better if the colors with strong saturation did not enter the UI. For example, a monochrome Chicken logo submitted as a design does not have this problem, so I think it is very good.

thenickdude commented 3 years ago

My favourite is 1.1 for sure, I love the pencil tip concept.

I agree with @satopian about the logo colour being a distraction in the drawing UI.

I don't think replacing the hamburger menu with the logo is a good idea because the logo doesn't communicate that it is clickable or would reveal a menu.

Anteira commented 3 years ago

Here is the finalised version of logo 1.1. I do agree with all of you that it looks best.

I tried different hues to add some colour but it seems like the only way this could work is in dark mode, but decided as @satopian and @thenickdude suggested to leave it in dark grey HEX: 333333.

I've also tried some other ways to integrate the logo in the mobile version, but this time integrated in a border using css with a chevron on the side that can indicate that this is a drop down menu. You can see it compared to the current version with the "Hamburger" menu. See primer below.

Dark Grey

Screenshot 2021-08-23 at 18 52 49

Light Grey

Screenshot 2021-08-23 at 18 53 54

I think with this small rework now it's obvious that this is a clickable drop down menu.

Here are other ways of usage, this time for larger screens / tablets and slightly smaller devices (smaller than than the basic iPad model)

V1 (With the logo symbol integrated in a rounded square)

Screenshot 2021-08-23 at 19 10 35

V2 (With no additional elements)

Screenshot 2021-08-24 at 11 42 21

Also, besides the Rounded Logotype (Manually Rounded Montserrat Font), I've decided to include a separate version using the Original Montserrat Font. I still think that the rounded works best but considering that the rest of the typography is not rounded (where used in the rest of the interface) this made me think that might not be the ultimate solution.

Would love to hear your thoughts!

Screenshot 2021-08-24 at 17 12 22

We could use the coloured version when promoting ChickenPaint or in other suitable situations.

@thenickdude you can download the logo here:

CHICKEN PAINT LOGO.zip

I can't wait to see how it looks once being integrated :)