Hi, Habrahabr! Recently, we announced a contest for application developers, and in a post on Habré gave links to the most interesting materials on Material Design. Some of them had the mark “RU - soon”, and today we are pleased to present you the first adapted article about how the creators of the Feedly application have adapted it to the new visual language of Android applications.

Foreword

As we have said, Material Design is not a set of colors, icons, and ready-made design elements. This is a whole language of information visualization, with its own logic, rules, properties and laws. Something he recalls the famous Esperanto: created to ensure that the perception of information was as simple as possible, and the events that occurred on the user's screen were clear and understandable.
Especially for Habr, we translated Arthur Bodoliec’s English-language post, the designer and co-founder of the Feedly application, and supplied him with actual comments that are in italics.
')

Material Design and Feedly

Note: The following text comes from the first person, i.e. from the author of the original article.
Not so long ago, Google announced Android Lollipop, an OS version that is significantly different from previous ones. It was applied a new visual language - Material Design. Together with the new operating system, Android presented a complete guide to visual, graphic and interactive design for various platforms and devices. October 7, I was at a seminar at Google. The team of creators of Material Design talked about how to work with it, and shared tips on using it when creating applications. I am sure that creating a new design of applications for Android is a big step in the right direction. This system is streamlined and quite flexible applicable to the design of any application. So I decided to start from scratch and began to redo Feedly in accordance with the principles of material design. My goal was to create a new version of Feedly, using as much as possible the possibilities of Material Design, to show our team the direction for further updates. In the next few months, we will develop these ideas and implement them in our new application. In addition, it was important for me to get more feedback from the community of feedly users. So if you have something to say, leave comments under this post! Note: It is unlikely that Arthur will see the comments under this post, but we still expect them from you here. ;) In this text I want to share the results of the work, as well as explain the motives of some of the decisions that I made during the redesign process.

Well, stop talking - go ahead to Material Design!

Before and after

During the redesign, I worked on Feedly's main screens. Here’s what the Android app looks like before and after the changes:


^{Navigation Bar, Card, Journal, Overview Panel, Search Results}

Material Design guidelines are quite difficult to read, but we have learned four basic principles for building an interface during the last seminar. I was guided by them in my work.

Principle One: tangible interfaces

Note: One of the key provisions of Material Design is the multi-layered interface. Its essence is well understood by this quotation:

“In Material Design, each pixel of content is located on a piece of paper with a smooth background color. The sheet can be any size depending on your goals. A typical layer in an application consists of several sheets of paper. ”

Prior to the translation of Feedly into a new visual language, the application already used a metaphor that is perfectly integrated into this system. The main element of our application is a set of cards, each of which is bound to a selection of articles. Any card can be pushed up to see the next one.



The user can navigate to different sections of the application using the panel on the left, located above the cards. The overview panel extends to the right and allows you to go to other news.

Principle Two: Printed Design

The main elements of print design are typography, basic grid, distance, scale, color and pictures. They influence the way the user perceives the application: they create structure, give meaning and direct attention.

8dp base grid
Google provides designers with great resources that help determine the size and placement of key elements in the application. But to work with them, you need to understand the overall grid system. Despite the fact that it is a grid with square cells and a step of 8dp, usually Android uses a 16dp border width. I changed the side panels to fit these rules, and also redid the grid system itself so that the boundaries are 16dp and give a single look to the whole application. And the size of the icons are 96px (12 x 8).



Color and images
Google recommends using the main color in the toolbars and status bars. In most cases, this is the color of the brand. But since Feedly is an app for reading, corporate bright green would distract users from the content, so I chose light gray.
In the left menu, I made the toolbar in the company's bright green color to highlight the main theme of the day. So I simultaneously used the color of the brand and highlighted an important element in the application.
Images are also very important. In a magazine format, I used borderless photos to present the most interesting articles. In addition, I used such photos as the theme of the selected section in the overview panel.

Principle Three: the meaningfulness of animation

Sometimes it is difficult for the user to understand where to look, or it is difficult to figure out how an element has moved from point A to point B. Carefully thought out movement attracts the user's attention and makes it easier to carry out several consecutive actions at once, to avoid misunderstanding when layers change or elements move, and in general thus improve overall usage experience. The design must be functional.

At Feedly, users make the most important transitions during the opening and closing of articles. In this case, you move from the list of articles to the card with the content of one of them. To help create this transition, I followed three guidelines recommended by the Material Design Guide.

Surface reaction
I add a ripple effect when touching the card, so that the user will immediately receive feedback when opening the article preview mode. This effect is organically incorporated into the preview function. The same thing happens when a user closes an article - a ripple appears on the top bar.

Visual continuity
The picture, which is visible on the preview in the magazine mode, increases and changes its position when the article unfolds in full screen. This allows the user to trace the connection between the element he touched and the opened element. However, sometimes the picture used for the preview is found in the text only after a few paragraphs. In these cases we make an animation in which the picture gradually disappears, and the text of the article, on the contrary, appears.

Touchable surface
This is perhaps one of the most important aspects of Material Design. We want to show what the article would look like if it were printed. When the user selects the option to preview the article, we raise it to the top. And, following the principle of visual continuity, we increase it, stretching the whole page. At this time, the text of the article appears on the screen. And when we put all these principles together, it turns out the animation. I followed the same principles when I did the animation that appears when choosing a topic on the overview panel:

Principle Four: Responsive Design

Our ultimate goal is to create a single responsive design that will work on devices of all shapes and sizes, from watches to huge TVs. Adaptive design technologies help translate the idea that all devices are just different versions of the same system. And this system adapts to the size and manner of use of a particular device. Colors, badges, structure and proportions remain constant. The material design concept provides components and designs that are flexible enough to achieve this.

From the start, the Feedly app was responsive. The main elements that require adaptation are cards on which articles are displayed. In journal mode it has always been the hardest thing to achieve just that, because it shows articles of different sizes. As seen in the picture below, different backgrounds are used on screens of different sizes.


I hope you enjoyed my story on Material Design. If you have ideas for improving Feedly, leave comments.

One more thing

Note: The author of the original article left an interesting afterword. We know that the main audience of Habra is in the CIS, which, in other matters, does not prevent you or us from working in international projects. In general, if you want, you can try your luck and become one of the Feedly employees:

I'm looking for a designer - a connoisseur of visual techniques and branding, who would work with me on similar tasks and develop Feedly as a product and brand. If you want to become part of our team, email me at design@feedly.com and send your portfolio as a link or PDF file.

Arthur, Feedly Designer and Co-Founder.

Special thanks to Nick Batcher , Artem Rusakovsky , Jean-Marc Denis , Aurelien Salomon and Alexander Peters for comments in the course of this design study.

PS: Here you can read about how Feedly first used Material Design.