Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Nowadays it’s hard to impress or even surprise with an interface
animation. It shows interactions between screens, explains how to use
the application or simply directs a user’s attention. While exploring
the articles about animation, I found out that almost all of them
describe only specific use cases or general facts about animation, but I
haven’t come across any article where all rules concerning animation of
interfaces would be clearly and practically described. Well, in this
article I won’t write anything new, I just want to collect all the main
principles & rules in one place, so that other designers who want to
start animating interfaces don’t have to search for additional
information.
Duration and speed of the animation
When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.
Published by mbc6x in Uncategorized
A while back we made a list of animated gifs explaining the basic
principles of responsive web design. The post was extremely popular. It
turns we were not the only ones who find it difficult to explain what
makes the web responsive. Today we are releasing a video, explaining few
of the principles with some real examples.
The flow
As screen sizes become smaller, content starts to take up more
vertical space and anything below will be pushed down, it’s called the
flow. That might be tricky to grasp if you are used to design with
pixels and points, but makes total sense when you get used to it.
Relative units
The canvas can be a desktop, mobile screen or anything in between.
Pixel density can also vary, so we need units that are flexible and
work everywhere. That’s where relative units like percents come in
handy. So making something 50% wide means it will always take half of
the screen (or viewport, which is the size of the opened browser
window).
Breakpoints
Breakpoints allow the layout to change at predefined points, i.e.
having 3 columns on a desktop, but only 1 column on a mobile device.
Most CSS properties can be changed from one breakpoint to another.
Usually where you put one depends on the content. If a sentence breaks,
you might need to add a breakpoint. But use them with caution — it can
get messy quickly when it’s difficult to understand what is influencing
what.
Max and Min values
Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don’t go over 1000px.
Published by mbc6x in Uncategorized
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Published by mbc6x in Uncategorized