<p>Published on <a href="http://ift.tt/2quwtno">| Prototyping: From UX to Front End &mdash; Medium</a> Fairy Lai </p>
<p>Highlights of a practical talk presented by Vitaly Friedman, co-founder of SmashMag</p>
<p><img alt="" src="http://ift.tt/2pIkUGj"></p>
<p>We are so glad that <a href="http://ift.tt/2qux1tl">DesignX community</a> could collaborate with Vitaly Friedman, co-founder of <a href="http://ift.tt/22K27Z8">SmashMag</a>, as well as <a href="http://ift.tt/2kqDsrF">Scotiabank Digital Factory </a>to present <a href="http://ift.tt/2pI0227">this amazing event</a>.</p>
<p>Before Vitaly started the talk, he clearly stated that:</p>
<blockquote><p>This talk is about <strong>TECHNIQUES.</strong></p></blockquote>
<blockquote><p>And about clever <strong>DESIGN PATTERNS.</strong></p></blockquote>
<blockquote><p>And what works in <strong>REAL-LIFE PROJECTS.</strong></p></blockquote>
<h3>All about Navigation and Layout: From Hamburger Menu to Designing for the Thumb</h3>
<h4>1/Visibility wins</h4>
<p>Vitaly started from the hot <a href="http://ift.tt/1D5gCNn">hamburger button</a> on tablet and mobile devices. Seems it is a good choice as it collapses all the menu options into a single button, so even some websites use it if they have a large menu listings.</p>
<p>But there is an issue with hamburger button, the visibility. Users tend to engage with what is visible on the table so no matter how hard we change the menu button, from a single icon, to an icon with “menu” even with an overlay stating that the menu is just hidden beneath the button, the users’ engagements still drop.</p>
<p>Learn more about the drawbacks of hamburger buttons and different solutions in <a href="http://ift.tt/2a20eju">this post from Tech Crunch</a> and <a href="http://ift.tt/1lLQDwj">this post.</a></p>
<h4>2/Position matters</h4>
<p>Vitaly showed One example of which the return button of the sliding menu was on the opposite side of the hamburger menu. Along the history, designs like switch, start button of windows already make people used to open and close something at the same place.</p>
<h4>3/Design for the thumb</h4>
<p><img alt="" src="http://ift.tt/2pI4TAf">Thumb pattern of mobile screen</p>
<p>On touch devices, people use thumb a lot to access to the content. The above image is the touch area of a medium-size device for the right handed. As the screen size becomes bigger and bigger, the thumb zone is also evolving. Check out <a href="http://ift.tt/2d1xtG7">this post from SmashMag about the thumb zone</a> and t<a href="http://ift.tt/XL8Wfu">his post about how to design for the thumb for more information.</a></p>
<h4>4/The bottom bar trend</h4>
<p>Feeling the pain of hamburger, some pioneers started to experiment different solutions. The bottom bar started to arise, instead of using a hamburger menu, people started to fix a bottom menu bar, which proves to be a better choice then the hamburger.</p>
<p><img alt="" src="http://ift.tt/2qunWkl">Bottom bar increased engagement rate</p>
<p>Some even placed the hamburger menu at the right bottom, instead of top to down, the menus are from down to top.</p>
<p><img alt="" src="http://ift.tt/2pIf7Rk">Website ada has the hamburger menu at bottom right<img alt="" src="http://ift.tt/2qujpyd"></p>
<h4>5/Mobile Trend in 2017</h4>
<ul>
<li>4–6 inch screens</li>
<li>high resolution screens</li>
<li>portrait orientation</li>
<li>one-handed grip(left/right)</li>
<li>thumb-drives 75% of interaction</li>
<li>Bottom control easier to reach</li>
<li>design for most constrained app</li>
</ul>
<h4>6/Data visualization — the arise of Tab-like-Map</h4>
<p>Map has always been an issue on touch devices, but recently websites started to adopt the tab-like-maps, which means the sizes of different areas are adjusted in order to be touch friendly.</p>
<p>*Bonus: <a href="http://en.kremlin.ru/">The best website of the world</a>.Hundred thousands of dollars have been spent on user research and user testing.</p>
<h3>Love the carousel, Hate the carousel</h3>
<h4>1/Carousel doesn’t work</h4>
<p>Vitaly showed many bad examples of using carousels, including massive amount and extremely hard to tap circles on mobile. <a href="http://ift.tt/1Mn9sX4">Research</a> have showed that most people only see the first image of the carousel. There is <a href="http://ift.tt/1dhcl6E">an interesting website called Should I Use a Carousel?</a>.</p>
<p><img alt="" src="http://ift.tt/2pIkWxV">A negative example of using carousel</p>
<h4>2/Use Carousel for creative exploration</h4>
<p>When used right, carousel can be a very delightful and creative design, especially in some showcase websites, carousel provides something for the audience to explore.</p>
<p><img alt="" src="http://ift.tt/2quqM99"><a href="http://www.7h34.fr/">creative use of carousel from 7h34</a></p>
<h3>Responsive layout and design</h3>
<h4>1/Responsive icons</h4>
<p>A responsive icon, an icon reduce the complexity as the size gets smaller, has a lot to do with explorable shape, visual glue and iconography. As the width of the screen changes, the logos should be modified to be less complicated while still keeping the brand style and readability. <a href="http://ift.tt/1nZpWsl">Check out this websites showing different responsive logos of some well-known brands.</a></p>
<p><img alt="" src="http://ift.tt/2quqMGb">Vitaly introducing responsive logos of ARGENTO</p>
<h4>2/Art direction is important for global scaling</h4>
<p>When the product is scaled to a global size, it is going to use different languages and fit into different culture and values. Art direction is extremely important here as the design needs to be changed and localized in order to target multi-layers of users.</p>
<h4>3/Responsive layouts</h4>
<p>Some websites use lots of illustrations and unique design to present their personalities. Responsive layout is extremely important as those unique components are the soul of the website. But at the same time, illustrations are normally in a static format, so the awareness of being responsive is necessary at the early stage of building the component.</p>
<h3>Be creative, be personal, build connections</h3>
<h4>1/Are you building a product just for people to use, or are you building a personal connection with the audience?</h4>
<p>Vitaly used the example of <a href="http://ift.tt/2jUqr9f">Uber</a> and <a href="http://ift.tt/2quqNdd">Mailchimp</a>. They are both very successful products, but for him, Uber is a good service for people to use and walk away, while he already feels a connection with Mailchimp so he will stay even if they increased the price.</p>
<p>There are no right or wrong. Both paths can lead to success, it just depends on people’s different value and choice.</p>
<h4>2/Be creative and show your personality</h4>
<p>Be brave enough to break the rules and layouts. Use dynamic shapes instead of rectangles and circles. Vitaly showed lots of unique websites which push the boundary and create strong personality, which is “better than any bootstrap framework website”.</p>
<p>Some people may argue that <a href="http://ift.tt/2pI4RID">Bloomberg’s design website</a> has lots of issues, looks clumsy…But they have pushed themselves far, and reinvented their personalities.</p>
<p><img alt="" src="http://ift.tt/2quqNKf"><a href="http://ift.tt/2pI4RID">Bloomberg design 2016</a><img alt="" src="http://ift.tt/2pI1vW2"><a href="http://rc3.me/">A portfolio website showing three parts of a picture randomly</a><img alt="" src="http://ift.tt/2quqOhh"><a href="http://aftershock.cc/">A fun website with crazy navigation</a></p>
<p>He also shared the story of <a href="http://ift.tt/2pHZngR">the worst hotel in the world</a>, going extreme in building personalities but achieved a great success.</p>
<p>Vitaly also introduced the <a href="http://ift.tt/2nsZbE4">new website design of SmashMag</a> and shared some details they’ve put great effort on to create a personal connection and unique personality, such as the error messages, the unique coupon code related to anything about cats….which all make the website warm and personal. The website is still under construction, but feel free to explore and try to find the 64 cats hidden!</p>
<h3>Highlights from Q&amp;A</h3>
<h4>1/How to balance between being creative and accessibility as well as usability?</h4>
<p>Build an accessible markup on top of the creative content. Use labeling and attributes, make sure to allow users to jump to main menu directly.</p>
<p>Nowadays, “intuitive” and “don’t make me think” have been overused. Vitaly holds a slight different opinion: he thinks it is necessary to make users think sometimes. Otherwise, the product will become “a no-brain machine with soulless functionalities.”</p>
<h4>2/How do you look at mobile first design principle?</h4>
<p>Vitaly personally is not a fan of this principle and he introduced his workflow:</p>
<ul>
<li>Stakeholders meeting (record if possible to really figure out what they want and need — the true expectations and requirements)</li>
<li>Write UI copies -start with the content</li>
<li>Component design based on requirement and content</li>
<li>Visuals and development</li>
</ul>
<p><strong>The core Vitaly clearly conveyed to us tonight is being creative and build up your personality.</strong></p>
<p>We want to thank everyone again who supported DesignX and this event. Keep the discussion going on <a href="http://ift.tt/2pI8Pkm">DesignX Toronto Community</a>😀</p>
<p><img src="http://ift.tt/2quqOOj" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2pIg5Nv">Responsive Interface Design Pattern</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Responsive Interface Design Pattern

Top Stories