{"id":6970,"date":"2015-07-23T11:21:19","date_gmt":"2015-07-23T18:21:19","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6970"},"modified":"2020-04-29T16:00:39","modified_gmt":"2020-04-29T23:00:39","slug":"design-navigation-drawer-tutorial","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/","title":{"rendered":"Animations &amp; Interactions in Design: Creating the Navigation Drawer"},"content":{"rendered":"<p>The navigation drawer is one of the most popular and modern of mobile web patterns. When the space is limited and your primary navigation pattern isn\u2019t crucial for the business goal, nothing works better than the good ol\u2019 drawer.<\/p>\n<p>In this post, we&#8217;ll take you step-by-step on building one. But first, a quick peek at how it works:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/154666247?title=0&amp;byline=0&amp;portrait=0\" width=\"700\" height=\"393\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><!--img src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Drawer-final.gif\" alt=\"Final navigation drawer example\" width=\"316\" height=\"508\" class=\"alignnone size-full wp-image-12053\" \/--><\/p>\n<p>The drawer panel allows you to hide the navigation beyond the left or right edge of the screen and reveal it only after a user&#8217;s actions. This pattern can be particularly useful if you want your user to focus on the main content.<\/p>\n<p>Prototyping the drawer used to require certain code skills, but with <a href=\"https:\/\/www.uxpin.com\/interactive-and-animated-prototypes.html\">the latest addition of advanced animation editor<\/a>, UXPin made it as easy as 1-2-3. It takes no more than 10 minutes to create a full-blown navigation drawer.\u00a0Log in to your UXPin account (or start a <a href=\"https:\/\/www.uxpin.com\">free trial<\/a>) and let&#8217;s get started.<\/p>\n<p>1. First, we have to specify the width of the canvas. We\u2019ll do it with the responsive breakpoint. If you\u2019re designing for the iPhone 5s then choose 320px.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10656\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/1-Choose-size.png\" alt=\"Choose a mobile canvas.\" width=\"700\" height=\"436\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/1-Choose-size.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/1-Choose-size-482x300.png 482w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/1-Choose-size-290x180.png 290w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>2. With the canvas ready, it\u2019s time to start designing. Add the top bar and background using \u201cBox\u201d elements. The box is available in \u201cGeneral Web UI library.\u201d Using a variety of UXPin\u2019s libraries you can quickly build whatever you want.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10655\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/2-Add-a-box.png\" alt=\"Add a box element.\" width=\"700\" height=\"433\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/2-Add-a-box.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/2-Add-a-box-485x300.png 485w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/2-Add-a-box-290x180.png 290w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>3. For a quick navigation, use \u201csearch\u201d (shortcut: cmd+f on Macs, ctrl+f on PCs).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10654\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/3-Search-field.png\" alt=\"Search for elements.\" width=\"700\" height=\"432\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/3-Search-field.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/3-Search-field-486x300.png 486w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/3-Search-field-290x180.png 290w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>4. Don\u2019t forget to add the <a href=\"http:\/\/gizmodo.com\/who-designed-the-iconic-hamburger-icon-1555438787\">infamous \u201chamburger icon\u201d<\/a> or any other symbol representing menu (use search to browse all the icons libraries in UXPin).<\/p>\n<p>5. When your main screen is ready, build the drawer menu. Place it outside of the canvas. To start with, it should touch the right edge of your main screen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7170\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Side-menu-1.png\" alt=\"Screenshot of off-canvas navigation at the side of the screen.\" width=\"622\" height=\"600\" \/><\/p>\n<p>6. Select every element constituting the menu and group them together (cmd+g on Macs, ctrl+g on PCs; or button in the top menu). For easy future reference, change the group\u2019s name \u201cDrawer.\u201d Depending on your design of the \u201cmain screen\u201d you might also want to group to help with the fluidity of the animation.<\/p>\n<p>7. Time for interactions. Left-click on the hamburger icon and from the properties manager menu choose \u201cinteractions\u201d with the \u201cclick (tap)\u201d trigger and \u201cadd advanced animation\u201d instead of \u201caction.\u201d That\u2019s your first step to a great navigation drawer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10653\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/4-Add-advanced-interaction.png\" alt=\"Add an advanced animation.\" width=\"700\" height=\"399\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/4-Add-advanced-interaction.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/4-Add-advanced-interaction-526x300.png 526w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>8. In the advanced animations editor, select all of the elements and drag them to the left. The far right edge of the menu should touch the edge of the 320px-width canvas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10652\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/5-Move-left.png\" alt=\"Move everything to the left.\" width=\"700\" height=\"411\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/5-Move-left.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/5-Move-left-511x300.png 511w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>9. We\u2019re almost there. Time to make things smoother. In the top menu choose the kind of animation, you would like to use. I\u2019m going to use \u201cElastic\u201d with \u201cEase In.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10651\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/6-Change-to-Sine.png\" alt=\"6 Change animation to \u2018sine.\u2019\" width=\"700\" height=\"409\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/6-Change-to-Sine.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/6-Change-to-Sine-513x300.png 513w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>10. You got it. Just click \u201csave\u201d and simulate your design using UXPin Preview or send it directly to your mobile phone.<\/p>\n<p>It\u2019s ready!<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7085 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/image01.gif\" alt=\"\" \/><\/p>\n<p>Do you want to make it even better? Take a look at some advanced options for the navigation drawer.<\/p>\n<h2>How to add \u201ca come back\u201d<\/h2>\n<p>We have to start with something slightly counter-intuitive. Bear with me.<\/p>\n<p>1. Since each element can only have one advanced animation with the same trigger assigned, we need to drop \u201ca hot spot\u201d (element available in General Web UI library) anywhere outside of the canvas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10650\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/7-Create-hotspot.png\" alt=\"Create a hotspot.\" width=\"700\" height=\"387\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/7-Create-hotspot.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/7-Create-hotspot-543x300.png 543w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>2. Now click on your hamburger icon and enter into edit mode of your advanced animation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10649\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/8-Edit-advanced-animation.png\" alt=\"Edit the advanced animation.\" width=\"700\" height=\"379\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/8-Edit-advanced-animation.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/8-Edit-advanced-animation-554x300.png 554w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>3. While in \u201cAdvanced Animations Editor\u201d move your hotspot directly above \u201cthe hamburger icon\u201d and add Advanced Animation to it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10648\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/9-Hotspot-advanced-animation.png\" alt=\"Add advanced animations to a hotspot.\" width=\"700\" height=\"377\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/9-Hotspot-advanced-animation.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/9-Hotspot-advanced-animation-557x300.png 557w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/9-Hotspot-advanced-animation-280x150.png 280w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>4. You just entered advanced animation within advanced animation. Sounds scary, right? Have no fear. UXPin will automatically add a \u201ccome back\u201d as the second step in the animation, so just click \u201csave.\u201d<\/p>\n<p>5. Might be hard to believe, but you\u2019re done! Check your design in UXPin preview. Smooth, huh?<\/p>\n<p>Hope you enjoyed this tutorial. Now play with <a href=\"https:\/\/www.uxpin.com\">UXPin<\/a> on your own! The possibilities are endless.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7151\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/image013.png\" alt=\"image01\" width=\"720\" height=\"316\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we dive deep into easily prototyping a navigational drawer.<\/p>\n","protected":false},"author":2,"featured_media":7049,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17,11,19],"tags":[],"class_list":["post-6970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-collaboration-2","category-tutorials","category-uxpin"],"yoast_title":"Animations and Interactions: The Navigation Drawer","yoast_metadesc":"In this tutorial, we dive deep into easily prototyping a navigational drawer.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Animations and Interactions: The Navigation Drawer<\/title>\n<meta name=\"description\" content=\"In this tutorial, we dive deep into easily prototyping a navigational drawer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animations &amp; Interactions in Design: Creating the Navigation Drawer\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we dive deep into easily prototyping a navigational drawer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-23T18:21:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-29T23:00:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marcin Treder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"http:\/\/proxystudio.uxpin.com\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@marcintreder\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcin Treder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/\"},\"author\":{\"name\":\"Marcin Treder\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\"},\"headline\":\"Animations &amp; Interactions in Design: Creating the Navigation Drawer\",\"datePublished\":\"2015-07-23T18:21:19+00:00\",\"dateModified\":\"2020-04-29T23:00:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/\"},\"wordCount\":656,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/Off-canvas-teaser1.png\",\"articleSection\":[\"Blog\",\"Collaboration\",\"Tutorials\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/\",\"name\":\"Animations and Interactions: The Navigation Drawer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/Off-canvas-teaser1.png\",\"datePublished\":\"2015-07-23T18:21:19+00:00\",\"dateModified\":\"2020-04-29T23:00:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\"},\"description\":\"In this tutorial, we dive deep into easily prototyping a navigational drawer.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/Off-canvas-teaser1.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/07\\\/Off-canvas-teaser1.png\",\"width\":1200,\"height\":530,\"caption\":\"Off canvas teaser1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-navigation-drawer-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animations &amp; Interactions in Design: Creating the Navigation Drawer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/cc841401f06463c92d633bed6dfd84bc\",\"name\":\"Marcin Treder\",\"description\":\"Marcin Treder is the CEO and co-founder of UXPin, a product design platform. Since co-founding UXPin in 2010, he has helped build and lead product teams in the Poland and Silicon Valley offices. Previously, he worked on projects for two companies that IPOed and managed the design team for one of the biggest eCommerce companies in Eastern Europe. He holds an M.A. in Cognitive Psychology. Marcin has been given numerous awards, including MIT 30 under 35 for his accomplishments in design and business.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\",\"https:\\\/\\\/x.com\\\/marcintreder\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/marcintreder\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Animations and Interactions: The Navigation Drawer","description":"In this tutorial, we dive deep into easily prototyping a navigational drawer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Animations &amp; Interactions in Design: Creating the Navigation Drawer","og_description":"In this tutorial, we dive deep into easily prototyping a navigational drawer.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/","og_site_name":"Studio by UXPin","article_published_time":"2015-07-23T18:21:19+00:00","article_modified_time":"2020-04-29T23:00:39+00:00","og_image":[{"width":1200,"height":530,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png","type":"image\/png"}],"author":"Marcin Treder","twitter_card":"summary_large_image","twitter_image":"http:\/\/proxystudio.uxpin.com\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png","twitter_creator":"@marcintreder","twitter_misc":{"Written by":"Marcin Treder","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/"},"author":{"name":"Marcin Treder","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc"},"headline":"Animations &amp; Interactions in Design: Creating the Navigation Drawer","datePublished":"2015-07-23T18:21:19+00:00","dateModified":"2020-04-29T23:00:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/"},"wordCount":656,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png","articleSection":["Blog","Collaboration","Tutorials","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/","name":"Animations and Interactions: The Navigation Drawer","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png","datePublished":"2015-07-23T18:21:19+00:00","dateModified":"2020-04-29T23:00:39+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc"},"description":"In this tutorial, we dive deep into easily prototyping a navigational drawer.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/Off-canvas-teaser1.png","width":1200,"height":530,"caption":"Off canvas teaser1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Animations &amp; Interactions in Design: Creating the Navigation Drawer"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/cc841401f06463c92d633bed6dfd84bc","name":"Marcin Treder","description":"Marcin Treder is the CEO and co-founder of UXPin, a product design platform. Since co-founding UXPin in 2010, he has helped build and lead product teams in the Poland and Silicon Valley offices. Previously, he worked on projects for two companies that IPOed and managed the design team for one of the biggest eCommerce companies in Eastern Europe. He holds an M.A. in Cognitive Psychology. Marcin has been given numerous awards, including MIT 30 under 35 for his accomplishments in design and business.","sameAs":["http:\/\/uxpin.com","https:\/\/x.com\/marcintreder"],"url":"https:\/\/www.uxpin.com\/studio\/author\/marcintreder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=6970"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/6970\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/7049"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=6970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=6970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=6970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}