Curt Long

When did you take your last vacation? For many of us, it was probably a long time ago. However, since quite a while, I stumble across more and more stories about companies that take unusual steps vacation-wise. Companies giving their employees a day off each week in summer or going on vacation together as a team building event instead of traveling somewhere just to work.

But while there’s a new generation building their dream work environments, a lot of people still suffer from very bad working conditions. They work long hours and are discriminated or harassed by colleagues or their managers. And just this week, I heard that many company owners are desperate because “Generation Y” doesn’t want to work long hours anymore.

As with every major break in generations, I think it’s good to have people standing up for their rights, enjoying their life and their work. But we also need to talk with executives who are under pressure to match deadlines. Because only if we show them evidence that working less can be beneficial for their employees’ health and productiveness, we can convince them to let us work more freely.

Further Reading on SmashingMag: Link

• Webpack: A Detailed Introduction¹
• CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout²
• Getting Work Done Without Working More Hours³
• On Creative Leadership⁴

News Link

• Git 2.13 was released⁵ and comes with SHA-1 collision detection, more convenient path specs, and conditional configuration which is especially nice if you work for several teams or on several projects.
• The IPFS team currently works hard to provide an uncensorable version of Wikipedia via IPFS⁶, and, following news of Turkey blocking access to Wikipedia, the Turkish version is already available⁷.

Concept & Design Link

• Nick Babich gives an overview of patterns to provide a well-working mobile navigation interface¹⁰, so you can decide which one works best for your current project.

Tools & Workflow Link

• Even Stensberg announced the new Webpack CLI¹¹ which features an init and migrate command to help ease the setup of Webpack.

CSS/Sass Link

• Tyler Sticka shares a technique that uses CSS Grid to break out of a fixed width container¹². This simplifies the markup and styling of layouts that mix full width and limited width containers.
• Ana Tudor explores various ways to use new CSS techniques to contrast text against backgrounds¹³.

¹⁴

Work & Life Link

• Laïla von Alvensleben shares why the company she works at decided to do a different kind of team trip for a change¹⁷. When traveling to Sri Lanka, the Hanno team chose to not bring their laptops or plan work-related meetings or activities but focus on Yoga and surfing instead to bond as a team.

Thanks for reading this. If you like it, consider supporting my work¹⁸.

—Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
2. 2 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
3. 3 https://www.smashingmagazine.com/2015/12/getting-work-done-without-simply-working-hours/
4. 4 https://www.smashingmagazine.com/2013/08/on-creative-leadership/
5. 5 https://github.com/blog/2360-git-2-13-has-been-released
6. 6 https://ipfs.io/blog/24-uncensorable-wikipedia/
7. 7 https://ipfs.io/ipfs/QmT5NvUtoM5nWFfrQdVrFtvGfKFmG7AHE8P34isapyhCxX/wiki/Anasayfa.html
8. 8 https://ipfs.io/blog/24-uncensorable-wikipedia/
9. 9 https://ipfs.io/blog/24-uncensorable-wikipedia/
10. 10 https://www.smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/
11. 11 https://medium.com/webpack/announcing-the-new-webpack-cli-75ce1d9b8663
12. 12 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
13. 13 https://css-tricks.com/methods-contrasting-text-backgrounds/
14. 14 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
15. 15 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
16. 16 https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
17. 17 https://logbook.hanno.co/shipmates-in-srilanka/
18. 18 https://wdrl.info/donate

↑ Back to topTweet itShare on Facebook

Fuse is a toolkit for creating apps that run on both iOS and Android devices. It enables you to create apps using UX Markup, an XML-based language. But unlike the components in React Native¹ and NativeScript², Fuse is not only used to describe the UI and layout; you can also use it to add effects and animation.

Styles are described by adding attributes such as Color and Margin to the various elements. Business logic is written using JavaScript. Later on, we’ll see how all of these components are combined to build a truly native app.

In this article, you will learn what Fuse is all about. We’ll see how it works and how it compares to other platforms such as React Native and NativeScript. In the second half of the article³, you will create your first Fuse app. Specifically, you will create a weather app that shows the weather based on the user’s current location. Here’s what the output will look like:

In creating the app, you will learn how to use some of Fuse’s built-in UI components and learn how to access native device functionality such as geolocation. Towards the end of the article, you will consolidate your learning by looking at the advantages and disadvantages of using Fuse for your next mobile app project.

Further Reading on SmashingMag: Link

• Best Of Both Worlds: Mixing HTML5 And Native Code⁵
• Why You Should Consider React Native For Your Mobile App⁶
• A Glimpse Into The Future With React Native For Web⁷
• Hybrid Mobile Apps: Providing A Native Experience With Web Technologies⁸

How Does Fuse Work? Link

I’d like to describe how Fuse works using the following diagram:

⁹

On the top layer are the UX Markup and JavaScript. This is where we will spend most of our time when working with Fuse. On the middle layer are the libraries that are packaged with Fuse. This includes the JavaScript APIs that allow access to native device features such as geolocation and the camera. Lastly, on the bottom layer is the Uno compiler, which is responsible for translating the UX Markup into pure native code (Objective-C for iOS and C++ for Android). Once the app runs, all of the UI that you will see will be native UI for that particular platform. JavaScript code is executed via a virtual machine on a separate thread. This makes the UI really snappy because JavaScript won’t affect the UI’s performance.

How Does It Compare To React Native And NativeScript? Link

Before we create an app with Fuse, one of the important questions that needs to be answered is how does it stack up against existing tools that do the same job. In this section, we’ll learn about the features and tools available in Fuse compared to those of React Native and NativeScript, as well as how things are done on each platform. Specifically, we’ll compare the following areas:

• UI markup
• Layout
• JavaScript APIs
• Extendability
• JavaScript Libraries
• Animation
• Community
• Development Workflow
• Debugging

UI Markup Link

On all platforms, the UI can be built using an XML-based language. Common UI components such as text fields, switches and sliders are available on each platform.

React Native has the most of these components, although some are not unified, which means that there can be a maximum of two ways to use a particular component. For example, one can be used on both platforms, and one for a specific platform only. A few components, such as the ProgressBar, are also implemented differently on each platform, which means that it’s not totally “write once, run everywhere.”

On the other hand, NativeScript has a unified way of implementing the different UI components on each platform. For every component, there’s an equivalent native component for both Android and iOS.

Fuse has a decent number of UI components that will cover the requirements of most projects. One component that’s not built into either React Native or NativeScript is the Video component, which can be used to play local videos and even videos from the Internet. The only component that is currently missing is the date-picker, which is especially useful during user registration. Though you can always create your own using the components that are already available to Fuse.

Layout Link

In React Native, layout is done with Flexbox. In a nutshell, Flexbox enables you to specify how content should flow through the available space. For example, you can set flex to 1 and flexDirection to row in a container element in order to equally divide the available space among the children and to arrange the children vertically.

<View style={{flex: 1, flexDirection: 'row'}}> <View style={{backgroundColor: 'powderblue'}} /> <View style={{backgroundColor: 'skyblue'}} /> <View style={{backgroundColor: 'steelblue'}} /> </View>

In NativeScript, layout is achieved using layout containers, the most basic one being StackLayout, which puts all elements on top of each other, just like in the example below. In a horizontal orientation, they’re placed side by side.

<StackLayoutorientation="vertical"><Imagesrc="assets/images/dog.png"/><Imagesrc="assets/images/cat.png"/><Imagesrc="assets/images/gorilla.png"/></StackLayout>

Similarly, Fuse achieves layout by using a combination of the different elements in UX Markup, the most common ones being StackPanel, Grid and DockPanel. StackPanel works similar to StackLayout in NativeScript. Here’s an example:

<StackPanelOrientation="Vertical"><PanelHeight="100"Background="Red"/><PanelHeight="100"Background="White"/><PanelHeight="100"Background="Blue"/></StackPanel>

JavaScript APIs Link

All of the platforms cover all of the basics with JavaScript APIs. Things like camera functionality, platform information, geolocation, push notifications, HTTP requests and local storage can be done on all platforms. However, looking at the documentation for each platform, you could say that React Native has the most JavaScript APIs that bridge the gap between native and “JavaScript native” features. There’s no official name yet for platforms such as React Native, NativeScript and Fuse, so let’s just stick with “JavaScript native” for now, because they all use JavaScript to write code and they all offer native-like performance.

Extendability Link

If you need access to specific device features that don’t expose a JavaScript API yet, each platform also provides ways for developers to tap into native APIs for Android and iOS.

NativeScript gives you access to all of the native APIs of the underlying platform through JavaScript. This means you don’t have to touch any Swift, Objective-C or Java code in order to make use of the native APIs. The only requirement is that you know how the native APIs work.

React Native falls a bit short in accessing native APIs because you’ll have to know the native language in order to extend native functionality. This is done by creating a native module (an Objective-C class for iOS or a Java class for Android), exposing your desired public methods to JavaScript, then importing it into your project.

Fuse allows you to extend functionality through a feature that it refers to as “foreign code.” This allows you to call native code on each platform through the Uno language. The Uno language is the core technology of Fuse. It’s what makes Fuse work behind the scenes. Making use of native features that aren’t supported by the core Fuse library is done by creating an Uno class. Inside the Uno class, you can write the Objective-C or Java code that implements the functionality you want and have it exposed as JavaScript code, which you can then call from your project.

JavaScript Libraries Link

Both React Native and NativeScript supports the use of all npm packages that don’t have dependencies on the browser model. This means you can use a library such as lodash and moment simply by executing npm install {package-name} in your project directory and then importing it in any of your project files, just like in a normal JavaScript project.

Fuse, on the other hand, is currently lacking in this regard. Usage of existing JavaScript libraries is mostly not possible; only a short list of libraries¹⁰ are known to work. The good news is that the developers are constantly working on polyfills to improve compatibility with existing libraries.

Animation Link

Another important part of the UX is animation. In React Native, animation is implemented via its Animated API. With it, you can customize the animation a lot. For example, you can specify how long an animation takes or how fast it runs. But this comes with the downside of not being beginner-friendly. Even simple animation such as scaling a particular element requires a lot of code. The good thing is that libraries such as React Native Animatable¹¹ make it easier to work with animation. Here’s sample code for implementing a fadeIn animation using the Animatable library:

<Animatable.View animation="fadeIn">Fade me in!</Animatable.View>

NativeScript animations can be implemented in two ways: via the CSS3 animations API or the JavaScript API. Here’s an example of scaling an element with a class of el:

.el {animation-name: scale;animation-duration: 1;}@keyframes scale {from {transform: scale(1, 1);}to {transform: scale(1.5, 1.5);}}

And here’s the JavaScript equivalent:

var view = page.getViewById('box'); //must have an element with an ID of box in the markup view.animate({ scale:{ x:1.5, y:1.5}, duration:1000});

Animation in Fuse is implemented via triggers and animators. Triggers are used to detect whether something is happening in the app, whereas animators are used to respond to those events. For example, to make something bigger when pressed, you would have this:

<RectangleWidth="50"Height="50"Fill="#ccc"><WhilePressed><ScaleFactor="2"/></WhilePressed></Rectangle>

In this case, <WhilePressed> is the trigger and <Scale> is the animator.

Community Link

When it comes to community, React Native is the clear winner. Just the fact that it was created by Facebook is a big deal. Because the main technology used to create apps is React, React Native taps into that community as well. This means that a lot of projects can help you to develop apps. For example, you can reuse existing React components for your React Native project. And because many people use it, you can expect to quickly get help when you get stuck, because you can just search for an answer on Stack Overflow. React Native is also open-source, and the source code is available on GitHub¹². This makes development really fast because the maintainers can accept help from developers outside of the organization.

NativeScript, meanwhile, was created by Telerik. The project has a decent-sized community behind it. If you look at its GitHub page¹³, currently over 10,000 people have starred the project. It has been forked 700 times, so one can assume that the project is getting a lot of contributions from the community. There are also a lot of NativeScript packages on npm and questions on Stack Overflow, so expect that you won’t have to implement custom functionality from scratch or be left alone looking for answers if you get stuck.

Fuse is the lesser known among the three. It doesn’t have a big company backing it up, and Fuse is basically the company itself. Even so, the project comes complete with documentation, a forum, a Slack channel, sample apps, sample code and video tutorials, which make it very beginner-friendly. The Fuse core is not yet open-source, but the developers will be making the code open-source soon.

Development Workflow Link

With React Native and NativeScript, you need to have an actual mobile device or an emulator if you want to view changes while you’re developing the app. Both platforms also support live reloading, so every time you make a change to the source files, it automatically gets reflected in the app — although there’s a slight delay, especially if your machine isn’t that powerful.

Fuse, on the other hand, allows you to preview the app both locally and on any number of devices currently connected to your network. This means that both designers and developers can work at the same time and be able to preview changes in real time. This is helpful to the designer because they can immediately see what the app looks like with real data supplied by the developer’s code.

Debugging Link

When it comes to debugging, both React Native and NativeScript tap into Chrome’s Developer Tools. If you’re coming from a web development background, the debugging workflow should make sense to you. That being said, not all features that you’re used to when inspecting and debugging web projects are available. For example, both platforms allow you to debug JavaScript code but don’t allow you to inspect the UI elements in the app. React Native has a built-in inspector that is the closest thing to the element inspector in Chrome’s Developer Tools. NativeScript currently doesn’t have this feature.

On the other hand, Fuse uses the Debugging Protocol in Google’s V8 engine to debug JavaScript code. This allows you to do things like add breakpoints to your code and inspect what each object contains at each part in the execution of the code. The Fuse team encourages the use of the Visual Studio Code¹⁴ text editor for this, but any text editor or IDE that supports V8’s Debugging Protocol should work. If you want to inspect and visually edit the UI elements, Fuse also includes an inspector — although it allows you to adjust only a handful of properties at the moment, things like widths, heights, margins, padding and colors.

Creating A Weather App With Fuse Link

Now you’re ready to create a simple weather app with Fuse. It will get the user’s location via the GeoLocation API and will use the OpenWeatherMap API to determine the weather in the user’s location and then display it on the screen. You can find the full source code of the app in the GitHub repository¹⁵.

To start, go to the OpenWeatherMap website and sign up for an account¹⁶. Once you’re done signing up, it should provide you with an API key, which you can use to make a request to its API later on.

Next, visit the Fuse downloads page¹⁷, enter your email address, download the Fuse installer for your platform, and then install it. Once it’s installed, launch the Fuse dashboard and click on “New Project”. This will open another window that will allow you to select the path to your project and enter the project’s name.

¹⁸

Do that and then click on the “Create” button to create your project. If you’re using Sublime Text 3, you can click on the “Open in Sublime Text 3” button to open a new Sublime Text instance with the Fuse project²⁰ already loaded. Once you’re in there, the first thing you’ll want to do is install the Fuse package. This includes code completion, “Goto definition,” previewing the app from Sublime and viewing the build.

Once the Fuse plugin is installed, open the MainView.ux file. This is the main file that we will be working with in this project. By default, it includes sample code for you to play with. Feel free to remove all of the contents of the file once you’re done inspecting it.

When you create an app with Fuse, you always start with the <App> tag. This tells Fuse that you want to create a new page.

<App></App>

Fuse allows you to reuse icon fonts that are commonly used for the web. Here, we’re using Weather Icons²¹. Use the <Font> tag to specify the location of the web font file in your app directory via the File attribute. For this project, it’s in the fonts folder at the root directory of the project. We also need to give it a ux:Global attribute, which will serve as its ID when you want to use this icon font later on.

<FontFile="fonts/weather-icons/font/weathericons-regular-webfont.ttf"ux:Global="wi"/>

Next, we have the JavaScript code. We can include JavaScript code anywhere in UX Markup by using the <JavaScript> tag. Inside the tag will be the JavaScript code to be executed.

<JavaScript></JavaScript>

In the <JavaScript> tag, require two built-in Fuse libraries: Observable and GeoLocation. Observable allows you to implement data-binding in Fuse. This makes it possible to change the value of the variable via JavaScript code and have it automatically reflected in the UI of the app. Data-binding in Fuse is also two-way; so, if a change is made to a value via the UI, then the value stored in the variable will also be updated, and vice versa.

var Observable =require('FuseJS/Observable');

GeoLocation allows you to get location information from the user’s device.

var Geolocation =require('FuseJS/GeoLocation');

Create an object containing the hex code for each of the weather icons that we want to use. You can find the hex code on the GitHub page of the icon font²².

var icons = {'clear':'uF00d', 'clouds':'uF002', 'drizzle':'uF009', 'rain':'uF008', 'thunderstorm':'uF010', 'snow':'uF00a', 'mist':'uF0b6', 'fog':'uF003',  'temp': 'uF055' };

Create a function to convert Kelvin to Celsius. We need it because the OpenWeatherMap API returns temperatures in Kelvin.

functionkelvinToCelsius(kelvin){return kelvin -273.15;}

Determine whether it’s currently day or night based on the time on the user’s device. We’ll use orange as the background color for the app if it’s day, and purple if it’s nighttime.

var hour =(newDate()).getHours();var color ='#7417C0';if(hour >=5&& hour <=18){ color ='#f38844';}

Add the OpenWeather Map API key that you got earlier and create an observable variable that contains the weather data.

var api_key ='YOUR OPENWEATHERMAP API KEY';var weather_data =Observable();

Get the location information:

var loc = Geolocation.location;

This will return an object containing the latitude, longitude and accuracy of the location. However, Fuse currently has a problem with getting location information on Android. If the location setting is disabled on the device, it won’t ask you to enable it when you open the app. So, as a workaround, you’ll need to first enable location before launching the app.

Make a request to the OpenWeatherMap API using the fetch() function. This function is available in Fuse’s global scope, so you can call it from anywhere without including any additional libraries. This will work the same way as the fetch() function available in modern browsers: It also returns a promise that you need to listen to using the then() function. When the supplied callback function is executed, the raw response is passed in as an argument. You can’t really use this yet since it contains the whole response object. To extract the data that the API actually returned, you need to call the json() function in the response object. This will return another promise, so you need to use then() one more time to extract the actual data. The data is then assigned as the value of the observable that we created earlier.

var req_url ='http://api.openweathermap.org/data/2.5/weather?lat='+ loc.latitude +'&lon='+ loc.longitude +'&apikey='+ api_key;fetch(req_url).then(function(response){return response.json();}).then(function(responseObject){ weather_data.value ={ name: responseObject.name, icon: icons[responseObject.weather[0].main.toLowerCase()], weather: responseObject.weather[0], temperature:kelvinToCelsius(responseObject.main.temp)+' °C'};});

For your reference, here’s a sample response returned by the API:

{"coord":{"lon":120.98,"lat":14.6},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"stations","main":{"temp":304.15,"pressure":1009,"humidity":74,"temp_min":304.15,"temp_max":304.15},"visibility":10000,"wind":{"speed":7.2,"deg":260},"clouds":{"all":75},"dt":1473051600,"sys":{"type":1,"id":7706,"message":0.0115,"country":"PH","sunrise":1473025458,"sunset":1473069890},"id":1701668,"name":"Manila","cod":200}

Export the variables so that it becomes available in the UI.

module.exports ={ weather_data: weather_data, icons: icons, color: color };

Because this project is very small, I’ve decided to put everything in one file. But for real projects, the JavaScript code and the UX Markup should be separated. This is because the designers are the ones who normally work with UX Markup, and the developers are the ones who touch the JavaScript code. Separating the two allows the designer and the developer to work on the same page at the same time. You can separate the JavaScript code by creating a new JavaScript file in the project folder and then link it in your markup, like so:

<JavaScriptFile="js/weather.js">

Finally, add the actual UI of the app. Here, we’re using <DockPanel> to wrap all of the elements. By default, <DockPanel> has a Dock property that is set to Fill, so it’s the perfect container for filling the entire screen with content. Note that we didn’t need to set that property below because it’s implicitly added. Below, we have only assigned a Color attribute, which allows us to set the background color using the color that we exported earlier.

<DockPanelColor="{color}"></DockPanel>

Inside <DockPanel> is <StatusBarBackground>, which we’ll dock to the top of the screen. This allows us to show and customize the status bar on the user’s device. If you don’t use this component, <DockPanel> will consume the entirety of the screen, including the status bar. Simply setting this component will make the status bar visible. We don’t really want to customize it, so we’ll just leave the defaults.

<StatusBarBackgroundDock="Top"/>

Below <StatusBarBackground> is the actual content. Here, we’re wrapping everything in a <ScrollView> to enable the user to scroll vertically if the content goes over the available space. Inside is <StackPanel>, containing all of the weather data that we want to display. This includes the name of the location, the icon representing the current weather, the weather description and the temperature. You can display the variables that we exported earlier by wrapping them in braces. For objects, individual properties are accessed just like you would in JavaScript.

<ScrollView><StackPanelAlignment="Center"><TextValue="{weather_data.name }"FontSize="30"Margin="0,20,0,0"Alignment="Center"TextColor="#fff"/><TextValue="{weather_data.icon}"Alignment="Center"Font="wi"FontSize="150"TextColor="#fff"/><TextValue="{weather_data.weather.description}"FontSize="30"Alignment="Center"TextColor="#fff"/><StackPanelOrientation="Horizontal"Alignment="Center"><TextValue="{icons.temp}"Font="wi"FontSize="20"TextColor="#fff"/><TextValue="{weather_data.temperature}"Margin="10,0,0,0"FontSize="20"TextColor="#fff"/></StackPanel></StackPanel></ScrollView>

You might also notice that all attributes and their values are always capitalized; this is the standard in Fuse. Lowercase or uppercase won’t really work. Also, notice that Alignment="Center" and TextColor="#fff" are repeated a few times. This is because Fuse doesn’t have the concept of inheritance when it comes to styling properties, so setting TextColor or Alignment in a parent component won’t actually affect the nested components. This means we need to repeat it for each component. This can be mitigated by creating components and then simply reusing them without specifying the same style properties again. But this isn’t really flexible enough, especially if you need a different combination of styles for each component.

The last thing you’ll need to do is to open the {your project name}.unoproj file at the root of your project folder. This is the Uno project file. By default, it contains the following:

{"RootNamespace":"","Packages":["Fuse","FuseJS"],"Includes":["*"]}

This file specifies what packages and files to include in the app’s build. By default, it includes the Fuse and FuseJS packages and all of the files in the project directory. If you don’t want to include all of the files, edit the items in the Includes array, and use a glob pattern to target specific files:

"Includes":["*.ux","js/*.js"]

You can also use Excludes to blacklist files:

"Excludes":["node_modules/"]

Going back to the Packages, Fuse and FuseJS allow you to use Fuse-specific libraries. This includes utility functions such as getting the environment in which Fuse is currently running:

var env =require('FuseJS/Environment');if(env.mobile){debug_log("There's geo here!");}

To keep things lightweight, Fuse includes only the very basics. So, you’ll need to import things like geolocation as separate packages:

"Packages":["Fuse","FuseJS","Fuse.GeoLocation"],

Once Fuse.GeoLocation has been added, Fuse will add the necessary libraries and permissions to the app once you’ve compiled the project.

Running the App Link

You can run the app via the Fuse dashboard by selecting the project and clicking on the “Preview” button.

²³

This lets you pick whether to run on Android, iOS or locally. (Note that there is no iOS option in the screenshot because I’m running on Windows.) Select “Local” for now, and then click on “Start.” This should show you a blank screen because geolocation won’t really work in a local preview. What you can do is close the preview then update the req_url to use the following instead, which allows you to specify a place instead of the coordinates:

var req_url ='http://api.openweathermap.org/data/2.5/weather?q=london,uk&apikey='+ api_key;

You’ll also need to comment out all of the code that uses geolocation:

//var Geolocation = require('FuseJS/GeoLocation'); //var loc = Geolocation.location; //var req_url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + loc.latitude + '&lon=' + loc.longitude + '&apikey=' + api_key; 

Run the app again, and it should show you something similar to the screenshot at the beginning of the article.

If you want to run on a real device, please check “Preview and Export²⁵” in the documentation. It contains detailed information on how to deploy your app to both Android and iOS devices.

Pros And Cons Of Fuse Link

Now that you have tested the waters, it’s time to look at some of the pros and cons of using Fuse for your next mobile app project. As you have seen so far, Fuse is both developer- and designer-friendly, because of its real-time updates and multi-device preview feature, which enables developers and designers to work at the same time. Combine that with the native UX and access to device features, and you’ve got yourself a complete platform for building cross-platform apps. This section will drive home the point on why you should (or shouldn’t) use Fuse for your next mobile app project. First, let’s look at the advantages.

Developer- and Designer-Friendly Link

Fuse is developer-friendly because it uses JavaScript for the business logic. This makes it a very approachable platform for creating apps, especially for web developers and people who have some JavaScript experience. In addition, it plays nice with JavaScript transpilers such as Babel. This means that developers can use new ECMAScript 6 features to create Fuse apps.

At the same time, Fuse is designer-friendly because it allows you to import assets from tools such as Sketch, and it will automatically take care of slicing and exporting the pieces for you.

Aside from that, Fuse clearly separates the business logic and presentation code. The structure, styles and animations are all done in UX Markup. This means that business-logic code can be placed in a separate file and simply linked from the app page. The designer can then focus on designing the user experience. Being able to implement animations using UX Markup makes things simpler and easier for the designer.

Focus on Collaboration and Productivity Link

Fuse makes it very easy for designers and developers to collaborate in real time. It allows for simultaneous previewing of the app on multiple devices. You only need USB the first time you connect the device. Once the device has been connected, all you need to do is connect the device to the same Wi-Fi network as your development machine, and all your changes will be automatically reflected on all devices where the app is open. The sweetest part is that changes get pushed to all the devices almost instantly. And it works not just on code changes: Any change you make on any linked asset (such as images) will trigger the app to reload as well.

Fuse also comes with a preview feature that allows you to test changes without a real device. It’s like an emulator but a lot faster. In “design mode,” you can edit the appearance of the app using the graphical user interface. Developers will also benefit from the logging feature, which allows them to easily debug the app if there are any errors.

Very Extendable Link

If you need functionality not already provided by the Fuse libraries, Fuse also allows you to implement the functionality yourself using Uno. Uno is a language created by the Fuse team itself. It’s a sub-language of C# that compiles to C++. This is Fuse’s way of letting you access the native APIs of each platform (Android and iOS).

Native-Like UI Performance Link

UX Markup is converted to the native UI equivalent at compile time. This makes the UI really snappy and is comparable to native performance. And because animations are also written declaratively using UX Markup, animations are done natively as well. Behind the scenes, Fuse uses OpenGL ES²⁶ acceleration to make things fast.

Cons Link

No tool is perfect, and Fuse is no exception. Here are a few things to consider before picking Fuse.

• Structure and style are mixed together. This makes the code a bit difficult to edit because you have to specify styles separately for each element. This can be alleviated by creating components in which you put common styles.
• Linux is not supported, and it’s not currently on the road map. Though Linux developers who want to try out Fuse can still use a Windows Virtual Machine or Wine to install and use Fuse on their machine.
• It’s still in beta, which means it’s still rough around the edges and not all the features that you might expect from a mobile app development platform is supported. That said, Fuse is very stable and does a good job at the small set of features that it currently supports.
• It’s not open-source, though there are plans to open-source the core Fuse platform. This doesn’t mean that you can’t use Fuse for anything though. You can freely use Fuse to create production apps. If you’re interested about licensing, you can read more about it in the Fuse License Agreement.²⁷

Final Thoughts Link

We’ve learned about Fuse, a newcomer in the world of JavaScript native app development. From what I’ve seen so far, I can say that this project has a lot of potential. It really shines in multi-device support and animation. And the fact that it’s both designer- and developer-friendly makes it a great tool for developing cross-platform apps.

Further Learning Link

• Fuse documentation²⁸
  There’s no better place to learn about a new technology than the official documentation.
• “Learning Fuse²⁹,” YouTube
  
  If you learn better through videos, the Fuse team has put together this YouTube playlist to help you learn about the features that Fuse offers.
• “How Fuse Differs From React Native and NativeScript³⁰,” Remi Pedersen, Medium
  
  Learn the technical differences between Fuse and React Native and NativeScript.

(da, vf, yk, al, il)

Footnotes Link

1. 1 https://facebook.github.io/react-native/
2. 2 https://www.nativescript.org/
3. 3 https://www.smashingmagazine.com/2017/05/fuse-native-cross-platform-apps/#creating-a-weather-app-with-fuse
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/app-preview-opt.png
5. 5 https://www.smashingmagazine.com/2013/10/best-of-both-worlds-mixing-html5-native-code/
6. 6 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
7. 7 https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
8. 8 https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/09/how-fuse-works-opt.png
10. 10 https://www.fusetools.com/docs/fusejs/third-party-modules
11. 11 https://github.com/oblador/react-native-animatable
12. 12 https://github.com/facebook/react-native
13. 13 https://github.com/NativeScript/NativeScript
14. 14 https://code.visualstudio.com/
15. 15 https://github.com/anchetaWern/fuse-simple-weatherapp
16. 16 https://home.openweathermap.org/users/sign_up
17. 17 https://www.fusetools.com/downloads
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/creating-a-project-large-preview-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/creating-a-project-large-preview-opt.png
20. 20 https://packagecontrol.io/packages/Fuse
21. 21 https://erikflowers.github.io/weather-icons/
22. 22 https://erikflowers.github.io/weather-icons/
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/running-the-app-large-preview-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/09/running-the-app-large-preview-opt.png
25. 25 https://www.fusetools.com/docs/basics/preview-and-export
26. 26 https://en.wikipedia.org/wiki/OpenGL_ES
27. 27 https://res.cloudinary.com/fusetools/raw/upload/staticwebsitecontent_v2/f904f85bf03ee6f2898f99d78777d445__media/fuse_developer_preview_license_agreement.pdf
28. 28 https://www.fusetools.com/docs
29. 29 https://www.youtube.com/playlist?list=PLdlqWm6b-XALJgM3fGa4q95Yipsgb8Q1o
30. 30 https://medium.com/@fusetools/how-fuse-differs-from-react-native-and-nativescript-525344f02aaf#.iqhv9p5oo

↑ Back to topTweet itShare on Facebook

There’s a lot of hype about WebAssembly in JavaScript circles today. People talk about how blazingly fast it is, and how it’s going to revolutionize web development. But most conversations don’t go into the details of why it’s fast. In this article, I want to help you understand what exactly it is about WebAssembly that makes it fast.

But first, what is it? WebAssembly is a way of taking code written in programming languages other than JavaScript and running that code in the browser.

When you’re talking about WebAssembly, the apples to apples comparison is with JavaScript. Now, I don’t want to imply that it’s an either/or situation — that you’re either using WebAssembly or using JavaScript. In fact, we expect that developers will use WebAssembly and JavaScript hand-in-hand, in the same application. But it is useful to compare the two, so you can understand the potential impact that WebAssembly will have.

Further Reading on SmashingMag: Link

• Webpack: A Detailed Introduction³
• Beyond The Browser: From Web Apps To Desktop Apps⁴
• HTML APIs: What They Are And How To Design A Good One⁵
• Experimenting With speechSynthesis⁶

A Little Performance History Link

JavaScript was created in 1995. It wasn’t designed to be fast, and for the first decade, it wasn’t fast.

Then the browsers started getting more competitive.

In 2008, a period that people call the performance wars began. Multiple browsers added just-in-time compilers, also called JITs. As JavaScript was running, the JIT could see patterns and make the code run faster based on those patterns.

The introduction of these JITs led to an inflection point in the performance of code running in the browser. All of the sudden, JavaScript was running 10x faster.

⁷

With this improved performance, JavaScript started being used for things no one ever expected, like applications built with Node.js and Electron.

We may be at another one of those inflection points now with WebAssembly.

⁹

Before we can understand the differences in performance between JavaScript and WebAssembly, we need to understand the work that the JS engine does.

How JavaScript Is Run In The Browser Link

When you as a developer add JavaScript to the page, you have a goal and a problem.

• Goal: you want to tell the computer what to do.
• Problem: you and the computer speak different languages.

You speak a human language, and the computer speaks a machine language. Even if you don’t think about JavaScript or other high-level programming languages as human languages, they really are. They’ve been designed for human cognition, not for machine cognition.

So the job of the JavaScript engine is to take your human language and turn it into something the machine understands.

I think of this like the movie Arrival, where you have humans and aliens who are trying to talk to each other.

¹¹

In that movie, the humans and aliens can’t just translate from one language to the other, word-for-word. The two groups have different ways of thinking about the world, which is reflected in their language. And that’s true of humans and machines too.

So how does the translation happen?

In programming, there are generally two ways of translating to machine language. You can use an interpreter or a compiler.

With an interpreter, this translation happens pretty much line-by-line, on the fly.

¹³

A compiler on the other hand works ahead of time, writing down the translation.

¹⁵

There are pros and cons to each of these ways of handling the translation.

Interpreter Pros And Cons Link

Interpreters are quick to get code up and running. You don’t have to go through that whole compilation step before you can start running your code. Because of this, an interpreter seems like a natural fit for something like JavaScript. It’s important for a web developer to be able to have that immediate feedback loop.

And that’s part of why browsers used JavaScript interpreters in the beginning.

But the con of using an interpreter comes when you’re running the same code more than once. For example, if you’re in a loop. Then you have to do the same translation over and over and over again.

Compiler Pros And Cons Link

The compiler has the opposite trade-offs. It takes a little bit more time to start up because it has to go through that compilation step at the beginning. But then code in loops runs faster, because it doesn’t need to repeat the translation for each pass through that loop.

As a way of getting rid of the interpreter’s inefficiency — where the interpreter has to keep retranslating the code every time they go through the loop — browsers started mixing compilers in.

Different browsers do this in slightly different ways, but the basic idea is the same. They added a new part to the JavaScript engine, called a monitor (aka a profiler). That monitor watches the code as it runs, and makes a note of how many times it is run and what types are used.

If the same lines of code are run a few times, that segment of code is called warm. If it’s run a lot, then it’s called hot. Warm code is put through a baseline compiler, which speeds it up a bit. Hot code is put through an optimizing compiler, which speeds it up more.

¹⁷

To learn more, read the full article on just-in-time compiling¹⁹.

Let’s Compare: Where Time Is Spent When Running JavaScript Vs. WebAssembly Link

This diagram gives a rough picture of what the start-up performance of an application might look like today, now that JIT compilers are common in browsers.

This diagram shows where the JS engine spends its time for a hypothetical app. This isn’t showing an average. The time that the JS engine spends doing any one of these tasks depends on the kind of work the JavaScript on the page is doing. But we can use this diagram to build a mental model.

²⁰

Each bar shows the time spent doing a particular task.

• Parsing — the time it takes to process the source code into something that the interpreter can run.
• Compiling + optimizing — the time that is spent in the baseline compiler and optimizing compiler. Some of the optimizing compiler’s work is not on the main thread, so it is not included here.
• Re-optimizing — the time the JIT spends readjusting when its assumptions have failed, both re-optimizing code and bailing out of optimized code back to the baseline code.
• Execution — the time it takes to run the code.
• Garbage collection — the time spent cleaning up memory.

One important thing to note: these tasks don’t happen in discrete chunks or in a particular sequence. Instead, they will be interleaved. A little bit of parsing will happen, then some execution, then some compiling, then some more parsing, then some more execution, etc.

This performance breakdown is a big improvement from the early days of JavaScript, which would have looked more like this:

²²

In the beginning, when it was just an interpreter running the JavaScript, execution was pretty slow. When JITs were introduced, it drastically sped up execution time.

The tradeoff is the overhead of monitoring and compiling the code. If JavaScript developers kept writing JavaScript in the same way that they did then, the parse and compile times would be tiny. But the improved performance led developers to create larger JavaScript applications.

This means there’s still room for improvement.

Here’s an approximation of how WebAssembly would compare for a typical web application.

²⁴

There are slight variations between browsers’ JS engines. I’m basing this on SpiderMonkey.

Fetching Link

This isn’t shown in the diagram, but one thing that takes up time is simply fetching the file from the server.

It takes less time to download WebAssembly it does the equivalent JavaScript, because it’s more compact. WebAssembly was designed to be compact, and it can be expressed in a binary form.

Even though gzipped JavaScript is pretty small, the equivalent code in WebAssembly is still likely to be smaller.

This means it takes less time to transfer it between the server and the client. This is especially true over slow networks.

Parsing Link

Once it reaches the browser, JavaScript source gets parsed into an Abstract Syntax Tree.

Browsers often do this lazily, only parsing what they really need to at first and just creating stubs for functions which haven’t been called yet.

From there, the AST is converted to an intermediate representation (called bytecode) that is specific to that JS engine.

In contrast, WebAssembly doesn’t need to go through this transformation because it is already a bytecode. It just needs to be decoded and validated to make sure there aren’t any errors in it.

²⁶

Compiling + Optimizing Link

As I explained before, JavaScript is compiled during the execution of the code. Because types in JavaScript are dynamic, multiple versions of the same code may need to be compiled for different types. This takes time.

In contrast, WebAssembly starts off much closer to machine code. For example, the types are part of the program. This is faster for a few reasons:

• The compiler doesn’t have to spend time running the code to observe what types are being used before it starts compiling optimized code.
• The compiler doesn’t have to compile different versions of the same code based on those different types it observes.
• More optimizations have already been done ahead of time in LLVM. So less work is needed to compile and optimize it.

²⁸

Reoptimizing Link

Sometimes the JIT has to throw out an optimized version of the code and retry it.

This happens when assumptions that the JIT makes based on running code turn out to be incorrect. For example, deoptimization happens when the variables coming into a loop are different than they were in previous iterations, or when a new function is inserted in the prototype chain.

In WebAssembly, things like types are explicit, so the JIT doesn’t need to make assumptions about types based on data it gathers during runtime. This means it doesn’t have to go through reoptimization cycles.

³⁰

Executing Link

It is possible to write JavaScript that executes performantly. To do it, you need to know about the optimizations that the JIT makes.

However, most developers don’t know about JIT internals. Even for those developers who do know about JIT internals, it can be hard to hit the sweet spot. Many coding patterns that people use to make their code more readable (such as abstracting common tasks into functions that work across types) get in the way of the compiler when it’s trying to optimize the code.

Because of this, executing code in WebAssembly is generally faster. Many of the optimizations that JITs make to JavaScript just aren’t necessary with WebAssembly.

In addition, WebAssembly was designed as a compiler target. This means it was designed for compilers to generate, and not for human programmers to write.

Since human programmers don’t need to program it directly, WebAssembly can provide a set of instructions that are more ideal for machines. Depending on what kind of work your code is doing, these instructions run anywhere from 10% to 800% faster.

³²

Garbage Collection Link

In JavaScript, the developer doesn’t have to worry about clearing out old variables from memory when they aren’t needed anymore. Instead, the JS engine does that automatically using something called a garbage collector.

This can be a problem if you want predictable performance, though. You don’t control when the garbage collector does its work, so it may come at an inconvenient time.

For now, WebAssembly does not support garbage collection at all. Memory is managed manually (as it is in languages like C and C++). While this can make programming more difficult for the developer, it does also make performance more consistent.

³⁴

Taken together, these are all reasons why in many cases, WebAssembly will outperform JavaScript when doing the same task.

There are some cases where WebAssembly doesn’t perform as well as expected, and there are also some changes on the horizon that will make it faster. I have covered these future features in more depth³⁶ in another article.

How Does WebAssembly Work? Link

Now that you understand why developers are excited about WebAssembly, let’s look at how it works.

When I was talking about JITs above, I talked about how communicating with the machine is like communicating with an alien.

³⁷

I want to take a look now at how that alien brain works — how the machine’s brain parses and understands the communication coming in to it.

There’s a part of this brain that’s dedicated to the thinking , e.g. arithmetic and logic. There’s also a part of the brain near that which provides short-term memory, and another part that provides longer-term memory.

These different parts have names.

• The part that does the thinking is the Arithmetic-logic Unit (ALU).
• The short term memory is provided by registers.
• The longer term memory is the Random Access Memory (or RAM).

³⁹

The sentences in machine code are called instructions.

What happens when one of these instructions comes into the brain? It gets split up into different parts that mean different things.

The way that this instruction is split up is specific to the wiring of this brain.

For example, this brain might always take bits 4–10 and send them to the ALU. The ALU will figure out, based on the location of ones and zeros, that it needs to add two things together.

This chunk is called the “opcode”, or operation code, because it tells the ALU what operation to perform.

⁴¹

Then this brain would take the next two chunks to determine which two numbers it should add. These would be addresses of the registers.

⁴³

Note the annotations I’ve added above the machine code here, which make it easier for us to understand what’s going on. This is what assembly is. It’s called symbolic machine code. It’s a way for humans to make sense of the machine code.

You can see here there is a pretty direct relationship between the assembly and the machine code for this machine. When you have a different architecture inside of a machine, it is likely to require its own dialect of assembly.

So we don’t just have one target for our translation. Instead, we target many different kinds of machine code. Just as we speak different languages as people, machines speak different languages.

You want to be able to translate any one of these high-level programming languages down to any one of these assembly languages. One way to do this would be to create a whole bunch of different translators that can go from each language to each assembly.

⁴⁵

That’s going to be pretty inefficient. To solve this, most compilers put at least one layer in between. The compiler will take this high-level programming language and translate it into something that’s not quite as high level, but also isn’t working at the level of machine code. And that’s called an intermediate representation (IR).

⁴⁷

This means the compiler can take any one of these higher-level languages and translate it to the one IR language. From there, another part of the compiler can take that IR and compile it down to something specific to the target architecture.

The compiler’s front-end translates the higher-level programming language to the IR. The compiler’s backend goes from IR to the target architecture’s assembly code.

⁴⁹

Where Does WebAssembly Fit? Link

You might think of WebAssembly as just another one of the target assembly languages. That is kind of true, except that each one of those languages (x86, ARM, etc) corresponds to a particular machine architecture.

When you’re delivering code to be executed on the user’s machine across the web, you don’t know what target architecture the code will be running on.

So WebAssembly is a little bit different than other kinds of assembly. It’s a machine language for a conceptual machine, not an actual, physical machine.

Because of this, WebAssembly instructions are sometimes called virtual instructions. They have a much more direct mapping to machine code than JavaScript source code, but they don’t directly correspond to the particular machine code of one specific hardware.

The browser downloads the WebAssembly. Then, it can make the short hop from WebAssembly to that target machine’s assembly code.

⁵¹

To add WebAssembly to your web page, you need to compile it into a .wasm file.

Compiling To .wasm Link

The compiler tool chain that currently has the most support for WebAssembly is called LLVM. There are a number of different front-ends and back-ends that can be plugged into LLVM.

Note: Most WebAssembly module developers will code in languages like C and Rust and then compile to WebAssembly, but there are other ways to create a WebAssembly module. For example, there is an experimental tool that helps you build a WebAssembly module using TypeScript⁵³, or you can code in the text representation of WebAssembly directly⁵⁴.

Let’s say that we wanted to go from C to WebAssembly. We could use the clang front-end to go from C to the LLVM intermediate representation. Once it’s in LLVM’s IR, LLVM understands it, so LLVM can perform some optimizations.

To go from LLVM’s IR to WebAssembly, we need a back-end. There is one that’s currently in progress in the LLVM project. That back-end is most of the way there and should be finalized soon. However, it can be tricky to get it working today.

There’s another tool called Emscripten which is a bit easier to use. It also optionally provides helpful libraries, such as a filesystem backed by IndexDB.

⁵⁵

Regardless of the toolchain you’ve used, the end result is a file that ends in .wasm. Let’s look at how you can use it in your web page.

Loading A .wasm Module In JavaScript Link

The .wasm file is the WebAssembly module, and it can be loaded in JavaScript. As of this moment, the loading process is a little bit complicated.

function fetchAndInstantiate(url, importObject) { return fetch(url).then(response => response.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(results => results.instance ); } 

You can see this in more depth in our docs⁵⁷.

We’re working on making this process easier. We expect to make improvements to the toolchain and integrate with existing module bundlers like webpack or loaders like SystemJS. We believe that loading WebAssembly modules can be as easy as as loading JavaScript ones.

There is a major difference between WebAssembly modules and JS modules, though. Currently, functions in WebAssembly can only use WebAssembly types (integers or floating point numbers) as parameters or return values.

⁵⁸

For any data types that are more complex, like strings, you have to use the WebAssembly module’s memory.

If you’ve mostly worked with JavaScript, having direct access to memory is unfamiliar. More performant languages like C, C++, and Rust, tend to have manual memory management. The WebAssembly module’s memory simulates the heap that you would find in those languages.

To do this, it uses something in JavaScript called an ArrayBuffer. The array buffer is an array of bytes. So the indexes of the array serve as memory addresses.

If you want to pass a string between the JavaScript and the WebAssembly, you convert the characters to their character code equivalent. Then you write that into the memory array. Since indexes are integers, an index can be passed in to the WebAssembly function. Thus, the index of the first character of the string can be used as a pointer.

⁶⁰

It’s likely that anybody who’s developing a WebAssembly module to be used by web developers is going to create a wrapper around that module. That way, you as a consumer of the module don’t need to know about memory management.

I’ve explained more about working with WebAssembly modules⁶² in another article.

What’s The Status Of WebAssembly? Link

On February 28, the four major browsers announced their consensus that the MVP of WebAssembly is complete. Firefox turned WebAssembly support on-by-default about a week after that, and Chrome followed the next week. It is also available in preview versions of Edge and Safari.

This provides a stable initial version that browsers can start shipping.

⁶³

This core doesn’t contain all of the features that the community group is planning. Even in the initial release, WebAssembly will be fast. But it should get even faster in the future, through a combination of fixes and new features. I detail some of these features⁶⁵ in another article.

Conclusion Link

With WebAssembly, it is possible to run code on the web faster. There are a number of reasons why WebAssembly code runs faster than its JavaScript equivalent.

• Downloading — it is more compact, so can be faster to download
• Parsing — decoding WebAssembly is faster than parsing JavaScript
• Compiling & optimizing — it takes less time to compile and optimize because more optimizations have been done before the file is pushed to the server, and the code does need to be compiled multiple times for dynamic types
• Re-optimizing — code doesn’t need to be re-optimized because there’s enough information for the compiler to get it right on the first try
• Execution — execution can be faster because WebAssembly instructions are optimized for how the machine thinks
• Garbage Collection — garbage collection is not directly supported by WebAssembly currently, so there is no time spent on GC

What’s currently in browsers is the MVP, which is already fast. It will get even faster over the next few years, as the browsers improve their engines and new features are added to the spec. No one can say for sure what kinds of applications these performance improvements could enable. But if the past is any indication, we can expect to be surprised.

(rb, ms, cm, il)

This article has been republished from Medium⁶⁶.

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-wasm_intro05-large-opt.png
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-wasm_intro05-large-opt.png
3. 3 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
4. 4 https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/
5. 5 https://www.smashingmagazine.com/2017/02/designing-html-apis/
6. 6 https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-perf_graph05-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-perf_graph05-large-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-perf_graph10-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-perf_graph10-large-opt.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-alien03-large-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-alien03-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-interp02-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-interp02-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-compile02-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-compile02-large-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/07-jit09-large-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/05/07-jit09-large-opt.png
19. 19 https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-diagram_now01-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-diagram_now01-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-diagram_past01-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-diagram_past01-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-diagram_future01-large-opt.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-diagram_future01-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-diagram_compare02-large-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/11-diagram_compare02-large-opt.png
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-diagram_compare03-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/05/12-diagram_compare03-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-diagram_compare04-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/05/13-diagram_compare04-large-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-diagram_compare05-large-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/05/14-diagram_compare05-large-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-diagram_compare06-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/05/15-diagram_compare06-large-opt.png
36. 36 https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-human_alien-large-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/05/16-human_alien-large-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-computer_architecture10-large-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/05/17-computer_architecture10-large-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-computer_architecture13-large-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/18-computer_architecture13-large-opt.png
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-computer_architecture17-large-opt.png
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/19-computer_architecture17-large-opt.png
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-langs05-large-opt.png
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/20-langs05-large-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-langs06-large-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/05/21-langs06-large-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-langs10-large-opt.png
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/05/22-langs10-large-opt.png
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-langs08-large-opt.png
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/05/23-langs08-large-opt.png
53. 53 https://github.com/rsms/wasm-util
54. 54 https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-toolchain07-opt.png
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/24-toolchain07-large-opt.png
57. 57 https://developer.mozilla.org/en-US/docs/WebAssembly
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-memory04-large-opt.png
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/05/25-memory04-large-opt.png
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-memory12-large-opt.png
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2017/05/26-memory12-large-opt.png
62. 62 https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-logo_party01-large-opt.png
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/05/27-logo_party01-large-opt.png
65. 65 https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
66. 66 https://medium.com/@linclark/a9cee6e259ed

↑ Back to topTweet itShare on Facebook

In 2015, Google announced that mobile searches surpassed desktop searches in at least 10 countries. 56% of traffic¹ 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 pages² and a dedicated mobile index, comes across as a sound business move.

More than half of the 2 trillion searches³ 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

• Is Your Responsive Design Working? Google Analytics Will Tell You⁴
• Everything You Need To Know About Google’s Accelerated Mobile Pages⁵
• World Wide Web, Not Wealthy Western Web⁶
• Google’s Mobilegeddon Aftermath: Eight Months Into A Better Mobile Web⁷

Mobile Reality Link

Two years ago, Google introduced a mobile-friendly label⁸ 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:

• Mobile-Friendly Test⁹, Google Search Console
• AMP¹⁰
• “Guidelines for Mobile Web Development¹¹,” Smashing Magazine
• “Responsive Web Design Basics¹²,” Pete LePage, Web Fundamentals, Google Developers
• “Enabling Deep Links for App Content¹³,” Android Developers
• “Google Algorithm Change History¹⁴,” Moz

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 update¹⁵. 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 acceptable¹⁶ 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 barriers¹⁷ 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 guidelines¹⁸:

• 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:

²¹

• 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.

²³

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 page²⁵. 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 basis²⁶. 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 minimal²⁷.

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.

²⁸

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 Check²⁹, 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 interstitials³⁰ 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 guidelines³¹. 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 demotion³² 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. SumoMe³³ 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

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

• What You Should Know About The App Design Process¹
• Creating Wireframes And Prototypes With InDesign²
• The Skeptic’s Guide To Low-Fidelity Prototyping³
• UX Sketching And Wireframing Templates For Mobile Projects (Free Download)⁴

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 Polecat⁵ 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 use⁶ to describe an idea.

2. Consider the Sequence Link

Study basic navigation patterns⁷, 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 method⁸, 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 FSD⁹ 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 story¹⁰ 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 picker¹¹.

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.

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:¹⁴ “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.

¹⁵

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.

¹⁶

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.

¹⁷

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.

¹⁸

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.

¹⁹

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

²³

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:

• Story Splitting Cheat Sheet²⁵ (PDF, 0.25 MB)
• 10 Tips for Writing Good User Stories²⁶, Roman Pichler
• The Wireframe Perfectionist’s Guide²⁷, Edric Lapniramai, Smashing Magazine
• Designing Features Using Job Stories²⁸, Alan Klement, Intercom

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

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

• 30 Usability Issues To Be Aware Of¹
• Applications Of Machine Learning For Designers²
• A Simple Workflow From Development To Deployment³
• Assuming Leadership In Your Design Agency⁴

General Link

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

Concept & Design Link

• Jessica Chen analyzed the Meetup app and now presents the usability issues she found and how they could be fixed⁷. A lot of them are common mistakes we often make when designing and coding our applications.

Tools & Workflows Link

• Ilya Pirozhenko wrote a nice tutorial on how you can search external document files (like PDF or Word) with Elastic Search¹¹.

Security Link

• TLS1.3 is a pretty huge rewrite of the specification and the draft for it is now available. Matt Caswell shares how you can use it already today with OpenSSL¹².

Privacy Link

• Lily Hay Newman shares some new insights into how a lot of apps listen to your phone’s microphone for marketing purposes¹³ by setting up ultrasonic beacons.

Accessibility Link

• The vision of smart cities isn’t new, but this article focuses on making them accessible¹⁴.

JavaScript Link

• Prepack¹⁷¹⁵ 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.

¹⁶

Going Beyond… Link

• Maciej Ceglowski published a transcript of his new talk “Build a Better Monster¹⁹” 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 policy²⁰ you can establish, both as an individual and as a company.
• Will Knight questions the dark secret at the heart of Artificial Intelligence (AI)²¹: 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 project²² 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 donation²³ or share this resource with other people. You can learn more about the costs of the project here²⁴. 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

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

• Finding Inspiration In Uncommon Sources: 12 Places To Look¹
• The Story Of Scandinavian Design: Combining Function and Aesthetics²
• Showcase Of Web Design In Poland³
• Massive Collection of Nature Inspired Typography⁴

Sky Dining Link

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

Spark Of Science Link

Still shot of short film. Beautiful perspective.

⁸

Perfect Morning — Dark Hedges Link

Perfect morning light at the Dark Hedges, Northern Ireland.

¹¹

Facebook Events Link

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

¹⁴

Canlis Matchbooks Link

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

¹⁷

San Antonio Magazine Link

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

²⁰

Anciados Link

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

²³

Summer Is Crazy Link

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

²⁶

Packing For Mexico Link

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

²⁹

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.

³²

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!

³⁵

Can’t Hide, Kampina Link

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

³⁸

The Night Ocean Link

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

⁴¹

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.

⁴⁴

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.

⁴⁷

Horse Vespa Link

Love this subtly absurd and boldly colored illustration.

⁵⁰

I See You Link

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

⁵³

Stanford Medical Wellness Link

Beautiful Pallet! Great textures too.

⁵⁶

Playa Game Link

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

⁵⁹

Banking Poster Link

So much greatness in this.

⁶²

Testing Crew Link

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

⁶⁵

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.

⁶⁸

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.”

⁷¹

Taco Friday! Link

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

⁷⁴

Jennifer Loiselle Link

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

⁷⁷

Logan Link

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

⁸⁰

Cycling Pinball Link

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

⁸³

Tycho-Terje Link

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

⁸⁶

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.

⁸⁹

Byron Bay Link

Amazing sunset at Byron Bay. Such rich colors!

⁹²

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!

⁹⁵

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.

⁹⁸

Coffeehood Brand Assets Link

Nice colors and great font pairings. Beautiful inspiring stuff!

¹⁰¹

Earth Day 22 April Link

Nice set of colors to celebrate our beautiful planet.

¹⁰⁴

United Stripes Of America Link

Great looking characters.

¹⁰⁷

Love Songs (Weekend Magazine) Link

Love the clean lines, forms and the smooth perspective.

¹¹⁰

Are Your Friends Making You Fat? Link

Inspiring usage of vivid colors without being too overwhelming.

¹¹³

Firenze Link

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

¹¹⁶

Sydney Word By Word Link

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

¹¹⁹

Northwest Airlines Fleet Link

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

¹²²

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.

¹²⁵

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.

¹²⁸

Type Man Link

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

¹³¹

Melt Link

Love the merge/melt effect.

¹³⁴

Phantom Manor Link

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

¹³⁷

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”.

¹⁴⁰

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.

¹⁴³

Pelican Link

The colours and details are spectacular!

¹⁴⁶

Apatosaurus At Night Link

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

¹⁴⁹

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!

¹⁵²

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

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 VoiceLabs¹ 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

• Enhancing User Experience With The Web Speech API²
• Guidelines For Designing With Audio³
• Experimenting With speechSynthesis⁴
• What Is User Experience Design? Overview, Tools And Resources⁵

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:

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.

⁷

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 recognition⁹ (ASR) and natural language understanding¹⁰ (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 AI¹¹ to run his home. He did, called it Jarvis and gave it the voice of Morgan Freeman¹².

¹³

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. Amazon¹⁵ and Google¹⁶ 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 month¹⁷. 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.

¹⁸

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.

²⁰

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

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 Report²³.

²⁴

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 Store²⁷). 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.

²⁸

If you’ve ever asked Alexa to sing or tried any of the numerous Alexa Easter Eggs³⁰, 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 Echo³¹ 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 possible³².” 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 utterances³³.

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.

³⁴

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 SaySpring⁶²³⁶ 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 Amazon³⁷ and Google³⁸ within the Skill development area (as shown below), or in test mode on an actual device.

³⁹

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 Kit⁴⁰, Develop Actions for Google⁴¹, and Cortana⁴², 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 VoiceLabs⁴³ (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 process⁴⁴. 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 Quiz⁴⁵

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 Amazon⁴⁶ and Google⁴⁷.

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.”

⁴⁸

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

⁴⁹

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

• Alexa Skills Kit⁵¹, Amazon
• Actions for Google⁵²
• “Alexa Skills Kit Voice Design Best Practices⁵³,” Amazon
• Actions for Google design resources⁵⁴

Tone of Voice Link

• “The Impact of Tone of Voice on Users’ Brand Perception⁵⁵,” Kate Meyer, Nielsen Norman Group
• “Finding Your Tone of Voice⁵⁶,” Robert Mills, Smashing Magazine
• “Finding Your Brand’s Voice⁵⁷,” Harriet Cummings, Distilled

Phrases and Dialects Link

• “How Y’all, Youse and You Guys Talk⁵⁸ (interactive quiz), New York Times
• Defining the Voice Interface⁵⁹ (and Alexa utterances), Amazon
• “Defining Utterances for the Alexa Skills Kit⁶⁰” (including the tool⁶¹), Maker Musings

Prototyping and Testing Link

• SaySpring⁶²³⁶
  “Free prototyping software for voice”
• Echosim.io⁶³
  “Alexa Skill Testing Tool”
• “Web Simulator⁶⁴,” Actions for Google

Report, Book and Movie Link

• “The 2017 Voice Report by VoiceLabs⁶⁵“
• Designing Voice User Interfaces: Principles of Conversational Experiences⁶⁶, Cathy Pearl, O’Reilly Media
• Her⁶⁷ (movie)

(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

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

• Four Ways To Build A Mobile Application¹
• How To Build Honest UIs And Help Users Make Better Decisions²
• Keeping Your Android App Popular After Launch³
• Spotify Playlists To Fuel Your Coding And Design Sessions⁴

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:

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:

⁶

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

⁷

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 function⁹, such as one of the SHA-2¹⁰ 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 salt¹¹ 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:

¹²

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.

¹⁴

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:

¹⁶

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 specification¹⁷ 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 Swift¹⁸. 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 documentation¹⁹ 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 them²⁰.

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 providers²¹, 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 app²². Google has similar steps²³. 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 tokens²⁴, 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 cryptography²⁵ 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

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 years¹ 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 magazine² 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 Studio³ from Serbia.

• preview⁵
• with calendar: 320×480⁶, 640×480⁷, 800×480⁸, 800×600⁹, 1024×768¹⁰, 1024×1024¹¹, 1152×864¹², 1280×720¹³, 1280×800¹⁴, 1280×960¹⁵, 1280×1024¹⁶, 1366×768¹⁷, 1440×900¹⁸, 1440×1050¹⁹, 1600×1200²⁰, 1680×1050²¹, 1680×1200²², 1920×1080²³, 1920×1200²⁴, 1920×1440²⁵, 2560×1440²⁶
• without calendar: 320×480²⁷, 640×480²⁸, 800×480²⁹, 800×600³⁰, 1024×768³¹, 1024×1024³², 1152×864³³, 1280×720³⁴, 1280×800³⁵, 1280×960³⁶, 1280×1024³⁷, 1366×768³⁸, 1440×900³⁹, 1440×1050⁴⁰, 1600×1200⁴¹, 1680×1050⁴², 1680×1200⁴³, 1920×1080⁴⁴, 1920×1200⁴⁵, 1920×1440⁴⁶, 2560×1440⁴⁷

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 Solutions⁴⁸ from India.

⁴⁹

• preview⁵⁰
• with calendar: 320×480⁵¹, 640×480⁵², 800×480⁵³, 800×600⁵⁴, 1024×768⁵⁵, 1024×1024⁵⁶, 1152×864⁵⁷, 1280×720⁵⁸, 1280×960⁵⁹, 1280×1024⁶⁰, 1366×768⁶¹, 1400×1050⁶², 1440×900⁶³, 1600×1200⁶⁴, 1680×1050⁶⁵, 1680×1200⁶⁶, 1920×1080⁶⁷, 1920×1200⁶⁸, 1920×1440⁶⁹, 2560×1440⁷⁰
• without calendar: 320×480⁷¹, 640×480⁷², 800×480⁷³, 800×600⁷⁴, 1024×768⁷⁵, 1024×1024⁷⁶, 1152×864⁷⁷, 1280×720⁷⁸, 1280×960⁷⁹, 1280×1024⁸⁰, 1366×768⁸¹, 1400×1050⁸², 1440×900⁸³, 1600×1200⁸⁴, 1680×1050⁸⁵, 1680×1200⁸⁶, 1920×1080⁸⁷, 1920×1200⁸⁸, 1920×1440⁸⁹, 2560×1440⁹⁰

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 Masnikosa⁹¹ from Belgrade, Serbia.

⁹²

• preview⁹³
• with calendar: 320×480⁹⁴, 640×480⁹⁵, 800×480⁹⁶, 800×600⁹⁷, 1024×768⁹⁸, 1024×1024⁹⁹, 1152×864¹⁰⁰, 1280×720¹⁰¹, 1280×800¹⁰², 1280×960¹⁰³, 1280×1024¹⁰⁴, 1400×1050¹⁰⁵, 1440×900¹⁰⁶, 1600×1200¹⁰⁷, 1680×1050¹⁰⁸, 1680×1200¹⁰⁹, 1920×1080¹¹⁰, 1920×1200¹¹¹, 1920×1440¹¹², 2560×1440¹¹³
• without calendar: 320×480¹¹⁴, 640×480¹¹⁵, 800×480¹¹⁶, 800×600¹¹⁷, 1024×768¹¹⁸, 1024×1024¹¹⁹, 1152×864¹²⁰, 1280×720¹²¹, 1280×800¹²², 1280×960¹²³, 1280×1024¹²⁴, 1400×1050¹²⁵, 1440×900¹²⁶, 1600×1200¹²⁷, 1680×1050¹²⁸, 1680×1200¹²⁹, 1920×1080¹³⁰, 1920×1200¹³¹, 1920×1440¹³², 2560×1440¹³³

Follow Your Dreams

“May your wishes come true.” — Designed by Dan Di¹³⁴ from Italy.

¹³⁵

• preview¹³⁶
• with calendar: 320×480¹³⁷, 640×480¹³⁸, 800×480¹³⁹, 800×600¹⁴⁰, 1024×768¹⁴¹, 1024×1024¹⁴², 1152×864¹⁴³, 1280×720¹⁴⁴, 1280×800¹⁴⁵, 1280×960¹⁴⁶, 1280×1024¹⁴⁷, 1366×768¹⁴⁸, 1400×1050¹⁴⁹, 1440×900¹⁵⁰, 1600×900¹⁵¹, 1600×1200¹⁵², 1680×1050¹⁵³, 1680×1200¹⁵⁴, 1920×1080¹⁵⁵, 1920×1200¹⁵⁶, 1920×1440¹⁵⁷, 2560×1440¹⁵⁸
• without calendar: 320×480¹⁵⁹, 640×480¹⁶⁰, 800×480¹⁶¹, 800×600¹⁶², 1024×768¹⁶³, 1024×1024¹⁶⁴, 1152×864¹⁶⁵, 1280×720¹⁶⁶, 1280×800¹⁶⁷, 1280×960¹⁶⁸, 1280×1024¹⁶⁹, 1366×768¹⁷⁰, 1400×1050¹⁷¹, 1440×900¹⁷², 1600×900¹⁷³, 1600×1200¹⁷⁴, 1680×1050¹⁷⁵, 1680×1200¹⁷⁶, 1920×1080¹⁷⁷, 1920×1200¹⁷⁸, 1920×1440¹⁷⁹, 2560×1440¹⁸⁰

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 Frolo¹⁸¹ from the United States.

¹⁸²

• preview¹⁸³
• with calendar: 1024×768¹⁸⁴, 1024×1024¹⁸⁵, 1280×800¹⁸⁶, 1280×960¹⁸⁷, 1280×1024¹⁸⁸, 1366×768¹⁸⁹, 1440×900¹⁹⁰, 1600×1200¹⁹¹, 1680×1050¹⁹², 1680×1200¹⁹³, 1920×1080¹⁹⁴, 1920×1200¹⁹⁵, 1920×1440¹⁹⁶, 2560×1440¹⁹⁷
• without calendar: 1024×768¹⁹⁸, 1024×1024¹⁹⁹, 1280×800²⁰⁰, 1280×960²⁰¹, 1280×1024²⁰², 1366×768²⁰³, 1440×900²⁰⁴, 1600×1200²⁰⁵, 1680×1050²⁰⁶, 1680×1200²⁰⁷, 1920×1080²⁰⁸, 1920×1200²⁰⁹, 1920×1440²¹⁰, 2560×1440²¹¹

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 Jordan²¹² from Northern Ireland.

²¹³

• preview²¹⁴
• with calendar: 320×480²¹⁵, 640×480²¹⁶, 800×480²¹⁷, 800×600²¹⁸, 1024×1024²¹⁹, 1152×864²²⁰, 1280×720²²¹, 1280×960²²², 1280×1024²²³, 1366×768²²⁴, 1400×1050²²⁵, 1440×900²²⁶, 1600×1200²²⁷, 1680×1050²²⁸, 1680×1200²²⁹, 1920×1080²³⁰, 1920×1200²³¹, 1920×1440²³², 2560×1440²³³
• without calendar: 320×480²³⁴, 640×480²³⁵, 800×480²³⁶, 800×600²³⁷, 1024×1024²³⁸, 1152×864²³⁹, 1280×720²⁴⁰, 1280×960²⁴¹, 1280×1024²⁴², 1366×768²⁴³, 1400×1050²⁴⁴, 1440×900²⁴⁵, 1600×1200²⁴⁶, 1680×1050²⁴⁷, 1680×1200²⁴⁸, 1920×1080²⁴⁹, 1920×1200²⁵⁰, 1920×1440²⁵¹, 2560×1440²⁵²

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 Bogemans²⁵³ from Belgium.

²⁵⁴

• preview²⁵⁵
• with calendar: 320×480²⁵⁶, 640×480²⁵⁷, 800×480²⁵⁸, 800×600²⁵⁹, 1024×768²⁶⁰, 1024×1024²⁶¹, 1152×864²⁶², 1280×720²⁶³, 1280×800²⁶⁴, 1280×960²⁶⁵, 1280×1024²⁶⁶, 1400×1050²⁶⁷, 1440×900²⁶⁸, 1600×1200²⁶⁹, 1680×1050²⁷⁰, 1680×1200²⁷¹, 1920×1080²⁷², 1920×1200²⁷³, 1920×1440²⁷⁴, 2560×1440²⁷⁵
• without calendar: 320×480²⁷⁶, 640×480²⁷⁷, 800×480²⁷⁸, 800×600²⁷⁹, 1024×768²⁸⁰, 1024×1024²⁸¹, 1152×864²⁸², 1280×720²⁸³, 1280×800²⁸⁴, 1280×960²⁸⁵, 1280×1024²⁸⁶, 1400×1050²⁸⁷, 1440×900²⁸⁸, 1600×1200²⁸⁹, 1680×1050²⁹⁰, 1680×1200²⁹¹, 1920×1080²⁹², 1920×1200²⁹³, 1920×1440²⁹⁴, 2560×1440²⁹⁵

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 Valenzuela²⁹⁶ from Spain.

²⁹⁷

• preview²⁹⁸
• with calendar: 800×480²⁹⁹, 1024×768³⁰⁰, 1152×864³⁰¹, 1280×800³⁰², 1280×960³⁰³, 1440×900³⁰⁴, 1680×1200³⁰⁵, 1920×1080³⁰⁶, 2560×1440³⁰⁷
• without calendar: 800×480³⁰⁸, 1024×768³⁰⁹, 1152×864³¹⁰, 1280×800³¹¹, 1280×960³¹², 1440×900³¹³, 1680×1200³¹⁴, 1920×1080³¹⁵, 2560×1440³¹⁶

Beat The Heat

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

³¹⁸

• preview³¹⁹
• with calendar: 1280×720³²⁰, 1280×800³²¹, 1280×960³²², 1280×1024³²³, 1366×768³²⁴, 1400×1050³²⁵, 1440×900³²⁶, 1600×1200³²⁷, 1680×1050³²⁸, 1680×1200³²⁹, 1920×1080³³⁰, 1920×1200³³¹, 1920×1440³³², 2560×1440³³³
• without calendar: 1280×720³³⁴, 1280×800³³⁵, 1280×960³³⁶, 1280×1024³³⁷, 1366×768³³⁸, 1400×1050³³⁹, 1440×900³⁴⁰, 1600×1200³⁴¹, 1680×1050³⁴², 1680×1200³⁴³, 1920×1080³⁴⁴, 1920×1200³⁴⁵, 1920×1440³⁴⁶, 2560×1440³⁴⁷

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 Begum³⁴⁸ from the United Kingdom.

³⁴⁹

• preview³⁵⁰
• with calendar: 800×450³⁵¹, 1280×720³⁵², 1366×768³⁵³, 1440×810³⁵⁴, 1600×900³⁵⁵, 1680×945³⁵⁶, 1920×1080³⁵⁷, 2560×1440³⁵⁸
• without calendar: 800×450³⁵⁹, 1280×720³⁶⁰, 1366×768³⁶¹, 1440×810³⁶², 1600×900³⁶³, 1680×945³⁶⁴, 1920×1080³⁶⁵, 2560×1440³⁶⁶

The Gentleman

Designed by James Mitchell³⁶⁷ from the United Kingdom.

³⁶⁸

• preview³⁶⁹
• with calendar: 1280×720³⁷⁰, 1280×800³⁷¹, 1366×768³⁷², 1440×900³⁷³, 1680×1050³⁷⁴, 1920×1080³⁷⁵, 1920×1200³⁷⁶, 2560×1440³⁷⁷, 2880×1800³⁷⁸
• without calendar: 1280×720³⁷⁹, 1280×800³⁸⁰, 1366×768³⁸¹, 1440×900³⁸², 1680×1050³⁸³, 1920×1080³⁸⁴, 1920×1200³⁸⁵, 2560×1440³⁸⁶, 2880×1800³⁸⁷

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 Design³⁸⁸ from Australia.

³⁸⁹

• preview³⁹⁰
• with calendar: 320×480³⁹¹, 640×480³⁹², 800×600³⁹³, 1024×768³⁹⁴, 1152×864³⁹⁵, 1280×720³⁹⁶, 1280×960³⁹⁷, 1600×1200³⁹⁸, 1920×1080³⁹⁹, 1920×1440⁴⁰⁰, 2560×1440⁴⁰¹
• without calendar: 320×480⁴⁰², 640×480⁴⁰³, 800×600⁴⁰⁴, 1024×768⁴⁰⁵, 1152×864⁴⁰⁶, 1280×720⁴⁰⁷, 1280×960⁴⁰⁸, 1600×1200⁴⁰⁹, 1920×1080⁴¹⁰, 1920×1440⁴¹¹, 2560×1440⁴¹²

Master Crow

Designed by Doud⁴¹³ from Belgium.

⁴¹⁴

• preview⁴¹⁵
• with calendar: 1366×768⁴¹⁶, 1400×1050⁴¹⁷, 1440×900⁴¹⁸, 1600×1200⁴¹⁹, 1680×1050⁴²⁰, 1680×1200⁴²¹, 1920×1080⁴²², 1920×1200⁴²³, 1920×1440⁴²⁴, 2560×1440⁴²⁵
• without calendar: 1366×768⁴²⁶, 1400×1050⁴²⁷, 1440×900⁴²⁸, 1600×1200⁴²⁹, 1680×1050⁴³⁰, 1680×1200⁴³¹, 1920×1080⁴³², 1920×1200⁴³³, 1920×1440⁴³⁴, 2560×1440⁴³⁵

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 Group⁴³⁶ from Washington D.C.

⁴³⁷

• preview⁴³⁸
• with calendar: 320×480⁴³⁹, 640×480⁴⁴⁰, 800×600⁴⁴¹, 1024×768⁴⁴², 1280×960⁴⁴³, 1440×900⁴⁴⁴, 1600×1200⁴⁴⁵, 1680×1050⁴⁴⁶, 1680×1200⁴⁴⁷, 1920×1080⁴⁴⁸, 1920×1400⁴⁴⁹, 2560×1440⁴⁵⁰
• without calendar: 320×480⁴⁵¹, 640×480⁴⁵², 800×600⁴⁵³, 1024×768⁴⁵⁴, 1280×960⁴⁵⁵, 1440×900⁴⁵⁶, 1600×1200⁴⁵⁷, 1680×1050⁴⁵⁸, 1680×1200⁴⁵⁹, 1920×1080⁴⁶⁰, 1920×1400⁴⁶¹, 2560×1440⁴⁶²

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 Rane⁴⁶³ from Gainesville, Florida.

⁴⁶⁴

• preview⁴⁶⁵
• with calendar: 1280×720⁴⁶⁶, 1920×1080⁴⁶⁷, 2560×1440⁴⁶⁸
• without calendar: 1280×720⁴⁶⁹, 1920×1080⁴⁷⁰, 2560×1440⁴⁷¹

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-Cing⁴⁷² from Taiwan.

⁴⁷³

• preview⁴⁷⁴
• with calendar: 1024×768⁴⁷⁵, 1080×1920⁴⁷⁶, 1280×720⁴⁷⁷, 1280×800⁴⁷⁸, 1280×960⁴⁷⁹, 1366×768⁴⁸⁰, 1400×1050⁴⁸¹, 1680×1050⁴⁸², 1920×1080⁴⁸³, 1920×1200⁴⁸⁴, 2560×1440⁴⁸⁵
• without calendar: 1024×768⁴⁸⁶, 1080×1920⁴⁸⁷, 1280×720⁴⁸⁸, 1280×800⁴⁸⁹, 1280×960⁴⁹⁰, 1366×768⁴⁹¹, 1400×1050⁴⁹², 1680×1050⁴⁹³, 1920×1080⁴⁹⁴, 1920×1200⁴⁹⁵, 2560×1440⁴⁹⁶

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 Ferrell⁴⁹⁷ from San Francisco.

⁴⁹⁸

• preview⁴⁹⁹
• with calendar: 320×480⁵⁰⁰, 800×600⁵⁰¹, 960×560⁵⁰², 1024×1024⁵⁰³, 1280×800⁵⁰⁴, 1280×1024⁵⁰⁵, 1440×900⁵⁰⁶, 1920×1080⁵⁰⁷, 1920×1200⁵⁰⁸, 1920×1440⁵⁰⁹
• without calendar: 320×480⁵¹⁰, 800×600⁵¹¹, 960×560⁵¹², 1024×1024⁵¹³, 1280×800⁵¹⁴, 1280×1024⁵¹⁵, 1440×900⁵¹⁶, 1920×1080⁵¹⁷, 1920×1200⁵¹⁸, 1920×1440⁵¹⁹

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 Karmakar⁵²⁰ from India.

⁵²¹

• preview⁵²²
• with calendar: 1280×720⁵²³, 1280×800⁵²⁴, 1280×960⁵²⁵, 1366×768⁵²⁶, 1400×1050⁵²⁷, 1440×900⁵²⁸, 1920×1080⁵²⁹
• without calendar: 1280×720⁵³⁰, 1280×800⁵³¹, 1280×960⁵³², 1366×768⁵³³, 1400×1050⁵³⁴, 1440×900⁵³⁵, 1920×1080⁵³⁶

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 month⁵³⁷!

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/