Meaningful transitions

Material Design Principle

“Sometimes, it is difficult for a user to know where to look or understand how an element got from point A to point B. Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure, avoid confusion when layouts change or elements are rearranged, and improve the overall beauty of the experience. Motion design should serve a functional purpose.”

A principle applied to feedly

In feedly the most important transition happens when opening and closing an article. In this transition you move from a list of articles to the article view featuring the whole article’s content. To help create this transition I followed 3 main principles recommended by the Material Design guidelines.

Surface reaction

I use the Touch Ripple effect when the user interacts with the article preview to provide him with instant feedback. The Touch Ripple effect scales into the entire article preview element.

The same thing happens when the user closes the article where the Touch Ripple appears in the top bar.

Visual continuity

The image previewed on the magazine view is scaled up and moved to the correct position on the article view. This allows for the user to perfectly understand the relationship between the element touched and the final element. The challenge though is that in some cases the thumbnail image displayed as a preview only appears after a few paragraphs of text in the article view. In that case the image isn’t shown on the article view before you scroll down a bit. In those instances we would have to fade the thumbnail away and fade the article’s content in as the article view reveals itself.

Tangible surface

This is probably one of the most important aspects of Material Design. With this principle we want to show how content is printed on tangible surfaces. When the user touches the article preview we lift it to become its own surface. And following the visual continuity principle we then scale that surface to become the main surface of the page. As this motion happens we fade the article’s content in.

After putting all these principles together, here is the final animation:

I also followed the same principles to design an animation when selecting a topic on the explore panel.

Adaptive design

Material Design Principle

“Our final core concept of material is creating a single adaptive design that works across devices of all sizes and shapes, from watches to giant TVs. Adaptive design techniques help us realize the vision that each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant. The material design system provides flexible components and patterns to help you build a design that scales.”

A principle applied to feedly

Since its initial launch the feedly mobile app has been adaptive. The main elements that need to be adapted are the cards displaying articles. The magazine view has always been the most challenging and interesting one as it features articles of various sizes. As you can see the the visual below, each screen size allows for a different and interesting layout.

I hope you enjoyed this post on our Material Design exploration. If you have any feedback or other ideas about how feedly could better embrace these principles please leave a comment.

One more thing

I am also looking for a designer with awesome visual and branding skills to work with me on such challenges and push the feedly product and brand forward. If you are interested in joining the team drop me an email at design@feedly.com with a link to your online portfolio (or pdf).