Proposed Logo Designs

[hernandito]

Hi,

I took the liberty in creating a few logo/icon variations. The one you currently use feels too generic/plain.

I don't know the genesis of the name "Pinchflat"; but I tried to do something with it. Same with the current teal color.

I created two main variations. One using the teal color, and one with a more direct relation with the YouTube logo. I am tending towards the teal option. The red feels too close to YouTube.

I will explain each variation: The "v.A" down arrow versoiin = a play on the YouTube play button but rotated to imply more of a download concept. The cookie bite is to make it less generic.

The "v.B" is plainly the letter P sideways. Rotated to make is not look like a letter, and also is is facing "down" as in download.

The "v.C" is for indicating you are collecting individual's YouTube channels. From what I see in your program, you are downloading the content of a per channel basis. The "v.D" option is similar to "A" without the cookie bite, and it is still implying both download and the play button idea. This is my least favorite as I think it comes to close to looking like a lock.

Versions E to G are all variations of the same idea. The use of a paper clip to organize things together. A paper clip "pinches" papers together. And the down arrow implies download.

I am pasting the images below. I have done them at around 1200px each. But I think they need to be seen in lower resolution for proper evaluation.

Please let me know if you like them. Please do not feel obliged to implement. As someone in the creative field, I understand getting ideas rejected.

I do have a favorite... but I will not influence.

Please let me know, and we can expand adding the word "Pindash" for a full logo.

Thanks.

[kieraneglin]

First of all, thank you so much for this! It's extremely thoughtful for you to put these together. This is why I love the OSS community!

I'll be the first to say that I didn't put a lot of thought into the current logo and I'm open to improvements! These suggestions aren't jumping out to me but I'll lay out the meaning behind the name and maybe that'll offer some insight :)

The name isn't... clever. I'm a backend developer and my weaknesses are design and marketing! My thought process was that all similar apps have "Tube" in their name and I didn't want to copy that (or else I would've just called it Tubarr LMAO). I'm an avid mountain biker so my mind went in that direction - a pinch-flat is something that can happen when you have a tube in your tires. Like I said, it's not very clever but that was my thought process at the time and it stuck because it was different.

---

The current logo has a few of those elements - it's round to represent a tire and it's slightly flat on the bottom to represent the actual pinch-flat. It's not much and, again, I'm not very attached to the current logo, but it's what I could come up with at the time!

Thank you for the feedback and let me know if you have any other questions :)

[hernandito]

Hi,

Thanks for the explanation.... Based on that, I tried the below ideas. From right to left, they start more realistic and them progress to more abstract.

Thanks.

[hernandito]

Kinda liking these.... I eliminated the background TV element. The same exact transparent .png logo overlaid on both a white and a black background.

[kieraneglin]

I'm liking this quite a bit! Beggars can't be choosers and all, but could it be possible to try using something like 5 or 6 spokes? That way each "wedge" between the spokes would also look like a play button.

Not sure if that'll work out in practice, but it's just a thought. Thanks again for this!

[hernandito]

Thoughts?

Does the 6 spoke wheel look too much like a lemon slice?

I tried 5 spokes, but it looks odd when trying to highlight the "play" button...

[kieraneglin]

I'm really liking 1h and 1iwith a preference for 1i - what are your thoughts? The only problem is that it kind of looks like a Sun Cross which is NOT something I want to associate with 🙃

I'm no good with Photoshop so I made this in a CAD modelling software, but it's an idea to get the 5 spokes looking a little more like a play button. The main difference is not tapering the spokes and I've also added a touch more "material" at the bottom of the wheel so that line doesn't get as thin. What do you think about something kinda like this?

Again, thank you for your continued help here! It really is appreciated

[hernandito]

Hi... Nice.... Let me work out the 5 spokes to look a bit more like your image. We need to thicken the line strokes so they don't disappear at smaller resolutions.

[hernandito]

IMHO... we have a winner...

Here they are shown smaller, as this is most likely whow you will see them:

I need to tweak the colors to make them brighter. In Firefox the colors are darker, more muted. I Think it's one of those Adobe sRGB profile things. The FF images below are double muted... but you can see the difference.

[hernandito]

I think it's Github that mutes the colors. When I lok at my docker's page, the icons looks nice a bright. Below, not so much.

You can see I need to update....

[kieraneglin]

These are great! Love it.

Could I grab 1L and 1N from you so I can test them out in-app? Just to see how they look as a favicon and stuff like that

[hernandito]

We can tweak colors easily once you try out.

[hernandito]

Try this as the icons...

Maybe we need to make the teal a litlle lighter. The icon will always have the dark blue background used in the UI. Needs a little tweaking. (I disabled the sRGB color profile on this one... that's why it looks more vibrant):

Like this (I disabled the sRGB color profile on this one... that's why it looks more vibrant):

Maybe even brighter (I disabled the sRGB color profile on this one... that's why it looks more vibrant):

[hernandito]

Sorry for all the quick updates.... Here is a better explanation.

Below are some options for what would be the "icons", used in the Docker page of unRAID and the favicon. The earlier larger png.s would be used in your web UI and any type of printed documentation or TV commercials. We would need to adjust the teal color of the earlier pngs to match your color choice of the icons below.

I am kind of partial to the Pepsi version; I like that palette.

[hernandito]

Another overall shape idea...

This one shows the tire, a download button, and a "Y" for YouTube.

[kieraneglin]

Great! I'm just finishing up with a big refactor then I'll get right back to this

[kieraneglin]

I haven't checked out the Unraid icons yet, but I've added both the earlier candidates to the app to test it out. I really like them, but I'm not sure which I like more! The 5-spoke has a better "play button" imo, but the 3-spoke looks really good in-context as well.

Before looking at it in-app I was 80% 5-spoke and 20% 3-spoke, now I'm more like 60/40. I think I like the 5-spoke more but it's a close race!

With this design I think the "Pinchflat" text should be inline with the bottom of the logo instead of centered, but that's an easy fix. I'll try that out now and see how it looks

[hernandito]

A little more to add... I am going to be unavailable for the next 8 hours or so. *edited for color profile.

[hernandito]

Don't be afraid to make the logo and the word bigger. Like double... right now it's smaller than the "New Sources" element.

[kieraneglin]

Try this as the icons...

I think the middle one is my favourite when testing in my Unraid instance

Don't be afraid to make the logo and the word bigger. Like double... right now it's smaller than the "New Sources" element.

Good call! I'll try that now

I am going to be unavailable for the next 8 hours or so

No worries! Thanks again 🤙🏻

[kieraneglin]

I had to stop testing to fix a bug so this is kinda half-baked (especially in terms of alignment), but I think I like the white text with the teal logo. I tried full-teal and I think it was too much.

The Github logo will have to be full teal to work on light and dark mode, but in-app I think I prefer the white

[hernandito]

Try this one for the whole logo and wordmark.... not sure how it will look at the proper scale. Then we can summarize which option with which color and tire you prefer for logo, icon, and full logo/wordmark. The color profiles are driving me crazy... Please try it using the transparent .png below.

And

and finally with the wordmark larger:

[hernandito]

I like this..... I don't think the teal is needed. It's not tied to anything.

[kieraneglin]

I like that! Would you mind showing the teal logo with white lettering as a comparison? I agree it's not tied to anything directly, but I think it's a nice visual break.

I'll also take a look at this once I can, but I'm working on adding support for NFO metadata. I'll switch back to this as soon as I've made some progress there!

[hernandito]

[kieraneglin]

I think that might be the one! I'll play around with the 3 vs. 5 spoke once I get a chance since I think I'm still leaning toward the 5 - but this is really great! I love the touch of the "flat" bottom of the text

[kieraneglin]

I haven't forgot about this! I was caught up working on #77. I'm going to get one more round of refactors in and hopefully come back to this later today 🤞

[kieraneglin]

@hernandito Thank you for your patience 🙌

I've tried most of the permutations of possible logos and I think it should be one of the two below. I'm very torn! I like the 5-spoke, only because the play button looks a little more like a play button and it reminds me a little more of a wheel, but I like the 3-spoke because it's more simple

What do you think?

[hernandito]

Hi... I am a fan of the 3-spoke wheel... The 5-wheel feels slightly old-fashioned. Like a wagon wheel or a water wheel... When you go smaller for the icon and favicon, the additional spokes will get very thin.

The 3 spokes has a sense of forward movement. It also better balances with the word Pinchflat. Look how strong it compare with all other docker icons:

But for me it's a 60-40 split.

[kieraneglin]

That picture of your Docker icons sealed it for me - I think 3 spokes is the way to go!

[kieraneglin]

Now that I'm finished grinding on the media center-related changes, I'd love to get the new logo and icon in place!

Would it be possible to get the assets of the 3 spoke design in the following formats:

• Coloured logo + white wordmark for in-app
• Coloured logo + teal wordmark for the README (since it needs to work with both light and dark backgrounds)
• Standalone icon for favicon, Unraid logo, etc

---

Once again, thank you SO much for all your hard work here. Design is not a skill of mine and your skills + input has been greatly appreciated

[hernandito]

Hi... files attached. I am sending full resolution... let me know if you want me to do them lower resolution. I am attaching two versions for the README...

The Favicon is using the same teal as everythiing else. In my screencap above, I used a lighter teal color... I am posting this version at the very bottom below. I don't have the original Photoshop version of it. I like it a lot better, but I am not sure what it means to not be consistent with it. I don't think one sees both the UI and the altered icon together.

It is my pleasure to help. I am a little OCD when it comes to the graphic UI of things. I want everything running on my server to look top notch.

Finals.zip

[kieraneglin]

Perfect! I've put these together in PR #100. I left a comment with some screenshots - please let me know if you'd like to see anything changed before I merge!

One of the next things I'm going to focus on is improving documentation (and cleanup the README). After that, I'm going to likely move the app from alpha into an open beta!

[hernandito]

Looks great! Merge away…. I have to play w/ Pinchflat again to see how it now sets up the downloaded content.

Congrats and thank you for Pinchflat!

[kieraneglin]

Will do shortly!

There have been a lot of changes since you opened those initial issues. I recommend making a new media profile using the Media Center preset! I haven't tried it at all on Kodi, but I've been using it on Plex for a few days now with good results