Web News

Interesting articles from the web…

Basic Patterns For Mobile Navigation: Pros And Cons

by

Basic Patterns For Mobile Navigation: Pros And Cons

Once someone starts using your app, they need to know where to go and how to get there at any point. Good navigation is a vehicle that takes users where they want to go. But establishing good navigation is a challenge on mobile due to the limitations of the small screen and the need to prioritize content over chrome.

Different navigation patterns have been devised to solve this challenge in different ways, but they all suffer from a variety of usability problems. In this article, we’ll examine five basic navigation patterns for mobile apps and describe the strengths and weaknesses of each of them. If you’d like to add some patterns and spice up your designs, you can download and test Adobe XD1 for free and get started right away.

Further Reading on SmashingMag: Link

Hamburger Menu Link

Screen space is a precious commodity on mobile, and the hamburger menu (or side drawer) is one of the most popular mobile navigation patterns for helping you save it. The drawer panel allows you to hide the navigation beyond the left edge of the screen and reveal it only upon a user’s action.

6
In its default state, the hamburger menu and all of its contents remain hidden. (View large version7)

When To Use Link

The main downside of the hamburger menu is its low discoverability8, and it’s not recommended as the main navigation menu. However, this pattern might be an appropriate solution for secondary navigation options. Secondary navigation options are destinations or features that are important for users only in certain circumstances. Being secondary, they can be relegated to less prominent visual placement, as long as users can quickly find a utility when they need it. By hiding these options behind the hamburger icon, designers avoid overwhelming users with too many options.

Uber uses a hamburger icon for this purpose. Because everything about the main screen of the Uber app is focused on requesting a car, there’s no need to display secondary options such as “Payment,” “History” or “Settings.” The normal user flow doesn’t include these actions, and so they can be hidden behind the hamburger icon.

9

Pros Link

  • Large number of navigation options

    The main advantage of the navigation menu is that it can accommodate a fairly large number of navigation options in a tiny space.
  • Clean design

    The hamburger menu allows the designer to free up screen real estate by shifting options off screen into a side menu. This pattern can be particularly useful if you want the user to focus on the main content.

Cons Link

  • Less discoverable

    What’s out of sight is out of mind. When navigation is hidden, users are less likely to use it. While this type of navigation is becoming standard and many mobile users are familiar with it, many people still simply don’t think to open it.
  • Clashes with platform navigation rules

    The hamburger menu has become almost a standard on Android (the pattern has the name “navigation drawer10” in material design), but in iOS it simply cannot be implemented without clashing with basic navigation elements, and this could overload the navigation bar.

    11
    (Image: lmjabreu12)

  • The hamburger icon hides context. The hamburger menu doesn’t communicate the current location at a glance: Surfacing information13 about the current location is harder because it’s only visible when the person clicks on the hamburger icon.

    14
    Out of sight, out of mind. The hamburger menu hides the user’s current location in the app.
  • Extra action is required to move to the target destination. Reaching a particular page usually takes at least two taps (one tap on the menu icon and another on the target option).

Tips Link

  • Prioritize the navigation options. If the navigation is complex, hiding it won’t make it user-friendly. A lot of practical examples clearly show that exposing menu options in a more visible way increases engagement and user satisfaction15. Ask yourself, What’s important enough to be visible on mobile? Answering that question will require an understanding of what matters to your users.

    16
    Redbooth’s move from a hamburger menu to a bottom tab bar resulted in increased user sessions.17 (Image: LukeW18)

  • Consider using tabs or a tab bar if you have a limited number of high-priority navigation options.

    19
    YouTube makes the main pieces of core functionality available with one tap, allowing rapid switching between features. (Source: Luke Wroblewski) (View large version20)

  • Review your information architecture. Good apps are highly focused. So, if you have one complex app, you could split its functionality into two (or more) simple apps. Facebook released its Messenger app in order to solve the problem of complexity21. The reduced functionality results in a reduced set of menu options, and less need for a hamburger menu.
22
(View large version23)

Tab Bar Link

The tab bar pattern is inherited from desktop design. It usually contains relatively few destinations, and those destinations are of similar importance and require direct access from anywhere in the app.

24
The tab bar doesn’t hide navigation, but allows direct access and presents feedback on the icon it’s related to.

When To Use Link

Tabbed navigation is a great solution for apps with relatively few top-level navigation options (up to five). The tab bar makes the main pieces of core functionality available with one tap, allowing rapid switching between features.

25
The tab bar in Twitter lets the user navigate directly to the screen associated with the item.

Pros Link

  • The tab bar fairly easily communicates the current location. Properly used visual cues (icons, labels and colors) enable the user to understand their current location at a glance.

    26
    (Image: Ramotion27)

  • Tab bars are persistent. The navigation remains in sight no matter what page the user is viewing. The user has clear visibility of all the main app views and has single-click access to them.
  • With a thumb zone, the bottom navigation is easier to reach with the thumb when the device is held in one hand.

    28
    Ideal placement of navigation for the thumb zone, according to UXmag.29 (View large version30)

    • Cons Link

  • The navigation options are limited. If your app has more than five options, then fitting them in a tab or navigation bar and still keeping an optimum touch-target size would be hard.

    31
    Don’t use more than five options in a tab bar.

  • The location and logic of the tab bar options on iOS and Android are different. Platforms have different rules and guidelines for UI and usability, and you have to take them into consideration when designing a tab bar for a particular platform. Tabs appear at the top of the screen on Android and at the bottom of the screen on iOS. This happens presumably because Android’s control bar at the bottom is hardware. Please note that this rule doesn’t apply to mobile websites, because the experience with them should be consistent regardless of the device used to browse them (Android or iOS).

    32
    Proper location and logic will help to maintain a consistent experience with other apps on the platform and prevent confusion between actions and view-switching. (Image: Google33)

    • Tips Link

    • Make touch targets big enough to be easily tapped or clicked. To calculate the width of each bottom navigation action, divide the width of the view by the number of actions. Alternatively, make all bottom navigation actions the width of the largest action.

      34
      Most users can comfortably and reliably hit a 10 × 10-millimeter touch target. (Image: UXmag35)

    • Order the navigation options. Users expect to see a certain order in the tab bar. The first tab item has to be the home screen of the app, and the order of tabs should reflect their priority or the logical order in the user flow. One of the tabs should always be active and visually highlighted36.
    • Test your icons for usability. As you can see in the example below, app designers sometimes hide functionality behind icons that are pretty hard to recognize. To prevent this from happening, test your icons with the five-second rule37: If it takes you more than five seconds to think of an appropriate icon for something, then it is unlikely that an icon can effectively communicate that meaning.

      38
      Bloom.fm app has a tab bar full of abstract icons.

    • If an icon fails the five-second rule (i.e. isn’t self-evident39), it needs a text label. It’s pretty rare in the offline world that we rely on iconography alone to represent ideas — and for good reason. Due to the absence of a standard usage40 for most icons, text labels are necessary to communicate meaning and reduce ambiguity. Users should understand what exactly will happen before they tap on an element.

      41
      Use text labels to provide short, meaningful definitions to bottom navigation icons. (View large version42)

    Priority+ Pattern Link

    The “Priority+43” pattern was coined by Michael Scharnagl to describe navigation that exposes what’s deemed to be the most important navigation elements and hides away less important items behind a “more” button.

    When to Use Link

    This pattern might be good solution for content-heavy apps and websites with a lot of different sections and pages (such as a news website or a large retailer’s store). The Guardian44 makes use of the priority+ pattern for its section navigation. Less important items are revealed when the user hits the “All” button.

    45
    The Guardian employs the Priority+ pattern for its section navigation. Image credit: bradfrost46

    Pros Link

    • This pattern prioritizes navigation options. It surfaces the most frequently accessed navigation options.
    • It makes use of available screen space. As space increases, the number of exposed navigation options increases as well, which can result in better visibility and more engagement.
    • This menu is very adaptive. You can scale it quite nicely across screen sizes without having to transform the pattern.

    Cons Link

    • It might hide some important navigation options. The priority+ pattern requires designers to assume the relative importance of navigation items. Be aware that the items you prioritize to be visible might not be the same ones users are looking for most.

    Floating Action Button Link

    Shaped like a circled icon floating above the UI, the floating action button changes color upon focus and lifts upon selection. It’s well known by all Android users and is a distinct element of material design. Floating above the interface of an app, it promotes user action, says Google47.

    48
    Floating action button

    When to Use Link

    The design of the floating action button hinges on the premise that users will perform a certain action most of the time. You can make this “hero” action even more heroic by reinforcing the sense that it is a core use case of your app. For example, a music app might have a floating action button that represents “play.”

    49
    Use the floating action button for actions that are strongly characteristic of your app. Playback tells users that this is a music app.

    The button is a natural cue to users for what to do next. In user research, Google found50 that users understand it as a wayfinding tool. When faced with an unfamiliar screen, as many users are regularly (like when running an app for the first time), they will use the floating action button to navigate. Thus, it is a way to prioritize the most important action you want users to take.

    Pros Link

    • It’s a signpost of what’s important. It’s a good way to prioritize the most important action you want users to take.
    • It takes up little screen space. Compared to the tab bar, it doesn’t take up an entire row.
    • A visually pleasing UI element such as this might not improve usability. However, emotion is a factor in user experience. If a user is pleased to use an app because they find it visually attractive, then that would create positive UX effects.
    • It also improves effectiveness. A study by Steve Jones demonstrates51 that a floating action button slightly impairs usability when users first interact with the button. However, once users have successfully completed a task using the element, they are able to use it more efficiently than a traditional action button.

    Cons Link

    • A floating action button can distract users from content. It is designed to stand out — it is colorful, raised and grid-breaking. Its design is meant to draw the user’s attention. But sometimes its presence can distract the user from the main content.

      52
      A red button stands out from the background and focuses user attention. (Image: Paul van Oijen53) (View large version54)

    • It can block content. Take Google’s Gmail app for instance. In the example below, you can see that it blocks the “favorite” star, as well as the time stamp for the last row. Additional scrolling is needed whenever the user wants to see this information.

      55
    • It is also icon-only navigation. By design, the floating action button is a circle containing an icon. It’s an icon-only button, with no room for text labels. The problem is that icons are incredibly hard to understand56 because they’re so open to interpretation. Even a simple action icon like the pencil in the example below can mean different things in different apps.

      57
      Same icon, different meanings: “Compose” in the Gmail and Inbox apps, but “Edit” in the Snapseed app. Here, context helps to explain the action. (View large version58)

    Tips Link

    • Because it is so prominent and intrusive, use only one per screen.

      59
      Multiple floating action buttons should never appear on screen at one time because that would confuse the visual hierarchy. (View large version60)

    • Not every screen should have one, simply because not every screen has an action of such importance.
    • The floating action button is strongly associated with positive actions61. Because it is full of character, it’s generally taken to be a positive action, like create, favorite, navigate, search and so on. Don’t use it for destructive actions, like delete.

      62
      (View large version63)

    • The floating action button could be replaced with a sequence of more specific actions. This would help to surface a set that doesn’t really belong at the top but is still important. Apps such as Evernote simplify the controls by using a floating action button for the most important user actions.

      64
    • It can improve transitions between screens, too. The floating action button is not just a round button; it has some transformative properties that you can use to ease users from screen to screen. It can expand, morph and react.

      65
      (Image: Anish Chandran66)

    Full-Screen Navigation Link

    While with other patterns mentioned in this article, you’d be struggling to minimize the space that the navigation systems take up, the full-screen pattern takes the exact opposite approach. This navigation approach usually devotes the home page exclusively to navigation. Users incrementally tap or swipe to reveal additional menu options as they scroll up and down.

    67
    (Image: Smashing Magazine68) (View large version69)

    When to Use Link

    This pattern works well in task-based and direction-based websites and apps, especially when users tend to limit themselves to only one branch of the navigation hierarchy during a single session. Funnelling users from broad overview pages to detail pages helps them to home in on what they’re looking for and to focus on content within an individual section.

    70
    Full-screen navigation options in Yelp

    Pros Link

    • The full-screen navigation pattern is best for achieving simplicity and coherence. You can organize large chunks of information in a coherent manner and reveal information without overwhelming the user; once the user makes their decision about where to go, then you can dedicate the entire screen space to content.

    Cons Link

    • Prime real estate will be wasted on chrome. You won’t be able to display any content except the navigation options.

    Tips Link

    • Use a hamburger menu to hide secondary functionality and keep the focus on the main experience.

      71
      (Image: Cookly via Dribbble)72

    Gesture-Based Navigation Link

    29 June 2007 was a game changer. From the moment Apple launched the first fully touchscreen smartphone on the market, mobile devices have been dominated by touchscreen interaction.

    73
    (Image: Aaron Wade74)

    Gestures immediately became popular among designers, and many apps were designed around experimenting with gesture controls.

    75
    Gesture driven to-do app Clear

    In today’s world, the success of a mobile app can largely depend on how well gestures are implemented in the user experience.

    When to Use Link

    This pattern is good when users want to explore the details of particular content easily and intuitively. Users will spend more time with content than they will with navigation menus. So, one of the reasons to use in-context gestures instead of a standard menu is that it’s more engaging. For example, as users view page content, they can tap on a card to learn more.

    76
    This type of navigation takes users on a journey of what they’re interested in. Menus simply don’t have this engaging effect. (Image: Ramotion77)

    Pros Link

    • It removes UI clutter. Building gestures into the heart of your design allows you to make your interfaces more minimal and to save screen space for valuable content.
    • The UI is more natural. Luke Wroblewski talks about a study78 in which 40 people in 9 different countries were asked to create gestures for 28 different tasks, such as deleting, scrolling and zooming. He found that the gestures tend to be similar across culture and experience. For example, when prompted to “delete,” most people — regardless of nationality — tried dragging the object off screen.
    • Gestures can be a distinctive feature of a product. Tinder has massively popularized the concept of gesture-based navigation and basically made those swipes a product-defining gesture.
    79
    (View large version80)

    Cons Link

  • The navigation is invisible. One important rule in designing a UI is visibility: Through the menus, all possible actions should be made visible and, therefore, easily discoverable. An invisible UI can be seductively beautiful, but because it’s invisible, it will likely have many usability issues81.
  • User effort increases. Most gestures are neither natural nor easy to learn or remember. When designing gesture-based navigation, be aware that every time you remove UI clutter, the application’s learning curve goes up; and without proper visual hints and cues, users could get confused about how to interact with the app.

    • Tips Link

    • Make sure you don’t have to teach people a whole new way to interact with an interface. Design a familiar experience. In order to design good gesture-based navigation, start by looking at the current state of gestures in the mobile world. For example, if you’re designing an email app, you could use a swipe instead of an email gesture, because there’s a strong possibility that the gesture would be familiar to many users:

      82
    • Educate in context to teach people how to interact with your interface. Avoid long static up-front tutorials. Instead, show only the information that is relevant to the user’s current activity.

      83
      Pudding Monsters uses an animated hand to present a new scenario to users.

    3D Touch Link

    3D Touch is a subtle touch mechanism that was first introduced in Apple’s iPhone 6s and 6s Plus. It allows for some new interactions, which Apple defines in two main categories:

    • Quick actions

      The iOS home screen isn’t just a grid of apps anymore, because 3D Touch allows users to perform actions specific to an app outside of the app, right from the home screen. Pressing firmly on an app icon presents a short list of quick actions: Jump right into taking a selfie from the Camera icon, or immediately navigate to your favorite contacts from the Messages app.

      84
      3D Touch quick-action shortcuts for the camera, messages and maps apps (View large version85)

    • Peek and pop

      3D Touch allows users to preview content and perform related actions within an app before deciding whether to view the full content. When users press firmly on a piece of content — such as a mail message in a list — 3D Touch opens a preview of what that content contains.

      86
      3D Touch immediately previews an email, which disappears when the user removes their finger. (Image: Gizmodo8987)

    When to Use Link

    Using 3D Touch, you can make the most frequent actions the most accessible. Think of 3D Touch like keyboard shortcuts on a desktop computer: They enable people to do repeated tasks more quickly. You can use 3D Touch to help users skip a few steps or to avoid unnecessary steps altogether.

    88
    From the home screen, the camera lets users access common features: taking a selfie, recording video or taking a normal photo. (Image: Gizmodo8987)

    However, just like keyboard shortcuts, essential features shouldn’t be exclusive to 3D Touch. Users must be able to operate your app normally without it.

    Pros Link

    • With its shortcut actions, 3D Touch has the potential to save users a lot of time by skipping several taps within an app.
    • By simplifying an interface, 3D Touch enables quick, lightweight interaction. It gives designers and developers new opportunities to simplify their interfaces, while surfacing enhanced functionality for users.

    Cons Link

    • Users have to remember which apps have quick actions. 3D Touch still isn’t ubiquitous on iOS. Some apps have it, others don’t. Users sometimes expect 3D Touch shortcuts for apps that don’t have them.

    Innovative Navigation Patterns Link

    People are shifting to larger-screen phones. Large smartphones don’t surprise anyone anymore. But the bigger the display is, the less easily accessible90 most of the screen is, and the more necessary it is to adapt the design (and navigation, in particular) to improve the user experience.

    91
    (Image: LukeW)

    To solve this problem, designers are forced to look for new solutions to navigation. A couple of interesting innovative solutions can be found in the recently published article “Bottom Navigation Interface92.” One solution can be found in a health app named Ada93. This app’s interface layout is a mirror image of a basic interface with a hamburger menu: Everything that’s usually at the top is conveniently at the bottom, in the easy-to-access zone.

    94
    The start screen in Ada for iOS

    The second solution is a concept for a calling app that applies one-handed navigation principles. The method feels good for calling and messaging apps because users tend to use one hand for dialing and texting.

    95
    (Image: cuberto96)

    Conclusion Link

    Helping users navigate should be a high priority for every app designer. Both new and returning users should be able to figure out how to move through your app with ease. The easier your product is for them to use, the more likely they’ll use it.

    This article is part of the UX design series sponsored by Adobe. The newly introduced Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process97, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.

    You can check out more inspiring projects created with Adobe XD on Behance98, and also visit the Adobe XD blog99 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free100.

    (ms, vf, al, yk, il)

    Footnotes Link

    1. 1 https://adobe.ly/2q0pi6P
    2. 2 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
    3. 3 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
    4. 4 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
    5. 5 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
    6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/05/hamburger-menu-large-opt.png
    7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/hamburger-menu-large-opt.png
    8. 8 https://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
    9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/uber-preview-opt.png
    10. 10 https://material.io/guidelines/patterns/navigation-drawer.html
    11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/navigation-preview-opt.png
    12. 12 https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
    13. 13 https://www.nngroup.com/articles/hamburger-menus/
    14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/The-hamburger-icon-hides-context.gif
    15. 15 http://www.lukew.com/ff/entry.asp?1945
    16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/navigation-options-preview-opt.png
    17. 17 https://redbooth.com/blog/hamburger-menu-iphone-app?utm_campaign=iOS_Dev_Weekly_Issue_181&utm_medium=email&utm_source=iOS%2BDev%2BWeekly
    18. 18 https://twitter.com/lukew/status/562297190735806464
    19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/youtube-large-opt.png
    20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/youtube-large-opt.png
    21. 21 http://www.businessinsider.com/why-is-facebook-messenger-a-separate-app-2014-11
    22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/facebook-800-opt.png
    23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/facebook-800-opt.png
    24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tab-bar-preview-opt.png
    25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Tab-bar-in-Twitter-preview-opt.png
    26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tab-bar-pros.gif
    27. 27 http://ramotion.com/
    28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/thumb-zone-large-opt.jpg
    29. 29 http://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier
    30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/05/thumb-zone-large-opt.jpg
    31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tab-bar-cons-preview-opt.jpg
    32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tab-bar-cons-1-preview-opt.png
    33. 33 https://design.google.com/articles/design-from-ios-to-android/
    34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/touch-targets-preview-opt.jpg
    35. 35 http://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier
    36. 36 https://www.nngroup.com/articles/tabs-used-right/
    37. 37 https://www.nngroup.com/articles/icon-usability/
    38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Bloom.fm-app-preview-opt.png
    39. 39 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
    40. 40 https://www.nngroup.com/articles/icon-usability/
    41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/bottom-navigation-icons-large-opt.png
    42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/bottom-navigation-icons-large-opt.png
    43. 43 http://justmarkup.com/log/2012/06/19/responsive-multi-level-navigation/
    44. 44 http://www.theguardian.com/
    45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/bradfrost.gif
    46. 46 http://bradfrost.com/blog/post/revisiting-the-priority-pattern/
    47. 47 https://material.io/guidelines/components/buttons-floating-action-button.html#
    48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/05/action-button-preview-opt.png
    49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/FAB-preview-opt.png
    50. 50 https://youtu.be/dZqzz5lZFvo?t=23m9s
    51. 51 http://stevejones.io/img/projects/honors-thesis/SteveJones-Honors-Thesis.pdf
    52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Red-FAB-large-opt.jpg
    53. 53 https://dribbble.com/PaulVanO
    54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Red-FAB-large-opt.jpg
    55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Gmail-app-preview-opt.png
    56. 56 http://uxmyths.com/post/715009009/myth-icons-enhance-usability
    57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Icon-only-navigation-large-opt.jpg
    58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Icon-only-navigation-large-opt.jpg
    59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/multiple-FABs-large-opt.png
    60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/05/multiple-FABs-large-opt.png
    61. 61 https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
    62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/05/FAB-1-large-opt.png
    63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/05/FAB-1-large-opt.png
    64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/FAB.gif
    65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/05/FAB-1.gif
    66. 66 https://dribbble.com/anish_chandran
    67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Full-Screen-Navigation-large-opt.png
    68. 68 https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/
    69. 69 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Full-Screen-Navigation-large-opt.png
    70. 70 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Yelp-preview-opt.png
    71. 71 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cookly-preview-opt.png
    72. 72 https://dribbble.com/shots/1353546-Mobile-Self-Service-Support-Communities/attachments/192600
    73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/05/touch-gestures.gif
    74. 74 https://dribbble.com/areus
    75. 75 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Gesture-driven-to-do-app-Clear-preview-opt.jpg
    76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/05/GitHub.gif
    77. 77 https://www.ramotion.com/
    78. 78 http://www.lukew.com/ff/entry.asp?1197
    79. 79 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tinder-large-opt.png
    80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/05/tinder-large-opt.png
    81. 81 http://www.jnd.org/dn.mss/gestural_interfaces_a_step_backwards_in_usability_6.html
    82. 82 https://www.smashingmagazine.com/wp-content/uploads/2017/05/gmail-inbox-preview-opt.png
    83. 83 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Pudding-Monsters-.gif
    84. 84 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3D-touch-large-opt.jpg
    85. 85 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3D-touch-large-opt.jpg
    86. 86 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3D-touch.gif
    87. 87 http://gizmodo.com/the-10-best-things-to-do-with-3d-touch-and-the-things-1733554205
    88. 88 https://www.smashingmagazine.com/wp-content/uploads/2017/05/3D-touch_1.gif
    89. 89 http://gizmodo.com/the-10-best-things-to-do-with-3d-touch-and-the-things-1733554205
    90. 90 http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens
    91. 91 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Innovative-Navigation-Patterns.png
    92. 92 https://blog.prototypr.io/bottom-navigation-interface-fa4bff52065f
    93. 93 https://ada.com
    94. 94 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ada.png
    95. 95 https://www.smashingmagazine.com/wp-content/uploads/2017/05/cuberto.gif
    96. 96 https://dribbble.com/shots/2934372-Android-UI
    97. 97 https://adobe.ly/2q0pi6P
    98. 98 https://www.behance.net/galleries/adobe/5/Experience-Design
    99. 99 https://blogs.adobe.com/creativecloud/design/
    100. 100 https://adobe.ly/2q0pi6P

    ↑ Back to topTweet itShare on Facebook

    Intrusive Interstitials: Guidelines To Avoiding Google’s Penalty

    by

    Intrusive Interstitials: Guidelines To Avoiding Google’s Penalty

    In 2015, Google announced that mobile searches surpassed desktop searches in at least 10 countries. 56% of traffic1 on major websites comes from mobile. In light of this, Google’s decision to improve the mobile user experience by various means, such as AMP pages2 and a dedicated mobile index, comes across as a sound business move.

    More than half of the 2 trillion searches3 Google processes each year come from mobile devices. Mobile devices have changed the way we approach search, ushering in new types of habits such as local search, voice search and more. These consumer habits have greatly affected the way search engine providers think about user search intent.

    A new type of mobile improvement was rolled out by Google. The search giant has decided to launch a war against interstitials that ruin the user experience. As a result, any website found guilty of showing intrusive popups, banners or overlays (called interstitials) will see its content demoted in Google’s mobile search results. We’ll be looking at what’s being penalized, what’s allowed and some workarounds to help you cope with this new penalty.

    Further Reading on SmashingMag: Link

    Mobile Reality Link

    Two years ago, Google introduced a mobile-friendly label8 as it began prioritizing mobile websites. The aim was to push websites that offer a substandard user experience to improve their design, code and content. These guidelines are updated quite often as Google aims to keep the mobile user experience center stage:

    With a dramatically levelled playing field, various elements are fighting to be displayed on one small screen. Coupons, offers, newsletter registration, ads, text, photos, social sharing buttons, and live chat are all vying for some valuable mobile screen space. Often, the visitor pays the price as their mobile experience becomes a confusing mess. Google’s latest penalty aims to change how we think about mobile advertising.

    Introducing The Intrusive Interstitial Penalty Link

    One recent change made this year is the intrusive interstitial update15. This algorithm update has one mission: to penalize for intrusive popup ads that affect the mobile user experience. The update rolled out earlier this year. Certain websites saw their mobile rankings in Google lowered.

    Decrypting The Intrusive Interstitial Update Link

    First and foremost, it’s a mobile popup penalty. Secondly, it’s an intrusive popup penalty. Google wants to make sure that ads and popups do not interfere with the user experience on a mobile screen. The intent behind devaluing pages with popups and overlays that take up most of the screen is to help users access the content they’ve requested in the first place.

    What Is The Impact Of This Latest Update? Link

    Google will no longer consider pages with intrusive interstitials as being mobile-friendly. Bottom line: Obstructing content on mobile with ads or other popups is against Google’s guidelines. The main target of this update is overlays that gray out the content, making the content inaccessible for a few seconds or until the user miraculously manages to tap the minuscule “X” with their sausage fingers to dismiss the ads. Ads displayed over content are no longer acceptable16 on mobile. This includes popups that appear when you load the page from Google or when you scroll down. For many websites, playing according to Google’s rules means removing all barriers17 that could prevent the user from reading the content on the page at any time.

    What Is An Interstitial? Link

    Interstitial spaces can be defined as a type of “web page” that appears before or after the page (in a website or an app) expected by the user. Essentially, it is something that blocks out the website or app’s main content. These spaces have served as a promotional tool for many online marketers. They can contain advertisements, surveys, newsletter signup forms, coupons and other various calls to action.

    What Constitutes An Intrusive Interstitial? Link

    Intrusive interstitials tend to block most or all of a page, leading to a frustrating experience for desktop and mobile users alike. These ads hinder the experience because they are unexpected and block the content that users seek. On the desktop, they’re annoying at best, but on mobile, intrusive interstitials can ruin the entire experience. Ever had to deal with popups gone rogue on mobile? Google has been relatively straightforward in its definition of what constitutes an intrusive interstitial. A few types of interstitials are problematic, as defined by the new guidelines18:

    19
    Types of intrusive interstitials, as illustrated by Google. (View large version20)
    • a popup or modal window that blocks most or all of the content on a page (this is basically a full-screen interstitial above the header);
    • a standalone interstitial that’s not responsive and that blocks the content;
    • a layout in which the content above the fold has the look and feel of an interstitial and requires dismissal or scrolling in order for the user to reach the main content beneath the fold.

    If your popups cover the main content shown on the screen, pop up without user interaction or require a dismissal before disappearing, chances are that they will trigger an algorithmic penalty.

    Popups that incite users to choose their country or their preferred language are also targets because they fit the description above of what constitutes an intrusive interstitial. They bother readers and are not a necessity.

    What’s Not Intrusive? Link

    Not all interstitials are targeted by this penalty. Some exceptions exist, such as interstitials that are in place for legal or ethical reasons. The following popups do not require a change of size, design or position within a page:

    Types of non-intrusive interstitials21
    Types of non-intrusive interstitials, as illustrated by Google. (View large version22)
    • age-verification blockers that act as a shield for certain content, such as alcohol-related or adult content;
    • cookies that use popups that serve as consent notifications as required by the EU;
    • any other type of legally required popup.

    Gray Area Link

    The official guidelines provided by Google are pretty vague at times. The company’s definition of what constitutes an intrusive interstitial is not clearcut. Many elements are not addressed, such as:

    • sticky sidebars,
    • related posts,
    • share buttons,
    • live chat boxes,
    • coupon popups.

    The jury is still out on whether these elements will be targeted by the algorithm update, even if they comply with the guidelines on interstitials. Navigating this gray area can be tricky. If you want to come out on top, we recommend designing these elements in a way that ensures they do not cover any of the page’s actual content. Making sure these notifications do not hinder the user experience can go a long way towards avoiding a penalty.

    What Is Still Permitted (But Intrusive Nonetheless) Link

    Make no mistake, as of 10 January 2017, interstitials are a new ranking signal for mobile SEO. It doesn’t necessarily mean that all types of popups should be banned.

    Intrusive Popups Are Still OK on Desktop Link

    This penalty targets mobile issues. Overlays, popups and other types of interstitials will live another day on desktop.

    Atlas Obscura Desktop Overlay23
    Atlas Obscura’s desktop website overlay. (View large version24)

    Interstitials Triggered by Exit Intent Are Still Allowed Link

    Here is Google’s John Mueller’s advice on interstitials triggered by exit intent:

    At the moment, those wouldn’t count. What we’re looking for is, really, interstitials that show up on the interaction between the search click and going through the page and seeing the content. So, that’s kind of the place we’re looking for those interstitials. What you do afterwards, like if someone clicks on stuff within your website or closes the tab or something like that, then that’s kind of between you and the user.

    Page-to-Page Interstitials Will Not Be Penalized Link

    Google is not looking to penalize all pages with interstitials, only the ones that searchers could land on from search results. It’s still OK to display an interstitial when a user navigates from one of your pages to another. If a user can find a page by searching for something on Google, then you’ll need to ensure that this page has no intrusive interstitials. If after landing on this page, the user decides to navigate to another page on the website that is not listed by Google, then interstitials would be allowed on that page25. Sounds a bit convoluted, but this has been confirmed by Google.

    Will You Be Penalized? Link

    Google’s main objective is to make the web more accessible, intuitive and usable, especially for mobile users. If your popups serve a real purpose that add value for the user, chances are you should be OK.

    How The Penalty Works? Link

    This mobile interstitial penalty is rolling out on a recrawling basis26. Basically, the next time Google’s bot crawls your website after 10 January 2017, it will evaluate the interstitials present on mobile. The penalty could hurt, but so far the reported impact has been minimal27.

    How To Identify Intrusive Interstitials Link

    Auditing your popups is a great way to determine whether your mobile website is compliant. Start by reviewing the mobile popups, because desktop popups are not going to be penalized. Prefer small messages such as banners, inlines and slide-ins for mobile pages.

    Atlas Obscura Mobile Interstitial28
    Atlas Obscura’s mobile website interstitial.

    Testing Tool Link

    Google has stated that it will not release an official tool to test websites. However, there is a tool out there, Interstitial Penalty Check29, that uses image recognition to identify potential interstitials on your pages. It measures how much space popups take on the screen to flag the ones at risk.

    Audit Your Popups Link

    • Identify required interstitials, such as age-verification popups and cookie notifications.
    • Identify all other popups, and evaluate them according to the amount of space they take up.
    • Make note of any third-party scripts present on your website that might trigger popups. You will often find these if you use a CMS.
    • For WordPress users, check your plugins. Some plugins used to display popup messages for coupons, membership offers, promotions and other types of ads need to be reviewed. You might have to adjust the sizes using the plugins’ settings.

    Interstitial Design Guidelines Link

    Any banners that take up a “reasonable amount of space” will not be targeted. That’s great news! However, no exact guidelines have been communicated by Google. The recommended size is 15% or less, even in landscape mode, because it still allows readers to access several lines of text.

    Keep In Mind What Google Is Looking For In A Positive User Experience Link

    Popups aren’t being banned, but marketing efforts will have to adapt to these new restrictions. Let’s rephrase that: Marketing efforts will have to respect the user’s screen space. Try to redesign any interstitials that were previously considered essential to marketing efforts. You can replace them with a link to a separate page or an inline ad, for example.

    For instance, language-selection interstitials30 can be phased out, in favor of a banner on the website. But first evaluate whether such an element is worth that much screen space: Users arrive with a linguistic context already if they’ve come from Google.

    Workarounds Link

    If your website suffers a significant drop-off in conversion following the removal of some interstitials, then you’ll have to work around the issue. Luckily for you, only pages listed in Google’s search results are being targeted. If a user navigates to another page on your website, then a popup placed there would not be a problem for Google. The entry page is the issue for the search engine. This isn’t particularly recommended, but if interstitials remain the best way to convert users for your website, then consider keeping them on the website (and away from Google by placing a no-index tag in your code). Keep in mind that this would mean cutting off organic traffic from Google to that page.

    News From The War On Interstitials Link

    False Positives Penalties Link

    Some websites have been hit by Google’s mobile interstitial penalty even though they were adhering to the guidelines31. Other websites that should have been affected have not encountered any negative impact yet. So, what do you do if you’ve been hit unfairly? Head on over to the Google Webmaster Help forum to give feedback to the Google team.

    How to Recover From a Penalty? Link

    If your traffic has suffered because of this penalty, we recommend auditing your popups and removing the ones deemed intrusive. Once that’s done, you’ll have to wait until Google recrawls your pages. You can also submit your pages via the Google Search Console’s fetch and submit tool to kickstart the recrawling effort a bit. This should remove the demotion32 in mobile ranking inflicted on your website.

    Google’s John Mueller confirms that the demotion would be removed in real time when the pages are recrawled and reindexed. This penalty is doled out in real time, meaning that recovery will depend on how frequently Google indexes those pages. For most websites, though, “real time” means waiting until each individual page is crawled by Google and the demotion is removed.

    Adapt Or Die: Looking Into New Strategies Link

    Yes, popups are frustrating, but companies use them because they are effective. SumoMe33 shares recent findings that establish the interstitial’s track record: An average conversion rate is 3.09%, versus 9.28% on average for high-performing popups.

    Removing revenue-generating interstitials could hurt websites at first, but losing organic search traffic could hurt their revenues even more. Designers, developers and marketers must work together to find new, non-intrusive ways to generate revenue. A sound strategy would be to leverage content marketing to educate audiences and guide them through the buying process.

    This means moving away from interruption marketing towards permission marketing. The first can be defined as an annoying version of the traditional way of doing marketing via advertising, promotion and sales, whereas the latter is about promoting and selling a product to a potential client who explicitly agrees to receive marketing information. Google is aware that many websites are supported by ads.

    Its AdSense is based in part on this revenue model. There are pros and cons to this new update. It could mean more time on website, more page views and a lower bounce rate, but it could still harm revenue in the short to medium term. Google representatives have stated publicly that they don’t want confusing ads — so, if there’s any question about what is an ad and what is the main content, you could have a problem. Therefore, label your ads as sponsored content, make them unobtrusive, and you should be fine.

    In the meantime, audit your popups, cookie notifications, overlays and big banners to make sure they comply with Google’s new guidelines. Make sure they don’t take up more than 15% of the screen to avoid a penalty. If you do get penalized, don’t panic; fix the issues, and wait for Google’s bot to visit your website again. The bot should notice your efforts and remove the penalty.

    (da, vf, yk, al, il)

    Footnotes Link

    1. 1 https://www.similarweb.com/corp/the-state-of-mobile-web-in-the-us-2015/
    2. 2 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
    3. 3 http://searchengineland.com/google-now-handles-2-999-trillion-searches-per-year-250247
    4. 4 https://www.smashingmagazine.com/2014/08/responsive-web-design-google-analytics/
    5. 5 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
    6. 6 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
    7. 7 https://www.smashingmagazine.com/2016/03/googles-mobilegeddon-aftermath-eight-months-better-mobile-web/
    8. 8 http://searchengineland.com/google-drops-mobile-friendly-label-keeps-mobile-friendly-ranking-algorithm-257245
    9. 9 https://search.google.com/search-console/mobile-friendly
    10. 10 https://www.ampproject.org/
    11. 11 https://www.smashingmagazine.com/guidelines-for-mobile-web-development/
    12. 12 https://developers.google.com/web/fundamentals/design-and-ui/responsive/
    13. 13 https://developer.android.com/training/app-indexing/deep-linking.html
    14. 14 https://moz.com/google-algorithm-change
    15. 15 https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html
    16. 16 http://www.theverge.com/2016/8/23/12610890/google-search-punish-pop-ups-interstitial-ads
    17. 17 https://www.searchenginejournal.com/counts-intrusive-interstitial/180023/
    18. 18 https://www.searchenginejournal.com/counts-intrusive-interstitial/180023/
    19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/04/intrusive-interstitials-large-opt-1.png
    20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/04/intrusive-interstitials-large-opt-1.png
    21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/04/non-intrusive-interstitials-large-opt.png
    22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/04/non-intrusive-interstitials-large-opt.png
    23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/04/atlas-obscura-desktop-overlay-large-opt.png
    24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/04/atlas-obscura-desktop-overlay-large-opt.png
    25. 25 https://www.searchenginejournal.com/google-mobile-interstitials-penalty/183216/
    26. 26 https://www.seroundtable.com/february-2017-google-webmaster-report-23367.html
    27. 27 https://www.searchenginejournal.com/51-havent-felt-effects-googles-mobile-interstitials-penalty-data/185008/
    28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/04/atlas-obscura-mobile-interstitial-preview-opt.png
    29. 29 http://www.interstitialpenaltycheck.com
    30. 30 http://www.thesempost.com/country-language-selector-popups-google/
    31. 31 https://www.seroundtable.com/false-positive-google-intrusive-interstitials-mobile-penalty-23342.html
    32. 32 http://www.thesempost.com/googles-mobile-interstitial-demotion-updates-page-recrawled/
    33. 33 https://sumome.com/stories/pop-up-examples

    ↑ Back to topTweet itShare on Facebook

    Infinite Tubes with Three.js

    by
    Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.

    Since WebGL is getting more and more popular, we start to see a bunch of websites using it for amazing creative designs. The brand Fornasetti recently published their website using the power of WebGL for a very nice effect: an animation that let’s us seemingly travel through a tunnel with a changing pattern. The most interesting part of this experience is that the motion through the tunnel is controlled by the movement of the mouse. Today we’ll share some similar Three.js powered tunnel traveling experiments with you.

    Attention: You will need a recent browser that supports WebGL (> IE10) in order to see the demos.
    Screenshot of Fornasetti's website
    Screenshot of Fornasetti‘s website.

    Getting Started

    For this demo we are using Three.js which is a useful library to create WebGL without getting your hands dirty. Before generating the tube we first need to setup a scene with a renderer, a camera and an empty scene.

    If you don’t feel comfortable using Three.js, I suggest you to first read a tutorial to get started with it. Rachel Smith wrote a good one in three parts over here.

    Once we have our scene ready we will proceed with these steps:

    1. Create a curve to determine the shape of the tube
    2. Generate the tube based on the curve
    3. Move everything forward
    4. Add some user interactions

    The curve

    Thanks to Three.js we have a useful function that allows us to create a curve based on a set of points. We first need to calculate the positions of those points. Once it’s done we can create our curve like this:

    // Create an empty array to stores the points var points = []; // Define points along Z axis for (var i = 0; i < 5; i += 1) { points.push(new THREE.Vector3(0, 0, 2.5 * (i / 4))); } // Create a curve based on the points var curve = new THREE.CatmullRomCurve3(points)

    This curve will be updated later to modify the shape of the tube in real time. As you can see, all the points have the same X and Y positions. At the moment, the curve is a single straight line.

    The tube

    Now that we have a curve (that is not curved at all) we can create a tube using Three.js. To do so we need three parts: a geometry (the shape of the tube), a material (how it looks) and finally a mesh (the combination of the geometry and the material):

    // Create the geometry of the tube based on the curve // The other values are respectively : // 70 : the number of segments along the tube // 0.02 : its radius (yeah it's a tiny tube) // 50 : the number of segments that make up the cross-section // false : a value to set if the tube is closed or not var tubeGeometry = new THREE.TubeGeometry(this.curve, 70, 0.02, 50, false); // Define a material for the tube with a jpg as texture instead of plain color var tubeMaterial = new THREE.MeshStandardMaterial({ side: THREE.BackSide, // Since the camera will be inside the tube we need to reverse the faces map: rockPattern // rockPattern is a texture previously loaded }); // Repeat the pattern to prevent the texture being stretched tubeMaterial.map.wrapS = THREE.RepeatWrapping; tubeMaterial.map.wrapT = THREE.RepeatWrapping; tubeMaterial.map.repeat.set(30, 6); // Create a mesh based on tubeGeometry and tubeMaterial var tube = new THREE.Mesh(tubeGeometry, tubeMaterial); // Add the tube into the scene scene.add(this.tubeMesh);

    Move the tube forward

    This part is my favorite because to my surprise the animation did not work as I believed initially. I first thought that the tube was actually moving into the direction of the camera. Then, I suggested that the camera was moving inside the tube. But both ideas were wrong!

    The actual solution is really clever: nothing is “physically” moving forward in the scene beside the texture that is translated along the tube.

    To do so, we need to define an offset for the texture on every frame to create the illusion of motion.

    function updateMaterialOffset() { // Update the offset of the material with the defined speed tubeMaterial.map.offset.x += speed; };

    User interactions

    The demo wouldn’t be that good if we didn’t implement some user interaction. When you move your mouse in the browser you can control the shape of the tube. The trick here is to update the points of the curve we created in the first step. Once the curve has been changed, we can update the tube accordingly with some transition.

    // Update the third point of the curve in X and Y axis curve.points[2].x = -mouse.position.x * 0.1; curve.points[2].y = mouse.position.y * 0.1; // Update the X position of the last point curve.points[4].x = -mouse.position.x * 0.1;

    That’s it?

    Well, sadly no, the code is a bit more complex than what I’ve explained in this article. But if you understood the steps above, you should have a global idea of how the demo works. If you want to understand even more, check the source code of the first demo; I’ve included a lot of comments. If you still have questions, do not hesitate to poke me on Twitter 🙂

    The demos

    Once you have a basic tube, you can improve it with many different options. Check out all the demos to give you some ideas!

    InfiniteTubes_01
    The demo with the brick pattern we’ve introduced above.

    Screenshot of a low poly particles demo - Infinite Tubes with Three.js
    Press your mouse down (or touch your screen) to release a rainbow of new particles!

    Screenshot of an hyperspace demo - Infinite Tubes with Three.js
    This demo is inspired by all the sci-fi movies with some time travel effect.

    Screenshot of a blood vessel demo
    Dive inside your body and explore a blood vessel 🙂

    Screenshot of a demo with a triangle tube - Infinite Tubes with Three.js
    Why should all tubes be round? This time we are traveling through a triangular one.

    InfiniteTubes_06 - Infinite Tubes with Three.js
    Try this demo on your phone or your tablet to control the tube with your device orientation!

    Thank you for reading this article!

    If you are excited by the demos in this article, please share your joy in the comments 🙂

    References and Credits

    From Idea To Development: How To Write Mobile Application Requirements That Work

    by

    From Idea To Development: How To Write Mobile Application Requirements That Work

    Why write requirements? Well, let’s imagine you want to produce a mobile app, but you don’t have the programming skills. So, you find a developer who can build the app for you, and you describe the idea to him. Surprisingly, when he showcases the app for the first time, you see that it is not exactly what you want. Why? Because you didn’t provide enough detail when describing the idea.

    To prevent this from happening, you need to formalize the idea, shape it into something less vague. The best way to do that is to write a requirements document and share it with the developer. A requirements document describes how you see the result of the development process, thus making sure that you and the developer are on the same page.

    In this article, we will outline the most common approaches to writing requirements documents. You will learn the basic steps of writing mobile application requirements and what a good requirements document looks like.

    Further Reading on SmashingMag: Link

    How To Approach The Writing Link

    A carefully crafted requirements document eliminates ambiguity, thus ensuring that the developer does exactly what needs to be done. In addition, the document gives a clear picture of the scope of the work, enabling the developer to better assess the time and effort required. But how do we create a good document? Below are some tips that our mobile team at Polecat5 follows when crafting requirements.

    1. Describe the Idea in General Link

    We believe that a proper description of the idea should fit in one sentence. The sentence may include a core feature of the application, so that the reader understands instantly what the app is about. For a calorie-tracking mobile application, it could be, “An app to track calorie consumption to help those who care about their weight.”

    Hint: Gua Tabidze shares a few models that others use6 to describe an idea.

    2. Consider the Sequence Link

    Study basic navigation patterns7, and describe your application in the same sequence that users would experience while exploring it. Once the idea part is done, describe the first steps of the application, such as the onboarding screens and user registration.

    Then, move on to what goes next, such as the application’s home screen. This approach will give the reader a sense of what the user’s journey would look like.

    At the end, don’t forget about basic features and screens such as the privacy policy and the “forgot password” feature.

    3. Review Existing Applications in the Stores Link

    Review existing applications in Apple’s App Store and Google Play, and refer to them when describing your app. If you like how the “forgot password” feature works in applications A and B, put it in the requirements document.

    4. Abstract Away From Detail Link

    Focus on the features of the application, and skip details such as the color of a button. Most app users do not care about such details. What they do care about is whether your application helps to solve their problem. So, when writing requirements, concentrate on things that the user should be able to do in the app.

    5. Prioritize Features Link

    Convey which features are more important than others, so that the developer knows what to focus on first. We usually follow the MoSCoW method8, marking items with “Must,” “Should,” “Could” and “Won’t” levels of priority.

    6. Complement Text With Wireframes Link

    Create wireframes of the screens of the application to accompany your textual description of them. If you have more than four wireframe screens, then drawing a screen map makes sense. We’ll show a screen map later in this article.

    Requirements Formats Link

    Now that you know how to write the requirements, you’ll need to choose an appropriate format for the document. There are a few basic formats for writing the requirements for a mobile app, such as a functional specification document (FSD), user stories and wireframes.

    Functional Specification Document Link

    An FSD9 is probably the default format in the software development industry. It consists of a standard list of items that cover what the product should do and how it should do it.

    Let’s take a simple calculator application and describe its features as an FSD:

    • Application screen presents a digital keyboard with additional buttons for basic arithmetic operations (addition, subtraction, multiplication, division) and a result button (marked with “=”).
    • Tapping on a digit button adds it to the display section of the screen. Each new digit is added to the right side of the number.
    • Tapping on an operation button causes the current number shown in the display section to be added to the memory. It also clears the display section for the next number.
    • Tapping on the display-result button combines the number in memory with the one in the display section according to the operation requested previously. The resulting number is shown in the display section of the screen.

    As you can see, this format requires quite a detailed description of the product because the description will be used by both the business and the developers. It ensures that all participants are on the same page.

    The person who composes the FSD should have strong experience in software development and should know the specifics of the mobile or other platform for which you are building. Also, because of the high level of detail required, creating and polishing such a document usually takes a decent amount of time.

    User Stories Link

    A user story10 is less formal than an FSD yet still very powerful. It lists the things that the user can do in the application and is described from the user’s perspective. The document could also briefly explain why the user would want to do it, if that’s not obvious.

    Let’s take our calculator example and add a few other features, describing them as a user story:

    • As a user, I want to be able to change the number notation from decimal to exponential (and vice versa), so that I can work with very small or very large numbers.
    • As a user, I want to be able to export a calculation’s history as a PDF file to share with my colleagues.

    Because of the explanation, such a format provides not only a technical overview of the requirements, but also a good business case for them. Thus, if a feature is identified that is not critical to the business, you could decide either to completely remove it from the scope or to postpone it to a future release.

    Using this format, you can easily split one story into multiple sub-stories to provide more detail. For example, we could split the PDF-exporting story into the following sub-stories:

    • As a user, I want to be able to tap on the sharing button (top right of the screen) to see my options (sharing as PDF, text, image).
    • Once I select a sharing option, I want to select the calculation timeframe that will be shared, using iOS’ date picker11.

    Because of the simplicity and non-technical nature of user stories, in most cases, a manager cannot simply ask a developer to implement a particular user story. Turning a story into a task that can be added to a task tracker requires further discussion and detailing between the manager and technical leader.

    User stories have become one of the most convenient and popular formats because of their simplicity and flexibility.

    Sketches and Wireframes Link

    Another way to outline an application’s requirements is to visualize them in sketches or wireframes. With iOS development, around 70% of development time is spent on interface implementation, so having all of the screens in front of you would give you a good sense of what needs to be done and the scope of the work.

    12
    Calculator wireframe example created in Balsamiq Mockups13.

    Creating a relevant set of wireframes for a mobile application requires you to know the basics of the user experience: how screens can be linked with each other, which states each screen can have, and how the application will behave when it is opened from a push notification.

    Mixing Formats Link

    Don’t be afraid to mix formats. By doing this properly, you take advantage of the strengths of each format. In our experience, mixing user stories and wireframes makes the most sense. While the user stories describe the features of the application and provide a business case for them, the wireframes show how these features would appear on the screens of the app. In addition, putting together user stories and wireframes would take you less time than writing an FSD, with all of its accompanying detail and descriptions of the interactions.

    Start by sketching out wireframes for the application. Once the wireframes are done, add two or more user stories for each screen, describing what the user can do on that screen. We’ve found this approach to be the most appropriate for mobile application development, so we use it a lot.

    Let’s Practice Link

    I’ll take our What I Eat application as an example. I’ll compose the requirements document as if we were developing the application from scratch.

    First, let’s formalize the idea using Steve Blank’s XYZ pattern:14 “We help X do Y by doing Z.” The premise of the application is to enable users to take control of what they eat during the day and of their calorie intake. According to the XYZ method: “What I Eat helps those who care about their weight to track calorie consumption by providing functionality for a simple meal log.”

    As mentioned, mixing user stories and wireframes works best for us, so why not use them here?

    The next step is to describe the What I Eat app as user stories, screen by screen. We’ll begin with the application’s start and home screen:

    • As a user, I want to open the app and instantly see today’s meal log and the calories consumed.
    • I want to be able to quickly add new meals and calories that I’ve just consumed.
    • I also want quick access to the in-app calendar to view my meal logs from previous days.

    To avoid any ambiguity, we’ll create a wireframe for this screen.

    Home screen wireframe15
    Home screen wireframe

    As you can see, we weren’t able to put the “Add new meal” functionality on the home screen. Instead, we added a button to navigate to another screen that presents this feature. Now, we need to put together user stories for this new screen:

    • I want to type in the name of the meal I’ve just had.
    • Along with the name of the meal, I want to enter the number of calories.
    Wireframe for add meal screen16
    Wireframe for add-meal screen

    The home screen has a button that opens the calendar. Because there are many other calendar apps, checking their designs first makes sense. We like the iPhone’s default calendar app, so we will use it as a reference.

    • As a user, I want to be able to quickly select a date in the current month.
    • When selecting a date, I want to see a list of meals for that date below, like in the iPhone’s calendar app.
    • I want to be able to switch to the next or previous month.

    We will also put a piece of the iPhone calendar’s user interface in the wireframe.

    Calendar wireframe17
    Calendar wireframe

    Finally, we need to add some settings to the app.

    • I want to be able to enable and disable iCloud backups for my meal records.
    • I want to be able to enable and disable daily push notifications that remind me to track my calorie intake.
    Wireframe of settings screen18
    Wireframe of settings screen

    Phew! Almost done. The final step is to put the wireframes and user stories together in one document, with each wireframe and its respective story on its own page.

    Wireframe and user stories19
    Wireframe and respective user story on one page. Download the full document20 (PDF, 0.2 MB). (View large version21)

    In addition, we can draw a map to visualize how the screens are connected to each other. We’ll use RealtimeBoard22 for that.

    Screen map for calorie-tracking iPhone application23
    Screen map for calorie-tracking iPhone application (View large version24)

    In doing the screen map, we realize that there is no button to go to the settings screen, so we’ll add that to the home screen.

    Conclusion Link

    We have created two documents: a PDF with user stories and wireframes, and a screen map that complements the PDF. Together, they describe in detail what features the application should have. We can go ahead and send that to our developer. This time, the application he delivers will correlate with your vision.

    Generally speaking, writing a requirements document is mostly about conveying your vision to the rest of the team. Don’t limit yourself to the methodology described above. Feel free to experiment and find the solution that works best for you.

    Resources Link

    Delve deeper into the subject with the following resources:

    We’d love to hear about your approach to creating requirements documents. Please share your thoughts in the comments.

    (da, vf, yk, al, il)

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/
    2. 2 https://www.smashingmagazine.com/2013/03/creating-wireframes-and-prototypes-with-indesign/
    3. 3 https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/
    4. 4 https://www.smashingmagazine.com/2012/09/free-download-ux-sketching-wireframing-templates-mobile/
    5. 5 https://www.ipolecat.com/
    6. 6 https://medium.com/@gtabidze/describe-your-idea-framework-2bfca3dc6ec9#.71ds2q58r
    7. 7 https://developer.apple.com/ios/human-interface-guidelines/interaction/navigation/
    8. 8 https://en.wikipedia.org/wiki/MoSCoW_method
    9. 9 https://en.wikipedia.org/wiki/Functional_specification
    10. 10 https://en.wikipedia.org/wiki/User_story
    11. 11 https://developer.apple.com/ios/human-interface-guidelines/ui-controls/pickers/
    12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/1_calculator-mockup_preview_opt.png
    13. 13 https://balsamiq.com
    14. 14 https://medium.com/@gtabidze/describe-your-idea-framework-2bfca3dc6ec9#.71ds2q58r
    15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4_wie-home-screen_preview_opt.png
    16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2_wie-add-meal_preview_opt.png
    17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3_wie-calendar_preview_opt.png
    18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/6_wie-settings_preview_opt.png
    19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7_wireframes-first-page_large_opt.png
    20. 20 http://provide.smashingmagazine.com/what-i-eat-full.pdf
    21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7_wireframes-first-page_large_opt.png
    22. 22 https://realtimeboard.com/
    23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/03/5_wie-map_large_opt.png
    24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/5_wie-map_large_opt.png
    25. 25 http://agileforall.com/wp-content/uploads/2009/10/Story-Splitting-Cheat-Sheet.pdf
    26. 26 http://www.romanpichler.com/blog/10-tips-writing-good-user-stories/
    27. 27 https://www.smashingmagazine.com/2016/11/wireframe-perfectionist-guide/
    28. 28 https://blog.intercom.com/using-job-stories-design-features-ui-ux/

    ↑ Back to topTweet itShare on Facebook

    Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities

    by

    Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities

    In a world between building accessible interfaces, optimizing the experiences for users, and big businesses profiting from this, we need to find a way to use our knowledge meaningfully. When we read that even the engineers who built it don’t know how their autonomous car algorithm works or that the biggest library of books that mankind ever saw is in the hand of one single company and not accessible to anyone, we might lose our faith in what we do as developers.

    But then, on the other hand, we stumble across stories about accessible smart cities or about companies that embrace full honesty in their culture. There are amazing examples of how we can pursue meaningful work and build a better future. Let’s not let negative news get us down, but let’s embrace them as a reason to change for the better instead.

    Further Reading on SmashingMag: Link

    General Link

    • Matt Reiferson shares the story of how Buzzfeed transformed its release process. Now they can easily deploy more than 150 times a day5.
    • Matthias Ott reminds us of the web for everyone and how you can set an example by turning away from centralized silos6 that only serve business interests but not the users. The first step towards a more decentralized web.

    Concept & Design Link

    8
    Jessica Chen analyzed and solved current pain points in the Meetup app9. Usability pitfalls that we often aren’t aware of. (Image credit10)

    Tools & Workflows Link

    Security Link

    Privacy Link

    Accessibility Link

    JavaScript Link

    • Prepack1715 is a JavaScript source code optimizer that tries to simplify your code on the compile-time to make it faster on the run-time. By pre-resolving calculations and assignments where possible, for example.
    Prepack16
    Prepack1715 optimizes JavaScript source code to make it run faster. (Image credit18)

    Going Beyond… Link

    • Maciej Ceglowski published a transcript of his new talk “Build a Better Monster19” in which he describes how the Internet’s economic basis is built upon surveillance. He shows who makes money with user data, how this influences people and politics, and why it’s so hard (but also so important) to face and change this practice of making money of other people.
    • Nathan Kontny shares a nice story on why honesty is the best policy20 you can establish, both as an individual and as a company.
    • Will Knight questions the dark secret at the heart of Artificial Intelligence (AI)21: The algorithms fuelling AI-driven technologies are often uncontrolled, and even engineers don’t really know what they’ll do and how they’ll decide things.
    • Google scanned millions of paper books, and hardly any of them are available to anyone. It’s the result of a project where Google ignored copyrights in an attempt to build a book search and snippet library. This article summarizes the whole story behind the project22 and shows interesting insights into what Google does in the background and how copyright protects authors of such unauthorized use of their material. Google Books — probably the biggest and most controversial book library on our planet.

    And with that, I’ll close for this week. If you like what I write each week, please support me with a donation23 or share this resource with other people. You can learn more about the costs of the project here24. It’s available via email, RSS and online.

    — Anselm

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2007/10/30-usability-issues-to-be-aware-of/
    2. 2 https://www.smashingmagazine.com/2017/04/applications-machine-learning-designers/
    3. 3 https://www.smashingmagazine.com/2015/07/development-to-deployment-workflow/
    4. 4 https://www.smashingmagazine.com/2011/11/assuming-leadership-design-agency/
    5. 5 https://tech.buzzfeed.com/deploy-with-haste-the-story-of-rig-ca9a58b5719a
    6. 6 https://matthiasott.com/articles/going-indie-reclaiming-content
    7. 7 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
    8. 8 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
    9. 9 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
    10. 10 https://uxdesign.cc/meetup-a-usability-case-study-e909c33f1e3e
    11. 11 https://blog.ambar.cloud/ingesting-documents-pdf-word-txt-etc-into-elasticsearch/
    12. 12 https://www.openssl.org/blog/blog/2017/05/04/tlsv1.3/
    13. 13 https://www.wired.com/2017/05/hundreds-apps-can-listen-beacons-cant-hear/
    14. 14 http://blog.barrierbreak.com/2017/05/02/what-do-we-mean-by-accessible-smart-cities/
    15. 15 https://prepack.io/
    16. 16 https://prepack.io/
    17. 17 https://prepack.io/
    18. 18 https://prepack.io/
    19. 19 http://idlewords.com/talks/build_a_better_monster.htm
    20. 20 https://m.signalvnoise.com/honesty-is-the-best-policy-1e0fbfcd461b
    21. 21 https://www.technologyreview.com/s/604087/the-dark-secret-at-the-heart-of-ai/
    22. 22 https://www.theatlantic.com/technology/archive/2017/04/the-tragedy-of-google-books/523320/
    23. 23 https://wdrl.info/donate
    24. 24 https://wdrl.info/costs/

    ↑ Back to topTweet itShare on Facebook

    Finding Inspiration In The Little Things Around Us

    by

    Finding Inspiration In The Little Things Around Us

    Can you believe it is May already? Time flies! Here in Belgium, spring has arrived and has brought along its bright colors, the delicate odours of blooming flowers, as well as the cheerful chirping of birds. I try to soak it all in as this is my favorite time of the year.

    On a related note, if we only looked closer, we would find gems of inspiration in the things around us. For me, nature is my personal and biggest gem. What’s yours?

    Further Reading on SmashingMag: Link

    Sky Dining Link

    Great color palette and love all the gradient mesh work in this illustration.

    5
    Image credit: Jack Hughes6 (Large preview7)

    Spark Of Science Link

    Still shot of short film. Beautiful perspective.

    8
    Image credit: Colin Hesterly9 (Large preview10)

    Perfect Morning — Dark Hedges Link

    Perfect morning light at the Dark Hedges, Northern Ireland.

    11
    Image credit: John12 (Large preview13)

    Facebook Events Link

    One part of a series of illustrations for the inaugural set of artwork launched for Facebook Event themes. Special color combination.

    14
    Image credit: Eight Hour Day15 (Large preview16)

    Canlis Matchbooks Link

    Beautiful colours that are being used here. The eyes draw you in.

    17
    Image credit: Invisible Creature18 (Large preview19)

    San Antonio Magazine Link

    Lovely combination of type and illustrations. Beautiful extrude 3D effect too. It adds this perfect contrast.

    20
    Image credit: Alex Perez21 (Large preview22)

    Anciados Link

    Adoring the simplicity of all this. Just the basics so that your mind fills in the rest.

    23
    Image credit: Victoria Fernandez24 (Large preview25)

    Summer Is Crazy Link

    The special style of Sami Viljanto is an eye-catcher.

    26
    Image credit: Sami Viljanto27 (Large preview28)

    Packing For Mexico Link

    Such a great vibe due to the way the fills are done with this particular pencil stroke effect.

    29
    Image credit: Alexandra Bowman30 (Large preview31)

    Neutron Camper Link

    Magnificent reproduction of the 1940s advertisement vibe. The entire piece was handpainted using digital paint brushes on a Cintiq tablet, and then a texture was applied created by an old, scratched up sheet of metal and a grain filter.

    32
    Image credit: Brave the Woods33 (Large preview34)

    Smashmallow Link

    Packaging illustration for 7 flavour designs for Smashmallow, all natural, organic sugar, gluten-free marshmallow snacks. The others are lovely too. Make sure to check them out!

    35
    Image credit: Owen Davey36 (Large preview37)

    Can’t Hide, Kampina Link

    Very nice capture! A scenery that I always hope to encounter too when I’m out on my bicycle.

    38
    Image credit: Robert Paul Jansen39 (Large preview40)

    The Night Ocean Link

    What a great book cover! Brilliant usage of lines that translate the title so well.

    41
    Image credit: Publishers Weekly42 (Large preview43)

    Ebola Crisis Link

    A warm atmosphere in this illustration. Great patterns on the dresses and brilliant colors that suit the mood. The threat is hidden in the shape of the shadow. Very clever.

    44
    Image credit: Owen Davey45 (Large preview46)

    Hearts In Atlantis Link

    Inspired by the film of Stephen King’s best seller with the same name. Nice detail that the hat is found on the heart. Such perfect soft blue tones to create the shapes of the ice.

    47
    Image credit: YEL.LOW / VADYM SOLOVYOV48 (Large preview49)

    Horse Vespa Link

    Love this subtly absurd and boldly colored illustration.

    50
    Image credit: John51 (Large preview52)

    I See You Link

    The little details that make this shine are the eyes that you see in the binoculars.

    53
    Image credit: Matt Blease54 (Large preview55)

    Stanford Medical Wellness Link

    Beautiful Pallet! Great textures too.

    56
    Image credit: Chris Silas Neal57 (Large preview58)

    Playa Game Link

    All the plants are so nicely executed. Also loving the female running and how the waves are drawn.

    59
    Image credit: xoana herrera60 (Large preview61)

    Banking Poster Link

    So much greatness in this.

    62
    Image credit: Jones & Co63 (Large preview64)

    Testing Crew Link

    Nice editorial image. The line drawings in the back are clever. Love this combo of styles.

    65
    Image credit: Jones & Co66 (Large preview67)

    Summer Night Link

    Great job on the light effect by using (I assume?) the moon as the light source and the use of white and black for the shadows. This high contrast effect is just perfect.

    68
    Image credit: Nutsa Avaliani69 (Large preview70)

    Cats Love Tables Link

    Maria’s intricately patterned illustrations made with a blend of colour pencils, markers, acrylic and watercolour on paper is what made me pick this one. The remarkable part is that she goes straight to paper without sketches. “I usually draw pretty quickly, I never prepare sketches, I go straight to the paper. I like it to be intuitive, to feel that the hand is almost possessed and drawing by itself, not letting the head think about every movement.”

    71
    Image credit: Maria Luque72 (Large preview73)

    Taco Friday! Link

    Great for studying the texture and patterns usage. Beautiful retro style too!

    74
    Image credit: Scotty Reifsnyder75 (Large preview76)

    Jennifer Loiselle Link

    Great idea to fill the figure with a square grid. Fits perfectly with all the other ‘sharp’ elements.

    77
    Image credit: Leslie Barnes78 (Large preview79)

    Logan Link

    So much energy in this illustration. Great colors as well.

    80
    Image credit: The Fox and King81 (Large preview82)

    Cycling Pinball Link

    Wouldn’t mind having a go at this pinball machine created by Ellen Schofield. Such beautiful details!

    83
    Image credit: Ellen Schofield84 (Large preview85)

    Tycho-Terje Link

    Another lovely poster from Scott Hansen. Many would proudly hang this one on their wall I think.

    86
    Image credit: Tycho87 (Large preview88)

    Panda Express Link

    One morning you wake up and think, what if I draw a chubby panda bear riding a bike. I’m sure it would look funny. It does 🙂 This is so well executed.

    89
    Image credit: Ross Zietz90 (Large preview91)

    Byron Bay Link

    Amazing sunset at Byron Bay. Such rich colors!

    92
    Image credit: Paddy Donnelly93 (Large preview94)

    Early Morning Ride Link

    Away from all traffic congestion, just focusing on that magical moment when the sun comes up. Great times, especially with friends!

    95
    Image credit: Mark Frudd96 (Large preview97)

    The Trouble With TOO Much Tech Link

    Illustration for the Wallstreet Journal in a piece about the trouble with too much tech. Great use of mid-century era’s furniture to create a wonderful composition.

    98
    Image credit: Laszlito Kovacs99 (Large preview100)

    Coffeehood Brand Assets Link

    Nice colors and great font pairings. Beautiful inspiring stuff!

    101
    Image credit: Salih Küçükağa102 (Large preview103)

    Earth Day 22 April Link

    Nice set of colors to celebrate our beautiful planet.

    104
    Image credit: Anna Hurley105 (Large preview106)

    United Stripes Of America Link

    Great looking characters.

    107
    Image credit: Giulia di Filippo108 (Large preview109)

    Love Songs (Weekend Magazine) Link

    Love the clean lines, forms and the smooth perspective.

    110
    Image credit: Geraldine Sy111 (Large preview112)

    Are Your Friends Making You Fat? Link

    Inspiring usage of vivid colors without being too overwhelming.

    113
    Image credit: Geraldine Sy114 (Large preview115)

    Firenze Link

    Very abstract and modern. Love the subtle gradients that create this subtle depth effect.

    116
    Image credit: Ray Oranges117
    (Large preview118)

    Sydney Word By Word Link

    The colorful style of the Australian agency WBYK. Very eye-catching!

    119
    Image credit: WBYK120 (Large preview121)

    Northwest Airlines Fleet Link

    I’ve always admired those vintage illustrated ads. This is one is from 1957 for the Northwest Airlines Fleet.

    122
    Image credit: Roger Wilkerson123 (Large preview124)

    164 WEST 136TH ST. Link

    It has been a while since I last visited ‘The Windows of New York’. Here’s the one from 164 WEST 136TH ST. Harlem.

    125
    Image credit: Jose Guizar126 (Large preview127)

    Derwentwater Link

    A dramatic sky over Derwentwater in the Lake District National Park in North West England. Thankfully Chris Upton was on hand with his camera.

    128
    Image credit: Chris Upton129 (Large preview130)

    Type Man Link

    Lovely combination of 2D and 3D. Beautiful composition.

    131
    Image credit: Neil Stevens132 (Large preview133)

    Melt Link

    Love the merge/melt effect.

    134
    Image credit: Timo Kuilder135 (Large preview136)

    Phantom Manor Link

    This photo of Phantom Manor, taken in Disneyland Paris, could be directly used for a horror movie poster.

    137
    Image credit: Tim Van Damme138 (Large preview139)

    It’s Like A Jungle Sometimes Link

    Wonderful set of colors being used in this one. Bonus points for those that think “hmmm, this title rings a bell”.

    140
    Image credit: Loulou and Tummie141 (Large preview142)

    Self-Employment Link

    Editorial illustrations about self-employment. Two characters from white and blue collar jobs look at each other within a mirror. I can keep looking at this one for a while. Love all those little details, objects etc.

    143
    Image credit: Neil Stevens144 (Large preview145)

    Pelican Link

    The colours and details are spectacular!

    146
    Image credit: Alan Emery147 (Large preview148)

    Apatosaurus At Night Link

    Illustration made just to practice working with a restricted color palette. Nicely done I would say.

    149
    Image credit: Diana Stoyanova150 (Large preview151)

    Greetings From Austin, Texas Link

    Remember that I showed a sneak peek from this? Well here’s the finished version which is great as usual. Look at those details and how the (few) colors are applied. Just perfect!

    152
    Image credit: DKNG153 (Large preview154)

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2010/02/finding-inspiration-in-uncommon-sources-12-places-to-look/
    2. 2 https://www.smashingmagazine.com/2011/06/the-story-of-scandinavian-design-combining-function-and-aesthetics/
    3. 3 https://www.smashingmagazine.com/2010/07/showcase-of-web-design-in-poland/
    4. 4 https://www.smashingmagazine.com/2009/11/massive-collection-of-nature-inspired-typography/
    5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sky-Dining-large-opt.jpg
    6. 6 http://jack-hughes.com/
    7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sky-Dining-large-opt.jpg
    8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Spark-Of-Science-large-opt.jpg
    9. 9 http://colinhesterly.com/#/nautilus/
    10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Spark-Of-Science-large-opt.jpg
    11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Perfect-Morning-Dark-Hedges-large-opt.jpg
    12. 12
    13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Perfect-Morning-Dark-Hedges-large-opt.jpg
    14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Facebook-Events-ehd-large-opt.png
    15. 15 http://eighthourday.com/work/facebook-events
    16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Facebook-Events-ehd-large-opt.png
    17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Canlis-Matchbooks-large-opt.jpg
    18. 18 https://www.invisiblecreature.com/news/matchbooks-for-canlis-restaurant
    19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Canlis-Matchbooks-large-opt.jpg
    20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/San-Antonio-Magazine-large-opt.png
    21. 21 http://theworkofalexperez.com/san-antonio-magazin
    22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/San-Antonio-Magazine-large-opt.png
    23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Anciados-large-opt.png
    24. 24 http://victoriafernandez.me/anclaii
    25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Anciados-large-opt.png
    26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/summer-is-crazy-large-opt.png
    27. 27 https://www.behance.net/gallery/27420507/Summer-is-crazy-an-illustrated-series
    28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/summer-is-crazy-large-opt.png
    29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/packing-for-mexico-large-opt.jpg
    30. 30 http://www.alexandrabowman.com/california-vibes/clv7y6pocwm4jkc4efc8bqikwe1fg8
    31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/packing-for-mexico-large-opt.jpg
    32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Neutron-Camper-large-opt.jpg
    33. 33 http://bravethewoods.com/work/neutron-camper-trailer/
    34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Neutron-Camper-large-opt.jpg
    35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Smashmallow-large-opt.jpg
    36. 36 http://www.owendavey.com/Smashmallow
    37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Smashmallow-large-opt.jpg
    38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cant-Hide-Kampina-large-opt.jpg
    39. 39 https://robertpauljansen.tumblr.com/post/157661512217/cant-hide-kampina
    40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cant-Hide-Kampina-large-opt.jpg
    41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-night-ocean-large-opt.png
    42. 42 http://www.publishersweekly.com/pw/by-topic/industry-news/publisher-news/article/72907-cover-story-the-night-ocean-by-paul-la-farge.html
    43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/the-night-ocean-large-opt.png
    44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ebola-large-opt.jpg
    45. 45 http://www.owendavey.com/Wellcome-Ebola-Crisis
    46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ebola-large-opt.jpg
    47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Hearts-in-Atlantis-large-opt.jpg
    48. 48 https://www.behance.net/gallery/51208365/Hearts-in-Atlantis-Album-Cover
    49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Hearts-in-Atlantis-large-opt.jpg
    50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/horse-vespa-large-opt.jpg
    51. 51 http://www.itsnicethat.com/articles/sebastien-plassard-010816
    52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/horse-vespa-large-opt.jpg
    53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/I-see-you-large-opt.png
    54. 54 http://mattblease.tumblr.com/
    55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/I-see-you-large-opt.png
    56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Stanford-Medical-Wellness-large-opt.jpg
    57. 57 https://www.behance.net/gallery/48986601/Stanford-Medical-Wellness
    58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Stanford-Medical-Wellness-large-opt.jpg
    59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Playa-Game-large-opt.jpg
    60. 60 http://www.xoanaherrera.com/#/playa/
    61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Playa-Game-large-opt.jpg
    62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Banking-poster-large-opt.png
    63. 63 https://www.behance.net/gallery/51121103/Banking-poster-(-Unused-)
    64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Banking-poster-large-opt.png
    65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Testing-crew-large-opt.png
    66. 66 https://www.behance.net/gallery/50616663/Dribbble-collection-v2
    67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Testing-crew-large-opt.png
    68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Summer-Night-large-opt.png
    69. 69 https://dribbble.com/shots/3425080-Summer-Night
    70. 70 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Summer-Night-large-opt.png
    71. 71 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cats-love-tables-large-opt.jpg
    72. 72 http://www.itsnicethat.com/articles/maria-luque-220317
    73. 73 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cats-love-tables-large-opt.jpg
    74. 74 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Taco-Friday-large-opt.jpg
    75. 75 https://dribbble.com/shots/3248355-Taco-Friday
    76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Taco-Friday-large-opt.jpg
    77. 77 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Jennifer-Loiselle-large-opt.png
    78. 78 http://lesleybarnes.co.uk/Jennifer-Loiselle
    79. 79 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Jennifer-Loiselle-large-opt.png
    80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Logan-large-opt.jpg
    81. 81 https://dribbble.com/shots/3409569-Logan
    82. 82 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Logan-large-opt.jpg
    83. 83 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cycling-Pinball-large-opt.jpg
    84. 84 http://www.artcrank.com/home/es-cycling-pinball
    85. 85 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Cycling-Pinball-large-opt.jpg
    86. 86 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ISO50-2017-Apr-19-large-opt.png
    87. 87 https://twitter.com/ISO50/status/854747682169954306
    88. 88 https://www.smashingmagazine.com/wp-content/uploads/2017/05/ISO50-2017-Apr-19-large-opt.png
    89. 89 https://www.smashingmagazine.com/wp-content/uploads/2017/05/panda-express-large-opt.jpg
    90. 90 http://www.artcrank.com/home/rz-polar-express
    91. 91 https://www.smashingmagazine.com/wp-content/uploads/2017/05/panda-express-large-opt.jpg
    92. 92 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Byron-Bay-large-opt.jpg
    93. 93 https://twitter.com/paddydonnelly/status/850681670621700098
    94. 94 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Byron-Bay-large-opt.jpg
    95. 95 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Early-Morning-Ride-large-opt.jpg
    96. 96 http://www.artcrank.com/home/mf-early-morning-ride
    97. 97 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Early-Morning-Ride-large-opt.jpg
    98. 98 https://www.smashingmagazine.com/wp-content/uploads/2017/05/too-much-tech-large-opt.png
    99. 99 https://dribbble.com/shots/2182896-Wall-Street-Journal-The-Trouble-with-TOO-much-tech
    100. 100 https://www.smashingmagazine.com/wp-content/uploads/2017/05/too-much-tech-large-opt.png
    101. 101 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Coffeehood-large-opt.jpg
    102. 102 https://dribbble.com/shots/3449882-Coffeehood-Brand-Assets
    103. 103 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Coffeehood-large-opt.jpg
    104. 104 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Earth-Day-22-April-large-opt.png
    105. 105 https://dribbble.com/shots/3449999-Earth-Day-is-tomorrow
    106. 106 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Earth-Day-22-April-large-opt.png
    107. 107 https://www.smashingmagazine.com/wp-content/uploads/2017/05/United-Stripes-Of-America-large-opt.jpg
    108. 108 http://www.giuliadifilippo.com/unitedstripes.html
    109. 109 https://www.smashingmagazine.com/wp-content/uploads/2017/05/United-Stripes-Of-America-large-opt.jpg
    110. 110 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Love-Songs-large-opt.jpg
    111. 111 https://www.behance.net/gallery/50330445/Love-Songs-Weekend-Magazine
    112. 112 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Love-Songs-large-opt.jpg
    113. 113 https://www.smashingmagazine.com/wp-content/uploads/2017/05/are-friends-making-you-large-opt.jpg
    114. 114 https://www.behance.net/gallery/45287007/Are-Your-Friends-Making-You-Fat-(STELLA-magazine)
    115. 115 https://www.smashingmagazine.com/wp-content/uploads/2017/05/are-friends-making-you-large-opt.jpg
    116. 116 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Firenze-ray-large-opt.jpg
    117. 117 https://www.behance.net/gallery/50404939/Various-Illustration-2016-2017
    118. 118 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Firenze-ray-large-opt.jpg
    119. 119 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sydney-Word-by-Word-large-opt.jpg
    120. 120 http://www.wbyk.com.au/#/sydney-word-by-word/
    121. 121 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Sydney-Word-by-Word-large-opt.jpg
    122. 122 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Northwest-Airlines-Fleet-large-opt.jpg
    123. 123 http://rogerwilkerson.tumblr.com/post/160057175736/northwest-airlines-fleet-1957
    124. 124 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Northwest-Airlines-Fleet-large-opt.jpg
    125. 125 https://www.smashingmagazine.com/wp-content/uploads/2017/05/164-WEST-136TH-ST-large-opt.jpg
    126. 126 http://www.windowsofnewyork.com/
    127. 127 https://www.smashingmagazine.com/wp-content/uploads/2017/05/164-WEST-136TH-ST-large-opt.jpg
    128. 128 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Derwentwater-large-opt.jpg
    129. 129 https://twitter.com/Fujifilm_UK/status/857125877666250753
    130. 130 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Derwentwater-large-opt.jpg
    131. 131 https://www.smashingmagazine.com/wp-content/uploads/2017/05/type-man-large-opt.jpg
    132. 132 http://www.crayonfire.co.uk/type-man
    133. 133 https://www.smashingmagazine.com/wp-content/uploads/2017/05/type-man-large-opt.jpg
    134. 134 https://www.smashingmagazine.com/wp-content/uploads/2017/05/melt-large-opt.png
    135. 135 https://dribbble.com/shots/3468355-Melt
    136. 136 https://www.smashingmagazine.com/wp-content/uploads/2017/05/melt-large-opt.png
    137. 137 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Phantom-Manor-large-opt.jpg
    138. 138 https://twitter.com/maxvoltar/status/857719425277022208
    139. 139 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Phantom-Manor-large-opt.jpg
    140. 140 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Its-Like-A-Jungle-Sometimes-large-opt.jpg
    141. 141 https://www.behance.net/gallery/20671155/New-prints
    142. 142 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Its-Like-A-Jungle-Sometimes-large-opt.jpg
    143. 143 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Self-Employment-large-opt.jpg
    144. 144 http://www.crayonfire.co.uk/self-employment
    145. 145 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Self-Employment-large-opt.jpg
    146. 146 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Pelican-large-opt.jpg
    147. 147 https://unsplash.com/?photo=SYzUF6XcWBY
    148. 148 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Pelican-large-opt.jpg
    149. 149 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Apatosaurus-at-Night-large-opt.jpg
    150. 150 https://dribbble.com/shots/3466792-Apatosaurus-at-Night
    151. 151 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Apatosaurus-at-Night-large-opt.jpg
    152. 152 https://www.smashingmagazine.com/wp-content/uploads/2017/05/greetings-from-texas-large-opt.jpg
    153. 153 https://www.dkngstudios.com/blog/2017/4/10/greetings-from-austin-art-print
    154. 154 https://www.smashingmagazine.com/wp-content/uploads/2017/05/greetings-from-texas-large-opt.jpg

    ↑ Back to topTweet itShare on Facebook

    Designing Voice Experiences

    by

    Designing Voice Experiences

    Voice-based interfaces are becoming commonplace. Voice assistants such as Siri and Cortana have been around for a few years, but this past holiday season, voice-driven devices from Amazon and Google made their way into millions of homes.

    Recent analysis from VoiceLabs1 estimates that 24.5 million voice-driven devices will be shipped this year, almost four times as many as last year. As experience designers, we now have the opportunity to design voice experiences and interfaces!

    A new interface does not mean that we have to disregard everything we have successfully applied to previous interfaces; we will need to adapt our process for the nuances of voice-driven interfaces, including conversational interactions and the lack of a screen. We will look at how a typical genie in a bottle works, discuss the steps involved in designing voice experiences, and illustrate these steps by designing a voice app for Alexa (or Skill, as Amazon calls it).

    Further Reading on SmashingMag: Link

    Understanding Voice Interfaces Link

    Just as mobile apps run on an OS and a device, three layers have to work together to enable voice interactions:

    6
    The layers that enable voice interactions
    1. voice app (Amazon Skills and Actions for Google);
    2. artificial intelligence platform (Amazon Alexa, Google Assistant, Apple Siri, Microsoft Cortana);
    3. device (Echo, Home, smartphones, computers).

    Each layer uses the one below and supports the one above it. The voice interface lies in the upper two layers, both of which reside in the cloud, not on the device itself.

    Let’s peek under the hood to see how these layers work together, using the Alexa Jeopardy! Skill as an example.

    How voice interfaces work - Jeopardy skill example7
    The layers that enable voice interactions. (View large version8)

    Voice-driven devices such as the Amazon Echo and Google Home are constantly listening, waiting for a wake word (“Alexa…” or “OK, Google…”) to jump into action. Once activated, the device sends the audio that follows to the AI platform in the cloud (“… play Jeopardy!”). The platform uses a combination of automatic speech recognition9 (ASR) and natural language understanding10 (NLU) to decipher the user’s intent (to start a trivia game) and send it to the supporting app (Jeopardy! J6 Skill on Alexa). The app processes the request and responds through text (and a visual if applicable). The platform converts the text to speech and plays it through the device (“Welcome to Jeopardy J6. Here are today’s clues…”). All this in matter of seconds.

    Building Voice Experiences Link

    Last year, Mark Zuckerberg took on a personal challenge to build a simple AI11 to run his home. He did, called it Jarvis and gave it the voice of Morgan Freeman12.

    Mark Zuckerberg introduces Morgan Freeman to the AI that uses his voice13
    Mark Zuckerberg introduces Morgan Freeman to the AI that uses his voice. (Image: Mark Zuckerberg14)

    The rest of us who don’t have the ability or resources to do the same can get away with building voice apps that run on complex AI platforms that have already been built. This frees us to only have to worry about the design and development of the voice app, that too with a simplified development process. Amazon15 and Google16 have provided open access to templates, code, and detailed step-by-step instructions to build different types of voice apps, to the point that even non-developers could develop an app in around an hour!

    Their investment in simplifying app development is paying off, with thousands of new voice apps being launched every month17. The growth in voice apps brings back memories of the ’90s web gold rush, as well as the explosion of mobile apps that followed the launch of app stores.

    Breakdown of Alexa Skills by category as of May 201718
    Breakdown of Alexa Skills by category as of May 2017. (View large version19)

    In a crowded voice marketplace, good design is what will differentiate your voice app from the hundreds of other similar apps.

    Designing Voice Experiences Link

    Designing a good voice user experience is a five-step process that should take place before starting development. Though jumping straight into development might be tempting, the time spent getting the design right is time well spent.

    Steps in designing voice experiences20
    The steps in designing voice experiences (View large version21)

    We will discuss and apply each step to design a voice app, which could easily be developed using one of many Skill templates for Alexa22.

    1. Discover Link

    The design journey begins with the question, “How will this voice app provide value to my users?” This question applies whether you are developing a standalone voice app (like our example) or whether your voice app is just one of many touchpoints for your customers. Take into consideration why and where people use voice apps. People use voice interfaces because of the benefits of hands-free interaction, the speed of interaction and the ease of use, primarily using it at home or in the car, as shown in Mary Meeker’s 2016 Internet Trends Report23.

    Top reasons to use voice interfaces24
    Top reasons to use voice interfaces (callouts by author) (Source: KPCB25) (View large version26)

    The key is to find consistent user needs that are easier or more convenient through a voice app rather than a phone or a computer. Some examples include banks providing account information or a moviegoer finding new movies playing nearby.

    If you have competitors who already have voice apps, take into consideration what they are doing and the reviews and feedback their apps have received in the app marketplace (such as Amazon’s Alexa Skill Store27). The aim is not to blindly imitate, but to be aware of the capabilities bar that has been set, as well as user expectations.

    (At the time of writing this, there were over 1,500 “knowledge and trivia” Alexa Skills, making it the most crowded Skill categories on Amazon. However, there wasn’t a single trivia skill catering to the area of user experience. To illustrate the voice design process, we will create a UX design skill, for our readers to test their knowledge or maybe even to learn something new.)

    2. Define Link

    During this step, we will define the personality of our app and the capabilities it will have.

    Personality Link

    When designing voice interfaces, we don’t have access to many of the visual elements we use in web and mobile interfaces to show a personality. The personality has to come through the voice and tone of verbal interactions. And unlike Zuckerberg, who hears Freeman’s soothing voice, we are constrained to hearing the default voice of the device. That makes tone and wording crucial in conveying the personality we want to convey.

    The good news is that most of the groundwork in this area should have already been completed and documented in a corporate brand guide or website style guide (hint: look for the “tone of voice” section). Leverage those guidelines for your voice app, as well to maintain a consistent personality across channels and touchpoints.

    When I think of personality and tone, the Virgin Group immediately comes to mind. They clearly define who they are and how they convey that to users. For Virgin America, the ideal tone is “hip, easygoing, informal, playful and tongue in cheek,” and it comes across clearly in all their communication.

    Virgin America brand personality28
    Virgin America’s brand personality (Source: Virgin America29)

    If you’ve ever asked Alexa to sing or tried any of the numerous Alexa Easter Eggs30, then you’ll know she has a personality of her own. Curious, I reached out to the team responsible for her personality, and here’s what they had to say:

    When architecting Alexa’s voice, we tried to give her a personality that reflects the attributes we value most at Amazon. We wanted her to feel helpful, humble and smart, while still maintaining a sense of fun. This is an ongoing process, and we expect the voice of Alexa will evolve as more developers focus on making her smarter.

    Personality can also be reflected in the app’s name, icon and description that are displayed to users in the app directory listing, as well as in the name used to invoke the app (the invocation name). So, make sure it shines through while publishing your app.

    For our UX Design skill, we could take a straightforward or a funny approach, and that would be reflected in the wording of our quiz’ Q&A options.

    An example of a normal tone would be:

    Which UX design principle favors simplicity over complexity?

    1. Occam’s Razor
    2. Hick’s Law
    3. Aesthetic-usability effect
    4. Satisficing

    And an example of a funny tone would be:

    Apparently, there’s a UX design principle that favors simplicity over complexity. Really! Can you guess what it’s called?

    1. Occam’s Razor: The best a UX guy can get.
    2. Hick’s Law: Sounds like something a UX bumpkin would come up with.
    3. Aesthetic-usability effect: That’s some fancy UX jargon.
    4. Satisficing: I can’t get no satisficing… apologies to the Rolling Stones.

    Yeah, let’s stick with normal.

    Capabilities Link

    This is where you carefully think of the functionality that will be valuable for your voice app’s users. Revisit your work from the first step to identify the capabilities that are core or related to your business. Sometimes offering core capabilities is a no-brainer — such as a bank offering information on balance, transactions and due dates. Others offer value in the form of related features, such as Tide’s stain-removal guide voice app, or Glad’s (makers of food storage and trash bags) voice apps, one of which helps users to remember where they stored their leftovers, or the other one that allows users to check which items should be recycled or disposed of in the trash.

    If you did a similar exercise when going from web to mobile, that can serve as a starting point. For voice capabilities, consider what capabilities would benefit your users on a voice-driven device in a shared space. If a Skill has security or privacy implications, consider adding a level of protection (the Capital One Alexa Skill allows users to create a personal key for account access). While you may end up with a laundry list of functionality that would work over voice, start with one to five core capabilities, and use voice analytics to update and improve after launch.

    The core capabilities of a UX design Skill could be:

    1. provide a UX design principle on demand;
    2. quiz the user (single player) on a random UX principle;
    3. quiz the user (single player) on multiple UX principle, and keep score;
    4. hold a UX quiz competition with multiple players.

    Because we are building this UX design Skill using Amazon’s Skill templates, our choices are currently restricted to either the first (fact skill template) or third (trivia skill template) option above. Assuming that our research has shown that our users would find a quiz more valuable than just hearing a UX principle recited, our core capability will be to quiz the user on UX principles and to keep score.

    3. Detail Conversation Flow Link

    Now that you have shortlisted the capabilities of your voice app, start focusing on the detailed conversation flow that the app will have with its users. Human conversation is complex; it often has many twists and turns and may pivot anytime, with people often jumping from one topic to another. Voice AI platforms still have a long way to go to match that level of complexity, so you have to teach your Skill how to respond to users.

    Your voice app can only support the capabilities you have defined in the previous step, but users always have the ability to ask the app anything and in any format. Detailing a conversation flow allows you to respond to the user, or to drive the conversation towards what the app can do for the user.

    For each capability that the voice app will support, start creating conversational dialogues between the user and the app, similar to dialogues in a screenplay. As you write these dialogues, remember the personality as well as voice and tone characteristics. Start creating and curating the actual content for your voice app; for our quiz, this would mean building the list of quiz questions.

    Begin with the “happy path” — a conversational flow in which the voice app can respond to the user’s request without any exceptions or errors. Then, move on to detailing the conversational flow for exceptions (in which the user does not provide complete information) and errors (in which the voice app does not understand or cannot do what the user is asking).

    Because the conversation will be heard and not read, a good practice is to read it out loud to see if it sounds like a natural spoken conversation, and to check that it conveys the tone of voice you’ve intended.

    If your voice app needs to supplement the conversation with content displayed on the phone app, design these interactions together, so that they appear seamless to the user. For instance, Tide’s stain-removal Skill informs the user that they could also refer to the stain-removal steps in the Alexa app, in addition to hearing the instructions. This may soon be required if the rumors of a touchscreen on the new Echo31 are true.

    Here is a sample dialogue for the happy path our UX design Skill’s core capability:

    User: “Alexa, start the UX design quiz.”

    Alexa: “I will ask you five questions, with multiple choice answers. Try to get as many right as you can. Just say the number of the answer. Let’s begin. Question 1…”

    User: [responds correctly]

    Alexa: “That’s correct! Your score is 1. Here’s question 2…”

    User: [responds incorrectly]

    Alexa: “Oops, that’s the wrong answer. The correct answer is [correct answer]. Your score is 1. Here’s question 3…”

    …

    Alexa (at the end of five questions): “That’s correct! You got four out of five questions correct. Thank you for playing!”

    4. Describe Alternate Phrases Link

    People don’t always use the same words to say the same thing, and voice apps need to be taught that. Phrase-mapping is an exercise to teach voice apps to accommodate variation in the way users phrase their requests.

    For each conversational path that you detailed in the previous step, think about the different ways users could word those requests. Then break down the wording of each request, and identify word variations and synonyms that they might use, taking into account any regional variations and dialects. You will have your hands full if your voice app deals with sweetened carbonated beverages (soda, pop, coke, tonic, soft drink, fizzy drink), long sandwiches (sub, grinder, hoagie, hero, poor boy, bomber, Italian sandwich, baguette) or athletic footwear (sneakers, shoes, gym shoes, sand shoes, jumpers, tennis shoes, running shoes, runners, trainers).

    Make this list of variations as complete and exhaustive as possible, so that your voice app can understand user requests. Alexa needs these variations in the form of “utterances” and recommends providing “… as many representative phrases as possible32.” Depending on the capabilities of your voice app, the number of utterances could easily run into the hundreds, but there are ways to simplify the generation of utterances33.

    Here’s a sample phrase-mapping for a capability of our UX design quiz. Alexa’s AI platform does a good job of translating user intent for Skills based on their templates. However, if you make changes (like we changed “trivia game” to “quiz”), then these phrases will have to be added.

    Sample phrase mapping34
    View large version35

    5. Refine Link

    The final step in the design process is to validate and refine the voice application before spending time and effort on development. During the “detail” step, reading the conversation flows aloud helped to make sure that they sounded natural and conversational. The current step involves testing the voice interface with users.

    The simplest way to test is using the Wizard of Oz technique, with a person playing the role of the voice-driven device and responding to the user based on the voice interface script. Another option is to use prototyping software such as SaySpring6236 to create and test interactive prototypes.

    If your voice app is being built using code templates (as our app is), then it might be easier to create the app and test it using testing tools provided by Amazon37 and Google38 within the Skill development area (as shown below), or in test mode on an actual device.

    Alexa skill simulator39

    This testing will give you a good feel for the voice experience in the real world, including handling of errors, repetitive responses, and unnatural, forced or machine-like replies.

    Develop Link

    Now that the voice experience has been designed, it is time to move to the build-test-submit phase. Each platform has detailed guides and tutorials to help anyone build and test skills, including Alexa Skills Kit40, Develop Actions for Google41, and Cortana42, which offers to reuse your custom Alexa skill code!

    Think about your feedback loop and the analytics that will help you to understand usage of your voice app. You can get Skill metrics (users, sessions, utterances, intents) within your developer account without any additional coding, but advanced analytics are available through free services such as VoiceLabs43 (I could not get it to work, probably due to my lack of coding skills or the lack of a VoiceLabs for Dummies setup guide).

    After you finish building and testing your voice app, the last step is a streamlined submission process44. Because the Alexa Skill marketplace has rapidly grown, discovering new and useful apps is getting difficult. Until Amazon improves this, use visible elements of your voice app listing to help users find and try your Skill, including a catchy and relevant skill icon, name and description.

    The companion skill that was built as an illustration can be taken for a test drive on the Amazon Alexa Skill store: UX Design Quiz45

    Guiding Principles Link

    Here are a few guiding principles for designing voice experiences. More principles and detailed do’s and don’ts are offered by Amazon46 and Google47.

    Onboard the User and Help Them Get Started Link

    Introduce the app and the ways the user can engage with it.

    Welcome to UX Design Quiz. I will ask you five questions about UX design and see how many you get right. You can ask me to repeat a question or pause if you need to. Would you like to start a new quiz?

    Keep conversation exchanges brief to reduce cognitive load. Link

    With a voice user interface, the user has to use their short-term memory while interacting with the voice app. So, keep it short and sweet.

    Alexa: “This principle is attributed to a 14th-century logician and Franciscan friar and is named after the village in the English county of Surrey where he was born. In a nutshell, it states that simplicity is better than complexity. This problem-solving principle can easily be applied to user experience design, by going for the simpler design solution. What is this principle called?

    1. Your first option is Occam’s Razor, sometimes known as Ockham’s razor, or the law of parsimony.
    2. Your next option is Hick’s Law, also known as the Hick-Hyman Law.
    3. Your next option is the aesthetic-usability effect.
    4. Your last option is called “satisficing,” not to be confused with “satisfying” or “sacrificing.”

    Please say A, B, C, or D to make your selection.”

    User: “Huh?! Alexa, repeat. On second thought, end quiz!”

    Examples Work Better Than Instructions Link

    Instruction: “Please say your date of birth in the month/day/year format.”

    Example: “Please say your date of birth, like April 15, 1990.”

    Delight Without Interfering With the Task Link

    This is a balancing act. Too much and it gets tiresome quickly.

    Use Explicit Confirmations for Important Actions, and Implicit for Less Risky Link

    If you ask Alexa to turn off the lights, you can see it happen and do not need a verbal confirmation, although she sometimes confirms with a short “OK.”

    Don't interfere, reduce repetitiveness48
    User feedback for the Glad Leftover Skill highlights two principles above.

    Design for Failure Link

    Things will go wrong: design for those situations. Examples include unintelligible questions or information, incomplete information, silence or requests that cannot be handled. Acknowledge, and give the user options to recover.

    Respect the User’s Privacy and Security Link

    Respect user privacy and security49
    User feedback for a bank Skill highlights issues with security, despite passing Alexa Skill Security requirements50.

    Conclusion Link

    Anytime you’re dealing with trying to interact with a human, you have to think of humans as very advanced operating systems. Your highest goal is to try to emulate them.

    – K.K Barrett, Her movie production designer, Wired, 2014

    If you haven’t seen the movie Her, take a couple of hours to watch this futuristic movie about a lonely writer who develops a relationship with an operating system. While it is science fiction, in today’s world, voice experiences are increasing with the adoption of standalone voice-driven devices, such as the Amazon Echo family and Google Home. Developing a voice app is a relatively simple, template-driven process, with IKEA-like instructions provided by Amazon and Google in an attempt to establish their platforms. Though jumping into development may be tempting, a good voice user experience doesn’t just happen; it has to be designed, going through the steps described in this article.

    Please use the comments area to share any other feedback, tips and resources with other readers.

    Resources Link

    AI Platform Tools Link

    Tone of Voice Link

    Phrases and Dialects Link

    Prototyping and Testing Link

    Report, Book and Movie Link

    (da, vf, yk, al, il)

    Footnotes Link

    1. 1 http://voicelabs.co/2017/01/15/the-2017-voice-report/
    2. 2 https://www.smashingmagazine.com/2014/12/enhancing-ux-with-the-web-speech-api/
    3. 3 https://www.smashingmagazine.com/2012/09/guidelines-for-designing-with-audio/
    4. 4 https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
    5. 5 https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/
    6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-interface-stack-500w-opt.png
    7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-interface-stack-example-large-opt.png
    8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-interface-stack-example-large-opt.png
    9. 9 https://en.wikipedia.org/wiki/Speech_recognition
    10. 10 https://en.wikipedia.org/wiki/Natural_language_understanding
    11. 11 https://www.facebook.com/notes/mark-zuckerberg/building-jarvis/10154361492931634
    12. 12 https://www.facebook.com/zuck/videos/10103353413344571/
    13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zuckerberg-freeman-500w-opt.jpg
    14. 14 https://www.facebook.com/photo.php?fbid=10103410869691591&set=pb.4.-2207520000.1486318705.&type=3&theater
    15. 15 https://developer.amazon.com/alexa-skills-kit
    16. 16 https://developers.google.com/actions/
    17. 17 http://voicebot.ai/2017/02/28/amazon-alexa-now-has-10k-skills-including-europe/
    18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/04/alexa-skills-category-may-2017-large-opt.png
    19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/04/alexa-skills-category-may-2017-large-opt.png
    20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/03/designing-voice-experiences-steps-large-opt.png
    21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/03/designing-voice-experiences-steps-large-opt.png
    22. 22 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/content/alexa-skills-developer-training#templates
    23. 23 http://www.kpcb.com/blog/2016-internet-trends-report
    24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-reasons-large-opt.png
    25. 25 http://www.kpcb.com/blog/2016-internet-trends-report
    26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/03/voice-reasons-large-opt.png
    27. 27 https://www.amazon.com/b?ie=UTF8&node=13727921011
    28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/virgin-brand-personality-730w-opt.png
    29. 29 http://vxbrandguidelines.com/
    30. 30 https://turbofuture.com/consumer-electronics/200-Amusing-Amazon-Echo-Easter-Eggs
    31. 31 https://www.engadget.com/2016/11/29/amazon-touchscreen-speaker-leak/
    32. 32 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/defining-the-voice-interface#h2_sample_utterances
    33. 33 http://www.makermusings.com/2015/07/21/defining-utterances-for-the-alexa-skills-kit/
    34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/03/phrase-mapping-large-opt.png
    35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/phrase-mapping-large-opt.png
    36. 36 https://www.sayspring.com/
    37. 37 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/testing-an-alexa-skill#h2_servicesim
    38. 38 https://developers.google.com/actions/tools/web-simulator
    39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/alexa-simulator-500w-opt.png
    40. 40 https://developer.amazon.com/alexa-skills-kit#Ready%20to%20start%3F
    41. 41 https://developers.google.com/actions/develop/conversation
    42. 42 https://developer.microsoft.com/en-us/cortana
    43. 43 http://voicelabs.co/
    44. 44 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/publishing-an-alexa-skill
    45. 45 https://www.amazon.com/dp/B06X6FHKSL
    46. 46 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-voice-design-best-practices
    47. 47 https://developers.google.com/actions/design
    48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/03/leftover-skill-feedback-570w-opt.png
    49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/03/bank-skill-feedback-500w-opt.png
    50. 50 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-security-testing
    51. 51 https://developer.amazon.com/alexa-skills-kit
    52. 52 https://developers.google.com/actions/
    53. 53 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/alexa-skills-kit-voice-design-best-practices
    54. 54 https://developers.google.com/actions/design
    55. 55 https://www.nngroup.com/articles/tone-voice-users/
    56. 56 https://www.smashingmagazine.com/2012/08/finding-tone-voice/
    57. 57 https://www.distilled.net/tone-of-voice/
    58. 58 http://www.nytimes.com/interactive/2013/12/20/sunday-review/dialect-quiz-map.html
    59. 59 https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/defining-the-voice-interface
    60. 60 http://www.makermusings.com/2015/07/21/defining-utterances-for-the-alexa-skills-kit/
    61. 61 http://www.makermusings.com/amazon-echo-utterance-expander/
    62. 62 https://www.sayspring.com/
    63. 63 https://echosim.io/
    64. 64 https://developers.google.com/actions/tools/web-simulator
    65. 65 http://voicelabs.co/2017/01/15/the-2017-voice-report/
    66. 66 http://shop.oreilly.com/product/0636920050056.do
    67. 67 http://www.imdb.com/title/tt1798709/

    ↑ Back to topTweet itShare on Facebook

    What You Need To Know About OAuth2 And Logging In With Facebook

    by

    What You Need To Know About OAuth2 And Logging In With Facebook

    In case you’re wondering what OAuth2 is, it’s the protocol that enables anyone to log in with their Facebook account. It powers the “Log in with Facebook” button in apps and on websites everywhere.

    This article shows you how “Log in with Facebook” works and explains the protocol behind it all. You’ll learn why you’d want to log in with Facebook, Google, Microsoft or one of the many other companies that support OAuth2.

    We’ll look at two examples: why Spotify uses Facebook to let you log into the Spotify mobile app, and why Quora uses Google and Facebook to let you log into its website.

    Further Reading on SmashingMag: Link

    Before OAuth2 Link

    OAuth2 won a standards battle a few years ago. It’s the only authentication protocol supported by the major vendors. Google recommends OAuth2 for all of its APIs, and Facebook’s Graph API only supports OAuth2.

    The best way to understand OAuth2 is to look at what came before it and why we needed something different. It all started with Basic Auth.

    Basic Auth Link

    Authentication schemes focus on two key questions: Who are you? And can you prove it?

    The most common way to ask these two questions is with a username and password. The username says who you are, and the password proves it.

    Basic Auth was the first web authentication scheme. It sounds funny but “Basic authentication” was its actual name in the specification first published in 1999.

    Basic Auth allows web servers to ask for these credentials in a way that browsers understand. The server returns an HTTP response code of 401 (which means that authentication is required) and adds a special header to the response, named WWW-Authenticate, with a special value of Basic.

    When the browser sees this response code and this header, it shows a popup log-in dialog:

    5
    The Basic Auth log-in dialog

    The great part about Basic Auth is its simplicity. You don’t have to write a log-in screen. The browser handles all of that and just sends the username and password to the server. It also gives the browser a chance to specially handle the password, whether by remembering it for the user, getting it from a third-party plugin or taking the user’s credentials from their operating system.

    The downside is that you don’t get any control over the look and feel of the log-in screen. That means you can’t style it or add new functionality, such as a “Forgot password?” link or an option to create a new account. If you want more customization, you’d have to write a custom log-in form.

    Custom Log-In Forms Link

    Custom log-in forms give you all the control you could want. You write an HTML form and prompt for the credentials. You then submit the form and handle the log-in any way you want. You get total control: You can style it, ask for more details or add more links.

    Some websites, such as WordPress, use a simple form for the log-in screen:

    WordPress log-in screen6
    WordPress log-in screen

    LinkedIn lets users log in or create an account on the same page, without having to go to another part of the website:

    LinkedIn log-in screen7
    LinkedIn log-in screen (View large version8)

    Form-based log-in is very popular, but it has a major fundamental problem: Users have to tell the website their password.

    Keeping Secrets Secret Link

    In security circles, we call a password a secret. It’s a piece of information that only you have and proves that you’re you. The secret can also be more than just a password; we’ll talk more about that a little later.

    A website can take all the security measures in the world, but if the user shares their password, then that security is gone. Hackers breached the Gawker website in 2010, exposing many users’ passwords. While this was a problem for Gawker, the problem didn’t stop there. Most people reuse passwords, so hackers took the leaked data from Gawker and tried to log into more critical websites, such as Gmail, Facebook and eBay. Anyone who used a Gawker password for more important things lost a lot more than the latest gossip about Hulk Hogan’s sex tape.

    Making sure your users don’t reuse a password for multiple accounts is the first half of the problem — and it’s impossible. As long as people have to create different accounts all over the Internet, they will reuse their passwords.

    The second half of the problem is storing the passwords securely.

    When someone logs into your app, you need to verify their password, and that means you need a copy to verify it against. You could store all usernames and passwords in a database somewhere, but now you risk losing those passwords or getting hacked. The best practice is to use a hash function9, such as one of the SHA-210 functions. This function encrypts data in a way that you can never get it back, but you can replicate the encryption: “my password” will hash to something like bb14292d91c6d0920a5536bb41f3a50f66351b7b9d94c804dfce8a96ca1051f2 every time.

    And now we’re off in the tall grass: I’m telling you how to implement cryptographic protocols. Next, I’ll have to explain how to add a salt11 to your data and which textbooks to read on man-in-the-middle attacks. All you wanted to do is write an app, and now you have to become a security expert. We need to step back.

    OAuth2 Link

    You probably aren’t a security expert. Even if you are, I still wouldn’t trust you with my password. OAuth2 gives you a better way.

    As an example, I use Spotify on my iPad. I pay the company $10 a month to listen to music. Spotify gives me access on only three devices, so I need a password to make sure that nobody else uses my account. My Spotify account isn’t a big security concern. Getting hacked wouldn’t be the end of the world, but the company does have my credit card, so I want to make sure that I’m secure.

    I hardly ever log into Spotify, so I don’t want to create another account and have to remember another password. Spotify gives me a better option:

    Spotify log-in screen with _Log in with Facebook_ option12
    Spotify log-in screen with “Log in with Facebook” option (View large version13)

    I can use my Facebook account to log in. When I tap that button, Spotify sends me over to facebook.com, and I log in there. This might seem like a small detail, but it’s the most important step of the whole process.

    Facebook log-in screen for Spotify14
    Facebook log-in screen for Spotify (View large version15)

    Spotify’s programmers could have written a log-in form themselves and then sent my username and password to Facebook with a back-end API, but there are two big reasons why I don’t want them to do that:

    • I don’t trust Spotify with my Facebook password.

      I use Facebook to connect with friends and I don’t want to get hacked. I don’t trust that Spotify will handle the password correctly. I also don’t trust that it’ll avoid the temptation to do something funny with it. Maybe it would try to store it so that it can use it later. Maybe it has a bug that writes it to a file somewhere before sending it off to Facebook, so a hacker could grab it. I’m sorry, Spotify; I’m just not the trusting sort.
    • I don’t want to let Spotify do everything.

      I want Spotify to play music. I don’t want it to post to my friends’ walls when I listen to the Spice Girls. I also don’t want to let it download my list of friends and bug them to join Spotify. If I gave Spotify my Facebook password, then it could log in as me on Facebook; it could do anything I could do.

    There are also two big reasons why Spotify doesn’t want to do that:

    • Facebook has multiple options for me to log in.

      I can either log in with my username and password or I can log in with the Facebook app. I can also retrieve my password from Facebook or get help that Spotify can’t give me. If I just gave Spotify my password, I wouldn’t get any of those options.
    • My secret might not be a password.

      A password is enough security for my $10-per-month Spotify account, but it might not be enough for my bank or something even more important. There are a lot of other secrets I could provide: I might have a smart card, or I might be living in a Mission Impossible movie and use a retinal scanner.

    I’m not in a Mission Impossible movie, but in the real world, many companies use two-factor authentication, such as a password plus something else. The most common method is to use your phone. When you want to log in, the company sends you a text with a special code that lasts for a few minutes; you then type in the code or use an app to input it.

    Now the company is sure that nobody can log into your account without your phone. If someone steals your password, they still can’t log in. As long as you don’t lose your phone, everything is secure.

    Facebook isn’t the only OAuth2 provider. When I log into Quora with my Google account, Google tells me what Quora would like to do and asks if that’s OK:

    The step-2 dialog for the Google Quora OAuth2 process16
    The step-2 dialog for the Google and Quora OAuth2 process

    I might be fine with allowing Quora to view my email address and my basic profile data, but I don’t want it to manage my contacts. OAuth2 shows me all of the access that Quora wants, allowing me to pick and choose what I grant access to.

    So, those are the advantages of OAuth2. Let’s see how it works.

    How OAuth2 Works Link

    Facebook, Google and most of the other OAuth2 providers treat native clients differently from web clients. Native clients are considered more secure, and they get tokens and refresh tokens that can last for months. Web clients get much shorter tokens, which typically time out when the user closes the browser or hasn’t clicked on the website for a while.

    In both cases, the log-in process is the same. The difference is in how often the user needs to go through it.

    OAuth2 log-in follows these general steps:

    1. The user tries to do something that requires authentication.

      This could be as simple as opening an app or clicking a “Log in” button.
    2. The app or website determines that the user hasn’t logged in yet and starts the log-in process.

      It does this by opening a web page and sending it to a special URL at Facebook, Google or whatever other website is providing your OAuth2.

    Opening a new browser window for the OAuth2 provider is a crucial step. That’s what allows providers to show their own log-in forms and to ask each user for whatever log-in information they need. Most apps do this with an embedded web view.

    Along with the provider’s log-in URL, you need to send some URL parameters that tell the provider who you are and what you want to do:

    • client_id

      This tells the OAuth2 provider what your app is. You’ll need to register your app ahead of time to get a client ID.
    • redirect_uri

      This tells the provider where you want to go when you’re done. For a website, this could be back to the main page; a native app could go to a page that closes the web view.
    • response_type

      This tells the provider what you want back. Normally, this value is either token, to indicate that you want an access token, or code, to indicate that you want an access code. Providers may also extend this value to provide other types of data.
    • scope

      This tells the provider what your app wants to access. This is how Google knows that Quora is asking for access to manage your contacts. Each provider has a different set of scopes.

    There are additional fields that can add more security or help with caching. Certain providers also get to add more fields, but these four are the important ones.

    Once your app opens the web view, the provider takes over. They might just ask for a simple username and password, or they might present multiple screens requesting anything from the name of your favorite teacher to your mother’s maiden name. That’s all up to them. The important part is that, when the provider is done, they will redirect back to you and give you a token.

    It’s All About The Tokens Link

    When the process completes, the provider will give you a token and a token type. There are two types of tokens: access tokens and refresh tokens. The type of client you have will determine which types of tokens you’re allowed to ask for.

    When I log into my Spotify app, I can stay logged in for months, because the assumption is that my phone is used only by me. Facebook trusts the Spotify app to manage the tokens, and I trust the Spotify app not to lose the tokens.

    When the access token times out (typically, in one to two hours), Spotify can use the refresh token to get a new one.

    The refresh token lasts for months. That way, I only have to log in on my phone a few times a year. The downside is that if I lose that refresh token, someone else could use my account for months. The refresh token is so important that iOS provides a keychain for tokens, where it makes sure to encrypt and store them safely.

    Using OAuth2 in a web application works the same way. Instead of using a web view, you can open up the OAuth2 log-in request in a frame, an iframe or a separate window. You can also open it on the current page, but this would cause you to lose all JavaScript application state whenever someone needs to log in.

    When I log into Quora with my web browser, I don’t get a refresh token. They want the token to time out and prompt me to log in again when I quit my browser or even just go away for lunch. Untrusted clients can’t refresh the token because they can’t be trusted to hold on to the important refresh token. It’s more secure but less convenient, because they will prompt you to log in again much more frequently.

    Using OAuth2 In Your App Link

    Now you know how OAuth2 works, but you probably don’t want to implement your own OAuth2 client. You could go read the whole 75-page OAuth 2.0 specification17 if you’re having trouble sleeping, but you don’t need to. Some great libraries are out there for you to use.

    iOS has built-in support for OAuth2. Corrina Krych has a very helpful tutorial on using OAuth 2.0 with Swift18. It walks you through how to get a token, how to integrate the views in your app and where to store your tokens.

    Android also has built-in support for OAuth2. I must admit that I’m not as familiar with it because I focus on iOS, but there are some good sections in the documentation19 to show you examples and some open-source libraries to make it even easier.

    JavaScript doesn’t have built-in support for OAuth2, but there are clients for all of the major JavaScript libraries. React fully supports OAuth2. AngularJS has third-party support for OAuth2.0 for many projects. I even wrote one of them20.

    Once you have an OAuth2 client, you’ll need to choose a provider.

    Who Do You Trust? Link

    The big assumption here is that I trust Facebook more than Spotify. I have no good reason for that. Facebook doesn’t make its internal security public, and there’s no good way for me to audit it. Neither does Spotify. There’s no Consumer Reports for OAuth2 security. I’m basically trusting Facebook because it’s bigger. I trust Facebook because other people do.

    I’m also trusting Facebook more every time I click the “Log in with Facebook” button. If Facebook loses my password, then hackers will get access not just to my Facebook account, but also to my Spotify account and to any other service I’ve logged into with my Facebook account. The upside is that there is only one place I have to reset my password in order to fix the problem.

    I don’t have to trust Facebook, but I have to trust someone. Somebody has to authenticate me. I need to choose the provider I trust.

    Choosing an OAuth2 Provider Link

    Wikipedia maintains a list of OAuth providers21, but you wouldn’t care about most of them. The big ones are Facebook and Google. You might also want to look at Amazon or Microsoft.

    All four of them are big and easy to integrate with. Facebook provides instructions for registering an app22. Google has similar steps23. The basic idea is that you create a developer account and then create an app ID. The provider then gives you a client ID that you can use to make requests.

    You can also choose multiple providers. Quora allows you to log in with Facebook or Google; because they both use OAuth2, you may use the same code for both.

    What’s Missing From OAuth2 Link

    OAuth2 does a very good job of solving a complex problem, but it is missing a couple of things:

    • The standard isn’t completely standard.

      I’ve never been able to write a single OAuth2 client that can log into both Facebook and Google without a few if statements. Each interprets the specification differently, and there are little dissimilar details for each one. They also always have different ideas on what scopes to provide. Using a library to integrate with OAuth2 helps a lot with this problem, but it will never be 100% transparent in your app’s code.
    • Logging out is tricky.

      Every app or website that uses OAuth2 has a log-out button, but most will just forget the tokens without invalidating them. The app will forget about all of your current tokens and allow someone else to log in, but your tokens are still valid. If a hacker stole your token, they could still use it and log in as you.

    There is a separate specification for invalidating OAuth2 tokens24, but it wasn’t picked up by many of the major providers. OAuth2 doesn’t provide a way to recover if a hacker gets your refresh token; even though you can delete your local copy of the token, the hacker will still have it. Many providers give you a way to suspend your account, but there’s no standard way to do it.

    In defence of OAuth2, this is a difficult problem, because many providers use public-key cryptography25 to create stateless tokens. This means that the server doesn’t remember the tokens it has created, so it can’t forget them later.

    The other major problem with OAuth2 is that you are dependent on your provider. When Facebook goes down, so does the “Log in with Facebook” button in your app. If Google decides to start charging you to support OAuth2 or demands that you share your profit with it, there’s nothing you can do. This is the double-edged sword of trusting a provider: They are doing a lot for you, but they have control over your users.

    OAuth2 Runs The World Link

    Even with a couple of missing features and a big dependency, OAuth2 is still an excellent choice. It makes it easy for users to log into your app, to not have to remember a password for every website, and to trust your security. OAuth2 is a very popular choice. It dominates the industry. No other security protocol comes close to the adoption of OAuth2.

    Now you know where OAuth2 comes from and how it works. Go make smart choices about who to trust, stop reading articles about safely storing encrypted passwords, and spend more of your time writing your amazing app.

    (da, il, al)

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2013/11/four-ways-to-build-a-mobile-app-part1-native-ios/
    2. 2 https://www.smashingmagazine.com/2016/10/how-to-build-honest-uis-and-help-users-make-better-decisions/
    3. 3 https://www.smashingmagazine.com/2015/10/keep-your-android-app-popular-after-launch/
    4. 4 https://www.smashingmagazine.com/2016/11/playlists-fuel-coding-design-sessions/
    5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/03/1-basic_auth-preview-opt.png
    6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/03/7-wordpress_login-preview-opt.png
    7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2-linkedin_login-large-opt.png
    8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/03/2-linkedin_login-large-opt.png
    9. 9 https://en.wikipedia.org/wiki/Cryptographic_hash_function
    10. 10 https://en.wikipedia.org/wiki/SHA-2
    11. 11 https://en.wikipedia.org/wiki/Salt_(cryptography)
    12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3-login1-large-opt.png
    13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/3-login1-large-opt.png
    14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4-login2-large-opt.png
    15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/03/4-login2-large-opt.png
    16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/03/6-quora_auth-preview-opt.png
    17. 17 https://tools.ietf.org/html/rfc6749
    18. 18 https://www.raywenderlich.com/99431/oauth-2-with-swift-tutorial
    19. 19 https://developer.android.com/training/id-auth/authenticate.html
    20. 20 https://github.com/gromit-soft
    21. 21 https://en.wikipedia.org/wiki/List_of_OAuth_providers
    22. 22 https://developers.facebook.com/docs/apps/register
    23. 23 https://developers.google.com/identity/protocols/OAuth2
    24. 24 https://tools.ietf.org/html/rfc7009
    25. 25 https://www.smashingmagazine.com/2012/05/backpack-algorithms-and-public-key-cryptography-made-easy/

    ↑ Back to topTweet itShare on Facebook

    All Things Seem Possible In May! Unique Wallpapers To Freshen Up Your Desktop

    by

    All Things Seem Possible In May! Unique Wallpapers To Freshen Up Your Desktop

    We always try our best to challenge your creativity and get you out of your comfort zone. A great occasion to do so is our monthly wallpapers challenge which has been going on for eight years1 already.

    It’s an opportunity to let your ideas run wild and try something new, to indulge in a little project just for fun. Whatever technique you fancy, whatever story you want to tell with your wallpaper, the submissions to this challenge make a beautiful, unique bouquet of community artworks each month anew. Artworks that adorn desktops and, who knows, maybe even spark new ideas.

    This post features desktop wallpapers for May 2017, created by designers and artists from all across the globe. Each wallpaper comes in versions with and without a calendar and can be downloaded for free. Time to freshen up your desktop!

    Please note that:

    • All images can be clicked on and lead to the preview of the wallpaper,
    • You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

    All Is Possible In May

    “Edwin Way Teale once said that ‘[t]he world’s favorite season is the spring. All things seem possible in May.’ Now that the entire nature is clothed with grass and branches full of blossoms that will grow into fruit, we cannot help going out and enjoying every scent, every sound, every joyful movement of nature’s creatures. Make this May the best so far!” — Designed by PopArt Studio3 from Serbia.

    4

    Who Is Your Mother?

    “Someone who wakes up early morning, cooks you healthy and tasty meals, does your dishes, washes your clothes, sees you off to school, sits by your side and cuddles you when you are down with fever and cold, and hugs you when you have lost all hopes to cheer you up. Have you ever asked your mother to promise you never to leave you? No. We never did that because we are never insecure and our relationship with our mothers is never uncertain. We have sketched out this beautiful design to cherish the awesomeness of motherhood. Wishing all a happy Mothers Day!” — Designed by Acodez IT Solutions48 from India.

    Who Is Your Mother?49

    Spring Gracefulness

    “We don’t usually count the breaths we take, but observing nature in May, we can’t count our breaths being taken away.” — Designed by Ana Masnikosa91 from Belgrade, Serbia.

    Spring Gracefulness92

    Follow Your Dreams

    “May your wishes come true.” — Designed by Dan Di134 from Italy.

    Follow Your Dreams135

    Be On Your Bike!

    “May is National Bike Month! So, instead of hopping in your car, grab your bike and go. Our whole family loves that we live in our bike-friendly community. So, bike to work, to school, to the store, or to the park – sometimes it is faster. Not only is it good for the environment, but it is great exercise!” — Designed by Karen Frolo181 from the United States.

    Be On Your Bike!182

    Retro May

    “A maypole is a tall wooden pole erected as a part of various European folk festivals, around which a maypole dance often takes place. P.S. I love Super Mario.” — Designed by Jonny Jordan212 from Northern Ireland.

    Retro May213

    Hello May

    “In May nature is always beautiful, so I designed a wallpaper with flowers and leaves to celebrate the month of May. I always feel so happy in Spring so I wanted to give everyone a good feeling with this joyful wallpaper.” — Designed by Melissa Bogemans253 from Belgium.

    Hello May254

    Under The Sea

    “Spring is here! Flowers, grass… All of this is greener. But the sea is prepared for spring, too. Do you want to discover it with me?” — Designed by Verónica Valenzuela296 from Spain.

    Under The Sea297

    Beat The Heat

    “Summer means happy times and good sunshine. It means going to the beach, having fun.” — Designed by Suman Sil317 from India.

    Beat The Heat318

    Happy Birthday Frank!

    “Wizard of Oz is a classic! May 15th marks Lyman Frank Baum’s Birthday. To honour this legendary author’s birthday, I created this wallpaper with some of the characters from Wizard of Oz.” — Designed by Safia Begum348 from the United Kingdom.

    Happy Birthday Frank!349

    The Gentleman

    Designed by James Mitchell367 from the United Kingdom.

    The Gentleman368

    Rainy Days

    “Winter is nearly here in my part of the world and I think rainy days should be spent at home with a good book!” — Designed by Tazi Design388 from Australia.

    Rainy Days389

    Master Crow

    Designed by Doud413 from Belgium.

    Master Crow414

    May Is For Biking

    “Biking is truly the best way to get around Washington D.C. in spring. Every day, I ride past the U.S. Capitol building, the national mall with its Smithsonian Museums (free for all!), gardens and people, and I smile that I get to live in this beautiful city. I want to tell all the people trapped in cars and trains to get out and enjoy the weather! Ride a bike!” — Designed by The Hannon Group436 from Washington D.C.

    May Is For Biking437

    May-n-go

    “It’s May and it’s mango season! I belong to the coastal part of Western India which produces the finest Alphanso mangoes in the world. As May arrives, everyone eagerly waits for the first batch of ripe mangoes in India. It’s not fruit, it’s an obsession! I wish everyone happy may-n-go season!” — Designed by Hemangi Rane463 from Gainesville, Florida.

    May-n-go464

    Celestial Longitude Of 45°

    “Lixia is the 7th solar term according to the traditional East Asian calendars, which divide a year into 24 solar terms. It signifies the beginning of summer in East Asian cultures. Usually begins around May 5 and ends around May 21.” — Designed by Hong, Zi-Cing472 from Taiwan.

    Celestial Longitude Of 45°473

    May Echeveria

    “In May I think of flowers and I especially think of my favorite flowering plant Echeveria. I created ‘May’ using a vibrant Echeveria pattern.” — Designed by Cheryl Ferrell497 from San Francisco.

    May Echeveria498

    Labour Day

    “Labourers are the cogs in the wheel of Society. They are the ones who are keeping this kafkaesque machine going. Do we recognize that as a fact?” — Designed by Dipanjan Karmakar520 from India.

    Labour Day521

    Join In Next Month! Link

    Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

    A big thank you to all designers for their participation. Join in next month537!

    What’s Your Favorite? Link

    What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/tag/wallpapers/
    2. 2 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/
    3. 3 https://www.popwebdesign.net/index_eng.html
    4. 4 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/may-17-all-is-possible-in-may-full.jpg
    5. 5 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/may-17-all-is-possible-in-may-preview.jpg
    6. 6 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-320×480.jpg
    7. 7 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-640×480.jpg
    8. 8 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-800×480.jpg
    9. 9 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-800×600.jpg
    10. 10 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1024×768.jpg
    11. 11 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1024×1024.jpg
    12. 12 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1152×864.jpg
    13. 13 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×720.jpg
    14. 14 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×800.jpg
    15. 15 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×960.jpg
    16. 16 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1280×1024.jpg
    17. 17 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1366×768.jpg
    18. 18 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1440×900.jpg
    19. 19 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1440×1050.jpg
    20. 20 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1600×1200.jpg
    21. 21 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1680×1050.jpg
    22. 22 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1680×1200.jpg
    23. 23 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1920×1080.jpg
    24. 24 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1920×1200.jpg
    25. 25 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-1920×1440.jpg
    26. 26 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/cal/may-17-all-is-possible-in-may-cal-2560×1440.jpg
    27. 27 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-320×480.jpg
    28. 28 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-640×480.jpg
    29. 29 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-800×480.jpg
    30. 30 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-800×600.jpg
    31. 31 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1024×768.jpg
    32. 32 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1024×1024.jpg
    33. 33 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1152×864.jpg
    34. 34 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×720.jpg
    35. 35 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×800.jpg
    36. 36 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×960.jpg
    37. 37 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1280×1024.jpg
    38. 38 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1366×768.jpg
    39. 39 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1440×900.jpg
    40. 40 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1440×1050.jpg
    41. 41 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1600×1200.jpg
    42. 42 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1680×1050.jpg
    43. 43 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1680×1200.jpg
    44. 44 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1920×1080.jpg
    45. 45 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1920×1200.jpg
    46. 46 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-1920×1440.jpg
    47. 47 http://files.smashingmagazine.com/wallpapers/may-17/all-is-possible-in-may/nocal/may-17-all-is-possible-in-may-nocal-2560×1440.jpg
    48. 48 http://acodez.in/
    49. 49 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/may-17-who-is-your-mother-full.png
    50. 50 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/may-17-who-is-your-mother-preview.png
    51. 51 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-320×480.png
    52. 52 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-640×480.png
    53. 53 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-800×480.png
    54. 54 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-800×600.png
    55. 55 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1024×768.png
    56. 56 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1024×1024.png
    57. 57 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1152×864.png
    58. 58 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1280×720.png
    59. 59 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1280×960.png
    60. 60 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1280×1024.png
    61. 61 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1366×768.png
    62. 62 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1400×1050.png
    63. 63 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1440×900.png
    64. 64 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1600×1200.png
    65. 65 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1680×1050.png
    66. 66 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1680×1200.png
    67. 67 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1920×1080.png
    68. 68 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1920×1200.png
    69. 69 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-1920×1440.png
    70. 70 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/cal/may-17-who-is-your-mother-cal-2560×1440.png
    71. 71 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-320×480.png
    72. 72 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-640×480.png
    73. 73 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-800×480.png
    74. 74 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-800×600.png
    75. 75 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1024×768.png
    76. 76 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1024×1024.png
    77. 77 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1152×864.png
    78. 78 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280×720.png
    79. 79 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280×960.png
    80. 80 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1280×1024.png
    81. 81 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1366×768.png
    82. 82 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1400×1050.png
    83. 83 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1440×900.png
    84. 84 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1600×1200.png
    85. 85 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1680×1050.png
    86. 86 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1680×1200.png
    87. 87 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920×1080.png
    88. 88 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920×1200.png
    89. 89 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-1920×1440.png
    90. 90 http://files.smashingmagazine.com/wallpapers/may-17/who-is-your-mother/nocal/may-17-who-is-your-mother-nocal-2560×1440.png
    91. 91 https://www.creitive.com/
    92. 92 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/may-17-spring-gracefulness-full.png
    93. 93 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/may-17-spring-gracefulness-preview.png
    94. 94 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-320×480.png
    95. 95 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-640×480.png
    96. 96 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-800×480.png
    97. 97 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-800×600.png
    98. 98 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1024×768.png
    99. 99 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1024×1024.png
    100. 100 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1152×864.png
    101. 101 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×720.png
    102. 102 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×800.png
    103. 103 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×960.png
    104. 104 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1280×1024.png
    105. 105 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1400×1050.png
    106. 106 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1440×900.png
    107. 107 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1600×1200.png
    108. 108 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1680×1050.png
    109. 109 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1680×1200.png
    110. 110 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1920×1080.png
    111. 111 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1920×1200.png
    112. 112 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-1920×1440.png
    113. 113 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/cal/may-17-spring-gracefulness-cal-2560×1440.png
    114. 114 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-320×480.png
    115. 115 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-640×480.png
    116. 116 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800×480.png
    117. 117 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-800×600.png
    118. 118 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024×768.png
    119. 119 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1024×1024.png
    120. 120 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1152×864.png
    121. 121 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×720.png
    122. 122 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×800.png
    123. 123 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×960.png
    124. 124 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1280×1024.png
    125. 125 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1400×1050.png
    126. 126 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1440×900.png
    127. 127 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1600×1200.png
    128. 128 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680×1050.png
    129. 129 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1680×1200.png
    130. 130 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920×1080.png
    131. 131 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920×1200.png
    132. 132 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-1920×1440.png
    133. 133 http://files.smashingmagazine.com/wallpapers/may-17/spring-gracefulness/nocal/may-17-spring-gracefulness-nocal-2560×1440.png
    134. 134 https://www.behance.net/diuno07
    135. 135 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/may-17-follow-your-dreams-full.jpg
    136. 136 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/may-17-follow-your-dreams-preview.jpg
    137. 137 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-320×480.jpg
    138. 138 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-640×480.jpg
    139. 139 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-800×480.jpg
    140. 140 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-800×600.jpg
    141. 141 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1024×768.jpg
    142. 142 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1024×1024.jpg
    143. 143 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1152×864.jpg
    144. 144 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×720.jpg
    145. 145 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×800.jpg
    146. 146 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×960.jpg
    147. 147 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1280×1024.jpg
    148. 148 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1366×768.jpg
    149. 149 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1400×1050.jpg
    150. 150 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1440×900.jpg
    151. 151 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1600×900.jpg
    152. 152 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1600×1200.jpg
    153. 153 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1680×1050.jpg
    154. 154 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1680×1200.jpg
    155. 155 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1920×1080.jpg
    156. 156 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1920×1200.jpg
    157. 157 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-1920×1440.jpg
    158. 158 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/cal/may-17-follow-your-dreams-cal-2560×1440.jpg
    159. 159 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-320×480.jpg
    160. 160 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-640×480.jpg
    161. 161 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-800×480.jpg
    162. 162 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-800×600.jpg
    163. 163 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1024×768.jpg
    164. 164 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1024×1024.jpg
    165. 165 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1152×864.jpg
    166. 166 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×720.jpg
    167. 167 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×800.jpg
    168. 168 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×960.jpg
    169. 169 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1280×1024.jpg
    170. 170 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1366×768.jpg
    171. 171 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1400×1050.jpg
    172. 172 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1440×900.jpg
    173. 173 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1600×900.jpg
    174. 174 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1600×1200.jpg
    175. 175 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1680×1050.jpg
    176. 176 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1680×1200.jpg
    177. 177 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1920×1080.jpg
    178. 178 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1920×1200.jpg
    179. 179 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-1920×1440.jpg
    180. 180 http://files.smashingmagazine.com/wallpapers/may-17/follow-your-dreams/nocal/may-17-follow-your-dreams-nocal-2560×1440.jpg
    181. 181 https://www.codesign.cc/
    182. 182 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/may-17-be-on-your-bike-full.jpg
    183. 183 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/may-17-be-on-your-bike-preview.jpg
    184. 184 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1024×768.jpg
    185. 185 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1024×1024.jpg
    186. 186 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1280×800.jpg
    187. 187 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1280×960.jpg
    188. 188 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1280×1024.jpg
    189. 189 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1366×768.jpg
    190. 190 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1440×900.jpg
    191. 191 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1600×1200.jpg
    192. 192 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1680×1050.jpg
    193. 193 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1680×1200.jpg
    194. 194 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1920×1080.jpg
    195. 195 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1920×1200.jpg
    196. 196 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-1920×1440.jpg
    197. 197 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/cal/may-17-be-on-your-bike-cal-2560×1440.jpg
    198. 198 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1024×768.jpg
    199. 199 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1024×1024.jpg
    200. 200 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280×800.jpg
    201. 201 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280×960.jpg
    202. 202 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1280×1024.jpg
    203. 203 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1366×768.jpg
    204. 204 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1440×900.jpg
    205. 205 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1600×1200.jpg
    206. 206 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1680×1050.jpg
    207. 207 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1680×1200.jpg
    208. 208 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920×1080.jpg
    209. 209 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920×1200.jpg
    210. 210 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-1920×1440.jpg
    211. 211 http://files.smashingmagazine.com/wallpapers/may-17/be-on-your-bike/nocal/may-17-be-on-your-bike-nocal-2560×1440.jpg
    212. 212 https://jonnyjordan.com
    213. 213 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/may-17-retro-may-full.png
    214. 214 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/may-17-retro-may-preview.png
    215. 215 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-320×480.png
    216. 216 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-640×480.png
    217. 217 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-800×480.png
    218. 218 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-800×600.png
    219. 219 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1024×1024.png
    220. 220 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1152×864.png
    221. 221 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1280×720.png
    222. 222 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1280×960.png
    223. 223 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1280×1024.png
    224. 224 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1366×768.png
    225. 225 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1400×1050.png
    226. 226 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1440×900.png
    227. 227 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1600×1200.png
    228. 228 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1680×1050.png
    229. 229 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1680×1200.png
    230. 230 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1920×1080.png
    231. 231 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1920×1200.png
    232. 232 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-1920×1440.png
    233. 233 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/cal/may-17-retro-may-cal-2560×1440.png
    234. 234 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-320×480.png
    235. 235 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-640×480.png
    236. 236 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-800×480.png
    237. 237 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-800×600.png
    238. 238 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1024×1024.png
    239. 239 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1152×864.png
    240. 240 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1280×720.png
    241. 241 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1280×960.png
    242. 242 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1280×1024.png
    243. 243 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1366×768.png
    244. 244 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1400×1050.png
    245. 245 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1440×900.png
    246. 246 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1600×1200.png
    247. 247 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1680×1050.png
    248. 248 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1680×1200.png
    249. 249 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1920×1080.png
    250. 250 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1920×1200.png
    251. 251 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-1920×1440.png
    252. 252 http://files.smashingmagazine.com/wallpapers/may-17/retro-may/nocal/may-17-retro-may-nocal-2560×1440.png
    253. 253 http://melissa.bogemans.com
    254. 254 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/may-17-hello-may-full.png
    255. 255 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/may-17-hello-may-preview.png
    256. 256 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-320×480.png
    257. 257 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-640×480.png
    258. 258 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-800×480.png
    259. 259 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-800×600.png
    260. 260 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1024×768.png
    261. 261 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1024×1024.png
    262. 262 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1152×864.png
    263. 263 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×720.png
    264. 264 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×800.png
    265. 265 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×960.png
    266. 266 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1280×1024.png
    267. 267 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1400×1050.png
    268. 268 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1440×900.png
    269. 269 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1600×1200.png
    270. 270 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1680×1050.png
    271. 271 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1680×1200.png
    272. 272 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1920×1080.png
    273. 273 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1920×1200.png
    274. 274 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-1920×1440.png
    275. 275 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/cal/may-17-hello-may-cal-2560×1440.png
    276. 276 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-320×480.png
    277. 277 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-640×480.png
    278. 278 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-800×480.png
    279. 279 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-800×600.png
    280. 280 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1024×768.png
    281. 281 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1024×1024.png
    282. 282 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1152×864.png
    283. 283 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×720.png
    284. 284 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×800.png
    285. 285 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×960.png
    286. 286 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1280×1024.png
    287. 287 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1400×1050.png
    288. 288 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1440×900.png
    289. 289 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1600×1200.png
    290. 290 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1680×1050.png
    291. 291 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1680×1200.png
    292. 292 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1920×1080.png
    293. 293 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1920×1200.png
    294. 294 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-1920×1440.png
    295. 295 http://files.smashingmagazine.com/wallpapers/may-17/hello-may/nocal/may-17-hello-may-nocal-2560×1440.png
    296. 296 https://www.silocreativo.com/en/
    297. 297 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/may-17-under-the-sea-full.png
    298. 298 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/may-17-under-the-sea-preview.png
    299. 299 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-800×480.png
    300. 300 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1024×768.png
    301. 301 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1152×864.png
    302. 302 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1280×800.png
    303. 303 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1280×960.png
    304. 304 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1440×900.png
    305. 305 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1680×1200.png
    306. 306 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-1920×1080.png
    307. 307 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/cal/may-17-under-the-sea-cal-2560×1440.png
    308. 308 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-800×480.png
    309. 309 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1024×768.png
    310. 310 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1152×864.png
    311. 311 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1280×800.png
    312. 312 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1280×960.png
    313. 313 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1440×900.png
    314. 314 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1680×1200.png
    315. 315 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-1920×1080.png
    316. 316 http://files.smashingmagazine.com/wallpapers/may-17/under-the-sea/nocal/may-17-under-the-sea-nocal-2560×1440.png
    317. 317 http://www.itobuz.com/
    318. 318 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/may-17-beat-the-heat-full.jpg
    319. 319 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/may-17-beat-the-heat-preview.jpg
    320. 320 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×720.jpg
    321. 321 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×800.jpg
    322. 322 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×960.jpg
    323. 323 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1280×1024.jpg
    324. 324 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1366×768.jpg
    325. 325 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1400×1050.jpg
    326. 326 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1440×900.jpg
    327. 327 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1600×1200.jpg
    328. 328 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1680×1050.jpg
    329. 329 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1680×1200.jpg
    330. 330 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1920×1080.jpg
    331. 331 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1920×1200.jpg
    332. 332 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-1920×1440.jpg
    333. 333 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/cal/may-17-beat-the-heat-cal-2560×1440.jpg
    334. 334 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×720.jpg
    335. 335 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×800.jpg
    336. 336 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×960.jpg
    337. 337 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1280×1024.jpg
    338. 338 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1366×768.jpg
    339. 339 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1400×1050.jpg
    340. 340 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1440×900.jpg
    341. 341 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1600×1200.jpg
    342. 342 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1680×1050.jpg
    343. 343 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1680×1200.jpg
    344. 344 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1920×1080.jpg
    345. 345 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1920×1200.jpg
    346. 346 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-1920×1440.jpg
    347. 347 http://files.smashingmagazine.com/wallpapers/may-17/beat-the-heat/nocal/may-17-beat-the-heat-nocal-2560×1440.jpg
    348. 348 https://www.safiabegum.com/
    349. 349 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/may-17-happy-birthday-frank-full.png
    350. 350 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/may-17-happy-birthday-frank-preview.png
    351. 351 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-800×450.png
    352. 352 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1280×720.png
    353. 353 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1366×768.png
    354. 354 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1440×810.png
    355. 355 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1600×900.png
    356. 356 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1680×945.png
    357. 357 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-1920×1080.png
    358. 358 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/cal/may-17-happy-birthday-frank-cal-2560×1440.png
    359. 359 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-800×450.png
    360. 360 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1280×720.png
    361. 361 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1366×768.png
    362. 362 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1440×810.png
    363. 363 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1600×900.png
    364. 364 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1680×945.png
    365. 365 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-1920×1080.png
    366. 366 http://files.smashingmagazine.com/wallpapers/may-17/happy-birthday-frank/nocal/may-17-happy-birthday-frank-nocal-2560×1440.png
    367. 367 https://www.behance.net/jamesmitchell23
    368. 368 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/may-17-the-gentleman-full.png
    369. 369 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/may-17-the-gentleman-preview.png
    370. 370 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1280×720.png
    371. 371 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1280×800.png
    372. 372 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1366×768.png
    373. 373 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1440×900.png
    374. 374 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1680×1050.png
    375. 375 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1920×1080.png
    376. 376 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-1920×1200.png
    377. 377 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-2560×1440.png
    378. 378 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/cal/may-17-the-gentleman-cal-2880×1800.png
    379. 379 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1280×720.png
    380. 380 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1280×800.png
    381. 381 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1366×768.png
    382. 382 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1440×900.png
    383. 383 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1680×1050.png
    384. 384 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1920×1080.png
    385. 385 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-1920×1200.png
    386. 386 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-2560×1440.png
    387. 387 http://files.smashingmagazine.com/wallpapers/may-17/the-gentleman/nocal/may-17-the-gentleman-nocal-2880×1800.png
    388. 388 http://www.tazi.com.au
    389. 389 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/may-17-rainy-days-full.png
    390. 390 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/may-17-rainy-days-preview.png
    391. 391 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-320×480.png
    392. 392 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-640×480.png
    393. 393 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-800×600.png
    394. 394 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1024×768.png
    395. 395 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1152×864.png
    396. 396 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1280×720.png
    397. 397 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1280×960.png
    398. 398 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1600×1200.png
    399. 399 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1920×1080.png
    400. 400 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-1920×1440.png
    401. 401 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/cal/may-17-rainy-days-cal-2560×1440.png
    402. 402 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-320×480.png
    403. 403 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-640×480.png
    404. 404 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-800×600.png
    405. 405 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1024×768.png
    406. 406 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1152×864.png
    407. 407 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1280×720.png
    408. 408 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1280×960.png
    409. 409 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1600×1200.png
    410. 410 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1920×1080.png
    411. 411 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-1920×1440.png
    412. 412 http://files.smashingmagazine.com/wallpapers/may-17/rainy-days/nocal/may-17-rainy-days-nocal-2560×1440.png
    413. 413 http://www.facebook.com/doud.design
    414. 414 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/may-17-master-crow-full.jpg
    415. 415 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/may-17-master-crow-preview.jpg
    416. 416 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1366×768.jpg
    417. 417 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1400×1050.jpg
    418. 418 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1440×900.jpg
    419. 419 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1600×1200.jpg
    420. 420 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1680×1050.jpg
    421. 421 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1680×1200.jpg
    422. 422 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1920×1080.jpg
    423. 423 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1920×1200.jpg
    424. 424 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-1920×1440.jpg
    425. 425 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/cal/may-17-master-crow-cal-2560×1440.jpg
    426. 426 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1366×768.jpg
    427. 427 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1400×1050.jpg
    428. 428 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1440×900.jpg
    429. 429 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1600×1200.jpg
    430. 430 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1680×1050.jpg
    431. 431 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1680×1200.jpg
    432. 432 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1920×1080.jpg
    433. 433 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1920×1200.jpg
    434. 434 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-1920×1440.jpg
    435. 435 http://files.smashingmagazine.com/wallpapers/may-17/master-crow/nocal/may-17-master-crow-nocal-2560×1440.jpg
    436. 436 http://bit.ly/TheHannonGroup
    437. 437 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/may-17-may-is-for-biking-full.png
    438. 438 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/may-17-may-is-for-biking-preview.png
    439. 439 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-320×480.png
    440. 440 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-640×480.png
    441. 441 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-800×600.png
    442. 442 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1024×768.png
    443. 443 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1280×960.png
    444. 444 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1440×900.png
    445. 445 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1600×1200.png
    446. 446 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1680×1050.png
    447. 447 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1680×1200.png
    448. 448 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1920×1080.png
    449. 449 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-1920×1400.png
    450. 450 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/cal/may-17-may-is-for-biking-cal-2560×1440.png
    451. 451 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-320×480.png
    452. 452 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-640×480.png
    453. 453 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-800×600.png
    454. 454 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1024×768.png
    455. 455 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1280×960.png
    456. 456 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1440×900.png
    457. 457 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1600×1200.png
    458. 458 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1680×1050.png
    459. 459 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1680×1200.png
    460. 460 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1920×1080.png
    461. 461 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-1920×1400.png
    462. 462 http://files.smashingmagazine.com/wallpapers/may-17/may-is-for-biking/nocal/may-17-may-is-for-biking-nocal-2560×1440.png
    463. 463 https://www.facebook.com/kilmouskiscraftbox/
    464. 464 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/may-17-may-n-go-full.png
    465. 465 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/may-17-may-n-go-preview.png
    466. 466 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/cal/may-17-may-n-go-cal-1280×720.png
    467. 467 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/cal/may-17-may-n-go-cal-1920×1080.png
    468. 468 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/cal/may-17-may-n-go-cal-2560×1440.png
    469. 469 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/nocal/may-17-may-n-go-nocal-1280×720.png
    470. 470 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/nocal/may-17-may-n-go-nocal-1920×1080.png
    471. 471 http://files.smashingmagazine.com/wallpapers/may-17/may-n-go/nocal/may-17-may-n-go-nocal-2560×1440.png
    472. 472 https://sunday1216.tumblr.com/
    473. 473 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/may-17-celestial-longitude-of-45-full.png
    474. 474 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/may-17-celestial-longitude-of-45-preview.png
    475. 475 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1024×768.png
    476. 476 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1080×1920.png
    477. 477 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1280×720.png
    478. 478 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1280×800.png
    479. 479 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1280×960.png
    480. 480 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1366×768.png
    481. 481 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1400×1050.png
    482. 482 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1680×1050.png
    483. 483 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1920×1080.png
    484. 484 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-1920×1200.png
    485. 485 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/cal/may-17-celestial-longitude-of-45-cal-2560×1440.png
    486. 486 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1024×768.png
    487. 487 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1080×1920.png
    488. 488 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280×720.png
    489. 489 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280×800.png
    490. 490 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1280×960.png
    491. 491 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1366×768.png
    492. 492 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1400×1050.png
    493. 493 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1680×1050.png
    494. 494 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1920×1080.png
    495. 495 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-1920×1200.png
    496. 496 http://files.smashingmagazine.com/wallpapers/may-17/celestial-longitude-of-45/nocal/may-17-celestial-longitude-of-45-nocal-2560×1440.png
    497. 497 https://cherylferrell.myportfolio.com/
    498. 498 http://files.smashingmagazine.com/wallpapers/may-17/may/may-17-may-full.png
    499. 499 http://files.smashingmagazine.com/wallpapers/may-17/may/may-17-may-preview.png
    500. 500 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-320×480.png
    501. 501 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-800×600.png
    502. 502 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-960×560.png
    503. 503 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1024×1024.png
    504. 504 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1280×800.png
    505. 505 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1280×1024.png
    506. 506 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1440×900.png
    507. 507 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1920×1080.png
    508. 508 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1920×1200.png
    509. 509 http://files.smashingmagazine.com/wallpapers/may-17/may/cal/may-17-may-cal-1920×1440.png
    510. 510 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-320×480.png
    511. 511 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-800×600.png
    512. 512 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-960×560.png
    513. 513 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1024×1024.png
    514. 514 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1280×800.png
    515. 515 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1280×1024.png
    516. 516 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1440×900.png
    517. 517 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1920×1080.png
    518. 518 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1920×1200.png
    519. 519 http://files.smashingmagazine.com/wallpapers/may-17/may/nocal/may-17-may-nocal-1920×1440.png
    520. 520 http://0effortthemes.com/
    521. 521 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/may-17-labour-day-full.jpg
    522. 522 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/may-17-labour-day-preview.jpg
    523. 523 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1280×720.jpg
    524. 524 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1280×800.jpg
    525. 525 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1280×960.jpg
    526. 526 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1366×768.jpg
    527. 527 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1400×1050.jpg
    528. 528 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1440×900.jpg
    529. 529 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/cal/may-17-labour-day-cal-1920×1080.jpg
    530. 530 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1280×720.jpg
    531. 531 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1280×800.jpg
    532. 532 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1280×960.jpg
    533. 533 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1366×768.jpg
    534. 534 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1400×1050.jpg
    535. 535 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1440×900.jpg
    536. 536 http://files.smashingmagazine.com/wallpapers/may-17/labour-day/nocal/may-17-labour-day-nocal-1920×1080.jpg
    537. 537 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

    ↑ Back to topTweet itShare on Facebook

    Web Development Reading List #180: DNS Over HTTPS, HAProxy Performance, And Decentralized AI

    by

    Web Development Reading List #180: DNS Over HTTPS, HAProxy Performance, And Decentralized AI

    We all have fears and doubts. It’s not different for you than for me. Over the last weeks, “well-known” people on Twitter started to share mistakes they made in life or their careers. I think it’s very helpful to read that we all make mistakes.

    We all have to learn and improve, and people who are on a stage at an event for the 100th time are still known to be extremely nervous. Let’s realign our views, our expectations and, instead of being afraid of making mistakes, try to improve our knowledge and let others learn from the things that didn’t go as expected.

    Further Reading on SmashingMag: Link

    Concept & Design Link

    7
    Using React to write Sketch files? React-sketchapp8 makes it possible. (Image credit9)

    Tools & Workflows Link

    • Caddy, an HTTP/2 server that has automatic HTTPS built in, was released in version 0.1010 and brings man-in-the-middle (MITM) attack detection and HTTP/2 Server Push.
    • Kenneth Auchenberg published a new tool called “Remote Debug iOS WebKit Adapter11.” It lets you debug Safari and other WebViews remotely12 on iOS via Developer Tools in Chrome, Firefox, and even in Microsoft’s VS Code.
    • secureoperator13 is a proxy for DNS that uses Google’s DNS over HTTPS14 technology. A nice experiment that brings security to a still weak bridge. And while technologies to add security to the DNS do already exist (DANE and DNSSEC, for example), they’re not as widespread and not free of weak points. However, using DNS via Google also means trusting a third party that could intercept the requests at any time. One thing is for certain, according to their privacy policy15, they do store logs with your IP address and other information.
    • Due to its improvements over MySQL and independence from Oracle, MariaDB is getting lots of traction at the moment. However, there are certain differences in how MariaDB/MySQL and PostgreSQL handle data16. If you take a closer look, you’ll notice that running into weird miscalculations or errors is much more likely with MariaDB/MySQL while PostgreSQL will return a strict fail if a value doesn’t match a field type.

    Security Link

    • Clémentine Maurice and other researchers found a way to steal data from the CPU cache shared by two Virtual Machines17. This was demonstrated on Amazon Web Services but affects all Virtual Machine-based environments. Clear evidence that we still have little idea of how secure or insecure cloud environments actually are.

    Privacy Link

    • Amazon announced “Echo Look”, an improved Alexa device that does not only listen to a room’s activity but also has a camera18 to see what’s happening. The purpose? To give you a style check. And as you would expect from Amazon, they say they store the captured data for an indefinite amount of time in their cloud. I bet that a lot of people will buy this device despite of this, even those who claim to care about their privacy.

    Web Performance Link

    HTML & SVG Link

    Booking.com font choices21
    Booking.com provides valuable insights into how they reconsidered their long-established font choices22 to improve readability. (Image credit: Cătălin Bridinel23)

    JavaScript Link

    Going Beyond… Link

    • Jonathan Taplin wrote an essay about the tech moguls dominating the free market today25 and why it’s important that we as consumers are aware of the huge influence monopolies have not only on our lives but on politics, too.
    • The outdoor clothing manufacturer Patagonia started to sell used clothing for little money26. An unusual move for such a company as it undermines its traditional business model of selling new clothes.
    • Iterating on their already existing, centralized AI technology, Google researchers shared their vision of federated machine learning27. This basically means that every Google device will contribute to the training data by locally processing the information — a much more efficient and less costly approach for Google. The technology is already being tested on Android via Google’s software keyboard. Let’s see how this will work out when it comes to dealing with fake news, spam content or violence promotion in Google’s search results.
    • Mastodon is a relatively new social microblogging network, aiming to replace Twitter. It uses a federated approach, which means everyone can create an instance that shares data with other instances. But it’s not as easy as one would initially think. By providing an instance, you suddenly become responsible for the content of other people, which can be a pretty nasty experience as this story shows28.

    And with that, I’ll close for this week. If you like what I write each week, please support me with a donation29 or share this resource with other people. You can learn more about the costs of the project here30. It’s available via email, RSS and online.

    — Anselm

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
    2. 2 https://www.smashingmagazine.com/2012/05/how-to-choose-the-right-face-for-a-beautiful-body/
    3. 3 https://www.smashingmagazine.com/2017/01/algorithm-driven-design-how-artificial-intelligence-changing-design/
    4. 4 https://www.smashingmagazine.com/2017/04/photoshop-illustrator-sketch-ui/
    5. 5 https://github.com/airbnb/react-sketchapp
    6. 6 http://airbnb.design/painting-with-code/
    7. 7 https://github.com/airbnb/react-sketchapp
    8. 8 https://github.com/airbnb/react-sketchapp
    9. 9 https://github.com/airbnb/react-sketchapp
    10. 10 https://caddyserver.com/blog/caddy-0_10-released
    11. 11 https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter
    12. 12 https://medium.com/@auchenberg/hello-remotedebug-ios-webkit-adapter-debug-safari-and-ios-webviews-from-anywhere-2a8553df7465
    13. 13 https://github.com/fardog/secureoperator
    14. 14 https://developers.google.com/speed/public-dns/docs/dns-over-https
    15. 15 https://developers.google.com/speed/public-dns/privacy
    16. 16 http://www.cybertec.at/why-favor-postgresql-over-mariadb-mysql/
    17. 17 https://www.theregister.co.uk/2017/03/31/researchers_steal_data_from_shared_cache_of_two_cloud_vms/
    18. 18 https://motherboard.vice.com/en_us/article/amazon-echo-look-bedroom-camera
    19. 19 https://medium.freecodecamp.com/how-we-fine-tuned-haproxy-to-achieve-2-000-000-concurrent-ssl-connections-d017e61a4d27
    20. 20 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
    21. 21 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
    22. 22 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
    23. 23 https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
    24. 24 https://medium.com/@jessebeach/dealing-with-focus-and-blur-in-a-composite-widget-in-react-90d3c3b49a9b
    25. 25 https://www.nytimes.com/2017/04/22/opinion/sunday/is-it-time-to-break-up-google.html?_r=0
    26. 26 https://python.sh/2017/4/patagonia-begins-selling-used-clothing
    27. 27 https://research.googleblog.com/2017/04/federated-learning-collaborative.html
    28. 28 https://cherubini.casa/why-i-shut-down-wizards-town-and-left-mastodon-6d4e631346b3
    29. 29 https://wdrl.info/donate
    30. 30 https://wdrl.info/costs/

    ↑ Back to topTweet itShare on Facebook

    Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers

    by

    Moving From Photoshop And Illustrator To Sketch: A Few Tips For UI Designers

    I’ve been a long time Photoshop and Illustrator user. Both programs are really useful and powerful, and they’ll remain a key part of any digital artist’s or designer’s toolset, including mine. However, for all user interface, web and icon design workflows, I recently converted to Sketch1. Here is why.

    While Photoshop is awesome at what it does, defining what it is might not be so easy anymore. I remember watching a storyboarding tutorial2 by Massive Black3’s El Coro4 (unfortunately, it doesn’t seem to be available for sale anymore). In it, he says that 17 or so years ago, Adobe had no idea that digital artists were using Photoshop to digitally paint pictures! So, it had to catch up with its own user base by adding more — you guessed it — painting features.

    I feel that the same kind of thing happened a bit later with Photoshop and user interface design. It was the only robust graphics tool that people knew or had access to some years ago, so they started using it for UI design, as well as for illustration and photo editing5.

    6
    Photoshop is still widely used7 as a tool for UI design, even if Sketch has taken the lead. (Poll source8: @smashingmag9.)

    Then, as a result, Adobe started adding more and more features targeted at interface designers, even though the program was initially intended and designed for a completely different purpose.

    Switching To Illustrator: The Annoyances Link

    From Photoshop to Illustrator Link

    Because using Photoshop for user interface design is, in my view, a needlessly painful experience (and I am not alone10 in this view), I first tried switching to Illustrator. Illustrator made things much better for me for a few reasons: Dealing with a lot of artboards is easier; I can select any object on any layer or any artboard with a single click, without ever having to hunt down layer names in the Layers panel; also, exporting assets in the latest Creative Cloud versions has been greatly improved; and so on.

    Illustrator’s vector nature has a lot of advantages for designing icons and scalable interfaces, and using it I find it much easier and quicker to draw, modify and expand shapes. It can export my assets to SVG, and it gives me control over the SVG output code. Illustrator also feels more appropriate for this type of work because the paradigm of working with vector graphics is very similar to working with web technologies (containers, CSS styles, document structure, vector fonts). After all, web browsers are essentially vector-rendering engines.

    Problems With Illustrator Link

    However, I hit some silly problems every now and again. For example, previewing a design on a mobile device — there is simply no software that allows me to do this directly. Photoshop has Device Preview11, but it’s for iOS only, and there is no such tool for Illustrator. So, I had to use a third-party tool named The Preview12. And every time I wanted to device-preview a screen, I had to copy my Illustrator artboard into Photoshop, scale it up (I always work in mdpi13, and my devices are xhdpi or xxhdpi), and then run The Preview on my device — which sometimes refused to work and which doesn’t support scrolling.

    Also, even with the addition of CC libraries14 and with Illustrator’s dynamic symbols feature, some tasks remained kind of annoying or tedious, like using a large set of icons. In Illustrator, there is no simple and straightforward way to quickly add a premade icon and to quickly override its size or color (without creating a bunch of duplicates).

    Specifying My Files Link

    Specifying my files15 was a problem for me, too. It is, of course, my job to provide developers with a well-specified design. This helps to prevent questions such as “What is the distance between this element and that element?” and “What font size is this text object?”

    Photoshop has a whole bunch of specification tools, but I’ve never used them. There aren’t that many for Illustrator, and all have their drawbacks. Arguably, the most feature-full is Specctr16, but I had technical difficulties running it (also, it has no dp as a measuring unit). So, I ended up using a slightly modified version of the Illustrator Specify script17 to measure the sizes of and distances between objects for design specifications. However, as great as that script is, specifying my designs with it was still rather tedious and time-consuming.

    My Deal-Breaker Link

    While these problems are arguably annoying and slow down my work, they aren’t things that I couldn’t get used to and overcome. However, the two Android projects I’m currently working on are a file manager and an email client — which means that a lot of my high-fidelity mockups are full of lists, avatars, file icons, file sizes and other types of data.

    To further complicate the situation, both projects come with a light and a dark UI theme. Also, a lot of my designs need to be tailored to both phones and tablets in both landscape and portrait modes. This means a lot of copying and pasting, symbol-editing, typing, selecting and deselecting, and so on.

    Illustrator’s Dynamic Symbols Link

    Admittedly, Illustrator’s symbols and libraries features can be handy and save me some manual labor. But they can be quite limited — for example, one can’t have multiple iterations of the same symbol or of the same library graphic. For me, this meant that I couldn’t use the same symbol (say, an icon or a button) in both my dark and light theme mockups because I couldn’t change its color without modifying the symbol graphic itself. The same goes for the library feature.

    Problems With Data-Driven Design in Illustrator Link

    Now, the most efficient way for me to avoid having to copy and paste is to have all text entries — see “Subject,” “From,” “Content Preview” and “Time” in the example below — as variables and to dynamically load predefined strings of data for each entry.

    18
    These are the four strings of data for my email app’s Inbox mockup.

    This is, in fact, possible in Illustrator19. I could create my spreadsheet with data, import it in Illustrator with the help of a plugin20 and be ready… with one huge caveat, however: There can be only one variable entry per iteration of the file!

    This makes the feature perfect for something like a business-card project, where you’d want to keep the design the same and only change some text (such as the name and phone number). When you export the final PDF files, you’d simply iterate a hundred times through a spreadsheet of data to get a hundred different names and phone numbers. This would produce a hundred nice, corporate business cards for a hundred happy employees.

    However, this behavior renders Illustrator’s data features pretty much useless to me, because I need to populate a lot of of text entries simultaneously, each with a different string, on multiple artboards, and so on.

    A Potential Creative Cloud Solution? Link

    If you must stay in the Adobe Creative Cloud realm, or if switching to a Mac is not an option, there still might be a solution. Adobe’s new tool, Adobe XD21, handles working with dynamic data22 fairly well. However, because it’s a new tool, it can feel limited in other ways. Also, Adobe XD’s Windows version currently lags behind the Mac one.

    The Solution: Switching To Mac And Sketch Link

    Because of all of the little (and big) issues mentioned, I started to search for a better solution. So, I thought about the Sketch app.

    I hadn’t had a Mac for the previous three years, and when I did have one I’d never used Sketch on it. However, I missed the operating system, and it always bothered me that Mac users always get the best software gadgets! I did plenty of research on Sketch and on other tools such as Origami, and I got tired of hacking my way through Framer6223 on Windows.

    So, a couple of months ago, I decided to switch back to a Mac — both at home and at work.

    Enter Sketch! Link

    Sketch cures a lot of my pains — and not just by itself, but also with the help of its vast plugin ecosystem. Compared to Illustrator and Photoshop, Sketch is focused on the needs of the UI and icon designer. And, unlike Photoshop, Sketch was made for UI design24 right from the start; UI wasn’t an afterthought.

    Of course, it’s not perfect. I miss things, such as Illustrator’s Knife tool when I draw illustrations; it lacks some handy filters; there is no basic Photoshop Layer Styles alternative; and so on. But that’s kind of beside the point. Sketch doesn’t seem to be aimed at artists doing complex vector illustrations, and it only covers the very basics of raster editing.

    At first, if you’ve been using Photoshop for all of your design tasks so far, you’ll be in awe when you see how you’re able to directly select any piece of graphic on any layer with just a couple of clicks or less. And if you (like me) have been also using Illustrator, then you’ll be impressed by Sketch’s more powerful Symbols feature, better artboard organization and more intuitive interface.

    Measuring distances and objects is so much fun in Sketch! I just hold the Alt key, mouse over the objects on the canvas, and I’m able to see all margins, paddings and sizes. I can adjust them on the fly and just have fun, while keeping my designs really neat.

    25
    All margins, paddings and sizes seen at a glance

    The little things are also important! One example is the ability to do simple math in an object property’s input field in the Inspector panel26. I can scale a rectangle object by typing something like 12 / 3 or 2 + 2. Very helpful sometimes.

    InVision’s Craft Plugins Link

    I’ve already mentioned Sketch’s plugins. And InVision’s Craft plugins27 are probably among the most powerful and useful.

    Craft actually solved my aforementioned problem of loading data into my designs. For the email app I’m working on, I can now create a list of (actual or fictitious) email addresses, subjects, content strings and more in a spreadsheet. I only need to make sure that every spreadsheet column’s first entry serves as the title (for example, “Content”).

    28
    The first row of my document (View large version29)

    Unfortunately, the Craft plugin doesn’t support importing data in XLS, CSV or ODS format. It only supports JSON (a file format specifically for exchanging data). I use Google Spreadsheets, and because it doesn’t support direct exporting to JSON, I have to first save to a CSV file, then use an online CSV-to-JSON converter to get the format I need.

    30
    Download your spreadsheet as a comma-separated values (CSV) document. (View large version31)
    Here’s how CSV looks like, compared to JSON32
    Here’s how CSV looks compared to JSON. (View large version33)

    Now, I only have to save the JSON file on my computer and drag it into Craft’s Data panel.

    34
    Importing my JSON file

    The entire conversion process might sound complicated, but it only takes a couple of minutes.

    Now, I only need to tell Craft which Sketch text field corresponds to which JSON string. Then, I use the duplicate functionality to make as many duplicate entries as I want:

    35
    Assigning and duplicating data strings

    As for those avatars with letters inside, I don’t need to bother with a spreadsheet. Here’s what I did instead: I used a nested symbol36 to tint each avatar with a different color. And Sketch’s overrides feature does the job of dynamically replacing each letter!

    37
    Sketch’s native overrides feature is what makes its dynamic symbols so powerful38.

    This approach works well for expanding phone designs into tablet designs because I only need to adjust Sketch’s text fields.

    39
    Your data is there! Simply adjust the width of the text fields according to your needs.

    My Other Favorite Sketch Plugins Link

    It’s not only about the Craft plugin, of course. I rely on quite a few plugins in my daily work, and all of them help me to be more efficient.

    Sketch Style Inventory Plugin Link

    As mentioned, the projects I’m currently involved in come with a light and a dark theme. Having to provide designs for both themes and for each screen can be tedious and time-consuming. However, using Sketch’s Style Inventory40 plugin, I can select all items in all of my artboards by name or by current color or by another property, and then batch-adjust them as I like.

    41
    Batch-selecting design elements is super-easy with the Sketch Style Inventory plugin. (View large version42)
    43
    The dark theme mockup with the exact same data.

    Thus, I can recreate my designs for different themes in just a minute!

    Sketch Icon Font Plugin Link

    Adding a Material icon (or an icon from another font icon set) is a no-brainer with the Sketch Icon Font plugin44. It takes only seconds! I don’t have to leave Sketch, and the icon can be scaled, colored and edited in any way I like.

    45
    The entire Material icon set is at my disposal with just a couple of clicks. (View large version46)

    Skala Preview Plugin Link

    Sketch includes previewing functionality called Mirror47. However, it works only with iOS devices and web browsers (for web design mockups). Skala Preview48, on the other hand, provides excellent device-previewing functionality and (what is most important to me at the moment) support for Android devices.

    Skala by itself does not support Sketch directly, but there is the Sketch Preview49 plugin to help with that. It’s reliable and has never crashed for me, but every now and again I have connection issues. What I love about it is the simple scrolling functionality that The Preview and Photoshop combination lacks.

    Swatches Plugin Link

    Sketch has functionality similar to Photoshop’s and Illustrator’s swatches. It’s called global and document colors, but it has some minor limitations. For example, the palette colors can’t have names; they can’t be organized in subfolders; and no commonly used palettes come preloaded in Sketch. Also, I think the margins around the color squares are a bit too wide, so a large palette might not fit comfortably in there.

    50
    Sketch’s native palette isn’t that comfy for some use cases.

    The Swatches51 plugin improves the situation. It comes preloaded with plenty of standard palettes, such as the Material palette, Pantone and others. I can mouse over a color to see its name, and I can apply it as a fill or stroke color or copy its HEX value with just a click.

    52
    The Swatches plugin with the Material design palette

    Zeplin Plugin Link

    Last, but not least, I need plugins to create design specifications. One of them is Zeplin.

    Zeplin53 is a cloud-based toolset for creating automated design specifications and for designer-developer collaboration. Its main feature is that it reads and parses all of your Sketch artboards in a file, uploads them to a web server, and provides a web interface for other collaborators to view them. Once your artboards have been crunched and uploaded, anyone who checks them out on a computer can click and hover about and see all margins, paddings, fonts, HEX codes and other properties of all objects in the design.

    54
    Zeplin plugin in action

    This approach to design specifications is quite helpful because it saves the designer from the time-consuming task of doing specifications manually. It could also reduce confusion and misunderstanding with the development team.

    Other features of Zeplin that I find quite helpful are: organization for multiple projects, screen versioning (kind of like Git55 but designed for screen mockups), project style guidelines, and optimized asset exporting.

    A potential downside of Zeplin is that some companies may have concerns over its cloud-based nature.

    Sketch Measure Plugin Link

    Zeplin is good for managing and working on entire projects that contain many screens. However, if you’re looking for a simpler (and free) solution, you may want to choose something else: Sketch Measure56.

    Using this plugin, you can specify your own design document or let the plugin do the dirty work. Like Zeplin, it will export a web page with your design on it, together with an interactive specification overlay! Unlike Zeplin, everything is done locally, but you won’t have the extra project-management tools at your disposal.

    57
    Sketch Measure plugin in action

    Compress the generated files to ZIP, give them to your developer, and you might save yourself quite a few hours of work!

    Managing My Sketch Plugins Link

    With so many plugins, one needs a reliable way to find, install, manage and update them. Sketch’s built-in manager only lists the plugins that are already available, allowing the user to enable and disable each one. This can be useful when you want to debug a plugin that’s acting up, but having to manually search for and install new plugins can be a hassle.

    The best solution to this problem is probably the Sketch Toolbox58 app, a simple yet very useful tool. It allows you to install (and uninstall) almost any Sketch plugin out there with a single click. Highly recommended!

    Sketch Toolbox’s long list of available plugins.59
    Sketch Toolbox’s long list of available plugins (View large version60)

    Prototyping And Framer Integration Link

    Sometimes, static mockups don’t quite cut it if you need to communicate a more complex idea to developers, particularly for motion design and microinteractions. Some very good tools for interactive prototyping61 are out there, and each takes a different approach to the task.

    My prototyping tool of choice is Framer6223.

    Framer Link

    Framer takes the programming approach: The designer is required to program their prototype in CoffeeScript63. The prototype is immediately previewable in Framer Studio and can also be viewed on actual devices or in the browser.

    I personally like the coding approach to creating prototypes, despite the steep learning curve. It will pay off eventually, because programming gives me a lot of control, and it also forces me to think a bit like a developer, which can be an advantage.

    64
    Meet Framer. On the left side is the code editor; on the right is my preview; and in the middle is the layer structure of the prototype (or of the imported Sketch file). (View large version65)

    Using Framer and Sketch Link

    Including Framer in my Sketch workflow was fairly easy because it integrates by default. I only need to import the Sketch design file I’m working on, and I can immediately start to animate or otherwise manipulate any group of layers. The Framer-Sketch integration supports multiple artboards, but you can only import a single page at a time.

    I’m still figuring out the most efficient way to work with Sketch and Framer. Currently, I think it’s best to have large per-project Sketch files, with separate pages for each screen of the app (or website) I’m working on. This enables me to easily reuse and organize all project assets, such as icons and buttons, into dynamic symbols. However, this approach produces larger files and slows down the Framer importing process. So, usually I’ll copy and paste the elements or screens that I want to prototype into a new file and then import them from there.

    How Photoshop And Illustrator Fit My Workflow Now Link

    I’ve moved to Sketch, but Photoshop and Illustrator are still part of my toolbox.

    Because Sketch is a tool for UI design, it’s not the best-suited for creating very complex illustrations, and it doesn’t easily replace a solid vector application for illustration (nor does it attempt to).

    66
    While Sketch can be used to create complex illustrations, that is not its main purpose. (Source: illustration made in Sketch by Mirko Santangelo67) (View large version68)

    I currently use Illustrator when I want to use my Wacom tablet for freehand drawing work, or if I’m doing something that requires complex artistic brushes and filters, or if I need to trace a raster image and convert it vectors. And, though nowadays I rarely do vector work for print (posters, leaflets, etc.), if I have to, I would again choose to use Illustrator.

    Now I exclusively use Sketch for all interface and icon design tasks, but I continue to use Photoshop when I need to edit or refine product imagery, when I’m in the mood for some digital painting or drawing, or when I want to enhance a few photos. It has also happened a few times that I’ve opened Photoshop to quickly stitch together a few UI design mockups, so that I could send design previews for approval.

    Conclusion Link

    Sketch has solved many of my problems and has made my day-to-day life as a user interface designer a lot better. Mundane little things such as measuring distances and sizes are now much easier and quicker for me. I can now automate parts of my workflow and use real data in my Sketch designs. I can also organize my files more optimally (with the help of pages, artboards, states and symbols); I can reuse assets (through the dynamic symbols feature); and more.

    Sketch also has a vibrant community. All of the open-source (and mostly free) plugins that completely transform the app and add some excellent functionality make Sketch a very versatile tool for UI design!

    I really like Sketch’s focused approach, and hopefully I’ll continue to discover tiny features, tricks and plugins that make me go, “Whoa, that is so cool!”

    If you’re a UI designer and are still using mostly Photoshop or Illustrator, I highly recommend you try Sketch. You might never want to look back!

    (mb, al)

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/tag/sketch/
    2. 2 https://www.youtube.com/watch?v=uXg2reSswpA
    3. 3 https://massiveblack.com/
    4. 4 http://coro36ink.com/
    5. 5 https://www.google.com/search?q=photoshop+tutorials+for+editing+photos
    6. 6 https://twitter.com/smashingmag/status/839750650233749505
    7. 7 https://twitter.com/smashingmag/status/839750650233749505
    8. 8 https://twitter.com/smashingmag/status/839750650233749505
    9. 9 https://twitter.com/smashingmag
    10. 10 http://hackingui.com/sketch-design/a-year-using-sketch/
    11. 11 https://helpx.adobe.com/photoshop/how-to/live-preview-mobile-device.html
    12. 12 https://play.google.com/store/apps/details?id=com.spreadsong.pspreview&hl=en
    13. 13 http://sebastien-gabriel.com/designers-guide-to-dpi/
    14. 14 https://helpx.adobe.com/creative-cloud/how-to/creative-cloud-libraries.html
    15. 15 https://www.smashingmagazine.com/2014/10/front-end-development-ode-to-specifications/
    16. 16 https://www.smashingmagazine.com/2013/11/specctr-an-adobe-illustrator-plugin-freebie/
    17. 17 https://github.com/adamdehaven/Specify
    18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/strings-preview-opt.png
    19. 19 https://www.youtube.com/watch?v=eCBrK8tZAXQ&feature=youtu.be
    20. 20 https://github.com/Silly-V/Adobe-Illustrator/blob/master/Variable%20Importer/VariableImporter.jsx
    21. 21 https://www.adobe.com/products/experience-design.html
    22. 22 https://medium.com/@anirudhs/project-comet-designing-with-real-data-959beccb5c1a
    23. 23 https://framer.com/
    24. 24 http://blog.mengto.com/sketch-vs-photoshop/
    25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/03/hovering-animated.gif
    26. 26 https://sketchapp.com/learn/documentation/the-interface/inspector/
    27. 27 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
    28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_titles-large-opt.png
    29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_titles-large-opt.png
    30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_save_as-large-opt.png
    31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/03/spreadsheet_save_as-large-opt.png
    32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/03/csv_json-large-opt.png
    33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/03/csv_json-large-opt.png
    34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/03/import_json-animated.gif
    35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/populate-animated.gif
    36. 36 https://www.youtube.com/watch?v=uXg2reSswpA
    37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/03/overrides-animated.gif
    38. 38 https://medium.com/ux-power-tools/designing-a-top-nav-in-one-symbol-295b8b0a05a5
    39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/resizing-animated.gif
    40. 40 https://github.com/getflourish/Sketch-Style-Inventory
    41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_inventory_menu-large-opt.png
    42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_inventory_menu-large-opt.png
    43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/03/dark_theme-preview-opt.png
    44. 44 https://github.com/keremciu/sketch-iconfont
    45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_icon_plugin-large-opt.png
    46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_icon_plugin-large-opt.png
    47. 47 https://www.sketchapp.com/learn/documentation/mirror/mirror/
    48. 48 https://bjango.com/mac/skalapreview/
    49. 49 https://github.com/marcisme/sketch-preview
    50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_palette-preview-opt.png
    51. 51 https://github.com/Ashung/Sketch_Swatches
    52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/03/swatches_plugin-preview-opt.png
    53. 53 https://zeplin.io/
    54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zeplin-animated.gif
    55. 55 https://www.atlassian.com/git/tutorials/what-is-git
    56. 56 https://github.com/utom/sketch-measure
    57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_measure-animated.gif
    58. 58 http://sketchtoolbox.com/
    59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_toolbox-large-opt.png
    60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_toolbox-large-opt.png
    61. 61 https://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/
    62. 62 https://framer.com/
    63. 63 http://coffeescript.org/
    64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/03/framer-large-opt.png
    65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/03/framer-large-opt.png
    66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_app_dream_car_by_mirko_santangelo-large-opt.jpg
    67. 67 https://dribbble.com/shots/1303723–Sketch-app-Dream-Car
    68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/03/sketch_app_dream_car_by_mirko_santangelo-large-opt.jpg

    ↑ Back to topTweet itShare on Facebook

    Let The Content Delivery Network Optimize Your Images

    by

    Let The Content Delivery Network Optimize Your Images

    Sometimes you have to step back and ask why a tradition exists. In mobile-first design1, serving an image in three sizes — one for smartphones, one for tablets and one for desktops — using media queries and responsive images has become a tradition. But is it the best solution?

    It’s most likely better than doing nothing, but how well does it actually work? And is there room for improvement? In this article, we’ll look closely at how well the one-size-per-form-factor approach really works and how we can use smart content delivery networks to improve image performance.

    Further Reading on SmashingMag: Link

    Images Drive Payload And Performance Link

    Performance is a complex aspect of making a website. Here, we’ll focus on images because it’s low-hanging fruit on the tree of performance. The effort you spend on optimizing image delivery will most likely have visible and measurable results — especially if you have a website with many images, such as an e-commerce website or an online news website.

    Over time, websites have become more image-heavy. Research by Radware6 indicates that the average e-commerce web page is over 1.3 MB; 64%7 of that payload comes from images. More than half of your users (and potential customers) will abandon your website if it takes longer than three seconds8 to load. Literally millions of dollars are at stake in this question of how images affect web performance.

    Picking The Right Sizes: Breakpoints Link

    The three image sizes referred to above are usually implemented with responsive images (and a polyfill) or with JavaScript that hijacks image-loading.

    The latter was the way to go9 until responsive images came around. The idea was that the browser shouldn’t load the images by reading the HTML, but instead should load and execute JavaScript to figure out which images to download. Usually, it would query the viewport’s width, compare that width to the static breakpoints and then select the best fit out of a few predefined image sizes. As we now know, this approach has two major problems. First, it breaks browser preloading10; the browser can’t start loading images referenced in the markup right away, rather having to wait for the JavaScript to execute. Secondly, there is a significant risk of an oversized version of an image being downloaded because you have only a few predefined image sizes to pick from.

    Replacing this JavaScript-based image-loading with the new responsive images11 specification addresses the preloading issue. However, the risk of an oversized version of an image being downloaded is just as significant if you have breakpoints for only three image sizes.

    Picking the right, and right number of, breakpoints is not an easy task. Even if tools12 exist to help you in the process, breakpoints tend to be a moving target. The ideal breakpoints today could change tomorrow due to new screen sizes and form factors.

    How Many Breakpoints Do You Need? Link

    How serious is the problem of breakpoints for images? Asked differently, how many versions do you need to save more? Over time, the number of image requests will increase the variety of devices and screen sizes visiting your website.

    An experiment done by ScientiaMobile13 found that it takes on average only eight requests for a given image to surpass three breakpoints. The experiment collected data over four months and compared the size of the image actually served to the optimal size for the particular device and screen size. Due to the wide diversity of devices of different forms and shapes accessing the web over time, statistically, the ninth image request will require a size that does not exist and most likely will get the performance penalty of downloading a larger and heavier image than necessary. The more requests you get for a given image’s URL, the more fragmented will be the devices making the requests: At 180 requests, you will surpass 11 breakpoints. At 1,000 image requests, you will surpass 20 breakpoints.

    14
    How far will three sizes of an image get you? The actual number of requests for an image will vary according to traffic to the website. The curve shown above represents an equation that statistically best fits the image request and breakpoint data collected. (Image: ScientiaMobile2015) (View large version16)

    Note that this experiment only covers image sizes. Especially with responsive images, you should also consider alternative image formats (such as GIF, JPG, PNG and WebP) for more efficient file compression. For example, you could send WebP to devices supporting it and PNG to others. This means you would need to render a few formats for each image size. You can see how this quickly multiplies image versions and requires additional logic to serve the appropriate version.

    The experiment further explains17 that the strategy of using media queries and breakpoints to serve three different images to different device sizes reduces the payload served down to 63% of the original scenario in which only one size is served to all devices. But we can go further: Introducing content negotiation and server-side image optimization and resizing would reduce the payload to 16%!

    Description of the image.18
    Using a content delivery network — in this case, ImageEngine19 — can reduce the payload by 84%. (Image: ScientiaMobile2015) (View large version21)

    Dynamically optimizing images for any device and screen size will, according to the experiment above, reduce the payload by about 75% compared to using the three static breakpoints.

    Smart Content Delivery Networks Link

    As we’ve seen, displaying an image on a web page might not be as easy as it sounds if your performance budget is tight. There are many factors to account for. Picking the best breakpoints, image formats, image sizes, compression rate and implementation is challenging enough, but the solution should also be future-friendly. As new devices and form factors are launched into an already diverse landscape, supporting legacy devices becomes just as important as supporting the latest fashion. Automating this process seems to be worthy of serious consideration.

    We are starting to see several turnkey solutions that optimize images in this manner. These solutions are smart content delivery networks (CDNs), and they have intelligence built in at the edge of the network. These CDNs offer device-aware image optimization by combining three elements: device detection, real-time image optimization and a classic CDN cache geographically close to the end user. Unlike regular CDNs that do not have an interest in minimizing your payload, smart CDNs seek to improve web performance by tailoring your payload to the capabilities of the device and even network conditions.

    What options do you have if you want to implement a dynamic image-optimization CDN on your website? Be aware that there are a lot of image-manipulation services for performing static operations such as resizing, cropping and filtering. This is not what we’re looking for. Nor are we looking for a service that uses JavaScript to determine the best size and format of an image.

    We’re looking for a CDN that implements server-side logic, or “edge logic,” using client hints22 or device detection to determine the best image size and format. This is known as content negotiation23. This makes the list significantly shorter. Let’s compare the most prominent contenders:

    Client hints Device detection Push or pull
    Cloudinary24 yes no push/pull
    imgix25 yes no push
    ImageEngine26 yes yes pull

    All of the above use client hints to determine the best size. Client hints is a fairly new initiative, currently implemented only in Blink-based browsers, and it includes some additional information about preferred image sizes in the HTTP request. The server can use this information to generate a properly sized image. Even though support and adoption of client hints are growing, only about 3% of image requests27 come with client hints. This number is expected to grow. In the near future, however, it would be a good idea to pick a CDN with device detection built in, so that all images are optimized. If you want to play around with the concept a bit, look for a pull-based CDN (which requires less configuration) with a trial option or a free tier.

    All of the CDNs mentioned above require registration. Cloudinary have a free tier. ImageEngine a and Imgix has a trial concept, which is convenient if you want to try before you buy. Let’s have a closer look at ImageEngine. ImageEngine is pull-based, which means you don’t have to upload your images anywhere before you start. With ImageEngine, you simply keep images on your server, and ImageEngine will pull images from there on demand.

    Once registered for ImageEngine28, you will get a dedicated hostname, which is your CDN’s URL. The only thing left to do is prefix all of your image sources with that hostname.

    Say your original image tag is like this:

     <img src="https://mysite.xyz/dog.png" alt="My dog">

    Your new image tag with ImageEngine would look like this:

     <img src="//{personal-token}.imgeng.in/https://mysite.xyz/dog.png" alt="My dog">

    In this example, ImageEngine makes use of client hints and device detection to determine the optimal pixel size, compression ratio and image format for each device requesting the image. If you want to be more specific, all services listed above support explicit “commands” to override any automatically detected parameters. For ImageEngine, requesting a 360-pixel-wide image in WebP format would look like this:

     <img src="//{personal-token}.imgeng.in/w_360/f_webp/https://mysite.xyz/dog.png" alt="My dog">

    Of course, to make use of client hints, remember to enable it in your markup. Put this in your <head> tag:

     <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">

    ImageEngine even has a WordPress plugin29, which handles all of this automatically for you.

    The process for imgix and Cloudinary is similar, aside from some additional setup.

    All of the services can, of course, be combined with responsive images. With any CDN that supports client hints or device detection, the sometimes verbose markup for responsive images becomes much more maintainable. Responsive images with client hints is covered in greater detail in the article “Leaner Responsive Images With Client Hints30” here on Smashing Magazine.

    Conclusion Link

    Moving from one image for all kinds of devices to the common one-size-per-form-factor approach is definitely a step in the right direction. The downside is that, from a performance perspective, the approach is too general. There is more juice to be squeezed. However, from a development and maintenance perspective, it might make sense because three image sizes, or breakpoints, are manageable. The logistics are still fairly easy to maintain. But we must not forget why we do this. We’re not doing this for ourselves as developers, but for our end users. Hence, automating this process if we can makes sense. This is not a job for humans. Offloading this task is a win-win: easier maintenance and less data transfer.

    Smart CDNs give you core CDN functionality, as well as dynamic and automatic image optimization for any size and form factor by using client hints and device detection at the edge of the network. Experiments suggest that payload savings can run as high as 84% compared to serving one static image, and run around 75% compared to the common one-size-per-form-factor approach.

    Luckily, a few smart CDNs are out there already. It’s fairly easy to get started and measure the difference. Once you’ve created an account, you can put up a simple page and run it through WebPagetest31 to see the difference.

    (da, vf, al, il)

    Footnotes Link

    1. 1 http://www.lukew.com/resources/mobile_first.asp
    2. 2 https://www.smashingmagazine.com/2013/08/dont-get-crushed-load-optimization-performance-techniques-strategies/
    3. 3 https://www.smashingmagazine.com/2016/02/everything-about-google-accelerated-mobile-pages/
    4. 4 https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
    5. 5 https://www.smashingmagazine.com/2013/10/automate-your-responsive-images-with-mobify-js/
    6. 6 http://www.slideshare.net/Radware/radware-sotu-spring2014infographic
    7. 7 http://httparchive.org/interesting.php
    8. 8 https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
    9. 9 https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/
    10. 10 http://www.stevesouders.com/blog/2013/04/26/i/
    11. 11 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
    12. 12 http://www.responsivebreakpoints.com/
    13. 13 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
    14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-1-large-opt.png
    15. 15 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
    16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-1-large-opt.png
    17. 17 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
    18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-2-large-opt.png
    19. 19 http://imgeng.in
    20. 20 https://www.scientiamobile.com/page/three-image-sizes-enough-rwd-sites
    21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/content-delivery-network-image-2-large-opt.png
    22. 22 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
    23. 23 https://en.wikipedia.org/wiki/Content_negotiation
    24. 24 http://cloudinary.com/
    25. 25 http://imgix.com/
    26. 26 https://web.wurfl.io/#image-engine
    27. 27 https://www.scientiamobile.com/page/client-hints-wild
    28. 28 https://web.wurfl.io/#image-engine
    29. 29 https://wordpress.org/plugins/wp-imageengine/
    30. 30 https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/
    31. 31 https://www.webpagetest.org/

    ↑ Back to topTweet itShare on Facebook

    Simplifying iOS Game Logic With Apple’s GameplayKit’s Rule Systems

    by

    Simplifying iOS Game Logic With Apple’s GameplayKit’s Rule Systems

    When you develop a game, you need to sprinkle conditionals everywhere. If Pac-Man eats a power pill, then ghosts should run away. If the player has low health, then enemies attack more aggressively. If the space invader hits the left edge, then it should start moving right. Usually, these bits of code are strewn around, embedded in larger functions, and the overall logic of the game is difficult to see or reuse to build up new levels.

    Apple’s GameplayKit has several algorithms and data structures that make it easier to follow game development best practices. One of them, GKRuleSystem, lets you build up complex conditional logic from smaller pieces. By structuring your code around it, you’ll create rules that are easier to change or reuse for new levels. In this article, we’re going to take typical game logic code and learn how to represent it as a rule system.

    Further Reading on SmashingMag: Link

    Puzzle Games Are Made Of Lots Of Similar Levels Link

    I love puzzle games. The good ones start by teaching you how the game world works. Then, along the way, you discover new capabilities and apply them to harder challenges. The developer needs to balance each level to make sure that you never get bored or want to give up. Two of my favorites are Monument Valley5 and Hundreds6. A newer iOS game, Mini Metro7, is a subway simulation game and looks perfect for me. The developers say players need to “constantly redesign their line layout to meet the needs of a rapidly-growing city,” which is a good description of the progressive challenges I’m looking for.

    8
    Screenshots of Hundreds, Monument Valley, and Mini Metro (Image credit: Finji9, ustwo10, and Dinosaur Polo Club11)

    These games have lots of levels, each one a little harder or with a new twist. You’d think that it would be easy to build up the code for successive levels from previous ones, but as you’ll see, it can be harder than it looks.

    I recently started to make a game like this called Puz-o-Mat. The Puz-o-Mat is a box with five colored buttons on it. The goal of each level is to get all of the buttons to light up by discovering the pattern that satisfies the rules of the level. Puz-o-Mat will give you feedback if you are on the right track and buzz and flash its lights to reset the level if you make a mistake.


    A level being reset in Puz-o-Mat

    A Simple Game Gets Out Of Hand Quickly Link

    To see why we might need a rule system, it’s useful to try to implement the game levels as a set of evaluation functions first. You can follow the code below in a Playground on GitHub12.

    The goal of the first level of Puz-o-Mat is to press each button once. When you press a button, it lights up to let you know that you are on the right track. If you press one that is lit up already, the game will reset and the lights will turn off. When you tap each button once, you win the level.

    Since we have a finite and defined set of game outcomes, we can just list them in an enum called GameOutcome:

    enum GameOutcome: String { case win case reset }

    And then, define an evaluation function that returns a GameOutcome given the buttons. If there is no outcome yet, it returns nil.

    func evaluateLevel001(buttons: [Button]) -> GameOutcome? { var foundUntappedButton = false for button in buttons { if button.tapCount >= 2 { return .reset } else if button.tapCount == 0 { foundUntappedButton = true } } if !foundUntappedButton { return .win } return nil }

    It’s not too hard to understand, but it’s concerning that we need a loop and three conditionals to describe the easiest level.

    The second level of the game is a little harder to complete. Instead of pressing any button you want, you have to press them in order. Here’s how to do that:

    func evaluateLevel002(buttons: [Button]) -> GameOutcome? { var foundUntappedButton = false for button in buttons { if button.tapCount >= 2 { return .reset } else if button.tapCount == 0 { foundUntappedButton = true } else if button.tapCount == 1 && foundUntappedButton { return .reset } } if !foundUntappedButton { return .win } return nil }

    This code has just one extra else if statement. It would be nice to share some code with the previous evaluator.

    As we go on from level to level, you’ll find that a line here or there may be duplicated, but it’s hard to come up with a function that handles all levels. You could do it by taking another parameter, but this game is going to have 100’s of levels; we can’t keep adding parameters and extra conditionals for each of the variations.

    Moving on, the next level needs you to tap the buttons in reverse order. The function looks exactly like the last one, except the loop looks like this:

    for button in buttons.reversed()

    The reverse level being won in Puz-o-Mat

    Again, a lot of code is the same, but it’s awkward to reuse.

    There are some patterns, though.

    1. Each evaluator starts with some game state.
    2. Most of the work is checking conditionals against the game state to see what we should do next. There are many different conditions across the whole game, and each level seems to mix and match them.
    3. The main point of the evaluator is to decide if we need to reset or win.

    Even though there is a pattern to the level game logic, all of the parts are mixed together and aren’t easily separated for reuse.

    Refactoring around the conditionals Link

    Using this insight we could try to restructure the code. A promising place to start is by pulling out the conditionals into separate functions. As we’ll see later, this is the design of GameplayKit’s rule system, but we can get part of the way there by playing with this code first. Then, we’ll convert our result to GameplayKit.

    First, let’s use a type alias to define what a rule is:

    typealias Rule = (_: [Button]) -> GameOutcome?

    A rule is a function that takes the array of buttons and responds with an outcome if it knows what to do or, nil if not.

    Many levels may limit the number of taps on a button, so we’ll make a function to return a rule that checks buttons against a tap limit:

    func makeTapLimitRule(maxTaps: Int) -> Rule { return { buttons in if (buttons.first { $0.tapCount >= maxTaps }) != nil { return .reset } return nil } }

    makeTapLimitRule takes a parameter, which is the number of taps to check for, and returns a closure that tells you if the game should reset or not.

    Here’s one that can check if all buttons have been tapped once.

    func makeAllTappedRule() -> Rule { return { buttons in if (buttons.first { $0.tapCount != 1 }) == nil { return .win } return nil } }

    To use these buttons in our first level, we return an array of rules:

    func rulesForLevel001() -> [Rule] { return [ makeTapLimitRule(maxTaps: 2), makeAllTappedRule(), ] }

    Then, we need loop through all of the rules and run them so that they can check their conditional against the button state. If any of the rule functions return a GameOutcome, we’ll return it from the evaluator. If none are true, we’ll return nil.

    Diagram of rule evaluation.13
    Diagram of rule evaluation

    The code is:

    func evaluate(buttons: [Button], rules: [Rule]) -> GameOutcome? { for rule in rules { if let outcome = rule(buttons) { return outcome } } return nil }

    Our first level is simply:

    func evaluateLevel001WithRules(buttons: [Button]) -> GameOutcome? { return evaluate(buttons: buttons, rules: rulesForLevel001()) }

    Following this train of thought, you could expand the rules to take in more parameters or check more states. Each level is expressed as a list of rules that produce some outcome. Rules are separately encapsulated and easily reused.

    This is such a common way of structuring algorithms in game logic, that Apple provides a set of classes in GameplayKit that we can use to build games in this style. They are collectively known as the Rule System classes and are primarily implemented in GKRuleSystem14 and GKRule15.

    Using these Rule System classes hides all of the complexity of the evaluator, but more importantly, delivers much more power than our simple one.

    GameplayKit’s Rules Systems Link

    In the GameplayKit rule system, you need to define three things:

    1. The game state

      A dictionary that will represent your game state. It can have any keys and structure that you wish.
    2. A set of fact objects

      The possible results of evaluating the rules. Facts can be any object, but in Swift it makes sense for them to be an enum. We could use the GameOutcome enum we used in our examples above.
    3. A list of rules

      The GKRule objects to evaluate. They each provide a conditional to check against the state and an action to perform if the conditional is true.
    Diagram of GKRuleSystem objects.16
    GKRuleSystem object relations

    To run the algorithm, we need to:

    1. Construct a GKRuleSystem object.
    2. Copy all of the game state dictionary entries into the object.
    3. Add the rules array to the rule system.
    4. Call the rule system object’s evaluate function.
    5. After evaluating, check to see if any facts were created.
      • If any were, return the first fact as a game outcome.
      • If not, return nil.

    This diagram shows how the individual objects interact over time:

    Diagram of GKRuleSystem evaluation.17
    Diagram of GKRuleSystem evaluation

    The code to complete this interaction is straightforward:

    func evaluate(state: [String: Any], rules: [GKRule]) -> GameOutcome? { let rs = GKRuleSystem() rs.state.addEntries(from: state) rs.add(rules) rs.evaluate() if rs.facts.count > 0, let fact = rs.facts[0] as? NSString { return GameOutcome(rawValue: fact) } return nil }

    Note: GameplayKit classes were designed for Objective-C, which is why I had to derive GameOutcome from String and use the enums as rawValues.

    This is a very simple use of GKRuleSystem, and it’s fine if you don’t need to do this in the context of an action game (and need to keep up with a high frame rate). In that case, you can use the fact that the rule system state property is a mutable dictionary that you can alter directly rather than recreate. You could also reuse rule system objects with rules set up.

    This is similar to our evaluator from the last section, but this one can operate over a more complex state object. Also, GKRuleSystem.evaluate() is more sophisticated than a loop over the rules. You can provide rule precedence, fact retraction (rules that reverse fact assertions), and find out which exact rules were invoked, among other features.

    Converting our code to GKRules Link

    The last step is converting our Rule functions to GKRule. You could derive GKRule subclasses for each rule, but for most applications, the GKRule constructors will be good enough.

    One of the constructors18 takes two blocks:

    init(blockPredicate predicate: @escaping (GKRuleSystem) -> Bool, action: @escaping (GKRuleSystem) -> Void)

    The first block is a conditional that looks at the state, while the second block is called to assert a fact if the first block returns true.

    It’s a little cumbersome to use, but here’s our two tap reset rule:

    GKRule( blockPredicate: { rs in guard let buttons = rs.state["b"] as? [Button] else { return false } return (buttons.first { $0.tapCount >= 2 }) != nil }, action: { rs in rs.assertFact(GameOutcome.reset.rawValue) })

    During the GKRuleSystem evaluation, this object will have its first block called to see if the rule should be applied. The block could refer to external sources, but the most common thing is to look at the passed in rule system’s state property and check it for a condition. If the first block returns true, then the second one is called. It could also do anything, but it’s expected that it would assert or retract facts.

    This is a good constructor to use if you have complex state and conditionals, or if you are using information outside of the rule system to implement rules. Since the expectation and normal case is to use the state and make facts, there is a more direct constructor to use.

    If you can express your conditional as an NSPredicate against the state dictionary, GKRulehas a constructor to assert facts directly19 based on them. It’s:

    init(predicate: NSPredicate, assertingFact fact: NSObjectProtocol, grade: Float)

    Let’s extend GameOutcome with a function that creates GKRule objects for us.

    extension GameOutcome { func assertIf(_ predicateFormat: String) -> GKRule { let pred = NSPredicate(format: predicateFormat) return GKRule( predicate: pred, assertingFact: self.rawValue, grade: 1.0) } }

    Our rules function is just:

    func predicateRulesForLevel001() -> [GKRule] { return [ GameOutcome.reset.assertIf("ANY $b.tapCount == 2"), GameOutcome.win.assertIf("ALL $b.tapCount == 1"), ] }

    And the level evaluator becomes a one-liner:

    func evaluateLevel001WithPredicateRules(buttons: [Button]) -> GameOutcome? { return evaluate(state: ["b": buttons], rules: predicateRulesForLevel001()) }

    The only thing you need for a new level is a new list of GKRules. We have gone from an imperative level description where we need to give every step to a declarative one where we provide queries and outcomes.

    Another benefit of this approach is that the predicates are serializable, so they can be stored in external files or sent over the network. With just a few more lines of code, we could move the predicate and enum to a .plist file and load them instead of hard-coding them. Then, a game designer on your team could make or tweak levels without editing code. The main coding work would be to add more state and outcomes.

    Level definitions in a .plist.20
    Level definitions in a .plist (Large preview21)

    In this example, facts are mutually exclusive; you can either win or reset, but not both. But, this is not a restriction of rule systems. If it makes sense for multiple facts to be asserted, then you may do so, and the code that checks the facts will need to reconcile them. One example is that we could treat each button’s light as a fact (on or off) and there would be a fact asserted for each button as the game was played. In that case, there could certainly be many facts asserted at the same time.

    Finally, you may have noticed that facts are asserted with a grade. This grade is a number from 0 to 1 that you can think of as a probability that this fact is correct. We used 1 to indicate certainty, but you could use lower numbers to indicate that the fact only has a probability of being true. These probabilities can be combined and, using random numbers, we could pick among the asserted facts and have emergent, rather than deterministic, game behavior. This is known as Fuzzy Logic, and I’ll cover that in a future article.

    All of the code in this article is available in a three-page Playground on GitHub22.

    Final Notes Link

    • This article concentrated on just the game logic aspect of developing a game for iOS, but if you want to see how to construct the visual aspect of a game using SpriteKit, check out this series right here on Smashing: Part I23, Part II24, Part III25.
    • This WWDC video26 (Safari required) covers GameplayKit. Go to 43:10 in the video to hear about Rule Systems.

    (da, yk, aa, il)

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2015/11/gamepad-api-in-web-games/
    2. 2 https://www.smashingmagazine.com/2016/05/the-making-of-melody-jams/
    3. 3 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
    4. 4 https://www.smashingmagazine.com/2016/02/javascript-ai-html-sliding-tiles-puzzle/
    5. 5 https://itunes.apple.com/us/app/monument-valley/id728293409?mt=8
    6. 6 https://itunes.apple.com/us/app/hundreds/id493536432?mt=8
    7. 7 https://itunes.apple.com/us/app/mini-metro/id837860959?mt=8
    8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/02/puzzle-games-preview-opt.png
    9. 9 http://finji.co/about/sheet.php?p=hundreds
    10. 10 http://www.monumentvalleygame.com/
    11. 11 http://dinopoloclub.com/press/sheet.php?p=mini_metro
    12. 12 https://github.com/loufranco/PuzOMatPlayground
    13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/rules-diagram-preview-opt.png
    14. 14 https://developer.apple.com/reference/gameplaykit/gkrulesystem
    15. 15 https://developer.apple.com/reference/gameplaykit/gkrule
    16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/02/rulesystem-diagram-preview-opt.png
    17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/evaluate-diagram-preview-opt.png
    18. 18 https://developer.apple.com/reference/gameplaykit/gkrule/1501102-init
    19. 19 https://developer.apple.com/reference/gameplaykit/gkrule/1501122-init
    20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/02/rules-plist-large-opt.png
    21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/02/rules-plist-large-opt.png
    22. 22 https://github.com/loufranco/PuzOMatPlayground
    23. 23 https://www.smashingmagazine.com/2016/11/how-to-build-a-spritekit-game-in-swift-3-part-1/
    24. 24 https://www.smashingmagazine.com/2016/12/how-to-build-a-spritekit-game-in-swift-3-part-2/
    25. 25 https://www.smashingmagazine.com/2016/12/how-to-build-a-spritekit-game-in-swift-3-part-3/
    26. 26 https://developer.apple.com/videos/play/wwdc2015/608/?time=2587

    ↑ Back to topTweet itShare on Facebook

    Applications Of Machine Learning For Designers

    by

    Applications Of Machine Learning For Designers

    As a designer, you will be facing more demands and opportunities to work with digital systems that embody machine learning. To have your say about how best to use it, you need a good understanding about its applications and related design patterns.

    This article illustrates the power of machine learning through the applications of detection, prediction and generation. It gives six reasons why machine learning makes products and services better and introduces four design patterns relevant to such applications. To help you get started, I have included two non-technical questions that will help with assessing whether your task is ready to be learned by a machine.

    Further Reading on SmashingMag: Link

    Big Data, Small Intelligence Link

    Big data and big promises. We are expecting a great many things to happen once the big data deluge has been funnelled into a nurturing stream of bits. Data can be used in many ways. One is to build smart products, and another is to make better design and business decisions. The latter also, ultimately, trickle into products.

    Machine learning is a very promising approach radically shaping future product and service development. Machine learning is a branch of artificial intelligence. It employs many methods: Deep learning and neural networks are two well-known instances.

    Machine learning means that, instead of programmers providing computers with very detailed instructions on how to perform a task, computers learn the task by themselves. A recent, remarkable milestone was when Google’s AlphaGo software learned to master the game of Go at the level of a world champion!

    Pretty much anything that a normal person can do in <1 sec, we can now automate with AI.

    – Andrew Ng (@AndrewYNg), 19 October 20165

    This story will lead you into problem discovery through examples of what sorts of problems machines today readily chew on. A basic understanding of machine learning, commonly known as ML, will help. If you are unfamiliar with ML, I suggest you read my friendly introduction6 to the topic or Nvidia’s clear explanation7 of the differences between ML, AI and deep learning.

    Why Do I Need To Understand The Applications Of Machine Learning? Link

    As a designer, you will be facing more demands and opportunities to work with digital systems that embody machine learning. As the hype around machine intelligence intensifies, this will lead to technology-driven pressure to extensively utilize machine learning. This may happen with little understanding of its actual benefits and its impact on product desirability and customer experience.

    Stay on Top of the Machine-Intelligence Game! Link

    As a designer, to have your say about any plans for machine intelligence and how it is best implemented on the human interface layer, you need to know what it can do and how digital services can utilize it. This post provides an overview of applications, with concrete examples, as well new design guidelines that you can put to work. This will help with making actual design decisions and identifying the right design patterns, including situations when no directly applicable solution exists and you must transfer ideas across domains.

    Get To The Core Of The Problem Link

    To exploit the capability of machine learning, you must grasp the nature of a task as a computer might see it. The concept I’ll use to describe it is the core problem of learning. This refers to defining what exactly we would like the computer to learn in order for it to complete the task we have assigned to it. These goals are not always evident at the practical, holistic level of a finished product (say, Tesla’s autopilot function). This story will help you to see what goes on under the surface.

    Say you want the computer to drive your car.

    This is a very high abstraction level learning goal. We need to go further down and break it into smaller chunks. We need to ask questions such as, can the computer accelerate and decelerate, and can the machine recognize red and green lights? To identify the core problem is already a move towards understanding whether the overarching task is a good fit for a machine to learn. Once the core problem of learning is defined well, then it is possible to say whether the ML computers of today can solve it with adequate accuracy and in a decent amount of time. This is what matters most for actually making the application work.

    8
    Small autonomous buses (in the background) started operating on Aalto University Espoo campus in autumn 2016. The street sign warns about their presence, reminiscent of the first automobiles in the 19th century. (Picture of Project Sohjoa9 demonstration in Espoo. Copyright Metropolia UAS, used with permission.) (View large version10)

    What Good Will Machines Do For You? Link

    Suppose you manage to teach some skill to a machine. How would your product or service benefit from it? Here are six possible benefits:

    • augment,
    • automate,
    • enable,
    • reduce costs,
    • improve safety,
    • create.

    In rare cases, machine learning might enable a computer to perform tasks that humans simply can’t perform because of speed requirements or the scale of data. But most of the time, ML helps to automate repetitive, time-consuming tasks that defy the limits of human labor cost or attentional span. For instance, sorting through recycling waste 24/7 is more reliably and affordably done by a computer.

    In some areas, machine learning may offer a new type of expert system that augments and assists humans. This could be the case in design, where a computer might make a proposal for a new layout or color palette aligned with the designer’s efforts. Google Slides already offers this type of functionality through the suggested layouts feature11. Augmenting human drivers would improve traffic safety if a vehicle could, for example, start braking before the human operator could possibly react, saving the car from a rear-end collision.

    12
    (Large preview13)

    Google Slides provides design assistance via the Explore function. Right pane demonstrates the variations it has generated from elements initially composed by the user.

    What Have Machines Learned So Far? Link

    In 2016, the most celebrated milestone of machine learning was AlphaGo’s victory14 over the world champion of Go, Lee Sedol15. Considering that Go is an extremely complicated game to master, this was a remarkable achievement. Beyond exotic games such as Go, Google Image Search is maybe the best-known application of machine learning. Search feels so natural and mundane when it effectively hides away all of the complexity is embeds. With over 30 billion search queries every day, Google Image Search constantly gets more opportunities to learn.

    There are already more individual machine learning applications than are reasonable to list here. But a major simplification16 is not sufficient either, I feel. One way to appreciate the variety is to look at successful ML applications from Eric Siegel’s book Predictive Analytics from 2013. The listed applications fall under the following domains:

    • marketing, advertising and the web;
    • financial risk and insurance;
    • healthcare;
    • crime fighting and fraud detection;
    • fault detection for safety and efficiency;
    • government, politics, nonprofit and education;
    • human-language understanding, thought and psychology;
    • staff and employees, human resources.

    His cross-industry collection of examples is a powerful illustration of the omnipresence of predictive applications, even though not all of his 147 examples utilize machine learning as we know it. However, for a designer, knowing whether your problem domain is among the nine listed will give an idea of whether machine learning has already proven to be useful or whether you are facing a great unknown.

    Machines Learn Detection, Prediction And Creativity Link

    As I see it, the power of learning algorithms comes down to two major applications: detection and prediction. Detection is about interpreting the present, and prediction is about the way of the future. Interestingly, machines can also do generative or “creative” tasks. However these are still a marginal application.

    17
    Three main categories of ML applications and their common use cases (View large version18)

    When you combine detection and prediction, you can achieve impressive overall results. For instance, combine the detection of traffic signs, vehicles and pedestrians with the prediction of vehicular and pedestrian movements and of the times to vehicle line crossings, and you have the makings of an autonomous vehicle!

    This is my preferred way of thinking about machine learning applications. In practice, detection and prediction are sometimes much alike because they don’t yet cut into the heart and bones of machine learning (recall the basics of machine learning19), but I believe they offer an appropriate level of abstraction to talk about machine learning applications. Let’s clarify these functions through examples.

    The Varieties of Detection Link

    There are at least four major types of applications of detection. Each deals with a different core learning problem. They are:

    • text and speech interpretation,
    • image and sound interpretation,
    • human behavior and identity detection,
    • abuse and fraud detection.

    Text and Speech Interpretation Link

    Text and speech are the most natural interaction and communication methods. Thus, it has not been feasible in the realm of computers. Previous generations of voice dialling and interactive voice response systems were not very impressive. Only in this decade have we seen a new generation of applications that take spoken commands and even have a dialogue with us! This can go so smoothly that we can’t tell computers and humans apart in text-based chats, indicating that computers have passed the Turing test20.

    Dealing with speech, new systems such as personal assistant Siri or Amazon’s Echo device are capable of interpreting a wide range of communications and responding intelligently. The technical term for this capability is natural language processing (NLP). This indicates that, based on successful text and speech detection (i.e. recognition), computers can also interpret the meaning of words, spoken and written, and take action.

    Text interpretation enables equally powerful applications. The detection of emotion, or sentiment, from text means that large masses of text can be automatically analyzed to reveal what people in social media think about brands, products or presidential candidates. For instance, Google Translate just recently witnessed significant quality improvements21 by switching to an ML approach to translations.

    22
    Amazon Echo Dot is surfacing as one of the best-selling speech-recognition-driven appliances of early 2017. (View large version23)

    Jeff Bezos says the Echo “isn’t about” getting people to shop on Amazon, and he may be right https://t.co/UuDdAms0Yt24pic.twitter.com/erodS8hoJg25

    – BI Tech (@SAI) 13 February 201726

    Image and Sound Interpretation Link

    Computer vision gives metaphorical eyes to a machine. The most radical example of this is a computer reconstruction of human perception from brain scans! However, that is hardly as useful an application as one that automates the tagging of photos or videos to help you explore Google Photos or Facebook. The latter service recognizes faces to an even scary level of accuracy.

    Image interpretation finds many powerful business applications in industrial quality control, recording vehicle registration plates, analyzing roadside photos for correct traffic signs, and monitoring empty parking spaces. The recent applications of computer vision to skin cancer diagnosis27 have actually proven more proficient than human doctors, leading to the discovery of new diagnostic criteria!

    28
    A search for “dog” in my personal Google Photos collection brings up several correct instances of dogs I’ve chanced upon, but also a few false positives. However, I’ve never tagged a single dog, so the noise is acceptable given the added value of finding any dogs. (Screenshot from February 2017, edited to remove personal information (albums).) (View large version29)

    Speech was already mentioned, but other audio signals are also well detected by computers. Shazam and SoundHound have for years provided reliable detection of songs either from a recording fragment or a sung melody. The Fraunhofer Institute developed the Silometer30, an app to detect varieties of coughs as a precursor to medical diagnosis. I would be very surprised if we don’t see many new applications for human and non-human sounds in the near future.

    Human Behavior and Identity Detection Link

    Given that computers are seeing and hearing what we do, it is not surprising that they have became capable of analyzing and detecting human behavior and identity as well — for instance, with Microsoft Kinect recognizing our body motion. Machines can identify movements in a football game to automatically generate game statistics. Apple’s iPad Pro recognizes31 whether the user is using their finger or the pencil for control, to prevent unwanted gestures. A huge number of services detect what kind of items typically go together in a shopping cart; this enables Amazon to suggest that you might also be interested in similar products.

    In the world of transportation, it would be a major safety improvement if we could detect when a driver is about to fall asleep behind the steering wheel, to prevent traffic accidents. Identity detection is another valuable function enabled by several signals. A Japanese research institute has developed a car seat32 that recognizes who’s sitting in it. Google’s reCAPTCHA33 is a unique system that tells apart humans from spam bots. Perhaps the most notorious example of guessing people’s health was Target’s successful detection of expectant mothers34. This was followed by a marketing campaign that awkwardly disclosed the pregnancy of Target customers, resulting in much bad publicity.

    35
    Google’s reCAPTCHA has simplified spam-fighting in web forms with the help of micro-intelligence from machine learning.

    Anti-Virus, Anti-Spam, Anti-Malware Link

    Machine learning is also used to detect and prevent fraudulent, abusive or dangerous content and schemes. It is not always major attacks; sometimes it is just about blocking bad checks or preventing petty criminals from entering the NFL’s Superbowl arena36. The best successes are found in anti-spam; for instance, Google has been doing an excellent job for years of filtering spam from your Gmail inbox.

    I will conclude with a good-willed detection example from the normal human sphere. Whales can be reliably recognized37 from underwater recordings of their sounds — once more, thanks to machine learning. This can help human-made fishing machinery to avoid contact with whales38 for their protection.

    39
    This humpback whale would be all the merrier if all fishing boats were equipped with machine-learning technology to detect their signals. (View large version40)

    Design Pattern: Suggested Features

    Text and speech prediction have opened up new opportunities for interaction with smart devices. Conversational interfaces are the most prominent example of this development, but definitely not the only one. As we try to hide the interface and underlying complexity from users, we are balancing between what we hide and what we reveal. Suggested features help users to discover what the invisible UI is capable of.

    Graphical user interfaces (GUIs) have made computing accessible for the better part of the human race that enjoys normal vision. GUIs provided a huge usability improvement in terms of feature discovery. Icon and menus were the first useful metaphors for direct manipulation of digital objects using a mouse and keyboard. With multitouch screens, we have gained the new power of pinching, dragging and swiping to interact. Visual clues aren’t going anywhere, but they are not going to be enough when interaction modalities expand.

    How Does a User Find Out What Your Service Can Do? Link

    Haptic interaction in the first consumer generation of wearables and in the foremost conversational interfaces presents a new challenge for feature discovery. Non-visual cues must be used that facilitate the interaction, particularly at the very onset of the interactive relationship. Feature suggestions — the machine exposing its features and informing the user what it is capable of — are one solution to this riddle.

    In the case of a chatbot employed for car rentals, this could be, “Please ask me about available vehicles, upgrades and your past reservations.”

    Specific application areas come with specific, detailed patterns. For instance, Patrick Hebron’s recent ebook41 from O’Reilly contains a great discussion of the solutions for conversational interfaces.

    Species Of Prediction Link

    Several generations of TV watchers have been raised to watch weather forecasts for fun, ever since regular broadcasts began after the Second World War42. The realm of prediction today is wide and varied. Some applications may involve non-machine learning parts that help in performing predictions.

    Here I will focus on the prediction of human activities, but note that the prediction of different non-human activities is currently gaining huge interest. Predictive maintenance of machines and devices is one such application, and more are actively envisioned as the Internet of Things generates more data to learn from.

    Predicting different forms of human behavior falls roughly into the following core learning challenges and applications:

    • recommendations,
    • individual behavior and condition,
    • collective behavior prediction.

    Different types of recommendations are about predicting user preferences. When Netflix recommends a movie or Spotify generates a playlist of your future favorite music, they are trying to predict whether you will like it, watch it or listen through to the end of the piece. Netflix is on the lookout for your rating of the movie afterwards, whereas Spotify or Pandora might measure whether you are returning to enjoy the same song over and over again without skipping. This way, our behaviors and preferences become connected even without our needing to express them explicitly. This is something machines can learn about and exploit.

    In design, predicting which content or which interaction models appeal to users could give rise to the personalization of interfaces. This is mostly based on predicting which content a user would be most interested in. For a few years now, Amazon has been heavily personalizing the front page, predicting what stuff and links should be present in anticipation of your shopping desires and habits.

    Recommendations are a special case of predicting individual behavior. The scope of predictions does not end with trivial matters, such as whether you like Game of Thrones or Lady Gaga. Financial institutions attempt to predict who will default on their loan or try to refinance it. Big human-resource departments might predict employee performance and attrition. Hospitals might predict the discharge of a patient or the prognosis of a cancer. Rather more serious humans conditions, such as divorce, premature birth and even death within a certain timeframe, have been all been predicted with some success. Of course, predicting fun things can get serious when money is involved, as when big entertainment companies try to guess which songs43 and movies will top the charts to direct their marketing and production efforts.

    44
    Microsoft’s ML platform demonstrator How Old Do I Look?45 guesses age (a human condition) based on any uploaded photo or search.

    The important part about predictions is that they lead to individual assessment that are actionable. The more reliable the prediction and the weightier the consequences, the more profitable and useful the predictions become.

    Predicting collective behavior becomes a generalization of individuals but with different implications and scope. In these cases, intervention is only successful if it affects most of the crowd. The looming result of a presidential election, cellular network use or seasonal shopping expenditure can all be subject to prediction. When predicting financial risk or a company’s key performance indicators, the gains of saving or making money are noticeable. J.P. Morgan Chase was one of the first banks to increase efficiency by predicting mortgage defaulters (those who never pay back) and refinancers (those who pay back too early). On the other hand, the recent US presidential election is a good reminder that none of this is yet perfect.

    In a close resemblance to tools for antivirus and other present dangers, future trouble is also predictable. Predictive policing is about forecasting where street conflicts might happen or where squatters are taking over premises, which would help administrators to distribute resources to the right places. A similar process is going on in energy companies, as they try to estimate the capacity needed to last the night.

    Design Pattern: Personalization

    Once a computer gets to know you and to predict your desires and preferences, it can start to serve you in new, more effective ways. This is personalization, the automated optimization of a service. Responsive website layouts are a crude way of doing this.

    The utilization of machine learning features with interfaces could lead to highly personalized user experiences. Akin to giving everyone a unique desktop and homescreen, services and apps will start to adapt to people’s preferences as well. This new degree of personalization presents opportunities as well as forces designers to flex their thoughts on how to create truly adaptive interfaces that are largely controlled by the logic of machine learning. If you succeed in this, you will reward users with a superior experience and will impart a feeling of being understood46.

    47
    Amazon.com’s front page has been personalized for a long time. The selection offered to me looks somewhat relevant, if not attractive. (View large version48)

    Currently, personalization is foremost applied in order to curate content. For instance, Amazon carefully considers which products would appeal to potential buyers on its front page. But it will not end with that. Personalization will likely lead to much bigger changes across UIs — for instance, even in the presentation of the types of interactive elements a user likes to use.

    Questions To Ask In Considering The Fit Of Machine Learning Link

    Say you are now convinced that your users and customers would benefit from a ML-boosted service. Next, you must consider the business and technology perspectives. The first question to ask is, If ML works at least as well as you want, what value would it add to your product? Be honest: Traditional business logic applies here, too.

    If machine learning doesn’t create value, then it is probably a waste of resources. Marketing people might fancy your new implementation, but the business folks will not necessarily fund your next machine learning experiment unless you have a business case for why machine learning would improve the customer experience or revenue directly.

    OK, suppose you’ve cleared the viability check box. I expect you also have at least a hypothesis of the core learning challenge. This might be, for example, Can a computer learn to predict when the user would need to take an umbrella or a waterproof jacket when they leave the house in the morning.

    Next, you’ll need to figure out whether you can expect the machine to learn the job you wish to get done. We’ve come to matters of data. Data broadly refers to any information you can feed the computer: weather data, shopping data for umbrellas and waterproof gear, social media updates and so forth.

    Here are two simple diagnostic questions to assess the data situation:

    • Do we have enough examples for the machine to learn from?
    • Are there patterns in the teaching material that can be recognized by a human expert?

    The first question looks easy but is difficult to answer in advance. You need both good quality and a sufficient quantity of data. Some signals are noisy (that is, have poor quality). You might need more examples in these cases than in others. Some features are very prominent and easy to learn, such as in the case of detecting nighttime or daytime in photos. This can be solved with as few as 30 training images49!

    Typical applications require thousands of instances of input data and possibly the desired answers. The more complicated the task, the more material will be needed. AlphaGo learned to master the game after analyzing a staggering 30 million games50 and then playing some against itself! This is likely excessive in most situations, but it gives you an idea of the scale of what computers can and may need to swallow — from 30 to 30 million. This is one of the reasons why increasing computing capacity and certain hardware really makes computers smarter by speeding up the learning of truly big data.

    51
    The complexity of Go pushed machine learning capacity to its extremes. Playing the game at random, or by brute force, would be futile. (Image: YouTube52) (View large version53)

    The second question is, Are there patterns in the teaching material that can be recognized by a human expert? If a human can do the task, then there’s a fair chance that there are regularities in the data that might be picked up by the computer as well.

    If you have a positive answer to least one of the questions, you can go forward with some confidence that machine learning might indeed be of use to you. What you’d do after this discovery is mostly beyond the scope of this article.

    In order to build a machine learning solution, it is best to boldly go and prototype your desired functionality. If you have enough samples, your data scientist teammate will quickly discover whether the machine shows proficiency in the learning task (particularly if you use scalable could computing). If not, you’ll need to get more data.

    What follows is a series of iterations on the learning mechanisms and a process of integrating it with the product or service. The appearance of intelligent applications can be achieved by carefully putting together several pieces of machine learning and even conventional programming. This is called an ensemble approach. What at best appears as a seamless interactive experience for the user may in fact be the product of a very complex rubric of different machine learning components working together.

    Human intelligence is heavily needed to tweak the learning algorithms. Such was the architecture underlying Watson54, the Jeopardy-winning artificial intelligence system created by IBM and the algorithm that claimed the Netflix Prize55. In the latter competition, several teams combined their individual tweaks during the final months of the competition to eventually exceed the criteria for success. This is also what the Google Translate team did to ascend to the next level. And that work is something I consider to fall under the domain of traditional software development.

    New Design Patterns For Creating Interfaces Of Machine Learning Applications! Link

    56
    Illustration: Joonas Haverinen, SC5 (Large preview57)

    Thus far, I’ve talked about the possibilities of machine learning and given some practical advice on how to figure out its feasibility. I’ve also introduced two general design patterns that are tightly connected to machine learning. However, they are not enough.

    A designer engaged in service and interface design will have several questions concerning interaction in their mind by now. How can we and will we communicate machine intelligence to users, and what kinds of new interfaces will machine learning call for?

    This entails both opportunities to do things in a new way, as well as requirements for new designs. To me, this means we will need a rise in importance of several design patterns or, rather, abstract design features, which will become important as services get smarter. They include:

    • suggested features,
    • personalization,
    • shortcuts versus granular controls,
    • graceful failure.

    I have already covered suggested features58 and personalization59 as a part of detection and prediction, but what are granularity and graceful failure?

    Design Pattern: Shortcuts Versus Granularity Link

    Photoshop is an excellent example of a tool with a steep learning curve and a great deal of granularity in controlling what can be done. Most of the time, you work on small operations, each of which has a very specific influence. The creative combination of many small things allows for interesting patterns to emerge on a larger scale. Holistic, black-box operations such as transformative filters and automatic corrections are not really the reason why professionals use Photoshop.

    What will happen when machines learn to predict what we are doing repeatedly? For instance, I frequently perform certain actions in Photoshop before uploading my photos to a blog. While I could manually automate this, creating yet another user-defined feature among thousands already in the product, Photoshop might learn to predict my intentions and offer a more prominent shortcut, or a highway, to fast-forward me to my intended destination. As Adobe currently puts effort into bringing AI into Creative Cloud, we’ll likely see something even more clever than this very soon. It is up to you to let the machine figure out the appropriate shortcuts in your application.

    60
    A mockup of a possible implementation of “predictive history” in Photoshop CC. The application suggests a possible future state for the user based on the user’s history and preceding actions and on the current image. (View large version61)

    A funny illustration of a similar train of thought comes from Cristopher Hesse’s machine-learning-based image-to-image translation62, which provides interesting content-specific filling of doodles. Similar to Photoshop’s content-aware fill, it creates most hilarious visualizations of building facades, cats, shoes and bags based on minimal user input.

    63
    The edges2cats algorithm employs machine learning to finish your cat doodle as a photorealistic cat monster. (View large version64)

    Design Pattern: Graceful Failure Link

    I call the final pattern graceful failure. It means saying “sorry, I can’t do what you want because…” in an understandable way.

    This is by no means unique to machine learning applications. It is innately human, but something that computers have been notoriously bad at since the time that syntax errors were repeatedly echoed by Commodore computers in the 1980s. But with machine learning, it’s slightly different. Because machine learning takes a fuzzy-logic approach to computing, there are new ways that the computer could produce unexpected results — that is, things could go very bad, and that has to be designed for. Nobody seriously blames the car in question for the death that occurred in the Tesla autopilot accident in 2016.

    The other part is that building applications that rely on modern machine learning is still in its infancy. Classic software development has been around for so long that we’ve learned to deal with its insufficiencies better. As Peter Norvig, famous AI researcher and Google’s research director, puts it like this65:

    The problem here is the methodology for scaling this up to a whole industry is still in progress.… We don’t have the decades of experience that we have in developing and verifying regular software.

    The nature of learning is such that computers learn from what is given to them. If the algorithm has to deal with something else, then the results will not be to your liking. For example, if you’ve trained a system to detect animal species from pet photos and then start using it to classify plants, there will be trouble. This is more or less why Microsoft’s Twitterbot Tay had to be silenced66 after it picked up the wrong examples from malicious users when exposed to real-world conditions.

    The uncertainty in detection and prediction should be taken into consideration. How this is done depends on the application. Consider Google Search. No one is offended or truly hurt, but merely amused or frustrated, by bad search results. Of course, bad results will eventually be bad for business. However, if your bank started using a chatbot that suddenly could not figure out your checking account’s balance, you would be rightfully worried and should be offered a quick way to resolve your trouble.

    To deal with failure, interfaces would do well to help both parties adjust. Users can tolerate one or two “I didn’t get that, please say that again” prompts (but no more) if that’s what it takes to advance the dialogue. For services that include machine learning, extensive testing is best. Next comes informing users about the probability and consequences of failure, and instructions on what the user might do to avoid it. The good practices are still emerging.

    Summary Link

    With machine learning, our vision of tomorrow is quickly becoming today’s reality.

    Overall, there hardly seems to be an application that machine learning could not be used to detect or predict. I’ve introduced plenty of examples of deploying machine learning to varying success. In all of the examples, I’ve tried to illustrate some core learning challenge to help you understand what sorts of tasks machines respond to. Now it is time to face the question of what machine learning can do for you!

    I don’t expect that this guide alone will suffice for radical innovation in the sphere of intelligent products and services. I do hope that it will open the eyes of several designers to the opportunities that machine learning solutions afford us today. It is important to understand approximately what you can realistically ask from a machine. In the near future, good questions will become ever more important, so that the answer will be, “Yes, Dave. I can do that.”

    Thanks to Max Pagels, Janne Aukia, Antti Rauhala, Teemu Kinnunen and Patrick Hebron for discussing the topic.

    Further Resources Link

    Article by Fabien Girardin: Experience Design in the Machine Learning Era67

    Article by Neal Lathia: Machine learning for product managers68

    Video of Andrew Ng: Artificial Intelligence is the New Electricity69 (Stanford GSB). Ng talks of product management, but his insights are relevant to design as well.

    (rb, yk, al, il)

    Footnotes Link

    1. 1 https://www.smashingmagazine.com/2017/01/algorithm-driven-design-how-artificial-intelligence-changing-design/
    2. 2 https://www.smashingmagazine.com/2016/12/conversational-design-essentials-tips-for-building-a-chatbot/
    3. 3 https://www.smashingmagazine.com/2016/11/does-conversation-hurt-or-help-the-chatbot-ux/
    4. 4 https://www.smashingmagazine.com/2016/07/conversational-interfaces-where-are-we-today-where-are-we-heading/
    5. 5 https://twitter.com/AndrewYNg/status/788548053745569792
    6. 6 https://sc5.io/posts/basics-of-machine-learning/
    7. 7 https://blogs.nvidia.com/blog/2016/07/29/whats-difference-artificial-intelligence-machine-learning-deep-learning-ai/
    8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Robot_bus_warning-large-opt.jpg
    9. 9 http://sohjoa.fi/
    10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Robot_bus_warning-large-opt.jpg
    11. 11 https://support.google.com/docs/answer/7130307?co=GENIE.Platform%3DDesktop&hl=en
    12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Google_Presentation_Explore-large-opt.jpg
    13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/03/Google_Presentation_Explore-large-opt.jpg
    14. 14 https://gogameguru.com/tag/deepmind-alphago-lee-sedol/
    15. 15 https://gogameguru.com/tag/deepmind-alphago-lee-sedol/
    16. 16 https://hbr.org/2016/11/what-artificial-intelligence-can-and-cant-do-right-now
    17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Table_of_functions-large-opt.png
    18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Table_of_functions-large-opt.png
    19. 19 https://sc5.io/posts/basics-of-machine-learning/
    20. 20 http://www.bbc.com/news/technology-27762088
    21. 21 https://www.nytimes.com/2016/12/14/magazine/the-great-ai-awakening.html
    22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Amazon-Echo-Dot-large-opt.jpg
    23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Amazon-Echo-Dot-large-opt.jpg
    24. 24 https://t.co/UuDdAms0Yt
    25. 25 https://t.co/erodS8hoJg
    26. 26 https://twitter.com/SAI/status/831244067191345152
    27. 27 http://www.computerworld.com/article/2860758/ibm-detects-skin-cancer-more-quickly-with-visual-machine-learning.html
    28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Google_Photos_tagging-large-opt.jpg
    29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Google_Photos_tagging-large-opt.jpg
    30. 30 https://play.google.com/store/apps/details?id=de.fraunhofer.idmt.hsa.Silometer&hl=en
    31. 31 https://backchannel.com/an-exclusive-look-at-how-ai-and-machine-learning-work-at-apple-8dbfb131932b
    32. 32 http://newatlas.com/japanese-car-seat-identification/20947/
    33. 33 https://security.googleblog.com/2014/12/are-you-robot-introducing-no-captcha.html
    34. 34 http://www.nytimes.com/2012/02/19/magazine/shopping-habits.html
    35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-ReCaptcha-large-opt.png
    36. 36 https://www.wired.com/2001/02/call-it-super-bowl-face-scan-i/
    37. 37 http://danielnouri.org/notes/2014/01/10/using-deep-learning-to-listen-for-whales/
    38. 38 http://www.meetcortex.com/blog/how-machine-learning-can-save-the-whale/
    39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Humpback_whale_pixabay-large-opt.jpg
    40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Humpback_whale_pixabay-large-opt.jpg
    41. 41 http://www.oreilly.com/design/free/machine-learning-for-designers.csp
    42. 42 https://en.wikipedia.org/wiki/Weather_forecasting#Broadcasts
    43. 43 http://www.wired.co.uk/article/song-prediction-algorithm
    44. 44 https://how-old.net/
    45. 45 https://how-old.net/
    46. 46 http://www.slideshare.net/UXSTRAT/ux-strat-usa-belmer-negrillo-a-personalization-model-for-adaptive-learning
    47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Amazon_personalization-large-opt.png
    48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Amazon_personalization-large-opt.png
    49. 49 https://www.wolfram.com/mathematica/new-in-10/highly-automated-machine-learning/distinguish-daytime-from-nighttime-pictures.html
    50. 50 https://www.tastehit.com/blog/google-deepmind-alphago-how-it-works/
    51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-AlphaGo-game-large-opt.png
    52. 52 https://www.youtube.com/watch?v=vFr3K2DORc8
    53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-AlphaGo-game-large-opt.png
    54. 54 https://www.quora.com/Whats-the-system-architecture-of-the-IBM-Watson
    55. 55 https://en.wikipedia.org/wiki/Netflix_Prize
    56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Four_design_patterns-large-opt.png
    57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Four_design_patterns-large-opt.png
    58. 58 #suggested
    59. 59 #personalization
    60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Photoshop-ML-prediction-large-opt.jpg
    61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Photoshop-ML-prediction-large-opt.jpg
    62. 62 http://affinelayer.com/pixsrv/index.html
    63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Edges2cats-large-opt.png
    64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/03/AMLD-Edges2cats-large-opt.png
    65. 65 http://events.technologyreview.com/video/watch/peter-norvig-state-of-the-art-ai/
    66. 66 https://techcrunch.com/2016/03/24/microsoft-silences-its-new-a-i-bot-tay-after-twitter-users-teach-it-racism/
    67. 67 https://medium.com/@girardin/experience-design-in-the-machine-learning-era-e16c87f4f2e2
    68. 68 https://hackernoon.com/machine-learning-for-product-managers-ba9cf8724e57#.leqry3khu
    69. 69 https://www.youtube.com/watch?v=21EiKfQYZXc&feature=youtu.be&t=43m16s

    ↑ Back to topTweet itShare on Facebook