Redesign Nextcloud Logo Animation

[eppfel]

The current logo animation sparked my interest, because it is an awesome addition, but not that impressive, yet. Over the weekend I wanted to have some fun…

I redesigned the logo with the idea of using the geometry of the logo to tell a story. It starts with the center circle, because this resembles a loading animation and could be reused all over Nextcloud. see nextcloud/server#2623 From this central element the complete logo builds up over time with a general direction from left to right. A little playful and energetic, but not frantic.

First I used a scaling animation with a little bounce to let the smaller circles pop out. (1.) But I wanted to use the geometry even more, so I reveal the circles by sliding them out behind the central one.(2.)

The images are actual SVGs. Replay does not work on embed, yet, and if you click on them to rewatch or view the source, you have to move the mouse off the page/image. Or fork, edit, play with both animations on codepen.io.

(side note: After a long time not designing motion , I searched for the right non-adobe tool and got frustrated, until I retreated to code: svg + css = total control 😍)

1. Pop out

Pop out Logo Animation on codepen.io

2. Slide out

Slide out Logo Animation on codepen.io

@nextcloud/designers Would be nice to use this also as a discussion for use of motion in our visual identity. I would like to revise the animations on frontpage as well...

[Espina2]

At first glance, all of the animations look to mechanic. That you can resolve with proper easing (its because that I use a sprite). I didn't like the two first, they are to "fancy". I think you match the third one with the first (when it finish the load) is nice.

[skjnldsv]

I like the 2nd :)

[te-online]

Yeah, the logo animation on the frontpage doesn't look right at the moment 😉 I like the 2nd with some tiny bit more work on the timing. The third circle slides out too late and the text animation draws too much attention – in my opinion 😄 The first one has some weird jumps that kind of break the flow.

[Espina2]

@te-online Can you clarify why doesn't look right what we have at the moment?

[eppfel]

I didn't like the two first, they are to "fancy". I think you match the third one with the first (when it finish the load) is nice.

@Espina2 I don't quite get what you are referring to with "third".

Can you clarify why doesn't look right what we have at the moment?

@Espina2 IMO, everything starts at the same time, which makes it a little bland (no "story"). And the effect is just drawing the lines for every object, which does not look like a design, but an effect. Also, the linear ending of the text written down, seems like it is to slow, because everything starts simultaneously, but does not end simultaneously.

@te-online Totally agree with your suggestions. I prefer the 2nd, too.

Next version: http://codepen.io/eppfel/pen/XNPoqP

Edit: small glitch fix

[Espina2]

What you did don't have story too. Its an effect. The animation that you have it doesn't come from one concept its pure animation. So I will move away from this thread since I don't believe this are an actual improvement.

And if you want to make an awesome animation you should propose anything else, because either one is "awesome" they are just okey ish.

I believe in the same thing as @jancborchardt said in the another issue

https://github.com/nextcloud/server/issues/2623#issuecomment-266712320

For what I refer the third is an actual spinner that after the load is finished, "transform" in the logo, not the logo as a spinner. Like I said all they look fancy and the timing is not right, feels very mechanic, and the secret about animation is not looking and computer animation.

And sorry for my "bad" comment, but nothing that you present here convince me that is actual better, and I have to be sincere.

[eppfel]

"Once there formed a cloud in the sky, but it was lonely so it made some friends. First one, then two, then three – a crowd! - called Nextcloud" 😀 It's about community, a movement... As i stated in the OP: it builds up from the center.

@Espina2 Sad, to see you go, because I wanted to start a discussion about animations on/in nextcloud. I respond to your comment, still.

For what I refer the third is an actual spinner that after the load is finished, "transform" in the logo, not the logo as a spinner.

Totally, I think we are on the same page here. But more in the other thread.

feels very mechanic, and the secret about animation is not looking and computer animation. That's why I wanted to change the current animation in the first place.

@Espina2 Feel free to ignore my question, but why is the current logo animation not mechanic or "better"?

[Espina2]

Ahaha, I can think in something nice to say about growing lines and doesn't make that a concept :D. Its just the point I want to you understand. :)

Mechanic is something that looks weird to the eyes something that doesn't look the right illusion of movement. For instance we know that something that start fast it should be end slowly.

I'm not that great explaining, but if you have money and time you should look here it will explain better than me and you still learn a lot about the subject. https://www.learnsquared.com/courses/motion-design

And answering to your question, the current animation doesn't look mechanic it start fast and end very slowly and it simulates physics. :)

Hope that this explain better, what I think about the animation, and I not even talking about the spinning or the shappes that come first and after. Just about timing.

[jancborchardt]

I agree with @Espina2 here – the current logo animation just has that extra bit of easing and natural movement to it to make it really feel smooth. And if we do animate our logo or anything, it should be as good as possible.

I’m not really partial to any specific animation flow, but these details make the current animation better. It has the rounded lines and the right finish. And you know I’m against design for design sake. ;) But I’m taking a step back in this specific topic.

Sooo – let me just say that maybe instead of working on something which is already reasonably solved, we should look at the challenges still ahead. And one of those is our Contribute page: https://nextcloud.com/contribute/ – which is still a mess of too much information and tiny icons . ;) And after all we want to get more awesome people involved so we can grow this community.

[te-online]

Can you clarify why doesn't look right what we have at the moment?

@Espina2 Yeah, I'm sorry, I should have explained what I mean in the first place.

I incidentally visited the website for information, so I wasn't expecting anything nor wasn't explicitly looking out for the animation. Still, it caught a lot of my attention for a long time (until it finished animating). In a video intro you might want that effect, but on a website – this particular animation just feels a bit heavy.

Then there is also the story, @eppfel talked about. When I saw the logo animation for the second time (which is inevitable when visiting a subsite), I instantly thought about the story it tells. Competing numbers and charts came to my mind, because of the three “diagrams“ performing a race against each other. I was wondering what it means. The handwritten style of the text appearance however tells a completely different story. It reminds me of some old TV ads, where the topic is coffee or travel...

You see, I had a first impression when viewing the logo animation. This first impression was neither positive nor negative, it just felt a bit off. But then this feeling transformed into associations that wouldn't quite fit the overall message of the site. So there was a bit more of a rational reason why I felt it didn't fit.

Now, when writing my answer I was condensing this multi-layered feeling into a single ”doesn't look right”, which was rude, sorry! 😉

I hope I could make it a bit clearer with my explanation. And also: Great work on the website in general, I like it a lot! 😊

@jancborchardt This is a totally reasonable argument, there certainly is more stuff to do. However, the logo is something people will notice before they even get to the contributor page – so I think we should get it right 😉

When I show our current homepage to random people, they will probably notice the animation. When we can reduce the number of people actually actively noticing the animation, thus making it more subtle and embedded in a better way, I think we are on the right track.

I'm all in for doing as much stuff as possible, but if we don't have the time to have a discussion about it once it's live, than let's rather remove the animation and simply have a static logo. Everything beyond that requires a lot of work and we should be aware of that.

[Espina2]

First, thanks I'm glad that you like the improvements on the website, you are welcome to make some improvements to.

Second, I think somehow we are confusing communication design with art somehow. The logo serve a purpose identify a brand, not giving you what a painting will give. It have a concept behing of course, but the only job is to make you recognize the brand.

So lets no going for the philosophy here, and go for what is more aesthetic pleasant. So if you think that can make better, I am here to see and give my opinion about that.

[te-online]

@Espina2 Okay, maybe my text got a bit philosophical, but that's my perspective on designing a logo animation. It has little to do with art – however, note that this kind of task if often referred to as “Art Direction“ (a good read: http://alistapart.com/article/art-direction-and-design#section2).

you are welcome to make some improvements to.

I'd love to, but I have like 30 minutes a week to catch up on all the stuff that is happening in nextcloud – you're all just way too fast for me! 😅 So I'd rather spend this time getting ”nerdy“ on some details 😉

It have a concept behing of course, but the only job is to make you recognize the brand.

For how we might proceed with this issue, I'd suggest to ask some people. We could show them the current animation and as a second option I'd suggest this https://github.com/nextcloud/nextcloud.com/issues/305#issuecomment-266711124 one of @eppfel's drafts and ask – for example – ”Which of these animations do you think suits the brand of nextcloud most and why?” – so we could see what people think. I could set up a quick survey and we could send it to a few people (asking them to keep it for themselves, because otherwise it becomes a vote rather than a test). What do you think?

[Espina2]

I studied Digital Art Direction, and I am currently a Digital Art Director so I really believe that this doesn't have nothing about to art. You can debate and have different opinion There is one guy called John Maeda that explains this very well "Art is about making questions, design is about making solutions".

This article explain some things, but if write "design is not art" in google you are going to have multiple of articles that can explain what I think. https://artplusmarketing.com/design-is-not-art-d229af10c167#.ps98p9ecv

So now its me that started the philosophy...

In this particular case I dont think you convey a message with anyone of the logos animation, first because you don't have enough time for that (just two seconds) and even if you have time, what @eppfel purpose is to literal and no one is going to see the concept behind it if you doesn't explain...

So what i suggest is you or @eppfel make a new pr and apply the new logo. I think that after that you can ask @jospoortvliet to make a deploy to the staging server and start a vote.

This is the collaborative way even if I doesn't see that this is better other people can think that is. :)