A picture is worth a thousand words. But, an interaction is worth 1.8 million words
Animation matters. Don't want to believe, turn off animations on your phone and use it for a day. Experience the difference.
Firstly, I've got a short story to tell you all.
Why should we even consider the above statement, is it so or not?
There are two sides of the world in communication, one the sender/creator who creates a message. A message can be words, images, visuals, etc. How can it be possible that the receiver receives the same message sent by the sender?Â
There are cases.
Generally, humans read less. Texts come to play according to the user's capability of reading/conveying a non-vocational message. The chances of receiving the same message sent by the sender are meager in these cases.
Â
Looking after a picture/photo/illustration removes all the necessary readings and gives the user a perception regarding what is going on with the whole content.
But again, different individuals interpret the same image differently and perceive the message that's most likely relatable/local to him/her. This is where the movement/visual/interaction thing comes in. It would clarify the content to bring a common perception to all the individuals. This would make the communication very clear, and the user will perceive the almost the same intended message that is sent by the sender.
Animation what????  why????  how????  what not to????  where????
---
Have you ever thought about what is an animation? Transition? Effects? Interaction? And whatever? And where do we implement these stuff, what are the use cases, benefits, etc.? I have gathered some thoughts, resources, and tips, please do give it a read with your full attention (if you would like to). We will have a collaborative discussion on how to implement these and try out different stuff in our realtime projects after you all are done with this article. ----------------------------------------------------------------------------------------------------------------------------
Let's get a quick insight of these terms (What?)
---
Animation A simulation of movement by the rapid appearance of images in sequence. In simpler terms, Anything that seems to be moving or is moving or has life is animation. The animation is a larger, vague, and a broad term including video/movie effects, 3Ds, etc. --- Transition Movement of an object from point A to point B.
--- Effect A change which is a result or consequence of an action.
--- Interaction Two-way communication between two or more subjects. Or, if an action triggers any kind of connecting secondary action, then we can consider it as an interaction.
Note: I am using all these terms as "Animation" throughout the article for easy understanding. ----------------------------------------------------------------------------------------------------------------------------
Do we even need Animation? (Why?)
Animation/Effects/Transition whatever you'd like to call, have you ever thought we need this? Why we need this? The above explanation must have made you clear somewhat about this.
But, generally, a human always skims a content to consume what he/she wants. And we can control this totally.
Example: Let's say a customer "Ram" came to our shop to buy a shirt. What did we do? We placed 500 pieces of t-shirt and asked him to choose from those. It's more likely that the ram will panic and get angry. (This is how we have been building websites currently)
But, we can have a different approach, we can say the user we have five kinds of t-shirts; Namely: Polo, Round-Neck, V-neck, Half-Sleeve & Full Sleeve. Which one would you like? Ram chooses V-neck with Half-Sleeve. Again, we ask him which color you would like to have? Options are Red, Blue, and Green. Let's say ram chooses green. Then we show him a few pieces of the t-shirt. Is it a lot easier, right?
The animation is somewhat very similar to this. The movement of each and every element (or only some important ones) will tend the user to notice all the important stuff that we want our user to consume. In result, the user would almost not miss whatever information we deliver in our product.
What we generally do is build websites that scroll from top to bottom unless it's a horizontally scrollable website which is very rare.
---
Content Loading
I would suggest to take a top-to-bottom approach.
Or, we can also consider the Content Hierarchy.
Or, we can simply apply BEM.
Top-to-bottom Approach
Very simple, I would show the top-most content first (let's say header or nav), then the second-most content (let's say hero section or banner) then so on... The second-most content should animate/show up late than the top-most content.
Content Hierarchy Or even, we can switch between top-most content or Primary Content. What is most important will show first, secondary content will show second.
Applying BEM Let's take the BEM Websiteas an example. Whatever sections are there, I would animate those first then the blocks, then the elements and the individual item in it.Â
I would show up the texts Easy, Modular & Flexible headings first and then after the descriptions will show up.
Next step, I would animate the Green Background (block).
We don't have an element here. However, after the green background, I would pull the icon from right at first and then the heading from left and only after then would come the text from left. (I have a lot more examples, will explain later...)
--- Loading Animation Concept for Bryan Dulaney Hero Section
Firstly, I would translate the blue background from the left-most part of the screen to the right at the very beginning. Or maybe I will pop the blue background from the center of the screen and let it flow left and right firmly.
The second step would be to bring up the header.
We can indent the hierarchy between sections. Such as show the logo first, then all the nav elements at once (or one by one, depends upon design, use case, or even your personal preferences.)
In the third step,
I would translate the man from bottom to top, meta-text "your expertise..." from left to right, and the legacy builder logo graphics from right to left at the same time. Why? These three elements share the same hierarchy, proportion, and alignment.
"Change the world" text would come next and then the logo on the left column translating left to right. On the other column, would come the "I help.." and "you could see" text one after another simultaneously with the left column.
This would conclude our hero section animation.
--- One More Example Have a look to the following screenshot:
A screenshot from Bryan Dulaney's website.
2.06 MB
View full-sizeDownload The above image has a two-column section, and each has multiple elements (or layers). I would translate the left element from the left and the right element from the right. But, by applying the top-to-bottom approach one-after another simultaneously for each element. And, all before that, the background should pop-up with no-elements at all.
--- Other Suggestions
Whatever that covers the total width or height of the screen should only translate from the corner to corner. For examples, background fills full screen sections, horizontal separators, etc.
All the contents/images, which have a certain width, should translate/fade-in (or whatever) only from the 20% x or y position of that content's width/height.
If a section has only two columns left and right, bring them in from left and right respectively. (Or fade them in without changing the position, as your wish)
---
Buttons
We have clients who usually don't send us any hover effects design in most of the cases. That's because they think that the guys at Last Door are smart enough to make an awesome interaction through it and also, they do not want us to create a creative blockade.
In such cases, I would not prefer to leave a button just by adding a 20% black on top on hover. It feels dull and makes the design almost dead. What would be the value of slicing the design if it just looks like as of design and has no life to it? Slicing a pixel perfect web won't make sense right?
This is where we have the advantage of not having a hover effect designed by the designer. We need to show some courage to get out of our comfort zone and try adding whatever hover effects we found would fit in the designandmake sense. We need to try out making CFA buttons eye catchy with whatever kind of stuff we can think of or find. Also, that's better if we try different effects on different projects.
Please note that we should never add the same effect and apply it on each and every project then onwards. This would create a creative block and won't let us grow and learn new things.
So what things exactly can we do? Take this as an example:
Call for action section.
2.66 MB
View full-sizeDownload  The above call for action section consists of a heading & description on the left. On the right, has a meta description for the CFA button.
If I were the one to do the front-end, I would have made the button shake at least 6-7 times at the first load and then leave it as it is...
On the contrary to that, why would I do so?
Understand the context first; this is a CFA. The text "Limited Availability" makes clear that the user should make aware of clicking that button. We need to pressurize the user and make him/her click that button at any cost.
Also, I won't worry about what the hell would our client say if I add this kind of button effects of any animations throughout the site. Most cases would be they will like it. Worst case is they would ask us to remove it. Will remove it. At least, I would learn the use cases of animation, which is always a plus point.
---
Interactions
Interactions come into play into every instance that can trigger an action within our website. To be specific, forms, buttons, accordions, menus, tabs, and bla bla are our interaction elements. Not to forget, loading animations also falls on interactions.
Hamburger Menu Have a detailed look at these beautiful hamburger menus at first.
Every website is different from each other, and all these menus have a different purpose of serving. While adding animations to any site, I won't prefer to pick up any easy shit kind of navigation and sneak in. Why is apple's menu so fast and why not Jeny's website? They do have a different theme to serve. Apple wants the user to interact very quick; also, it resembles the site is very bold, grand, and confident. On the other hand, Jeny's website has a fluffy slow pace menu.
Can you imagine what kind of nav would be suitable for Kevin Hoff's Website? (If it had a hamburger menu) May be bold? Thick Menu Icon? Does Lightning fast? Dyang Dyang Kind of Feeling? Keep these stuff in mind while adding navigation.
Navigations These are a-bit awkward examples that we don't usually see in our projects. However, we can still find some that can fit in the graphics-heavy designs of anchor wave.
Pop Ups I am taking this as an example for the moment. There are different examples given in this particular pen. Know in which cases are these pop-ups used and try to implement similar effects in the future.
The "zoom" effect is used if the pop-up has detail information about the button/action that triggers it.
"Newspaper" for some Ad or quick notice or information.
The "3D Unfold" effect can be used for cards design or "Unlock this message" kind of buttons.
"move from the top" can be used for messages, notifications, or even alerts.
"Horizontal Move" can be used for other general stuff.
Forms Check out this form: this form is so so smooth and sleek at the same moment. I have seen this kind of ways in a lot of our client's design. Why should we only edit the placeholder if we can have the placeholder to move at the labels place? This would keep the information visible and at the same time, give in some interactions.
Images can have interactions too. Loading image can ask the user to wait and watch what comes in, also may help to optimize the speed of the site, etc. But again, let's not try to sneak in the same effect everywhere. Try making it bnw in some websites, blurred in some, show boxes in some, etc.
---
Speed
Why would speed matter? Every animation is based on the theme of the design. For example, a meditation website or a yoga website would probably have a slow and fluffy animation but not the same for a gym website right?Â
The buttons on KevinHoff's Site should have a lightning-fast speed. Why? That's a motivational website, need to feel the energy, and also, it's bold feeling should come to life.
Also, Last Door's website could have had the text on banner load a-bit faster? The dark background and bold books should make the brand shine?
Check the Nav menu on Last Door Website. It takes 3 seconds to load the navigation fully. While that of apple loads within One second. Both the websites have a bold and confident kind of feeling which we have slightly slipped in our site through speed.
Don't try to make a rule for animation. Different elements have different behaviors and actions. The same direction or formula cannot fulfill the animation requirement for all.
In the same site, there may be different elements with various sizes, shapes, etc. Don't slip in the same .3s transition everywhere. Check if it is needed. See the speed; how does that feel? Do they resemble similar to all the other elements on the website?
Similarly please don't add the same effects on all the site. At least try a slightly different variation of it.
It's good to copy at first but don't copy it without understanding. We need to have a clear understanding "what" is used "where," "why" it is used and need to be able to tweak it if needed.
Don't just assume your animations will work on every device. Before getting an inspiration, check if it applies to our ecosystem or not. Choose between what to sacrifice and what not to.
Don't get too much inspired or fascinated by a single product, library, or brand. You would, in return, get a creative blockade and eventually dislike everything else.
We need interaction. That's it. But not the dumb ones, smart, lovely and enjoyable. In every website. Start right from the project you're doing and at least try to add something new in that particular site.
It’s not possible to add everything in just a single message board. This is where we stand to start at the moment. Will Try to push things like this and make further more improvements to it. Anyone who’s interested can join in.
Thank you all for reading till the last line. You can clap if you like it. Also, please do correct me if I got wrong anywhere up there.
