Skip to content
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

Icon/logo overhaul #1

Closed
raucao opened this issue Mar 23, 2015 · 57 comments
Closed

Icon/logo overhaul #1

raucao opened this issue Mar 23, 2015 · 57 comments

Comments

@raucao
Copy link
Member

raucao commented Mar 23, 2015

@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
Copy link
Member Author

raucao commented Mar 24, 2015

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

(Wait for the animation of the header icon!)

@michielbdejong
Copy link
Member

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
Copy link
Member Author

raucao commented Mar 25, 2015

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
Copy link
Member Author

raucao commented Mar 27, 2015

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
Copy link
Member Author

raucao commented Mar 27, 2015

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

@DaliusStuoka
Copy link

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
remotestorage

@silverbucket
Copy link
Member

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
Copy link
Member

gillisig commented Apr 1, 2015

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
Copy link
Member Author

raucao commented Apr 1, 2015

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

url

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
Copy link
Member Author

raucao commented Apr 1, 2015

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
Copy link
Member Author

raucao commented Apr 1, 2015

easy to draw free-hand

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

@michielbdejong
Copy link
Member

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
Copy link
Member

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
Copy link
Member

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
Copy link
Member Author

raucao commented Apr 2, 2015

@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
Copy link
Member

galfert commented Apr 2, 2015

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
Copy link
Member

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
Copy link
Member Author

raucao commented Apr 2, 2015

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
Copy link
Member

galfert commented Apr 2, 2015

No need to talk about percentages of shades. ;)

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

@DaliusStuoka
Copy link

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

@raucao
Copy link
Member Author

raucao commented Apr 12, 2015

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
Copy link

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
remotestorage

@raucao
Copy link
Member Author

raucao commented Apr 13, 2015

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
Copy link
Member

@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
Copy link
Member Author

raucao commented Apr 13, 2015

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.

@raucao raucao closed this as completed Apr 13, 2015
@silverbucket
Copy link
Member

nodejs/node#37

@raucao
Copy link
Member Author

raucao commented Apr 13, 2015

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

@silverbucket
Copy link
Member

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
Copy link

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
remotestorage

@gillisig
Copy link
Member

@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
Copy link

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

3232orangewhite

3232blackwhite

1616orangewhite

1616blackwhite

@raucao
Copy link
Member Author

raucao commented Apr 30, 2015

thumbs-up-daft-punk

@DaliusStuoka
Copy link

mockup

@raucao
Copy link
Member Author

raucao commented May 1, 2015

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
Copy link
Member Author

raucao commented May 20, 2015

And another one, similar to #4:

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

levelup
(levelup)

@raucao
Copy link
Member Author

raucao commented May 20, 2015

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):

zettelkasten

@raucao
Copy link
Member Author

raucao commented May 21, 2015

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

dpd_main

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
Copy link
Member Author

raucao commented May 21, 2015

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

@gregkare
Copy link
Member

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

AWS

@DaliusStuoka
Copy link

Hello guys,
remotestorage

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
Copy link
Member

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
Copy link
Member

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
Copy link
Member Author

raucao commented May 26, 2015

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 reopened this May 26, 2015
@raucao
Copy link
Member Author

raucao commented May 26, 2015

screenshot from 2015-05-26 17-31-27

:)

@raucao
Copy link
Member Author

raucao commented Jun 9, 2015

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
Copy link
Member Author

raucao commented Jun 9, 2015

Another box:

elements_logo

@raucao
Copy link
Member Author

raucao commented Jun 29, 2015

@DaliusStuoka Did you see my last comment? :)

@gillisig
Copy link
Member

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:

rs-logo

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
Copy link
Member

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

@gregkare
Copy link
Member

I like the new perspective so far!

@galfert
Copy link
Member

galfert commented Jul 17, 2015

I like the perspective better than the original as well.

@DaliusStuoka
Copy link

Gilli, I think those revisions look great! Works well in small sizes too, great job indeed!

@raucao
Copy link
Member Author

raucao commented Jul 30, 2015

\o/

Yay, we're making progress! :)

So the next question would be how to proceed with shaping it and who wants to do that. At the moment, the exact shape is a bit off, and ideally we'd have an optionally enhanced 3d look for large sizes in the end.

Most edges currently look a little bit like it's a thin ribbon, while the top left and right look more like a structure with depth. I like the idea of a nice ribbon-type finish with subtle lights and shadows. But I think whoever has the skills to finish the design should decide what to do, of course.

Edit: also, @DaliusStuoka you've probably thought of something long ago already. ;)

@gillisig
Copy link
Member

I think it would probably best if @DaliusStuoka would take it from here. He is likely more familiar with proper branding procedures :)

@raucao
Copy link
Member Author

raucao commented Aug 1, 2015

In fact, @DaliusStuoka told me via email that he'll finish it!

@raucao
Copy link
Member Author

raucao commented Aug 1, 2015

I think we should close this thread and maybe have @DaliusStuoka open a new one for the final process.

@raucao raucao closed this as completed Aug 1, 2015
@silverbucket silverbucket mentioned this issue Aug 27, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

7 participants