small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p>Published on <a href="https://blog.prototypr.io/8-excellent-mobile-first-design-examples-for-designer-inspiration-4c6fab444ace?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Vincent Xia <img alt="" src="https://cdn-images-1.medium.com/max/908/1*bYVDMoM7ghq7IzAsR41aMA.jpeg"></p>
<p>In 2011, Luke Wroblewski has devised a <a href="https://www.mockplus.com/blog/post/mobile-first-design/?r=grace">concept of mobile first design</a>. This was undoubtedly a new design principle that broke the industry’s conventions at that time. While in the current Internet era, it has been totally accepted and lots of excellent <strong>mobile first design</strong> examples emerged. It has been proved that people or business who follow this principle to make the best mobile first design website, he will be the winner of the market and opportunities. So, that’s easy to see how important of the mobile first design for business and designers to make products.</p>
<p><strong>The redesign of YouTube in 2017 has already embodied the authority of mobile first design.</strong> <a href="https://www.mockplus.com/blog/post/131-flat-design-vs-material-design-how-are-they-different/?r=grace">Material Design</a> reflects the “desktop version is a subordinate of mobile version”. Which just corresponded to Nader’s mobile first concept who is the current CEO of Microsoft.</p>
<p>There is a most common explanation for the current PC and mobile design. That is, previously mobile version was a reduced desktop page, while the current desktop version is an enlarged mobile app. So, I listed 8 excellent mobile first design examples for your case study and inspiration.</p>
<h3>1. <a href="https://www.youtube.com/">YouTube</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*fckc8Y4IGGKhBb82.png"></p>
<p><strong>What attractive in design</strong>: Blank for button and text display, Night mode</p>
<p>To some degree, the Material Design language for the YouTube Desktop Web Edition also reflects the preference for mobile devices. So that’s reasonable to adopt the <a href="https://www.mockplus.com/blog/post/responsive-web-design-guidelines/?r=grace">responsive design</a>. So there is no doubt that the blank for buttons and text display is to adapt to the user habit on small-screen touch mobile devices.</p>
<p>The new night mode also shows its surrender to mobile devices. The interface of the desktop version is the white background. For the mobile device, it’s better to use the screen yellow in night-light mode, rather than the black and white background. All light removed, small screen, so the best method is to reduce the brightness to comfort users’ eyes.</p>
<h3>2. <a href="http://www.apple.com/">Apple</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/636/0*U_Lym_HYQ5eFpR41.png"></p>
<p><strong>What attractive in design:</strong> Convenient scroll navigation</p>
<p>A user experience survey published by the Nielson/Norman Group shows that hiding navigation (like hamburger navigation) reduces content discoverability by 21% and increases navigation by 2 seconds on average. The Apple mobile website has a very good content layout. So users do not need to use the navigation button but scroll down the page to access information, very easy and convenient. The shopping bag icon is usually necessary and clear for user’s first glance for shopping. Furthermore, if no information wanted after browsing the page, you can search the desired information in the bottom navigation.</p>
<h3>3. <a href="http://www.pitchfork.com/">Pitchfork</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/750/0*xMlTSInAJTKORtw1.png"></p>
<p><strong>What attractive in design</strong>: Thumb design</p>
<p>Although there are many studies of thumbnail areas, many sites and applications out the navigation on the top of the screen. However, if you are careful enough, you will notice that the larger the phone is, the harder it is for the user to access the content on the outer edge of the screen. By contrast, Pitchfork puts the main navigation bar at the bottom of the screen, where the thumb touches most easily. With the growing number of mobile devices, this design type should be the future trend.</p>
<h3>4. <a href="https://www.typeform.com/">Typeform</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/639/0*NjPvGrttkmOskHXM.png"></p>
<p><strong>What attractive in design:</strong> Large Menu Button — Great for touchscreens</p>
<p>Typeform has a beautiful desktop design with a simple copy, high-definition video, animation and other design elements. But the complex design components are not user-friendly to mobile users, such as video and animation, which can significantly affect page load times. As a result, they cut down many unnecessary design elements on the mobile website page but retained the large menu buttons that work well on mobile devices, simplifying the overall mobile experience with simplicity and sophistication.</p>
<h3>5. <a href="https://airbnb.com/">Airbnb</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PoNnsGEF56wV8CLu.png"></p>
<p><strong>What attractive in design:</strong> Card Design</p>
<p>Card design makes it easier for users and information to connect with each other for a limited time. This is why Google chose card design as their design standard. Other Internet companies such as Airbnb have gradually accepted and adopted this approach. Each card’s message is concise and effective and usually consists of a title, picture, graphic, or profile text. This design gives users enough information and makes it easy for them to decide if they want to go deeper and learn more.</p>
<h3>6. <a href="https://www.smashingmagazine.com/">Smashing Magazine</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/639/0*HQjQvBZeXUWKkNaa.png"></p>
<p><strong>What attractive in design:</strong> Emphasis on users, rational use of screen space optimization</p>
<p>Data show that more and more Internet users choose to stop the content they do not want, especially mobile users in recent years. Constant navigation settings, full-screen advertising, excessive marketing terms, and these do not give users a good user experience. If you want to push user ads or lead users to continue reading, you can push selectively based on what users are viewing. That’s why the strategic layout of the content is easier for users to click. If you simply break the user experience or get them to jump pages in order to get profit, you will lose users gradually, and the profit will decrease as users lose.</p>
<h3>7. <a href="http://www.facebook.com/">Facebook</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/537/0*idbf7PAot0_aiEMK.png"></p>
<p><strong>What attractive in design:</strong> Effective animation</p>
<p>The animations on the web pages help users to understand the current image vividly and give the user experience more expressiveness and humanity than to entertain the public. For example, MailChimp uses the Hi-five animation as a greeting after a successful mailing-out, a mini-animation of Twitter’s forwarding or liking of functions, and a vivid expression package like Facebook. But if you want to animate on the page, please make sure it is elegant and decent.</p>
<h3>8. <a href="https://evernote.com/">Evernote</a></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/639/0*2QahR6cBUMPzuVVX.png"></p>
<p><strong>What attractive in design</strong>: Clean and fresh mobile UI interface</p>
<p>Evernote mainly provides note storage services which allow users to access information on all platform devices. So Evernote must get the right mobile user experience. Like the desktop version of the web design, Evernote’s mobile website design keeps the same UI design clean and fresh. In addition, the right CTA button on the web is very useful to the user.</p>
<p>“Web design first, and then transplant to mobile design,” this conventional model is no longer applicable today. Mobility is bound to be the design and development trend for the Internet industry in the future. Therefore, mobile first website design will become a new trend, even if this concept has existed for several years.</p>
<h3>Why is the principle of mobile first design so important?</h3>
<p>1. According to the Global Internet Report, up to 2016, the number of smart-phone users in worldwide has reached 2.8 billion.</p>
<p>2. Meanwhile, people spend more and more time on the mobile network every day.</p>
<p>3. As early as 2012, sales of smart-phones surpassed PC sales worldwide.</p>
<p>The explosive growth of mobile demand requires designers to pay more attention to the mobile version and follow the mobile design first principles in product design. So I believe that these reasons are enough for designers and merchants to study the <a href="https://www.mockplus.com/blog/post/137-mobile-web-design-adaptations-for-better-ux/?r=grace">mobile website design</a> and benefit from it.</p>
<h3>How to follow the mobile first design principles?</h3>
<p>To create a mobile-friendly website that meets the mobile first design principles, a prototyping design tools such as <a href="http://www.mockplus.com/?r=grace">Mockplus</a> is needed.</p>
<p>Step 1: Log in your Mockplus account. If no, you can apply for a free Mockplus account.</p>
<p>Step 2: Create a new mobile phone project;</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/940/0*VLjW8rNkxjqBf6rC.png"></p>
<h3>Think about the layout</h3>
<p>The mobile first design method is different from desktop first. In mobile devices, we need to think about effective information be displayed in small screen layouts. However, it does not simply reduce the information as page layouts change.</p>
<p>In this mobile first design example, we know some of the elements are required, such as the website’s name and app logo should be concluded. However, not all desktop web design elements are suitable for mobile devices. So let’s set priorities based on the purpose of the travel website:</p>
<p>Start page, login page, welcome page, city list page, homepage, detail page, search page, activity page, personal information page and the like.</p>
<h3>Final prototype design effect presentation</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/900/0*bF5_BSvQhc_XrlO1.png"></p>
<p>Gogobot Online HTML Preview: <a href="https://www.mockplus.cn/sample/post/656">https://www.mockplus.cn/sample/post/656</a></p>
<p>Cards design and rolling content display in line with mobile users access and operation of information by scrolling up and down the pages. No big picture seize the limited screen resources, and the scrolling of information is also willing to be accepted by the user. Because compared with the hamburger menu, users are more happy to scroll the pages.</p>
<p>Desktop display: Gogobot</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/940/0*Qf5gwK2oV9pvUTbS.png"></p>
<h3>Conclusion</h3>
<p>Through the revision of Youtube in this year, I believe that there will be more websites to pay attention to the mobile first design. Sincerely, I hope that the <strong>8 mobile first design examples </strong>listed above can be inspirational for the construction of your new product or new website. In a short sentence, due to the limited traffic, the mobile website must be simple and rough, while the desktop website should be the best and be gorgeous. But not the mobile first almost becomes a right bullshit, as it becomes a common sense for almost all of Silicon Valley’s mainstream businesses.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4c6fab444ace" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/8-excellent-mobile-first-design-examples-for-designer-inspiration-4c6fab444ace">8 Excellent Mobile First Design Examples for Designer Inspiration</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


8 Excellent Mobile First Design Examples for Designer Inspiration

8 Excellent Mobile First Design Examples for Designer Inspiration

Top Stories

Top Stories