{"id":7841,"date":"2017-03-27T12:46:01","date_gmt":"2017-03-27T11:46:01","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7841"},"modified":"2021-01-26T05:04:55","modified_gmt":"2021-01-26T05:04:55","slug":"exploration-material-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/exploration-material-design\/","title":{"rendered":"An Exploration in Material Design"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Google launched Android Lollipop which introduced some major changes and a new visual language called Material Design. With this new OS, Android is bringing a comprehensive guide for visual, motion, and interaction design across platforms and devices.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Last October, I attended a workshop hosted at Google where Material Design\u2019s UX team shared insights on this new approach to Android\u2019s design as well as tips on how to use it for third party apps.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I strongly believe this new way of designing apps for Android marks a solid step in the right direction. The system is consistent and flexible enough to adapt to any app\u2019s design. This is why I went back to the drawing board and started redesigning what feedly could look like following the Material Design principles.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">This exploration\u2019s main goal was to create a new version of feedly, fully enhanced with Google\u2019s Material Design to give our team a design direction for future releases. In the coming months we will be taking some ideas from it and implementing them in our new app.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The secondary goal is to get feedback from the feedly community. So please don\u2019t hesitate to leave <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/feedly-behind-the-curtain\/an-exploration-in-material-design-by-feedly-8c1a1cbdfdcd#.z5afp9t3t\">comments<\/a> if you have any suggestion!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this post I am sharing the results of this work as well as the motivations behind some of the design decisions I took along the way.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Alright, enough talking, time to dig into Material Design!<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Overview<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">On this redesign I worked on the main feedly mobile screens. Here is a before and after view of feedly for Android.<\/p>\n<div id='gallery-1' class='gallery galleryid-7841 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/17-RcmwsNc7ege_O8xT3ixQ.png'><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1414\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/17-RcmwsNc7ege_O8xT3ixQ.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/17-RcmwsNc7ege_O8xT3ixQ.png 2000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/17-RcmwsNc7ege_O8xT3ixQ-600x424.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/17-RcmwsNc7ege_O8xT3ixQ-768x543.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/17-RcmwsNc7ege_O8xT3ixQ-1500x1061.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Material Design guidelines can be pretty intense to read but during the workshop four core principles were emphasized. They are the ones I have used to frame my work.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tangible interfaces<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Material Design Principle<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cIn material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper.\u201d<\/span><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">A principle applied to\u00a0feedly<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Feedly is already using a metaphor which fits perfectly in this framework. The main element of the feedly mobile experience is a stack of cards where each card has a list of articles. You can swipe up each card to reveal the next one.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Feedly\u2019s navigation happens on a left panel which slides above the stack of cards. The same thing happens with the explore panel which slides from the right and lets you discover new feeds.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/10pE13osDfADwzgD0HqUA0w.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7843\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/10pE13osDfADwzgD0HqUA0w.png\" alt=\"10pE13osDfADwzgD0HqUA0w\" width=\"1000\" height=\"589\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/10pE13osDfADwzgD0HqUA0w.png 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/10pE13osDfADwzgD0HqUA0w-600x353.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/10pE13osDfADwzgD0HqUA0w-768x452.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1miNksaZ3v-eyBiWHILWcfg.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7844\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1miNksaZ3v-eyBiWHILWcfg.png\" alt=\"1miNksaZ3v-eyBiWHILWcfg\" width=\"800\" height=\"677\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1miNksaZ3v-eyBiWHILWcfg.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1miNksaZ3v-eyBiWHILWcfg-600x508.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1miNksaZ3v-eyBiWHILWcfg-768x650.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Print-like design<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Material Design Principle<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cThe foundational elements of print-based design \u2014 typography, grids, space, scale, color, and use of imagery \u2014 guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.\u201d<\/span><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">A principle applied to\u00a0feedly<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>8dp grid<br \/>\n<\/em><\/strong><br \/>\nGoogle provided some <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.google.com\/design\/spec\/resources\/layout-templates.html\">great resources<\/a> to help designers size and position their app\u2019s main elements in a consistent way. But you also need to understand the overall grid system. Though it is an 8dp square baseline grid, most of the time Android actually uses 16dp as margin size. In addition to following these guidelines for our side drawers I also modified our magazine view <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/better-grid-systems-ui-design-tools\/\">grid system<\/a> to have all margins set at 16dp and bring more consistency in our design. The thumbnail images are 96px wide (12 x 8).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<div id='gallery-2' class='gallery galleryid-7841 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1qY5zZzYlwUvLps8FscD_oA.png'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"561\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1qY5zZzYlwUvLps8FscD_oA.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1qY5zZzYlwUvLps8FscD_oA.png 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1qY5zZzYlwUvLps8FscD_oA-600x337.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1qY5zZzYlwUvLps8FscD_oA-768x431.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Color &amp; imagery<br \/>\n<\/em><\/strong>Google recommends to use the primary color in the toolbars and status bars which usually means using your brand\u2019s color in those areas. Because feedly is a reading app, using our bright green in these bars would be very distracting when your eyes try to focus on content. I chose to use a light grey instead to create a less intrusive toolbar.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">On the left drawer I created a toolbar using our brand color to highlight the trending topic of the day. This is a nice way to use our brand\u2019s color to emphasize a key piece of information.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Imagery is also really important. In magazine view I used full bleed images to represent articles with high engagement. I also use a full bleed image as the header of the selected topic in the explore panel.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<div id='gallery-3' class='gallery galleryid-7841 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1FLZWl3oCapuQQBs1qgcqYA.png'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"561\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1FLZWl3oCapuQQBs1qgcqYA.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1FLZWl3oCapuQQBs1qgcqYA.png 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1FLZWl3oCapuQQBs1qgcqYA-600x337.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1FLZWl3oCapuQQBs1qgcqYA-768x431.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Meaningful transitions<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Material Design Principle<\/h3>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">Carefully choreographed motion design can effectively guide the user\u2019s attention<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cSometimes, 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\u2019s 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.\u201d<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">A principle applied to\u00a0feedly<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019s content. To help create this transition I followed 3 main principles recommended by the Material Design guidelines.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Surface reaction<\/em><\/strong><br \/>\nI 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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The same thing happens when the user closes the article where the Touch Ripple appears in the top bar.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Visual continuity<\/em><\/strong><br \/>\nThe 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\u2019t 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\u2019s content in as the article view reveals itself.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Tangible surface<\/em><\/strong><br \/>\nThis 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\u2019s content in.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After putting all these principles together, here is the final animation:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1n3yXJ63nUoIJIR66M6bYLw.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7847 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1n3yXJ63nUoIJIR66M6bYLw.gif\" alt=\"1n3yXJ63nUoIJIR66M6bYLw\" width=\"360\" height=\"640\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I also followed the same principles to design an animation when selecting a topic on the explore panel.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1PZTtuYe-pLh6ZSjr1VWJ8g.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7848 aligncenter\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1PZTtuYe-pLh6ZSjr1VWJ8g.gif\" alt=\"1PZTtuYe-pLh6ZSjr1VWJ8g\" width=\"360\" height=\"640\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Adaptive design<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Material Design Principle<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cOur 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.\u201d<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">A principle applied to\u00a0feedly<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1kvp4kZUu9dBljKrhj3lsiw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7849\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1kvp4kZUu9dBljKrhj3lsiw.png\" alt=\"1kvp4kZUu9dBljKrhj3lsiw\" width=\"800\" height=\"925\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1kvp4kZUu9dBljKrhj3lsiw.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1kvp4kZUu9dBljKrhj3lsiw-519x600.png 519w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1kvp4kZUu9dBljKrhj3lsiw-768x888.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/feedly-behind-the-curtain\/an-exploration-in-material-design-by-feedly-8c1a1cbdfdcd#.z5afp9t3t\"> Arthur's Medium page<\/a>.\u00a0<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">\nFurther Reading:<br \/>\n<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/getting-started-vr-interface-design\/\">Getting Started With VR UI Interface Design<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/animated-transitions-in-mobile-apps\/\">Animated Transitions in Mobile Apps<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/enhance-user-experience-animated-transitions\/\">Enhance Your User Experience with Animated Transitions<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/user-testing-designers\/\">User Testing for Designers<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Google launched Android Lollipop which introduced some major changes and a new visual language called Material Design. With this new OS, Android is bringing a comprehensive guide for visual, motion, and interaction design across platforms and devices. Last October, I attended a workshop hosted at Google where Material Design\u2019s UX team shared insights on this new approach to Android\u2019s design&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":116,"featured_media":7864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-7841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Exploration in Material Design | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Google launched Android Lollipop which introduced some major changes and a new visual language called Material Design. With this new OS, Android is bringing a comprehensive guide for visual, motion, and interaction design across platforms and devices. Last October, I attended a workshop hosted at Google where Material Design\u2019s UX team shared insights on this new approach to Android\u2019s design... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-27T11:46:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-26T05:04:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/app-screens.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1405\" \/>\n\t<meta property=\"og:image:height\" content=\"766\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/app-screens.png\",\"width\":1405,\"height\":766},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/\",\"name\":\"An Exploration in Material Design | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#primaryimage\"},\"datePublished\":\"2017-03-27T11:46:01+00:00\",\"dateModified\":\"2021-01-26T05:04:55+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/eb101267b8e3aeb195250309a4f9ca2f\"},\"headline\":\"An Exploration in Material Design\",\"datePublished\":\"2017-03-27T11:46:01+00:00\",\"dateModified\":\"2021-01-26T05:04:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/exploration-material-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/eb101267b8e3aeb195250309a4f9ca2f\",\"name\":\"Arthur Bodolec\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bfeac1982ea5d9a2958cd1d657fd2787794be202a92d0fb3a50ae956bccb3afe?s=96&d=mm&r=g\",\"caption\":\"Arthur Bodolec\"},\"description\":\"Product Designer at Facebook. Previously design co-founder at Feedly. Also created UX Archive. More on www.arthurbodolec.com\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/7841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/116"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=7841"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/7841\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/7864"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=7841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=7841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=7841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}