WEB DESIGN TRENDS FOR 2019: PART 1 PURPOSEFUL MOTION

Whether you’ve been tasked with overseeing a brand new web site build, or you’re merely making to inject new life into an existing website, it’s handy to possess a concept of wherever the benchmark stands before you begin. during this three-part series, we’ve rounded up a number of |the design and UX trends you should be mindful of you’re planning your next internet design project.

Goodbye static design

Expect to ascertain tons additional movement in websites throughout 2019. New technology and standards (once cordoned off and labeled ‘experimental’ and ‘unstable’) became offered to most desktop and mobile web browsers, gap the door to interfaces that each exciting and usable. 

From the scene that springs to life as you scroll down the page to delicate feedback and small interactions in response to a user’s action, purposeful motion creates a way of sonorousness and participation, remodeling the repetitive and endless scrolling your users, therefore, want to into a unique experience.

Branded animation

The initial impression of SlumberApp is of one thing terribly nominal. It’s merely typography and photography, right? Wrong.

Some very fine details are working together here to build this sense of elegant minimalism; the custom images, the clear and very easy to read typography, the restricted color palette. However, the biggest part of this interface’s personality is the animation.

Note the gentle, almost dreamy way the titles waft over the images on the cards as the user scrolls. Not enough to distract, but just enough to leave that tranquil impression.

The transition when a card is selected is also of note. The title and image are retained, reinforcing to the user which item was selected, while the content comes in from underneath.

This is an excellent example of animation reinforcing a brand personality. once your product is all concerning quiet sleep, you would like your interface to replicate that. It’s not enough to get into some generic crossfades, parallax or sliders into your interface. think about animation as a whole element, such as you would your whole colors, or typography. The animation you employ ought to replicate YOUR whole in motion.

This animation offers the user a glance at 3 sides of the kayak whereas adjusting to suit in higher with its content. This one is additionally probably a wait time distractor. 

We’re also seeing ripples of the water, both passively in the texture but also as the kayak moves around. And bonus, the ‘sand’ under the water features what we think is the logo of the store; animation literally reinforcing brand values.

Object permanence

Animation can play a very functional role in interface design. Note how in the above, the segments of the pie chart animate to their corresponding elements in the bar chart. The standard way to do this would have been to simply switch views with no transitioning, but then we would lose the visual connection between the pie and the bar. This animation is key for the users’ perception of continuity.

Motion can also disguise wait times. Watch when the user selects a purchased item to see more information about it. This app could be connecting to a server and fetching that information while all the interface elements are sliding up into place, giving the impression that there was no loading at all.

We have the technology

The ubiquity of most trends hinges on their accessibility, and this one is no different; CSS has included the capacity for animation since 2011, but an understanding of movement was not an intrinsic skill to neither developers nor designers. Without an understanding of how things should move, or if things should move at all, and software that only really supported static designs, the uptake was slow.

Both the development and design fields have been embracing motion eagerly as it’s likely linked to animation being a signal of a premium design – even (or especially) to laypeople. Historically it’s been difficult to make the movement look right in the context of an interface, so when it works, it’s impressive.

We’re seeing both designers and developers develop their motion skills now thanks to more software that allows visualization and development of motion. This refinement is circular. A better eye for motion means more complicated requests from the technology which means the development of better software and better specifications. We’re also seeing more and more animation libraries that are making well-timed animations accessible to more people.

All of this means that motion in interface design isn’t going anywhere and will continue to mature as technology advances. It’s moved from a premium nice-to-have to a mandatory aspect of interface design, user experience, and even branding. Expect to see it everywhere, from enhancing the banality of ordering pizza and selecting insurance to manage your Ethereum.

Up next

This is the first of a three-part series where we look into visual and user experience trends to expect in 2019. Check out our next installment, where we look into the color, layout and typography trends you're going to be (or you're already) seeing everywhere this year: Part II – Bold visual styling.

Get in Touch :

Call Ajay : +66 – 894966 397

Email: [email protected]

Website: www.mvminfotech.com