Skip to main content
Category

Design

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.

What is a good website?

By Design, Tech, WhiteboardsNo Comments

At the moment we have a professor from the Maastricht University embedded in our design studio. He is studying designers in the wild like an anthropologist would study an unknown tribe in Africa. One of the subjects of his research is the design process. I always found this an interesting topic and this is what led me to Chimero’s book: it speaks about the design process from a designer's point of view. His insider's view is a feast of recognition.

What stuck with me the most about his description of the design process is the idea of clear thinking. Chimero has an interesting description of the way he works: he just “shows up” and lets the “context speak what it requires”. He says “it’s the designer's job to figure out a way to have the problem show it’s actual self so he can respond to the truth that has emerged.” This is clear thinking: to see the truth about the problem at hand.


Philosophy

When we start asking why and start thinking about truth we enter into the domain of philosophy. I have always seen design (and other arts) as a visual form of philosophy. One that is more elaborate than traditional philosophy because it not only thinks through words but also through images. Some might call this particular form of philosophy design thinking. When we define design as a branch of philosophy, the next step is to question some of the great thinkers of this world to see what they have to say about design. For me, there are two philosophical texts by Martin Heidegger that define good design.

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.


The definition of a good website

Just like art, design is in constant need of definition. I think the answer to the question of what good design is, defines the designer. So, design is about asking why (so it’s basically philosophy), web design’s aim is to find the truth about the client, the user, and the internet, the truth is best communicated through beauty, to find the truth about your medium you have to forge a deep connection to it

Designing a place for designers

By Design, Product, TechNo Comments

Big open work spaces allow teams to work closely, face to face. This makes collaboration seamless by enabling designers and other colleagues to rapidly iterate on ideas and get feedback by simply looking up and asking. Whiteboards are abundant so it’s easy and quick to engage in design thinking activities any time the need arises. Lounge setups provide comfortable and casual places to chat, review work, and of course share food.


Determining the right layout

With a rectangular shape and limited square footage, figuring out how to arrange everything was a bit challenging. The plans went through a few iterations to find just the right balance of the versatile spaces that larger studios boast. The final design placed team desks parallel to the large glass wall, giving designers a nice view out of the studio and others a nice view of the design magic happening within. Breakout spaces and the more private meeting rooms were set along the back wall. The team moved in to the space in April and have been enjoying their new digs.

A brief history of the numeric keypad

By Design, Free, TemplateNo Comments

Picture the keypad of a telephone and calculator side by side. Can you see the subtle difference between the two without resorting to your smartphone? Don’t worry if you can’t recall the design. Most of us are so used to accepting the common interfaces that we tend to overlook the calculator’s inverted key sequence. A calculator has the 7–8–9 buttons at the top whereas a phone uses the 1–2–3 format.


Typewriters, Cash Registers, and Calculators

Looking at the key arrangement, I was curious to learn when the system of using keys was introduced in the history of machines. The keyboard came about sometime between the first and second industrial revolutions (from 1820 to 1920). Some inventors had already begun experimenting with machines similar to pianos in the late 18th century.

However, it wasn’t until 1844 that a Frenchman by the name of Jean-Baptiste Schwilguć came up with the first working prototype of a key-driven calculator machine. This machine used the first numerical keyboard with a single row of keys that increased from 1 to 9 (Dalakov, 2018).

In all fairness, though, we have to mention two predecessors that could claim they invented the key-based interface. In 1834, Luigi Torchi reportedly showed a prototype of a wooden calculator, with a design similar to the typewriter. In 1822, author James White’s New Century of Inventions showed a key-based device with nine numeric keys. Neither one stood up to the test of time, nor no proof was given that they weren’t just fantasy (Durant, 2011).