Skip to main content

The ultimate guide to proper use of animation

By Design, FreeNo Comments

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.

Basic principles of responsive web design

By Arts, Design, UncategorizedNo Comments

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.

Basic principles of responsive web design

By Design, Free, TemplateNo Comments

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.

The ultimate guide to proper use of animation

By Design, Free, TemplateNo Comments

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.

A model is only as good as its story

By Design, Tech, WhiteboardsNo Comments

Models on their own are unreliable. Utterly pointless. Too often, we see misleading decisions being made from that spike in an excel line graph or the absolute value from a financial model. But models are only a simplification of reality. A reflection of history. A benchmark or an anchor for future predictions.

Models are powerful when they’re showcased in a story — contextualising the data from introduction, analysis and recommendations.I recently had drinks with a friend who works in investment banking we came to a simplified (overly simplified) conclusion that investment bankers and consultants do the same thing. We validate an opportunity by building a model around the future-state. This is the ground work. We then hook the deal by injecting industry insights, playing with variables of financial/operating models, and aligning proposed options with strategic objectives of the organisation. So how do you turn a beautifully complex model into a compelling story?


1. Buffer for assumptions and variances

If you haven’t built the model yourself, its well worth investing the time to understand its mechanics — i.e. what are the data sources and how are they applied to produce an output? Ideally, most models should have a buffer in a range where a set of options might sit. A basic modelling principle which requires a thorough understanding of the quality of the data, the context of the business and how it might impact the overall result. For instance, you might apply a 20% contingency buffer to an opex forecast to factor incidentals, or use industry benchmarks for a valuation to include worst and best case scenarios around the actual value.

There’s a clear story here. Adding a buffer to a model says this model isn’t perfect, but there’s a science to how we manage the downside of assumptions or variability in the data.


2. Test alternate worlds

p>The fun with modelling is in playing with variables to produce different scenarios — be it changing prices, rates of return, stock variances, labor utilisation or even failed projects. You might do this with fancy Monte Carlo simulations (which I’ve never got right!), or manually change a model’s inputs to test its impact on the final outcome.

We create stories through these scenarios. How would the outcome differ if we canned a project half-way through its lifespan? What would happen if the price of wool suddenly skyrocketed up by 80%? What would happen if we acquired company Y instead of company X…or both?

Creating alternate worlds with our models allows us to make decisions about the risks we need to mitigate and the extent to which we might want to control variables depending on their relative impact.


3. Clinch it with a business case

A model becomes meaningful when it inspires action. Action which comes from a decision. A decision which comes from seeing an opportunity that ties directly with a business and social need.

A model is ultimately used to make recommendations on a set of initiatives, drawing upon the vision and strategic intent of the enterprise. But it takes a lot to get to the final cut. It takes a deep understanding of factors that would disrupt the organisation internally, in the broader industry and how these factors translate to a problem statement and call for action.

The recommendations itself must tell a story through a solid business case. It tells us:

  • Purpose and need
  • Opportunity costs (of choosing one initiative of another)
  • Risk mitigation
  • Measuring performance

At the end of the day, the model is really only a small part of a pitch. The story is in the detail, the assumptions, the data sources and all the little nuances which contextualise its existence.