Design an App Icon about octodash

[ajanky]

The version with the smaller suction cups! 👍

[UnchartedBull]

Yes the version with the small suction cups does look the best I think. One last thing: Could you try making the top 3 cups just a touch bigger? Otherwise I'm super happy with that design! Thank you so much!

[hessius]

I saw that someone was helping out with this on reddit, but if that's stalled it would be good to get some specifications (sizes, format) and if there are any guidelines (palette, general ideas etc)

[UnchartedBull]

Yes it went silent, unfortunately. I may ask that guy for an update but I don't want to push anyone. I added some information to the issue.

@hessius thanks for all your feedback and suggestions so far. If you would like to become a contributer and help me out in some places let me know. I'll be happy to add you.

[hessius]

Unfortunately I'm not familiar with angular, so I think "onboarding" me wouldn't be worth the hassle.

I really like the work you've done, so I'm happy to help - Don't worry though, I'm out of ideas now and won't keep submitting issues at this pace ;)

I do have an idea for an icon though and will se if I can get it to an okay state :)

[hessius]

So here's my take, I wanted something simple that could also be incorporated into the ui if needed / wanted, I'm a fan using single coloured logos as they can be reproduced on any background with any background and colour scheme.

So here, presented in white on the OctoDash background colour is simply a combination of a dashboard and an octopus - OctoDash!

Note, while I've made minor adjustments, this is made out of icons from the noun project which can be used even commercially but without a paid license (a one time fee of a few dollars) require attribution (shouldn't be a problem but wanted to mention it)

[UnchartedBull]

That icon does look quite cool. Would you mind adding some colors (like the green tone from the OctoPrint logo)? I've tried to sprinkle color into OctoDash where it was possible to make it look a little bit friendlier, so maybe a few spots of colors does no harm to the logo.

I also used the noun project for almost all other icons, so don't worry, they will get their mentioning soon (currently only in the icons.txt file)

[hessius]

Yeah absolutely, I can get on that tonight. Do you want the same colour everywhere?
I might convert it to an svg and then I could just post a jsfiddle and you experiment with fill colours in css

[hessius]

Maybe something along these lines?

[UnchartedBull]

That does look way better IMO. Could you also create a version where the suction cups (the round things on the tentacle) are white?

[UnchartedBull]

And maybe the grey part between the tentacle and the circle even on both sides? So right side a little smaller and left side a little bigger,

[hessius]

Yeah, now I centered it on the base, I'm gonna try a different tentacle and see how it turns out, the suction cups should be symmetrical imo

[hessius]

So with a new tentacle, how about this?

At first I considered making the tentacle a solid green, but kept the outline version, looked surprisingly good

[hessius]

A minor colour adjustment to use the supplied palette, here with bg and transparent.

Been trying a few different versions with the tentacle filled in, white suction cups and more, everything looked worse than the original though.

[UnchartedBull]

Ok I had some time to have a look at the logos and they all do look really good! I like the one with the asymetrical suction cups a little more than the other one. Also the idea is really neat to replace the needle of the instrument with the tentacle. I stylized that a little further and came up with four super quick mockups (all based on you awesome idea, that I definitely wouldn't be able to come up with!). How do you like them? They are all pretty similar, but I'm on the fence between number 3 and 4. There all pretty shitty quick drawups, I don't really know how to edit SVG files, thus Photoshop had to do the trick :D

[hessius]

I could probably clean it up for you and convert it to svg.

Your versions are really a step in the right direction!

I like the simplified meter, and the colouring was nice, although I still prefer the look of the symmetrical suction cups, as they look more like an octopus tentacle and less like some sort of alien limb.

I also like the font, I was thinking of using a way thinner sans serif, circle based font (haven’t tried it yet but it’s available here: http://designbeep.com/2014/05/20/free-font-of-the-day-universum/ ) but especially now with the meter a bit bulkier that font could look out of place

[UnchartedBull]

The Font used is actually the font, that OctoPrint uses for the logo as well, which I though is quite a nice touch, but probably not noticeable on a first look.

The problem I have with the symmetrical one is, that it tries to be kind of 3D, which is exactly the opposite of what I tried to do with OctoDash, being as flat as possible. And I also think some breakup of the symmetric concept looks kinda good. I'll look for some more tentacles, but I really like the one you used first. Although I can't find it on thenounproject ...

[hessius]

It's a slightly modified version of this: https://thenounproject.com/term/octopus-tentacles/703933/

Maybe the symmetrical can be flattened a bit... I'll try my hand at it just as a test

[hessius]

Made a few adjustments and flattened it, tried a few versions, here's a mashup of your version and mine, I made the ring a bit too thick though, what do you think?

[hessius]

Or a SUPER minimalist icon:

[UnchartedBull]

I really like the colorful one. I just have one minor idea on how this could be improved:

Maybe make the suction cups a little more circle like and for the top 4 lines to only one suction cup instead of two. This exceeds my SVG capabilities by far, but if you feel confident, that you can do that then OctoDash has a new logo :)

[UnchartedBull]

The thickness of the ring could also be touch thinner and follow the tentacle a little better on the right side. Otherwise great design!

[hessius]

So I remade the circle to be thinner, remade the base of the tentacle to be the same circumference as the circle. I also remade the suction cups, they're now completely circular (there's something satisfying with the congruence between the shapes).

Right now I'm editing in photoshop as well but will convert it to SVG once we land on a final design.

I made a regular version and a version with a cutout border on the suction cups (like you did on a previous design which I thought looked neat there but not as good here).

[hessius]

Two more iterations (with a more appropriate size for the text as well):
No suction cups
Smaller suction cups

[hessius]

Ok, made the top two 10% bigger and the third one 5 % bigger, it started looking too much like the last pair if any bigger than that.

I just realised that I messed some layer styles up with the last one, because I resized it to fit the text which caused the dash to regain some thickness. So I made one version where I kept the thickness and one where it's "the old" thinner version.

So, any more adjustments? Or are we ready to go vector?

[UnchartedBull]

I'm still trying to figure out if I like the plain one (without the background around the suction cups) or the other one better. I'll have a closer look later today and respond here again. But we're 99% there :). Sorry I'm kinda picky if it comes to logos ...

[hessius]

Well then, to make matters worse, here's a version without background around the suction cups with the round suction cups. And one without the background but with the suction cups in green.

[UnchartedBull]

I still like the one with the tentacle more, the one with only the suction cups kind of reminds of a plant ... I did some tinkering because I really liked the transparent part around the suction cups, but something seemed a little off. I started slowy increasing the width of the border around the suction cups and started spreading them apart at the very bottom (last two rows) a little more. There are still a little thin on this quick mockup. I think in your mockup they look perfect for the top 4 lines of cups and after this they should increase to keep the same look. Could you maybe try that. Of course only if you have the time :) After that I won't have anything more, I promise 😄

[hessius]

Haha I have no problem with making more adjustments, keep em coming!

I kept them at the same distance but notched up the transparent border progressively.

The decision is yours of course, but while this looks good at full size, think about where and how you are going to display this, because in my mind the version with transparent rims does not work at smaller sizes. Here for example, I've just taken a screenshot of the thumbnails of the different versions:

Here it becomes obvious that if the icon is at any point going to be part of the UI many of the versions would be hard to read

[UnchartedBull]

Yeah I like that with the transparent border! The icon will be quite big if it is diplayed (either at startup or in the about section). But it will be probably good to have a small icon available for places where the big ones does not fit.

It will be awesome if you could create a SVG from the last one and the same one, but without the transparent border.So I think 15 and 17 :D

If you export them:

• Could you please do that without the name (so only the logo) with no background.
• Replace the white color with #f5f6fa, that would be great :)
• If it isn't too much work the one with the suction cup borders would be nice with the name as well.

Otherwise I'm super happy with the logo! Thank you so much!

[hessius]

Yeah no problem!
What font did you use for the name?

Btw I couldn't resist trying a few more variations:

[UnchartedBull]

The Font is called Arvo: https://fonts.google.com/specimen/Arvo

They definitely look interesting, but I still like the one with the white suction cup and border more.

[hessius]

Before I finish the other two versions (i.e. this but with the title as well and the one without borders), just check that this look ok for you: https://codepen.io/hessius/pen/pooRYjO

(Just added a moving gradient background to see it against some different backgrounds)

After I get the green light I'll finish the other two, how do you want them delivered? (Github did not allow me to attach them here)

[UnchartedBull]

Yes that looks awesome! Thank you so much!

You can either send them to my mail ([email protected]) or open a Pull Request (this way you‘ll get the credit you deserve). But that’s up to you :)

[hessius]

Submitted a PR, also updated the codepen for anyone curious, it now uses bg colours from the swatch you provided

[hessius]

Added dark icons to be used on light backgrounds and added the main icon with title to the readme, PR updated