Icon/logo overhaul

[raucao]

@5apps is willing to sponsor an overhaul of the current logo, so remoteStorage looks the best it possibly can, especially when we launch multi-backend support and an improved widget/connect dialog. We already found a good designer who's interested.

Let's use this issue as public briefing room. If anyone has ideas and comments they want to add before Dalius begins working on the first new version, please chime in as soon as possible! I will then update the brief accordingly, if necessary.

Project brief

Background

remoteStorage in a nutshell: users can tell Web apps to sync data where they want it, without the app developer ever hosting or touching their data.

Given the developer is using the official client library, users can choose between Google Drive, Dropbox or RemoteStorage. The latter is an open-source protocol that can be used by anyone to create data storage/sync servers. App developers can use this library to easily integrate support for data sync via these options into their apps.

remoteStorage is an open protocol, as opposed to being an open-source software package. It is similar to email in that regard. As long as your server speaks the remoteStorage protocol, any app that supports it can sync app data on your server. It doesn't matter what technology the app or the server are built with, as long as everything speaks the same language in form of the protocol.

If you want to see how it works for yourself, you can get a storage account at 5apps and try e.g. sharing a file with Sharesome.

Objective

The main objective is to improve the existing official remoteStorage icon/logo. It should be modern, professional and distinctive.

Requirements

• The icon needs to be recognizable as the remoteStorage icon, as existing apps and websites already use it. That is it should be an orange box thingy with the same diamond shape somehow.
• It needs to look good in both small and large sizes. (If necessary, we could probably create a responsive SVG and add more details for bigger versions.)

  Desirable qualities

• Convey the project's openness. (Currently it does that with the open-box metaphor. Personally my brain oftentimes doesn't see the box, though.)
• Convey the idea of interconnectedness (sync among any devices or apps)

  Assets

Existing assets of the current logo can be found in the logo/initial directory in this repository: https://github.com/remotestorage/design/tree/master/logo/initial

Questions?

If you have questions or any other comments regarding this brief, please add them as comments to this issue. Thanks!

[raucao]

Random input: just stumbled upon this: http://webpack.github.io/

(Wait for the animation of the header icon!)

[michielbdejong]

Cool, thanks for the sponsoring! Also in other project areas, I see you guys are contributing a lot recently, really appreciated.

Let's make it the nicest logo in the new widget design, so everybody wants to click it, instead of the proprietary ones! :)

[raucao]

Let's make it the nicest logo in the new widget design, so everybody wants to click it, instead of the proprietary ones! :)

Exactly! :)

[raucao]

More random input: http://jelastic.com

The interesting bit is how they use it as a line drawing alternatively so it also works without colors.

[raucao]

And more (via @michielbdejong on IRC): https://twitter.com/BetweenScreens_

[DaliusStuoka]

Hello guys,

I have mocked up a few other possible redesign option, would really like to hear your thoughts on these (attached).

Best regards, Dalius

[silverbucket]

Wow, nice work @DaliusStuoka ! They all look great, and I am especially drawn to #3, it’s very unique while still being simple and easy to draw free-hand. Thanks for making these!

[gillisig]

Nice work @DaliusStuoka! I agree with @silverbucket they all look sweet but #3 is my favorite as well, both the flat version and the stroke version.

My two cents would be adding more contrast to the flat version of #3 and maybe letting the two layers be visible on the "inside" of the box as well, but maybe that would make it too busy though.

[raucao]

Great stuff!!

I like #2 the best, because a) it's clearly the remoteStorage box, but nicer and b) because #3 actually looks less original and distinctive to me, as it's a fairly general concept for database icons and pictograms. See e.g. https://duckduckgo.com/?q=database+icon&ia=images

I think what #2 is missing is the depth, which is making #3 a more finished and thus more impressive icon in this line currently. I think subtle shadows that show the sides of the box actually bending out might be that finish. But I'm sure you had something like that in mind anyway, @DaliusStuoka.

Another thing I noticed is that #3 is currently very dark when you make the icon small enough for the current widget (more brown that orange) and also doesn't have the center in the middle in my brain, as the 3 parts are now 2 more like 2 parts with the lower ones taking up most space.

Another reason for my personal preference is that #1 has mysterious (potentially awesome) contents, while #3 is an empty box. In fact, I can see #2 having a big fancy version where the middle of the box glows and you basically have the briefcase from Pulp Fiction as your remote storage. :D

Putting something in the box might be overkill, though. And for small sizes that's impossible anyway.

I guess we should probably try to put these ones in the widget and other places to get a better feel for it, right? @DaliusStuoka maybe you could save SVGs of 2 and 3 real quick so we can try them out "in the wild" in an app?

[raucao]

By the way, everybody is obviously invited to leave their opinions here! However, let's try to all do that as soon as possible so as to not bug @DaliusStuoka too much with design-by-committee madness that spans over days and weeks. ;)

So please, as soon as you read this, add your own 2 cents and let's try have consensus on a direction by Sunday, so @DaliusStuoka can move forward. Sound good?

[raucao]

easy to draw free-hand

I hadn't even thought of this, but that's a great point!

[michielbdejong]

I like how #3 refers to storage, in the same way the dropbox logo does. I didn't have the association with the round database cylinder icon at all, actually. In fact, I always draw databases as just a cylinder, without the layers.

What's good about #2 is that it's the same logo as what we have, so the existing laptop stickers would maybe look a bit outdated, but not confusingly different.

If you ask a random person in a cafe to look at the Android status bar icons and then at #2 and #3, and ask them 'what do you think this icon is for', then I think they will have much more chance of guessing right with #3 than with #2.

[silverbucket]

My only suggestion for #3 is to have a bit more difference in each subsequent color, and perhaps start with a slightly lighter color. So we end up with the same dark color, but start with a lighter color, and each transition is a bit more pronounced. (then again, I could be totally wrong about that and it may not look good)

[michielbdejong]

I asked the person sitting next to me at the coworking space (a designer), giving the context of the Android status bar icons of 'battery is low', 'you have a gmail message' first. He thought #3 is obviously a box, without knowing what box it could be, so he thought, maybe inbox. For #2 all he could say was that it looked like the Mitsubishi logo to him :) (I don't agree, I think if anything, it's closer to Chrysler or Mercedes, and also I don't think this is really relevant. What was relevant to me was that he had no clue about in which direction to think of what the icon means). For #1 he said something came in, maybe some type of incoming message.

He wasn't sure about the color, which he identified as red on my screen. He said it might make sense to make the icon change color, depending on sync state.

After this, I realized that the smartphone status bar is not really the right context, as you expect some of the icons there to always be there, displaying different statuses, and others to only show up in case of a notification/alert.

@silverbucket @skddc if you have time, can you also ask a random person what they think of when they see the icon? We all know what it's supposed to be, so I think input from 'virgin' users can tell us a lot.

[raucao]

@silverbucket @skddc if you have time, can you also ask a random person what they think of when they see the icon? We all know what it's supposed to be, so I think input from 'virgin' users can tell us a lot.

I think that doesn't make sense at this stage. As I said 3 is clearly more developed than 2 at the moment, so you cannot compare them to someone who doesn't know what it is yet.

Regarding the notification icon , did you actually size it down to the notification size? Do that and you'll see the issues I mentioned. That is obviously important. (And that size is currently also an issue with 2 I think.)

[galfert]

I personally like 2 the best because you can still recognise the old logo. I like the overall style of 3 as well, but to me it's just too much looking like a generic database icon.

Also, if you make the logos pretty small, 3 just becomes a reddish/orange diamond-like shape, while 2 still stays pretty identifiable.

[michielbdejong]

yes that's true, you can size down 2 to 20% and still see it, with 3 you can't.

Could it work to make the top part of 2 slightly darker, so that it gets a bit of the effect from 3? Just a subtle shadow effect that makes it more like a 3d box

[raucao]

Could it work to make the top part of 2 slightly darker, so that it gets a bit of the effect from 3? Just a subtle shadow effect that makes it more like a 3d box

The details of fixing that are best left to @DaliusStuoka. Our job right now is to identify problems as well as state our subjective opinions. No need to talk about percentages of shades. ;)

[galfert]

No need to talk about percentages of shades. ;)

But can I get the icon in cornflower blue? ;)

[DaliusStuoka]

Wow, a ton of feedback, thanks guys - I'll try your suggestions out :)

[raucao]

I'm sure it's too late, but some more random input: I just stumbled upon http://mesos.apache.org which immediately make me think of a RS icon in a similar form as a Rubik's Cube with 4 elements. Lots of things one can do with that in terms of colors and twists (like e.g. rotating one of the elements or playing with them in other ways).

[DaliusStuoka]

Hey guys, I've been working on some possible fixes/revisions to address some of your notes, I've concentrated on the 2nd and 3rd options as it seems those were received with most enthusiasm :) I have some more ideas I will try out and upload in the near future but I just wanted to know what you think of these two iterations (attached below).

Regards, Dalius

[raucao]

Aaand we have a design-by-committee problem. ;)

@DaliusStuoka Let's have a call about it today or tomorrow. I'll contact you via email.

[silverbucket]

@skddc Not sure what you mean by us having a design by committee problem? What specifically are you referring to?

@DaliusStuoka They both look really great! I like #2 a lot better now. #3 is still good, and I like how there's more contrast, but I think #2 looks really awesome both large and small.

My only feedback on #2 would be to simplify the stencilled version even more so the Y part is just 3 intersecting lines, rather than having the slight separation in the center. Easier to draw, and clearer in all zoom levels. My thoughts are it would be nice to have the stencilled version be something we can easily draw free-hand.

I'm curious what other people think now.

[raucao]

I mean that we have to stop here for now. The thread wasn't meant to be the main design process channel, but to collect feedback on the first direction. It turned out that the "solution" ideas influenced the next step way too much and there are misunderstandings of the actual comments as well.

Design cannot work when 10 people discuss details. A committee can only give opinions on directions, but not do the designers job. Otherwise you end up with what we have now. That's not an opinion of mine, but a proven fact that any designer will confirm for you.

Anyway, not too important. I will have a call with Dalius and talk about how to move on. I'm closing this issue for now, so that it's clear that the feedback round is over until a new one explicitly begins.

Thanks everyone for your comments so far! Looking forward to the next round.

[silverbucket]

https://github.com/iojs/io.js/issues/37

[raucao]

Yes, please submit your own ones if you feel like you can do a good one!

[silverbucket]

I truly do not understand the point you are trying to make as it's a bit of a chicken and egg situation. That feedback process had already happened, and the designer came back with updated designs based on our feedback. So at which point of the process did we go from "collecting feedback on the first direction" to having a "design-by-committee problem"? Were you expecting completely different designs the second time around?

I personally really like the second drafts a lot, but If you are saying you don't, that you feel they've been influenced too much by feedback you don't agree with, or that you'd prefer to guide it yourself one on one, then you should say as much so it's clear. It's not a fact that we can't productively discuss iterations as a group in a github thread, because that happens quite often.

Anyway, I'm not trying to force this thread to continue or anything. Whatever you want to do is fine. The reason you've given just feels like a bit of a leap and perhaps has more to do with your personal expectations? (which is fine if that's the case).

[DaliusStuoka]

Hello guys,

I've tried to regroup and go away from the previous versions and instead come up with something new and simple, yet effective.

I came up with this minimalistic idea - I'm attaching it below.

I'd love to get some feedback/opinions.

Have a great evening!

Best regards, Dalius

[raucao]

Cool, thanks!

I'll let it sink in a bit this time before commenting.

Just one thing: could you post different sizes for the sketches? Ideally 16x16px, 32x32px (current widget icon size) and whatever one or two bigger sizes you think make sense.

Would be especially good to see how it works with the new widget being currently designed: https://github.com/remotestorage/remotestorage.js/issues/795 (unfortunately, the invision thing says over quota currently, cc @gillisig).

[gillisig]

@skddc Ah sorry about that, I guess InVision wants to squeeze more money out of me. Anyway I surrendered so it should be working now :)

@DaliusStuoka here is the link: http://invis.io/GK2PZM3E2

[DaliusStuoka]

Hey guys, no problem! Attaching in smaller sizes below.

[raucao]

[DaliusStuoka]

[raucao]

Another random one I just stumbled over (just posting it to put it somewhere): https://mozorg.cdn.mozilla.net/media/img/firefox/firstrun/nightly-badge.84e9467df424.png

[raucao]

And another one, similar to #4:

And this one's pretty close to the #3 idea:

(levelup)

[raucao]

Btw, #4 reminds me a lot of these note paper things, probably due to its thick border (and maybe the one side slightly resembling the top paper being tilted):

[raucao]

Just saw a DPD (German parcel service) truck on the street in Berlin, and they changed their CD and logo:

The back was a huge one in flat white on red, and the side had a flat red on white. Both looked pretty good from afar.

[raucao]

(Slightly ridiculous how many box logos you stumble upon, once you think about them.)

[gregkare]

Basti got me thinking about boxes, guess what I found in my closet? An Amazon Web Services bag

[DaliusStuoka]

Hello guys,

I had an idea of portraying the box in a slightly different way. I tried constructing it from a single line. The concept is similar to my #3 version, only a different execution.

Thoughts?

Regards, Dalius

[silverbucket]

I like it! I am partial toward the designs which venture away from the original hexagon/cube logo, because that cube, even an orange cube, is used in quite a lot of projects and companies. So being a little more distinct I think is a good idea.

[gregkare]

Hey Dalius, thanks! Could you post a small version of it, in the widget would be the best to get an idea of how it works at smaller sizes?

[raucao]

I like it, too!

I'm also a bit uncertain about the flexibility of it in various sizes and use cases, like e.g. the widget.

[raucao]

:)

[raucao]

Hey @DaliusStuoka, thanks! Could you post a small version of it, in the widget would be the best to get an idea of how it works at smaller sizes?

I really like the approach of the last one, but I'm also not sure how it scales from favicon to big, and especially how it works in apps, as it has to work transparent with all kinds of backgrounds, due to the lines being open. Might be enough to choose a color depending on app design, though.

[raucao]

Another box:

[raucao]

@DaliusStuoka Did you see my last comment? :)

[gillisig]

Hey guys. I had a little discussion with @skddc about a modification to that last logo. And he asked me to apply and and share it with you guys, so here it is:

You can clearly see an "S" now. And you also kind of see a retarded "R" as well... kind of.. although its maybe more of a "e" ;)

[silverbucket]

I like it, it's simple and easy enough to draw, scales well.