Image source map insect: used by the stationmaster’s home
As one of the trends in web design in 2018, web page design has become an important part of the modern web user experience. Whether it’s subtle transition effects or covering the entire page, animation effects are everywhere. The interactive details of the dynamic effects make the modern web page fundamentally different from previous designs.
For designers, the maturity of CSS and HTML has made designers more and more creative. CSS animations make their websites more personal, can explain complex ideas quickly and easily, and guide users’ actions. For the user, the animation effect makes the logical changes of the elements in the webpage clearer, and the personalized visual effect brings the user’s pleasure feeling to the user to retain and increase the conversion.
What is CSS animation?
With CSS3, we were able to create animations without the need for a processor and JavaScript or Flash that requires a lot of memory. There is no limit to the number or frequency of CSS properties that can be changed. Start a CSS animation by specifying a keyframe for the animation.
Today, the hacker team has compiled some very good examples of web design with animation effects in foreign countries. These sites use animation to showcase products and services, showcase brand styles, create emotions, and even guide users through story browsing.
1. Your Plan, Your Planet
Https://yourplanyourplanet.sustainability.google/
Designer: MediaMonks
Mobility features:
- Hover effect
- Guiding effect
- Storytelling
Your Plan, Your Planet is a dynamic web page about sustainable future planning by MediaMonks, the Netherlands. The home navigation design is based on life elements such as water, food, energy, and the design skills of mouse sliding to select different elements, combined with hovering effects, make the whole page design very creative and design. The use of equidistant illustrations makes the planning of a sustainable future interesting and interesting. At the same time, we can also see more interesting aspects of material design.
The animation effect design and UX copy of each life element are very story-telling and guiding. Every interaction with the user will produce different results. Each step is to spread the concept of environmental protection and sustainable development. It is an education. Yule’s animated web design.
2. Species in Pieces
Http://www.species-in-pieces.com/
Designer: Byan James
Mobility features:
- Transitional effect
- Micro-motion
This is a CSS-based interactive motion web design that uses only triangle segments to showcase 30 of the world’s most interesting but unfortunately endangered species – they survive the text in fragmented form. All triangular fragments are transformed into different colors in each transition animation to form different species. Each animal is equipped with a statistical chart that visualizes their evolutionary history and the number of species that have been declining year after year. Designers use JavaScript and CSS to link all transitional movements to SVG shapes to create a website that promotes species conservation, hoping to make their own efforts for the survival of these species and to cause human thinking.
3. New Tactics – Sneak Peak
https://dribbble.com/shots/5269419-New-Tactics-Sneak-Peak
Hacker iDoc, faster and simpler product collaboration design artifact
Designer: Quintin Lodge
Mobility features:
- HTML5 animation
- Data dynamism
This case uses HTML5 animation design. Subtle gradient color web design is just right in a solid background. The gradient color design and real-time interactive design of the display line make the pages on the dark background more dynamic. The information icon on the page switches to a different mode to expand and scale the data. So, when you first see this page, you might ask yourself “What am I looking at?”.
In fact, this is a two-version tactical map designed to help solve human rights violations. The first view is a map of the terrain or overall health of the problem. The second is the connection view, which illustrates the nature and impact of the individuals associated with this violation and other participants on the map. The color and animation points of the connecting lines in the second view represent the nature of these relationships as well as power or influence.
4. Miki Mottes
Http://www.mikimottes.com/
Designer: Miki Mottes.
Mobility features:
- Typography
- Scrolling trigger
- Loading effects
This is a very interesting illustration style collection of dynamic web design. Of course, this has a lot to do with the author himself as an illustrator, an animator and a designer. So, this interesting website is the perfect display of the creator style. If you want to learn to design the entire web page by adding some partial animations, this is a good example.
The excellent navigation bar design also provides a good user experience. The scrolling effect of the floating navigation bar makes the logic clearer and more gradual when users visit the website. If you have time to browse the web carefully, the effect of detail animation is also very interesting. It is a unique style of dynamic web design.
5. Genesis
Https://eatgenesis.com/
Designer: Sam Day
Mobility features:
- Scrolling trigger
- Hover micro interaction
If you only look at the homepage design, you might think that Genesis is just an illustration, but it is difficult to connect it to food and restaurants. In fact, Genesis is a website that promotes vegetarianism and focuses on fast casual dining and organic comfort food. One of the web design features is the flashlight cursor. As the mouse slides, the area you are going to highlight will be highlighted. The combination of single-page design, mouse-over micro-interaction design and scroll-triggered animation effects makes the entire site mysterious. Curious to users is also a way to engage users.
6. KIKK Festival
Https://www.kikk.be/2018/en/home
Designer: DOGSTUDIO
Mobility features:
- Hover effect
- Mouse effect
- Micro-interaction
KIKK is a cultural education webpage that displays the true web page background color under the blue mask through the moving path of the mouse. The effect of the cursor on the spray effect is very creative. The web page also adds some interesting cursor effects and cute little illustrations to create a wonderful micro-interaction with the swimming mouse.
7. Onedesigncompany
Https://onedesigncompany.com/
Designer: Onedesigncompany
Mobility features:
- Micro-interaction
- Loading effects
- Storytelling
The benefits of using animation in web design are obvious, making the web page more vivid. But this also makes waiting and loading time longer. Then adding a creative loading animation to the progress bar during the waiting process will change the user’s perception of time and reduce the user’s waiting feeling by diverting attention. Simple loading dynamics are better than complex ones. The UX copy promotes the micro-interactive animation display in a narrative manner, which is also a commonly used dynamic display method in web design.
8. Marie Morelle
Https://www.marie-morelle.com/
Designer: Marie Morelle
Mobility features:
- HTML5 animation
- Navigation bar scrolling effect
- Mouse effect
This is an illustrator-style portfolio site, and the combination of French-inspired illustrations and HTML5 animated web design makes the site attractive. The right navigation bar switches pages with mouse scrolling, and the accompanying page interactions are very design in the context of a simple design.
How to create a professional dynamic web design? – You need the right tools!
1. ANIMATE.CSS
Animate.CSS is a foreign CSS3 animation library with an animation library of up to 60 animation effects, including almost all common animation effects. With this animation library, designers can easily and quickly create CSS3 animations.
2. MAGIC ANIMATIONS
Magic Animations Animation is a unique CSS3 animation effects package that designers can use freely in their own website projects by simply introducing CSS styles on the page: magic.css or the compressed version magic.min.css.
3. BOUNCE.JS
Bounce.js is a very powerful visual CSS3 animation code generation js library plugin. You can edit various animation effects of CSS3 under visual conditions. In addition, Bounce.js can also be used alone to complete various CSS3 animation effects through js code.
4. Mockplus
Mockplus is a rapid prototyping tool for navigation bar switching designs and web design that requires scrolling.
to sum up
Visual design is increasingly sought after by people. The 8 modern dynamic web pages designed by the hacker team can inject more inspiration into your design and make you stand out from the crowd.