For luxury companies and upscale lifestyle service providers, excellence in experience is an essential component of the value delivered. Conceptually different from the mass market, the luxury domain relies not only on offering the highest differentiated products and services, but on delivering experiential value.

Adopting technology and embracing a digital presence through platforms and initiatives, the luxury industry today is tackling the challenge of designing an unparalleled user experience (UX) online. In this article, we’ll present a case study and share observations on the peculiarities of the UX design of a luxury lifestyle service platform and its mobile apps.

Some time ago, 415Agency¹ teamed up with VERITAMO² to design a digital UX for its platform, which enables luxury service providers and lifestyle-management companies to deliver personalized services to its clients. Among the services offered are travel arrangements and bookings, luxury shopping experiences, gastronomy and more. A typical client of the platform is either a provider of high-end services or a lifestyle-management company that serves affluent clients. The company offers a back-office solution, together with integrated white-label mobile apps for use by its clientele.

The goal was to enable service providers to deliver a unique UX journey to a very particular type of consumer. We were extremely curious to solve the challenge of creating an upscale mobile experience in a time when digital personalization and customization are available to anyone.

User Profile Link

According to a recent study by McKinsey & Company³, modern luxury consumers have become “highly digital, social and mobile,” with 75% already owning several digital devices. They are known for putting less value on owning physical high-end items, focusing instead on the authentic and special experiences that luxury companies offer. Moreover, they want their experience to be smooth, omnichannel and available 24/7, but at the same time only when and where they want. Based on research by Bain & Company⁴, the profiles of luxury consumers today are very diverse, both demographically and geographically, covering many different segments of people. With the changes and expansion in the luxury customer’s profile, mindset and habits, luxury companies and service providers have to experiment at the intersection of technology, culture and commerce to keep their devotees interested, informed and entertained.

For our project, our primary understanding of the luxury service’s end users (their demographics and psychographics) was based on insights from VERITAMO’s customers. Based on their observations, we were able to frame the initial end user’s profile and make it the baseline for our further work. The insights highlighted the following important areas:

• prospective audience,
• user behavior patterns and rhythms,
• context of use of concierge services platforms (web, mobile),
• potential drivers of user behaviors and reactions,
• implicit user goals.

These initial findings covered the core user research questions: who, what, when and where. We used this data to set early hypotheses on the peculiarities of the digital luxury experience and on ways to address it in our design solution. We expected end users of luxury lifestyle services to be highly detail oriented; to be willing to learn and participate in all stages of service requests, search and the booking process; and to anticipate the highest and the most transparent level of customer service, with an exclusive and extra personal touch.

We focused on investigating the missing why and how: understanding customer incentives and the steps they needed to take within the app to reach their goals. Additional surveys and user interviews were conducted iteratively during the design process. Some of our initial assumptions and the methods we selected turned out to be incorrect or inappropriate, so we had to adjust them along the way.

Expectations Link

Our initial assumptions about the digital luxury experience spun around highly personalized service delivery. At the beginning, we believed that swift customer service and elevated human-to-human interactions were key to offering efficient mobile tools to connect luxury consumers with their service providers. We believed that these aspects alone were enough for service providers to lure discerning, busy consumers to the mobile apps created by VERITAMO.

As it turns out, we were wrong. App usage statistics across the spectrum of service providers showed that there was no significant difference in the rate of orders from clients who downloaded the app and those who didn’t. Furthermore, mobile user retention suffered dramatically when service providers did not make any effort to market their apps.

We formed several hypotheses to explain this. With so many apps out there competing for real estate on users’ phone, incremental improvement to interaction with service providers was not enough. After all, consumers already had communication channels established with their service providers — even if they were brittle and inefficient.

Based on feedback from digital product managers and client services managers at the biggest concierge companies (including AmEx Centurion, John Paul, Quintessentially, Ten Group, LesConcierges, Aspire Lifestyles and several others), we learned that luxury service providers were seeking better management of and greater transparency with client requests. We decided to make this our key design motivation.

Service Discovery Process Link

Initially, when working on the service discovery process, we offered mobile users a vast variety of search options, including multiple search criteria, filters and instant browsing. The initial design contained a flyout search menu (via the famous hamburger icon), which confused users about the navigation. They browsed only the current category selected, without understanding that other search options were available.

⁵

So, we changed the design to the variant below:

⁷

Using the combination of screen recording and concierge testing we observed users were still struggling with the discovery process. Customers expected immediate results with minimum data input. Yet they also expected several options to choose from. Some users reported being overwhelmed by choices that may or may not have been of interest to them. Additionally, the absence of expected results (such as “The restaurant that I know is hot right now”) created a negative impression of the service provided by their lifestyle manager (“They don’t even know the best restaurants in my city.”).

Mobile users relied more on the suggested offerings preselected by their service provider. Rather than desiring freedom of choice, they valued interaction with a dedicated advisor who would promptly respond to their requests with just a few relevant options. Discovery of services became a secondary feature of the mobile platform.

This observation can be further explained by the high degree of sophistication of the affluent clientele and their motivation to research available services. With limited time available, these customers have a precise reason for turning to their service providers for advice. After all, such needs are their very reason for retaining the services of a lifestyle manager in the first place.

Based on the user test results, we limited the number of service options to several categories, including “recommended / featured services,” “popular in your area,” etc. At the same time, in order to offer the richness of experience that one would encounter in close one-on-one communication, we improved the app’s navigation to enable easy access to the concierge chat feature and to allow delivery of options for review directly in the communication thread.

Using our evolutionary approach to UX design, we combined the client CRM, the content management system and interactive messaging functionality to create something quite powerful for the luxury industry. Service providers are now able to serve multiple clients simultaneously, without sacrificing personalization and exclusivity. The next step in our roadmap is to test targeted suggestions for each client in order to automate predictable and mundane tasks, freeing each service provider to concentrate on their main value proposition, which is to humanize the personal, bespoke approach to serving their clients’ needs.

⁹

Service Booking And Payment Processing Link

We expected a transparent booking process to involve several stages for both the client and the concierge, with all steps tracked in the app — for example, order status options (booked, processed, confirmed, rejected), payment status (requested, pending, confirmed), etc. — and the possibility to send out request status notifications to clients. As mentioned before, initially we believed this information was crucial for picky luxury consumers. The reality was that we were all wrong: customers were not interested in participating and following the multi-step process. They considered it extremely important to know that someone was working on their request and what the outcome is, but without knowing many more details, which were considered bothersome.

They also expected the “one-button approach” and instant order confirmations. They anticipated it to be as short as possible, with immediate results, no extra information, and always five-star customer service, which implied a concierge to be handling all transitional steps, including changes, issues, and updates.

¹¹

¹³

¹⁵

Mobile User Onboarding Link

Our initial assumptions about the psychology of the perception of luxury¹⁷ helped us to create a rather sophisticated onboarding process. It included, first, limiting initial access to a mobile service in order to create artificial demand and, secondly, personalizing “invitations” for each user. We used the term “nomination” (rather than “invitation”) and implemented an approval workflow to accept new users to the service. Prospective clients had to “apply” for membership and await approval.

This approach was met with positive feedback from service providers because it enabled them to control their membership base and to weed out time-wasters. As for mobile users, our tests told us that our approach was not ideal and had to be improved.

We measured, first, the time it took for a person to respond to an onboarding questionnaire and, secondly, retention of approved users. We assumed that the demand-creation approach would outweigh the negative effect of limiting immediate access to the app.

The incentive to complete the questionnaire would be to get access to the mobile service. However, because service providers took some time approving accounts, the incentive quickly disappeared. Users who had to wait for approval were two to three times less likely to come back once the approval notice was sent to them.

We simplified the onboarding process from over 2 minutes down to an average of around 40 seconds, by asking for only the most basic information before an approval was made and then asking for the rest upon first successful entry into the app. We also introduced a pre-approval process to eliminate the wait time and to allow access to the app right away, while still properly communicating the privilege of access.

Further testing is required to assess the effect of the term “nomination” (as opposed to “invitation”) on the likelihood of referrals because existing users can “nominate” their friends to get exclusive membership with their service provider.

Visual Elements Link

The visual part of UX design in the luxury industry is essential to communicating excellence and exclusivity. In order to create a holistic app experience, we strived to reflect these qualities both in the UI design and the functionality. With maximum attention to detail in the typography, color palette and iconography design, we aimed to establish solid visual cues that would determine how users experience the app. Using colors associated with luxury — gold, jet black, dark blue — we emphasized the timelessness of the experience. Thin classic typography and a minimalist design of icons added to the feel of modernity and elegance.

¹⁸

Concierge Admin Console Design Link

Luxury companies need to prove their value to customers more extensively than other brands, offering an experience that justifies the price and loyalty. With utmost customer care and exclusiveness of selection, they ensure that the transition to a sale happens seemingly effortlessly.

While from the user’s perspective the process may look absolutely effortless and refined, the system behind it is truly sophisticated. In the case of VERITAMO’s platform, the interface for the service advisor and concierge had to have a highly detailed structure and yet be as simple as possible to use. It needed to contain all information about the user: preferences, recent choices, a summary of their previous experience, current requests, current order status, history of requested changes and other details. It was absolutely necessary to provide a highly personalized level of customer service and to address user inquiries, concerns and frustrations with class, swiftness, and simplicity.

²⁰

Takeaways Link

The customer experience in each industry is perceived differently. Very often, when we take up a new project, our initial assumptions put us in a rigid framework of predetermined creative responses that misalign UX design solutions with real user needs. Filing our observations as “Things we wish we knew when starting the project,” we see that it is essential to do a reality check on one’s expectations of user behavior and to keep in mind that a compelling UX design goes beyond the confines of a particular industry and the user’s social standing.

These are our key observations and takeaways on UX design for the luxury domain:

• Time is the ultimate asset for upscale service users. Time and convenience greatly influence their online behavior.
• Luxury consumers know exactly what kind of experience they are looking for and/or anticipate advice from trusted sources.
• The user journey should be as short as possible, enabling users to get what they are looking for instantly.
• Transparency is expected. Moreover, it translates to superior service delivery, which is associated with immediacy and a simplified user flow, rather than an overly detailed step-by-step process.
• “Less is more” applies to the process of searching services, as well as to the overall user journey. The process of creating a highly sophisticated UX needs to focus on what to leave out, rather than what to include.
• Human interaction matters and is highly valued.
• Fewer options are better, but those options are expected to be highly relevant and individually tailored.
• The “one-button” approach is the epitome of UX design for the luxury field.
• The user path should be simple and clear, with a highly sophisticated yet simple back-office support system.

Conclusion Link

Despite the fact that modern luxury lifestyle consumers are becoming highly sophisticated and tech-savvy, many of the key observations our team made during this project do not seem to be exclusive to the luxury field. Sound UX principles apply to all user groups, regardless of their social status or preferences.

Today, users anticipate a superior experience and have a strong understanding of the value delivered. They are focused on results and a one-button approach, expecting their orders to be addressed efficiently, at the highest level of service and with maximum transparency. However, more so in the luxury field, human interaction within the digital experience is not an option, but rather an undeniably powerful tool that improves communication and increases loyalty.

At the end of the day, a white-glove UX is all about delivering the right information, in the right amount, in the right place and at the right time, while maintaining a refined and confident appearance.

Articles Cited Link

• “Digital Inside: Get Wired for the Ultimate Luxury Experience²²,” Nathalie Remy, McKinsey & Company
• “The New Luxury Buyer: Younger, Richer and Well-Wired²³,” Nicola Clark, New York Times
• “Why a Cognitive Approach Is Key to Luxury Marketing²⁴,” Matthew Willcox, Luxury Daily

(cc, yk, al, il)

Footnotes Link

1. 1 https://415agency.com/
2. 2 https://veritamo.com/
3. 3 http://www.mckinseyonmarketingandsales.com/digital-inside-get-wired-for-the-ultimate-luxury-experience
4. 4 http://www.nytimes.com/2014/12/02/fashion/the-new-luxury-buyer-younger-richer-and-well-wired.html
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/12/veritamo_main_hamburger-486w-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/12/veritamo_main_hamburger-486w-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/updated-navigation-large-opt.jpeg
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/12/updated-navigation-large-opt.jpeg
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/collage_phone-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/collage_phone-large-opt.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/11/before-large-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/before-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/11/after-review-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/after-review-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/11/improvedcommunicaion-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/improvedcommunicaion-large-opt.png
17. 17 https://www.luxurydaily.com/why-a-cognitive-approach-is-key-to-luxury-marketing/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/11/fonts_colors-large-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/fonts_colors-large-opt.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/admin_design-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/admin_design-large-opt.png
22. 22 http://www.mckinseyonmarketingandsales.com/digital-inside-get-wired-for-the-ultimate-luxury-experience
23. 23 http://www.nytimes.com/2014/12/02/fashion/the-new-luxury-buyer-younger-richer-and-well-wired.html
24. 24 https://www.luxurydaily.com/why-a-cognitive-approach-is-key-to-luxury-marketing/

↑ Back to topTweet itShare on Facebook

I’ve been thinking a lot about speech for the last few years. In fact, it’s been a major focus in several of my talks of late, including my well-received Smashing Conference talk “Designing the Conversation¹.” As such, I’ve been keenly interested in the development of the Web Speech API².

If you’re unfamiliar, this API gives you (the developer) the ability to voice-enable your website in two directions: listening to your users via the SpeechRecognition interface³ and talking back to them via the SpeechSynthesis interface⁴. All of this is done via a JavaScript API, making it easy to test for support. This testability makes it an excellent candidate for progressive enhancement, but more on that in a moment.

A lot of my interest stems from my own personal desire to experiment with new ways of interacting with the web. I’m also a big fan of podcasts and love listening to great content while I’m driving and in other situations where my eyes are required elsewhere or are simply too tired to read. The Web Speech API opens up a whole range of opportunities to create incredibly useful and natural user interactions by being able to listen for and respond with natural language:

– Hey Instapaper, start reading from my queue!

– Sure thing, Aaron…

The possibilities created by this relatively simple API set are truly staggering. There are applications in accessibility, Internet of Things, automotive, government, the list goes on and on. Taking it a step further, imagine combining this tech with real-time translation APIs (which also recently began to appear). All of a sudden, we can open up the web to millions of people who struggle with literacy or find themselves in need of services in a country where they don’t read or speak the language. This. Changes. Everything.

But back to the Web Speech API. As I said, I’d been keeping tabs on the specification for a while, checked out several of the demos and such, but hadn’t made the time to play yet. Then Dave Rupert finally spurred me to action with a single tweet:

⁵

Within an hour or so, I’d gotten a basic implementation together for my blog⁶ that would enable users to listen to a blog post⁷ rather than read it. A few hours later, I had added more features, but it wasn’t all wine and roses, and I ended up having to back some functionality out of the widget to improve its stability. But I’m getting ahead of myself.

I’ve decided to hit the pause button for a few days to write up what I’ve learned and what I still don’t fully understand in the hope that we can begin to hash out some best practices for using this awesome feature. Maybe we can even come up with some ways to improve it.

Hello, World Link

So far, my explorations into the Web Speech API have been wholly in the realm of speech synthesis. Getting to “Hello world” is relatively straightforward and merely involves creating a new SpeechSynthesisUtterance (which is what you want to say) and then passing that to the speechSynthesis object’s speak() method:

var to_speak = new SpeechSynthesisUtterance('Hello world!'); window.speechSynthesis.speak(to_speak);

Not all browsers support this API, although most modern ones do⁸. That being said, to avoid throwing errors, we should wrap the whole thing in a simple conditional that tests for the feature’s existence before using it:

if ( 'speechSynthesis' in window ) { var to_speak = new SpeechSynthesisUtterance('Hello world!'); window.speechSynthesis.speak(to_speak); }

See the Pen Experimenting with `speechSynthesis`, example 1³⁵¹²⁹ by Aaron Gustafson (@aarongustafson^36331310) on CodePen^37341411.

Once you’ve got a basic example working, there’s quite a bit of tuning you can do. For instance, you can tweak the reading speed by adjusting the SpeechSynthesisUtterance object’s rate property. It accepts values from 0.1 to 10. I find 1.4 to be a pretty comfortable speed; anything over 3 just sounds like noise to me.

See the Pen Experimenting with `speechSynthesis`, example 1³⁵¹²⁹ by Aaron Gustafson (@aarongustafson^36331310) on CodePen^37341411.

You can also tune things such as the pitch¹⁵, the volume¹⁶ of the voice, even the language being spoken¹⁷ and the voice itself¹⁸. I’m a big fan of defaults in most things, so I’ll let you explore those options on your own time. For the purpose of my experiment, I opted to change the default rate to 1.4, and that was about it.

A Basic Implementation: Play And Pause Link

When I began working with this code on my own website, I was keen to provide four controls for my readers:

• play
• pause
• increase reading speed
• decrease reading speed

The first two were relatively easy. The latter two caused problems, which I’ll discuss shortly.

To kick things off, I parroted the code Dave had tweeted:

var to_speak = new SpeechSynthesisUtterance( document.querySelector('main').textContent ); window.speechSynthesis.speak(to_speak);

This code grabs the text content (textContent) of the main element and converts it into a SpeechSynthesisUtterance. It then triggers the synthesizer to speak that content. Simple enough.

Of course, I didn’t want the content to begin reading immediately, so I set about building a user interface to control it. I did so in JavaScript, within the feature-detection conditional, rather than in HTML, because I did not want the interface to appear if the feature was not available (or if JavaScript failed for some reason). That would be frustrating for users.

I created the buttons and assigned some event handlers to wire up the functionality. My first pass looked something like this:

var $buttons = document.createElement('p'), $button = document.createElement('button'), $play = $button.cloneNode(), $pause = $button.cloneNode(), paused = false, to_speak; if ( 'speechSynthesis' in window ) { // content to speak to_speak = new SpeechSynthesisUtterance( document.querySelector('main').textContent ); // set the rate a little faster than 1x to_speak.rate = 1.4; // event handlers to_speak.onpause = function(){ paused = true; }; // button events function play() { if ( paused ) { paused = false; window.speechSynthesis.resume(); } else { window.speechSynthesis.speak( to_speak ); } } function pause() { window.speechSynthesis.pause(); } // play button $play.innerText = 'Play'; $play.addEventListener( 'click', play, false ); $buttons.appendChild( $play ); // pause button $pause.innerText = 'Pause'; $pause.addEventListener( 'click', pause, false ); $buttons.appendChild( $pause ); } else { // sad panda $buttons.innerText = 'Unfortunately your browser doesn’t support this feature.'; } document.body.appendChild( $buttons );

This code creates a play button and a pause button and appends them to the document. It also assigns the corresponding event handlers. As you’d expect, the play button calls speechSynthesis.speak(), as we saw earlier, but because pause is also in play, I set it up to either speak the selected text or resume speaking — using speechSynthesis.resume() — if the speech is paused. The pause button controls that by triggering speechSynthesis.pause(). I tracked the state of the speech engine using the boolean variable paused. You can kick the tires of this code over on CodePen¹⁹.

I want to (ahem) pause for a moment to tuck into the speak() command, because it’s easy to misunderstand. At first blush, you might think it causes the supplied SpeechSynthesisUtterance to be read aloud from the beginning, which is why I’d want to resume() after pausing. That is true, but it’s only part of it. The speech synthesis interface actually maintains a queue for content to be spoken. Calling speak() pushes a new SpeechSynthesisUtterance to that queue and causes the synthesizer to start speaking that content if it’s not already speaking. If it’s in the process of reading something already, the new content takes its spot at the back of the queue and patiently waits its turn. If you want to see this in action, check out my fork of the reading speed demo²⁰.

If you want to clear the queue entirely at any time, you can call speechSynthesis.cancel(). When testing speech synthesis with long-form content, having this at the ready in the browser’s console is handy.

Taking It Further: Adjusting Reading Speed Link

As I mentioned, I also wanted to give users control over the reading speed used by the speech synthesizer. We can tune this using the rate property on a SpeechSynthesisUtterance object. That’s fantastic, but you can’t (currently, at least) adjust the rate of a SpeechSynthesisUtterance once the synthesizer starts playing it — not even while it’s paused. I don’t know enough about the inner workings of speech synthesizers to know whether this is simply an oversight in the interface or a hard limitation of the synthesizers themselves, but it did force me to find a creative way around this limitation.

I experimented with a bunch of different approaches to this and eventually settled on one that works reasonably well, despite the fact that it feels like overkill. But I’m getting ahead of myself again.

Every SpeechSynthesisUtterance object offers a handful of events you can plug in to do various things. As you’d expect, onpause²¹ fires when the speech is paused, onend²² fires when the synthesizer has finished reading it, etc. The SpeechSynthesisEvent²³ object passed to each of these includes information about what’s going on with the synthesizer, such as the position of the virtual cursor (charIndex²⁴), the length of time after the current SpeechSynthesisUtterance started being read (elapsedTime²⁵), and a reference to the SpeechSynthesisUtterance itself (utterance²⁶).

Originally, my plan to allow for real-time reading-speed adjustment was to capture the virtual cursor position via a pause event so that I could stop and start a new recording at the new speed. When the user adjusted the reading speed, I would pause the synthesizer, grab the charIndex, backtrack in the text to the previous space, slice from there to the end of the string to collect the remainder of what should be read, clear the queue, and start the synthesizer again with the remainder of the content. That would have worked, and it should have been reliable, but Chrome kept giving me a charIndex of 0, and in Edge it was always undefined. Firefox tracked charIndex perfectly. I’ve filed a bug for Chromium²⁷ and one for Edge²⁸, too.

Thankfully, another event, onboundary²⁹, fires whenever a word or sentence boundary is reached. It’s a little noisier, programmatically speaking, than onpause because the event fires so often, but it reliably tracked the position of the virtual cursor in every browser that supports speech synthesis, which is what I needed.

Here’s the tracking code:

var progress_index = 0; to_speak.onboundary = function( e ) { if ( e.name == 'word' ) { progress_index = e.charIndex; } };

Once I was set up to track the cursor, I added a numeric input to the UI to allow users to change the speed:

var $speed = document.createElement('p'), $speed_label = document.createElement('label'), $speed_value = document.createElement('input'); // label the field $speed_label.innerText = 'Speed'; $speed_label.htmlFor = 'speed_value'; $speed.appendChild( $speed_label ); // insert the form control $speed_value.type = 'number'; $speed_value.id = 'speed_value'; $speed_value.min = '0.1'; $speed_value.max = '10'; $speed_value.step = '0.1'; $speed_value.value = Math.round( to_speak.rate * 10 ) / 10; $speed.appendChild( $speed_value ); document.body.appendChild($speed);

Then, I added an event listener to track when it changes and to update the speech synthesizer:

function adjustSpeed() { // cancel the original utterance window.speechSynthesis.cancel(); // find the previous space var previous_space = to_speak.text.lastIndexOf( ' ', progress_index ); // get the remains of the original string to_speak.text = to_speak.text.slice( previous_space ); // math to 1 decimal place speed = Math.round( $speed_value.value * 10 ) / 10; // adjust the rate if ( speed > 10 ) { speed = 10; } else if ( speed < 0.1 ) { speed = 0.1; } to_speak.rate = speed; // return to speaking window.speechSynthesis.speak( to_speak ); } $speed_value.addEventListener( 'change', adjustSpeed, false );

This works reasonably well, but ultimately I decided that I was not a huge fan of the experience, nor was I convinced it was really necessary, so this functionality remains commented out in my website’s source code³⁰. You can make up your mind after seeing it in action over on CodePen³¹.

Taking It Further: Tweaking What’s Read Link

At the top of every blog post, just after the title, I include quite a bit of meta data about the post, including things like the publication date, tags for the post, comment and webmention counts, and so on. I wanted to selectively control which content from that collection is read because only some of it is really relevant in that context. To keep the configuration out of the JavaScript and in the declarative markup where it belongs, I opted to have the JavaScript look for a specific class name, “dont-read”, and exclude those elements from the content that would be read. To make it work, however, I needed revisit how I was collecting the content to be read in the first place.

You may recall that I’m using the textContent property to extract the content:

var to_speak = new SpeechSynthesisUtterance( document.querySelector('main').textContent );

That’s all well and good when you want to grab everything, but if you want to be more selective, you’re better off moving the content into memory so that you can manipulate it without causing repaints and such.

var $content = document.querySelector('main').cloneNode(true);

With a clone of main in memory, I can begin the process of winnowing it down to only the stuff I want:

var to_speak = new SpeechSynthesisUtterance() $content = document.querySelector('main').cloneNode(true), $skip = $content.querySelectorAll('.dont-read'); // don’t read Array.prototype.forEach.call( $skip, function( $el ){ $el.innerHTML = ''; }); to_speak.text = $content.textContent;

Here, I’ve separated the creation of the SpeechSynthesisUtterance to make the code a little clearer. Then, I’ve cloned the main element ($content) and built a nodeList of elements that I want to be ignored ($skip). I’ve then looped over the nodeList — borrowing Array’s handy forEach method — and set the contents of each to an empty string, effectively removing them from the content. At the end, I’ve set the text property to the cloned main element’s textContent. Because all of this is done to the cloned main, the page remains unaffected.

Done and done.

Taking It Further: Synthetic Pacing Tweaks Link

Sadly, the value of a SpeechSynthesisUtterance can only be text. If you pipe in HTML, it will read the tag names and slashes. That’s why most of the demos use an input to collect what you want read or rely on textContent to extract text from the page. The reason this saddens me is that it means you lose complete control over the pacing of the content.

But not all is lost. Speech synthesizers are pretty awesome at recognizing the effect that punctuation should have on intonation and pacing. To go back to the first example I shared, consider the difference when you drop a comma between “hello” and “world”:

if ( 'speechSynthesis' in window ) { var to_speak = new SpeechSynthesisUtterance('Hello, world!'); window.speechSynthesis.speak(to_speak); } 

See the Pen Experimenting with `speechSynthesis`, example 2³² by Aaron Gustafson (@aarongustafson^36331310) on CodePen^37341411.

Here’s the original again, just so you can compare:

See the Pen Experimenting with `speechSynthesis`, example 1³⁵¹²⁹ by Aaron Gustafson (@aarongustafson^36331310) on CodePen^37341411.

With this in mind, I decided to tweak the pacing of the spoken prose by artificially inserting commas into the specific elements that follow the pattern I just showed for hiding content:

var $pause_before = $content.querySelectorAll( 'h2, h3, h4, h5, h6, p, li, dt, blockquote, pre, figure, footer' ); // synthetic pauses Array.prototype.forEach.call( $pause_before, function( $el ){ $el.innerHTML = ' , ' + $el.innerHTML; });

While I was doing this, I also noticed some issues with certain elements running into the content around them. Most notably, this was happening with pre elements. To mitigate that, I used the same approach to swap carriage returns, line breaks and such for spaces:

var $space = $content.querySelectorAll('pre'); // spacing out content Array.prototype.forEach.call( $space, function( $el ){ $el.innerHTML = ' ' + $el.innerHTML.replace(/[rnt]/g, ' ') + ' '; }); 

With those tweaks in place, I’ve been incredibly happy with the listening experience. If you’d like to see all of this code in context, head over to my GitHub repository³⁸. The code you use to drop the UI into the page will likely need to be different from what I did, but the rest of the code should be plug-and-play.

Is speechSynthesis Ready For Production? Link

As it stands right now, the Web Speech API has not become a standard and isn’t even on a standards track³⁹. It’s an experimental API and some of the details of the specification remain in flux. For instance, the elapsedTime property of a SpeechSynthesisEvent originally tracked milliseconds and then switched to seconds. If you were doing math that relied on that number to do something else in the interface, you might get widely different experiences in Chrome (which still uses milliseconds) and Edge (which uses seconds).

If I was granted one wish for this specification—apart from standardization—it would be for real-time speed, pitch and volume adjustment. I can understand the need to restart things to get the text read in another voice, but the others feel like they should be manipulable in real time. But again, I don’t know anything about the inner workings of speech synthesizers, so that might not be technically possible.

In terms of actual browser implementations, basic speech synthesis like I’ve covered here is pretty solid in browsers that support the API⁴⁰. As I mentioned, Chrome and Edge currently fail to accurately report the virtual cursor position when speech synthesis is paused, but I don’t think that’s a deal-breaker. What is problematic is how unstable things get when you start to combine features such as real-time reading-speed adjustments, pausing and such. Often, the synthesizer just stops working and refuses to start up again. If you’d like to see that happen, take a look at a demo I set up⁴¹. Chances are that this issue would go away if the API allowed for real-time manipulation of properties such as rate because you wouldn’t have to cancel() and restart the synthesizer with each adjustment.

Long story short, if you’re looking at this as a progressive enhancement for a content-heavy website and only want the most basic features, you should be good to go. If you want to get fancy, you might be disappointed or have to come up with more clever coding acrobatics than I’ve mustered.

Want To Learn More? Link

As with most things on the web, I learned a ton by viewing other people’s source, demos and such — and the documentation, naturally. Here are some of my favorites (some of which I linked to in context):

• “Web Speech API Specification: Editor’s Draft⁴²,” W3C
• “Web Speech API⁴³,” Mozilla Developer Network
• “Speech Synthesis API⁴⁴,” Can I Use? (chart of browser support)
• “Web Apps That Talk: Introduction to the Speech Synthesis API⁴⁵,” Eric Bidelman, Google Developers
• “Speech Synthesis API⁴⁶,” Microsoft Developer (demo for Edge)

(rb, yk, il, al)

Footnotes Link

1. 1 https://vimeo.com/184234783
2. 2 https://developer.mozilla.org/docs/Web/API/Web_Speech_API
3. 3 https://developer.mozilla.org/docs/Web/API/SpeechRecognition
4. 4 https://developer.mozilla.org/docs/Web/API/SpeechSynthesis
5. 5 https://twitter.com/davatron5000/status/818493871961341953
6. 6 https://www.aaron-gustafson.com/notebook/
7. 7 https://www.aaron-gustafson.com/notebook/insert-clickbait-headline-about-progressive-enhancement-here/
8. 8 http://caniuse.com/#feat=speech-synthesis
9. 9 http://codepen.io/aarongustafson/pen/qRZgzx/
10. 10 http://codepen.io/aarongustafson
11. 11 http://codepen.io
12. 12 http://codepen.io/aarongustafson/pen/qRZgzx/
13. 13 http://codepen.io/aarongustafson
14. 14 http://codepen.io
15. 15 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/pitch
16. 16 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/volume
17. 17 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/lang
18. 18 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/voice
19. 19 http://codepen.io/aarongustafson/pen/ygOrNj
20. 20 http://s.codepen.io/aarongustafson/pen/ggryNo/
21. 21 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/onpause
22. 22 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/onend
23. 23 https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisEvent
24. 24 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/charIndex
25. 25 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/elapsedTime
26. 26 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisEvent/utterance
27. 27 https://bugs.chromium.org/p/chromium/issues/detail?id=681026
28. 28 https://twitter.com/aarongustafson/status/819944910308646913
29. 29 https://developer.mozilla.org/docs/Web/API/SpeechSynthesisUtterance/onboundary
30. 30 https://github.com/aarongustafson/aarongustafson.github.io/blob/source/source/_javascript/post/speak.js
31. 31 https://codepen.io/aarongustafson/pen/vgKpMg?editors=0010
32. 32 https://codepen.io/aarongustafson/pen/dNMrYq/
33. 33 http://codepen.io/aarongustafson
34. 34 http://codepen.io
35. 35 http://codepen.io/aarongustafson/pen/qRZgzx/
36. 36 http://codepen.io/aarongustafson
37. 37 http://codepen.io
38. 38 https://github.com/aarongustafson/aarongustafson.github.io/blob/source/source/_javascript/post/speak.js
39. 39 https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html#status
40. 40 http://caniuse.com/#feat=speech-synthesis
41. 41 https://codepen.io/aarongustafson/pen/ZLOxLe
42. 42 https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html
43. 43 https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
44. 44 http://caniuse.com/#feat=speech-synthesis
45. 45 https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
46. 46 https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/speechsynthesis/

↑ Back to topTweet itShare on Facebook

The sharing spirit in the design community is remarkable. Designers spend countless hours on side projects, and without asking for anything in return, they share their creations freely with the community, just to give something back, to inspire, and to support fellow folks in their work.

When working on a project yourself, freebies like these can come to the rescue when you have to get along on a tight budget but, more often that that, they simply are the missing piece that’ll make your design complete.

In this post, we hand-picked 30 fonts that are bound to give your project the finishing touch, and maybe even inspire you to something entirely new. The fonts can all be downloaded for free. However, please note that some of them are free for personal use only and are clearly marked as such in the description. Also, please be sure to check the license agreements before using a font in your project as they may change from time to time.

For more free font goodness, also check out the following posts:

• Free Fonts With Personality¹
• New High-Quality Free Fonts²
• 40 Delightful High-Quality Free Fonts³
• 23 Splendid High-Quality Free Fonts⁴

L-7 Stencil Link

Luis Calzadilla’s font L-7 Stencil⁵ is a good match for all those occasions when you want to make a bold statement while keeping the typeface itself rather than sleek and slim. Characteristic for the sans-serif font are the stencil-style, fragmented letters and the rounded terminals. The font supports capital letters and numbers and can be used for free in personal projects. If you want to use it in a commercial project, please be sure to credit the designer.

⁶

Westfalia Link

It’s not only the name of the brush sans Westfalia⁸ that wakes allusions of the famous campervan. With its hand-drawn feel, messy edges, and varied line thickness, the font also caters for a warm feeling of authenticity and adventure. Westfalia comes in one weight, with capital letters, numbers and punctuation marks, and works especially well as bold headings or on posters. It’s free to use for both personal and commercial projects.

⁹

Setta Script Link

If you’re looking for something to add a personal touch to your projects, the modern calligraphy typeface Setta Script¹¹ might be for you. It comes with 244 glyphs and 69 alternate characters with Opentype features. Ligatures are also supported. A perfect match for greeting cards and invitations.

¹²

Old Growth Link

Inspired by the old growth forests of the West Coast, Old Growth¹⁴ is a rough sans-serif font with edges as uneven as the treetops in the woods. This one works especially well for branding, quotes, and headlines. You’re free to use the font to your liking in personal as well as commercial projects.

¹⁵

Moderne Sans Link

Inspired by the typography of the 1920’s, Marius Kempken designed Moderne Sans¹⁷. The typeface is based on uppercase letters, but lowercase letters and numbers are included in the font, too. You may use Moderne Sans freely in both personal as well as commercial work.

¹⁸

Octanis Link

The font family Octanis²⁰ beautifully merges the new and the old. It comes in eight styles ranging from modern, even a bit futuristic sans-serif versions to a rather vintage-inspired slab serif. A nice choice for headlines and logos, but also paragraphs of text look great with it. You may use the typeface for free in both personal and commercial projects.

²¹

Escafina Link

A balanced upright script with style and moxie. That’s Escafina²³. Escafina is a modern interpretation of the letters you usually find in mid-century advertising and signage. It comes in three styles (high, medium, and low) and supports over 100 languages. Personal licenses are pay-as-you-want.

²⁴

Noto Link

You know those little boxes that appear when a computer can’t render a character? Because of their shape, they are often referred to as “tofu”. Google’s answer to these little boxes is a font family that aims to support all existing languages and, thus, put an end to “tofu”. And what name could be better suited for such an undertaking as “Noto²⁶”, which is assembled from “no more tofu”? The Noto typeface comes in multiple styles and weights and is freely available. Perfect for when your project needs to support languages that other fonts usually fail to display.

²⁷

Bonfire Link

To give your project an authentic, handmade touch, Bonfire²⁹ might be just what you were looking for. The hand-drawn brush font shines with its unique swashes. The free version includes upper and lowercase letters in one style that you may use for personal projects.

³⁰

Etna Link

If you’re looking for a typeface with a seamless flow that still makes a bold statement, Etna³² may be one for you. Characteristic for Etna are the pointy edges of the capital letters that majestically stand out like the tip of a mountain. While the full version covers Latin as well as Cyrillic alphabets, the free version comes with Latin characters only. Free for personal use.

³³

Vintii Link

Vintii³⁵ is certainly a friendly and playful typeface that doesn’t take itself too seriously. With its cut-out looks, it’s a good catch for headlines and short descriptions, but it’s readable in larger blocks of text as well. The font contains all basic glyphs and characters and can be used to your liking.

³⁶

Plume Link

To create his typeface Plume³⁸, Krišjānis Mežulis chose a quite extraordinary approach: He used a thick brush to paint the individual letters, numbers, and punctuation marks on a plastic surface. The result: a crisp typeface with a unique splashed look.

³⁹

Coves Link

Simple rounded shapes and a sleek overall look are the determining elements of the font Coves⁴¹. It comes in two weights (light and bold) and offers full glyph support. You’re free to use Coves in personal projects. If you’re interested in a commercial license, please be sure to contact the designer.

⁴²

Zefani Link

Zefani⁴⁴ is a typeface with a strong character and an elegant, sophisticated look. The stencil version comes with uppercase letters and can be used for free in private projects.

⁴⁵

Kano Link

If you’re looking for a font with personality that is humble enough not to steal your content the show, check out Kano⁴⁷. With its geometric structure and sharp edge points, it makes a statement that is ideal for logos, posters, and other typographic work. Kano is free to use in personal and commercial projects.

⁴⁸

Ailerons Link

Ailerons⁵⁰ can be translated as “little wing” in French, and that’s exactly where the typeface sought its inspiration: in aircraft models of the 1940s. The typeface is clean and stylish and works especially well for titles. You may use it freely as long as it’s for personal use only. If you’re interested in using Ailerons in a commercial project, please contact the designer.

⁵¹

Noelan Script Link

Do you have a sweet spot for handlettering? Then, take a look at Noelan Script⁵³. The modern calligraphy typeface comes with Opentype features that allow swashes to be automatically connected for intial and terminal. And to improve the handwritten look even further, you can mix and match alternate characters for more variety. Noelan is free for personal and commercial use.

⁵⁴

Phalanx Link

Inspired by vintage print catalogs from the early 1900s, Mark Richardson set out to create a typeface that captures the aesthetics of the era. What came out of it, is the free font Phalanx⁵⁶, and, well, rustic and honest are probably the words that best describe its look. Phalanx comes with a full uppercase alphabet and numbers. You’re free to use it as you wish.

⁵⁷

Shkoder 1989 Link

How about some 90s vibes for a change? Shkoder 1989⁵⁹ seeks inspiration in the good things of the decade: sports, tech, and everything else that inspired a kid of the time. The typeface consists of caps, numbers, and a lot of glyphs that make it a good fit also for non-English projects. Two weights – one light, one black – are available. You may use Shkoder 1989 for any kind of project. If you decide to use it commercially, shoot the designers an email – they’d love to hear about it.

⁶⁰

Wayward Link

A font that beautifully captures the aesthetic found in popular handwriting pieces is Wayward⁶³. The uppercase alphabet pairs well with script lettering and gives branding projects a personal touch. Free to use, also commercially.

⁶⁴

Aqua Grotesque Link

Aqua Grotesque⁶⁶ is a grotesque typeface with a retro, 1940s touch. Its crisp, geometric shapes cater for a fresh and unique look. Feel free to use it as you like.

⁶⁷

Daddy Link

“A funny font for funny people.” That’s how the font Daddy⁶⁹ describes itself. Originally created for a children’s book, Daddy is bound to bring a fresh and playful twist to any kind of project. It’s free to use, even commercially.

⁷⁰

Santral Link

A sharp and precise design that enables a clear communication with the reader – that’s Santral⁷². Santral was designed with a focus on keeping the balance between visual perfection and optical impression. The complete font family includes twelve weights and italic versions, two of them (Light and Light Italic) can be downloaded for free for personal projects.

⁷³

Hensa Link

The hand-painted brush script typeface Hensa⁷⁵ is a nice choice for logos, packaging, greeting cards and the like. It supports standard Latin characters (upper- and lowercase), numerals, punctuation, ligatures, and – for the extra handmade touch – a set of swashes. Free for private and commercial use.

⁷⁶

Affogato Link

Its high x-height and long descenders make Affogato⁷⁸ an unusually expressive, yet friendly, typeface. It comes in five weights and a vast variety of glyphs which make it a good fit for diacritic-heavy languages, too. Affogato looks especially good as display type or in logos, but body copy works well, too. You may use it for free (also commercially) or can pay what you want for a license to show the designer your appreciation.

⁷⁹

Stijla Link

How about something experimental for a change? Inspired by Kandinsky and Gestalt’s optical research, Alfonso Armenteros Parras designed Stijla⁸¹, a typeface that wants to push the boundaries of legibility. The free version comes with a standard Latin alphabet and numbers.

⁸²

Accent Link

Another rather experimental font is Accent⁸⁴. The combination of fine lines and bold geometric shapes works best for short titles and short words. You may use Accent for free in both personal and commercial projects.

⁸⁵

Soria Link

Art nouveau and the modern Didot typeface were the source of inspiration for Soria⁸⁷. Soria comes with a good selection of glyphs and beautiful ligatures. A timely piece with a unique, vintage touch.

⁸⁸

Orkney Link

A unique yet functional font is Orkney⁹⁰. With its geometric look and a high level of readability also in small font sizes, it works well in both print and web projects. The Orkney family includes four weights with more than 400 characters and wide language support. Released under the SIL Open Font License, you may use it commercially.

⁹¹

Multicolore Link

Technically speaking, Multicolore⁹⁴ isn’t a font as it’s multicolored and you cannot write with it in your favorite program either. Instead, you’ll need a vector editing application to create text with it. But that’s nothing to worry about as the bold and playful fellow is best suited for text that includes only a few words anyhow. Multicolore comes in EPS, AI and PDF formats and is free even for commercial use.

⁹⁵

Did you stumble across a free font recently that caught your attention? We’d love to hear about it in the comments!

(aa, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/02/free-fonts-with-personality/
2. 2 https://www.smashingmagazine.com/2012/01/high-quality-free-fonts-2012/
3. 3 https://www.smashingmagazine.com/2012/07/free-font-round-up/
4. 4 https://www.smashingmagazine.com/2012/01/high-quality-free-fonts-2012/
5. 5 https://www.behance.net/gallery/44809399/L-7-STENCIL-FONT-(FREE)
6. 6 https://www.behance.net/gallery/44809399/L-7-STENCIL-FONT-(FREE)
7. 7 https://www.behance.net/LuisCal
8. 8 https://www.pixelsurplus.com/freebies/westfalia-free-font
9. 9 https://www.pixelsurplus.com/freebies/westfalia-free-font
10. 10 https://www.pixelsurplus.com/
11. 11 http://ianmikraz.com/fonts/setta-script-free-typeface/
12. 12 http://ianmikraz.com/fonts/setta-script-free-typeface/
13. 13 http://ianmikraz.com/
14. 14 https://www.pixelsurplus.com/freebies/old-growth
15. 15 https://www.pixelsurplus.com/freebies/old-growth
16. 16 https://www.pixelsurplus.com/
17. 17 https://www.behance.net/gallery/15574861/Moderne-Sans-Free-Typeface
18. 18 https://www.behance.net/gallery/15574861/Moderne-Sans-Free-Typeface
19. 19 https://www.behance.net/MarKempken
20. 20 https://pixelbuddha.net/freebie/octanis-font-family-free-font-download
21. 21 https://pixelbuddha.net/freebie/octanis-font-family-free-font-download
22. 22 https://www.behance.net/p_rudakov
23. 23 http://escafina.losttype.com/
24. 24 http://escafina.losttype.com/
25. 25 http://rileycran.com/
26. 26 https://www.google.com/get/noto/
27. 27 https://www.google.com/get/noto/
28. 28 https://www.google.com/get/noto/
29. 29 https://www.pixelsurplus.com/freebies/bonfire-free-font
30. 30 https://www.pixelsurplus.com/freebies/bonfire-free-font
31. 31 http://jeremyvessey.com/
32. 32 http://wildtype.design/product/etna-free-typeface/
33. 33 http://wildtype.design/product/etna-free-typeface/
34. 34 https://www.behance.net/krisijanis
35. 35 http://wildtype.design/product/vintii-font/
36. 36 http://wildtype.design/product/vintii-font/
37. 37 https://www.behance.net/EvitaVilaka
38. 38 http://wildtype.design/product/plume-free-brush-font/
39. 39 http://wildtype.design/product/plume-free-brush-font/
40. 40 https://www.behance.net/krisijanis
41. 41 https://www.behance.net/gallery/32715299/Coves-Free-Font
42. 42 https://www.behance.net/gallery/32715299/Coves-Free-Font
43. 43 https://www.behance.net/JackHarvatt
44. 44 https://www.behance.net/gallery/28603693/Zefani-Free-Type-Family
45. 45 https://www.behance.net/gallery/28603693/Zefani-Free-Type-Family
46. 46 https://www.behance.net/AndrewHerndon
47. 47 https://www.behance.net/gallery/26796663/Kano-Typeface-(Free-Font)
48. 48 https://www.behance.net/gallery/26796663/Kano-Typeface-(Free-Font)
49. 49 https://www.behance.net/flgraphic
50. 50 https://www.behance.net/gallery/25541553/Ailerons-Typeface
51. 51 https://www.behance.net/gallery/25541553/Ailerons-Typeface
52. 52 https://www.behance.net/agonz
53. 53 https://www.pixelsurplus.com/freebies/noelan#
54. 54 https://www.pixelsurplus.com/freebies/noelan#
55. 55 https://www.behance.net/Ndroadv
56. 56 https://www.behance.net/gallery/43013535/PHALANX-FREE-FONT
57. 57 https://www.behance.net/gallery/43013535/PHALANX-FREE-FONT
58. 58 https://www.behance.net/markyih
59. 59 https://www.behance.net/gallery/47494599/SHKODER-1989-FREE-TYPEFACE
60. 60 https://www.behance.net/gallery/47494599/SHKODER-1989-FREE-TYPEFACE
61. 61 https://www.behance.net/julianhxh
62. 62 https://www.behance.net/AnaHoxha
63. 63 https://www.behance.net/gallery/35829435/WAYWARD-FREE-FONT
64. 64 https://www.behance.net/gallery/35829435/WAYWARD-FREE-FONT
65. 65 https://www.behance.net/jeremyvessey
66. 66 https://www.behance.net/gallery/14884671/AQUA-GROTESQUE-TYPEFACE
67. 67 https://www.behance.net/gallery/14884671/AQUA-GROTESQUE-TYPEFACE
68. 68 https://www.behance.net/poldesigns
69. 69 https://www.pixelsurplus.com/freebies/daddy
70. 70 https://www.pixelsurplus.com/freebies/daddy
71. 71 https://www.pixelsurplus.com/freebies/daddy
72. 72 https://www.behance.net/gallery/46065847/Santral
73. 73 https://www.behance.net/gallery/46065847/Santral
74. 74 https://www.behance.net/tanerardali
75. 75 http://graphicburger.com/hensa-free-brush-script-font/
76. 76 http://graphicburger.com/hensa-free-brush-script-font/
77. 77 http://graphicburger.com/
78. 78 https://lobdell.me/affogato/
79. 79 https://lobdell.me/affogato/
80. 80 https://www.lobdell.me/
81. 81 https://www.behance.net/gallery/46451927/STIJLA-free-font
82. 82 https://www.behance.net/gallery/46451927/STIJLA-free-font
83. 83 https://www.behance.net/alfonsoarmenteros
84. 84 https://www.behance.net/gallery/2624657/Accent
85. 85 https://www.behance.net/gallery/2624657/Accent
86. 86 https://www.behance.net/nelsonbalaban
87. 87 https://www.behance.net/gallery/34828635/Soria-Free-noveau-font
88. 88 https://www.behance.net/gallery/34828635/Soria-Free-noveau-font
89. 89 https://www.behance.net/danibydani
90. 90 https://www.behance.net/gallery/34855701/Orkney-Open-Source-Typeface
91. 91 https://www.behance.net/gallery/34855701/Orkney-Open-Source-Typeface
92. 92 https://www.behance.net/oakes
93. 93 https://www.behance.net/pradil
94. 94 https://www.behance.net/gallery/5172881/Multicolore-FREE-Font
95. 95 https://www.behance.net/gallery/5172881/Multicolore-FREE-Font
96. 96 https://www.behance.net/neogrey

↑ Back to topTweet itShare on Facebook

Many criticize gestural controls as being unintuitive and unnecessary. Despite this, widespread adoption is underway already, and the UI design world is burning the candle at both ends to develop solutions that are instinctively tactile. The challenges here are those of novelty.

Even though gestural controls have been around since the early 1980s¹ and have enjoyed a level of ubiquity since the early 2000s, designers are still in the beta-testing phase of making gestural controls intuitive for everyday use.

This article will explore the benefits and drawbacks of gestural controls for mobile UIs, as well as offer advice on effective implementation that avoids the gap in user familiarity.

Further Reading on SmashingMag: Link

• The Thumb Zone: Designing For Mobile Users²
• Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes³
• Beyond The Button: Embracing The Gesture-Driven Interface⁴
• A Guide To Designing Touch Keyboards (With Cheat Sheet)⁵

General Gestures Link

Gestures come in all shapes and sizes. The most common are listed in the graphic below. These are the conventional controls to which most active mobile device users are accustomed. These are the most used across platforms and, in that regard, the most intuitive. At least that’s the case with people who have significant experience using gestural controls.

⁶

This level of intuition can’t be applied, however, to the diminishing population who are flying blind when confronted with a mobile interface. According to an oft-cited study⁸ by Dan Mauney, there are a great deal of similarities in the way people expect a mobile interface to work. This study asked participants from nine countries to create a set of 28 actions using a gestural interface.

The results were stunningly similar. There wasn’t a ton of variability between actions. Most people expected certain actions to work the same. Deleting, for example, was most often accomplished by dragging an element off of the screen. Menus were constantly consulted — despite warnings not to do this. People often drew a question mark to indicate help functionality.

Oddly enough, the standard set of controls used across most apps were these:

• tap,
• double-tap,
• drag,
• flick,
• pinch,
• spread,
• press,
• press and tap,
• press and drag,
• rotate.

These didn’t always account for the intuitive gestures most people in the study created when left to their own devices. This presents a big question: How intuitive are gestural interfaces? Not only that, but what are the pros and cons of implementing a gestural interface?

Regardless of the drawbacks, one thing is clear: Gestural interfaces aren’t going anywhere. That’s why it’s vital for today’s designers to firmly grasp the underlying concepts that make gestural controls effective. Otherwise, the chance that the usability of their work will suffer increases dramatically.

Benefits Of Gestural Controls Link

Gestural controls are popular because of two major factors:

• the meteoric rise of mobile devices with touchscreens,
• the movie Minority Report.

Kidding. It’s just about the mobile devices. The Minority Report HUD display is such a fantastic example, however, that it’s become somewhat of a trope to discuss it in conversations about touch interfaces, but we’re still a ways off from interacting with holographic projections.

⁹

Even so, this foreboding Tom Cruise vehicle did a great job of showing what will eventually be possible with UI design. And the important part of that is getting something that’s usable and intuitive. Let’s examine how that’s possible in our first tangible benefit of gestural control.

Gestures Are Easy to Learn Link

Touch UIs only feel intuitive when they approximate interaction with a physical object. This means that tactile feedback, and the ability to manipulate the UI elements, has to work as an abstraction of a real object in order to be truly intuitive.

Even poorly designed interfaces only take a little experimentation to figure out, at least for power users. Think about how often you’ve skipped a tutorial to just interact with an app’s interface. You might miss some fine details, but it’s fairly easy to discover the primary controls for most interfaces within a few minutes of unguided interaction. Still, there’s a serious limiter on user delight if there’s no subtle guidance from the designer. So, how do you teach your users without distracting them from the application?

The best approach to creating intuitive touch-based interaction is through a process called progressive disclosure. This is a process by which a user is introduced to controls and gestures as they proceed through an interface’s flow. Start by showing users only the most important options for interaction. You can do this with visual cues, or through a tutorial-like “get started” process. I favor the former, because many users (myself included) will usually skip a tutorial¹² to start interacting with an app right away.

Slight visual cues and animations that give instant feedback in response to touch are the perfect delivery method for progressive disclosure. A fantastic example of this is visible in Apple products’ “slide to unlock” commands, although the feature has since been removed.

¹³

The interface guides you with text, indicates the direction with an arrow and offers immediate feedback action with animation. You can take this same concept and draw it out further with more multifaceted applications.

In his 2013 article about gestural interfaces¹⁶, Thomas Joos, contributor to Smashing Magazine, covers this process thoroughly, pointing to YouTube’s Capture application as an example.

¹⁷

Both progressive disclosure and the tutorial techniques offer guidance should a user require it. The disclosure method, however, has the added benefit of respecting the user enough to expect they can figure out a process.

Because they’re completing a task with minimal guidance (achieving goals, as it were), they feel a sense of accomplishment. The design is adding to their delight in interacting with the app. This can help to create habits and obviously makes it much easier to learn related or increasingly complex operations within the application. You’ve established a pattern of minimal guidance; all you have to do is repeat it as the functions layer on in complexity.

The important thing to remember when teaching users how to use your interface is the three-part process of habit formation:

1. trigger,
2. action,
3. feedback.

The trigger is the inciting action, such as a push notification reminding a user to interact with the app. The action is where you leave your subtle clue as to how the user should gesticulate in order to complete the goal. Then comes the feedback, which works as a sort of reward for a job well done.

This habit-formation process is a form of user onboarding, or a way of ensuring that new users are successful when they start using your application, and then converting casual visitors into enthusiastic fans. A great example of this process (specifically, the third step²⁰) can be seen in the Lumosity app.

²¹

The Lumosity app is a game-based brain-training application. It allows users to set up their own triggers, which manifest as push notifications.

It then progresses to the actions, the games themselves. These games are gesture-based, and each is introduced by a quick, easy, simple tutorial.

²³

Note the succinct instructions. A quick read and the performance of the instructions provide instant feedback on user actions.

Finally, after the user has finished each exercise, the feedback is offered — then again, when they’ve finished a set number of exercises in a given day.

²⁵

Providing these stimuli to the user reinforces their satisfaction from performing their tasks, as well as their memory of how to perform them. Gestural controls are a skill, like any other. If you can make learning them fun, then the curve for retention will decrease significantly.

Of course, easy learning is only one benefit of a gestural UI. Another big one is the fact that it promotes a minimalist aesthetic.

Touch UIs Free Up Screen Space Link

Screen real estate on a mobile device is a big deal. Your space is limited, and you have to use it wisely — especially if you have an abundance of features. That’s why so many interfaces are resorting to the hamburger menu icon to hide navigation controls.

²⁷

Using gestures for navigation of a website might be a bit of a tradeoff in usability, but it makes an app look pretty slick. Just take a look at the Solar app, which is highly minimalist and offers those subtle cues we talked about earlier.

²⁹

Though the clarity of the actions a user is meant to take is decreased slightly, the look and feel of the app are boosted in a tangible way. Plus, delight is increased because the user is given more autonomy to figure out what to do on their own. Speaking of delight…

User Delight Link

Something that’s easy to use and easy on the eyes is also easy to enjoy. Gestural controls enable a tactile experience for users, and that’s downright enjoyable. Using haptic feedback to indicate a successful interaction, for example, can give users a subtle sense of accomplishment. This could be as simple as a confirmative vibration upon muting the phone (as in the case of both Apple and Android products).

Basically, in addition to the visual and audio appeal of a product, designers can now begin incorporating touch sensations as a way to engage users. The folks over at Disney are exploring this concept³¹ with no lack of zeal.

Room to Explore Link

That brings us to our final point. This is unexplored territory — a whole new world of interaction for designers to bring to life in living color! While usability and industry best practices should always be considered and consulted, this is a chance to break creatively from convention. While it might not always work out to be revolutionary, experimentation in this field can’t help but be exciting.

Disadvantages Of Gestural Controls Link

Oddly enough, with all of the futuristic appeal and hype paid to gestural controls, the trend isn’t universally beloved. In fact, there’s a sizeable camp in the design world that considers gestural controls to be a step back in usability.

Thoughtless Gesticulation Link

At least part of this pushback is due to the rush to implement. Many designers working on gestural interfaces are ignoring the standard UX caveats that have been shown to measurably improve a product’s usability. Moreover, the inclination towards conformity in design is always pretty high. You’re reading what is essentially a “best practices” article, after all. And it’s one of thousands.

This means that people are using the same techniques and design patterns across any number of applications and interfaces, even when they don’t make sense, due to “conventional wisdom.”

Designers sometimes duplicate the same usability problems in their work that you find in other popular gestural interfaces employed by industry big boys, such as Google and Facebook — for example, the preference for icons over text-based links. In an effort to save space, designers use pictures rather than text. This, in itself, isn’t exactly a cardinal sin, and it can be very helpful in moderation.

The problem is that it isn’t exactly super-intuitive. Pictures are subjective. They can mean different things to different people, and assuming that your users will know what an obscure icon is supposed to do is quite the gamble.

Check the interface of music app Bloom.fm.

³²

There’s a lot going on here. What’s the raindrop supposed to be? Is that a warning for a snowstorm in the bottom left? A musical note overlaying a hamburger menu in the top right, right across the screen from a regular hamburger menu? What am I looking at?

Granted, some users can hit the ground running with these interfaces and learn a lot as they go. But the point is that nothing about this interface gives you a sense of immediate apprehension. It’s not intuitive.

To address this, Bloom.fm might be better served by removing these dissonant symbols from the main screen entirely. Put these functions (whatever they are) in the hidden menu. After all, if you’re on a music player screen, what more do you really need than play, pause, fast forward and rewind?

Unfamiliarity Breeds Discontent Link

This brings us to my next point, which is the overarching problem with gestural interfaces: All of the controls and gestural functions are always hidden. You’re depending on a user’s prior familiarity with basic gestural concepts to get along.

This means that any departure from convention will be seen as unfamiliar. Even more problematic is that there’s no industry standard for gestural controls. It’s like the Wild West, but with more tapping and less shooting. Double-tapping might mean one thing in one app and something completely different in another.

Gestural controls can even change between iterations of an application. For instance, the image-sharing application Imgur used the double-tap gesture for zooming in an old version, but an update to the interface changed the gesture to something different entirely. Now it’s used to “upvote” a post (i.e. increasing its popularity and giving the poster fake Internet points).

Which leads to another problem: The learning curve, depending on your attention to usability detail, can be quite steep. While picking up gestural skills is usually pretty easy, as discussed above, the greater room to explore and implement new design patterns means that touch UIs can be highly variable. Variability is roughly equivalent to unpredictability, and that’s the opposite of intuitive.

To combat this, well-designed touch UIs stay in their lane for the most part, relying on visual cues (particularly animations) and text-based explanations in some cases, to establish a connection between a gesture and a function in the user’s mind.

The Bottom Line Link

As stated at the beginning of this article, despite any deficiencies that may or may not be innate in the basic concepts of gestural interfaces, the touch UI is here to stay. Its flexibility and mild learning curve (for the basics anyway) practically ensure it.

The bottom line of this whole thing is that, regardless of the benefits and disadvantages, touch is the dominant interface of the future. In other words, you’ll have to find a way to make it work. Proceed with caution, and stick with the familiar whenever possible. The best advice I can give is to keep it simple and test with users above and beyond what’s required. It’s in your best interest to figure out how and when to introduce new controls, to make sure you’re not an example in someone else’s article about UI usability.

If you’d like to learn more about the implementation of touch gestures, check out these helpful resources:

• “How to Implement Gestures Into Your Mobile Design³⁴,” Carrie Cousins, The Next Web
• “Touch Gestures and Events³⁵,” Mozilla Developer Network
• “Multi-Touch Web Development³⁶,” Boris Smus, HTML5 Rocks
• “Touch Events: W3C Editor’s Draft³⁷,” W3C
• “Gesture Navigation-Multitouch Gestures for Above Android 4.0.3+³⁸,” Xposed Module Repository

(da, vf, al, il)

Footnotes Link

1. 1 http://adage.com/article/on-design/a-history-gestural-interfaces/139976/
2. 2 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
3. 3 https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
4. 4 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/
5. 5 https://www.smashingmagazine.com/2013/08/guide-to-designing-touch-keyboards-with-cheat-sheet/
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/12/touch-chart-large-opt.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/touch-chart-large-opt.jpg
8. 8 http://www.lukew.com/ff/entry.asp?1197
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/minority-report-large-opt.jpg
10. 10 https://www.youtube.com/watch?v=7SFeCgoep1c
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/minority-report-large-opt.jpg
12. 12 http://blog.maxrudberg.com/post/38958984259/if-you-see-a-ui-walkthrough-they-blew-it
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/slide-to-unlock500.jpg
14. 14 https://c1.staticflickr.com/5/4025/5166412211_65bf5c1aee.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/08/image05.gif
16. 16 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/smashing-mag-large-opt.jpg
18. 18 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/12/smashing-mag-large-opt.jpg
20. 20 http://www.appcues.com/user-onboarding-academy/intro-to-user-onboarding/
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/luminosity-app.jpg
22. 22 https://play.google.com/store/apps/details?id=com.lumoslabs.lumosity&hl=en
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/12/luminosity-app2.jpg
24. 24 https://play.google.com/store/apps/details?id=com.lumoslabs.lumosity&hl=en
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/12/luminosity-app3.jpg
26. 26 https://play.google.com/store/apps/details?id=com.lumoslabs.lumosity&hl=en
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/12/mobile-menu.jpg
28. 28 https://upload.wikimedia.org/wikipedia/commons/b/b8/Editing_Wikipedia_mobile_screenshot_p_16,_Penny_Cyclopaedia_with_menu.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/solarscreen.jpg
30. 30 https://itunes.apple.com/us/app/solar-weather/id542875991?mt=8
31. 31 https://www.engadget.com/2013/10/07/ultrahaptics-3d-touch-displays/
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/12/BloomFM.jpg
33. 33 https://play.google.com/store/apps/details?id=fm.bloom.android&hl=en
34. 34 http://thenextweb.com/dd/2015/11/09/how-to-implement-gestures-into-your-mobile-design/
35. 35 https://developer.mozilla.org/en-US/Apps/Fundamentals/User_input_methods/Touch_Gestures_and_Events
36. 36 https://www.html5rocks.com/en/mobile/touch/
37. 37 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html#methods
38. 38 http://repo.xposed.info/module/ind.fem.black.rayyan.xposed.gesturenavigation

↑ Back to topTweet itShare on Facebook

Everyone here can have a big impact on a project, on someone else. I get very excited about this when I read stories like the one about an intern at Google who did an experiment that saves tons of traffic, or when I get an email from one of my readers who now published an awesome complete beginner’s guide to front-end development.

We need to recognize that our industry depends on people who share their open-source code and we should support them and their projects¹ that we heavily rely on². Finally, we also need to understand that these people perhaps don’t want a job as an employee at some big company but remain independent instead. So if you make money with a project that uses open-source libraries or other resources, maybe Valentine’s Day might be an occasion to show your appreciation and make the author a nice present.

General Link

• So here’s something that helps beginners to start with web development and advanced devs to recap some of their knowledge: Oliver James wrote “HTML & CSS Is Hard (But It Doesn’t Have To Be)³”, a friendly web development tutorial for complete beginners.

⁴

Tools & Workflows Link

• With the Enterprise Onion Toolkit⁷, you can finally deploy HTTP and HTTPS onion sites at scale. While the project is still in its early days, the tool makes it easy to provide access to your web service via a hidden Tor service, which in some countries can be essential for journalists and activists.
• Rembrandt.js⁸ is an image comparison tool based on node-canvas running on a server or in the client. Great for visual regression testing, for example.

Security Link

• Two engineers at Etsy recently shared how they offer their merchants TLS-certificates for their custom domains on the Etsy-platform⁹. The tricky part here is scale: How to store the massive amount of certificates in a secure way? How to negotiate the connection?
• The latest Docker release offers a great solution to store your secrets securely in containers. The Docker Secrets Management¹⁰ is a solid approach to do so.

¹¹

Privacy Link

• Facebook collects data about you in hundreds of ways, across numerous channels. It’s very hard to opt out, but reading this article by Vicki Boykis¹⁴ on what they collect, you’ll learn to better understand the risks of the platform so you can choose to be more restrictive with your Facebook usage.

Web Performance Link

• During her internship at Google last year, Anamaria Cotîrlea integrated Brotli into the Google Play app store, saving Google 1.5 petabytes of traffic each day¹⁵.

Going Beyond… Link

• In only 1 1⁄2 months a gigantic crack developed in the Antarctic ice shelf, and it’s likely to break apart in the next few months¹⁶, setting free about 2,300 square miles of ice into the sea. But the key is not this tiny piece of ice but the much bigger ice shelves that’ll follow. A video captured by the NASA back in November shows the crack in detail¹⁷.
• If you haven’t read “Nineteen Eighty-Four (1984)” by George Orwell yet, here’s your chance: The entire book is available for free as PDF¹⁸ and Audio¹⁹ versions. I personally recommend it to everyone who is only slightly interested in one of these topics: social change, politics, technology.

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://twitter.com/substack/status/829802572508639232
2. 2 https://twitter.com/jashkenas/status/829817619410780160
3. 3 https://internetingishard.com/html-and-css/
4. 4 https://internetingishard.com/html-and-css/
5. 5 https://internetingishard.com/html-and-css/
6. 6 https://internetingishard.com/html-and-css/
7. 7 https://github.com/alecmuffett/eotk
8. 8 http://rembrandtjs.com/
9. 9 https://codeascraft.com/2017/01/31/how-etsy-manages-https-and-ssl-certificates-for-custom-domains-on-pattern/
10. 10 https://blog.docker.com/2017/02/docker-secrets-management/
11. 11 https://codeascraft.com/2017/01/31/how-etsy-manages-https-and-ssl-certificates-for-custom-domains-on-pattern/
12. 12 https://codeascraft.com/2017/01/31/how-etsy-manages-https-and-ssl-certificates-for-custom-domains-on-pattern/
13. 13 https://codeascraft.com/2017/01/31/how-etsy-manages-https-and-ssl-certificates-for-custom-domains-on-pattern/
14. 14 https://veekaybee.github.io/facebook-is-collecting-this/
15. 15 https://students.googleblog.com/2017/02/intern-impact-brotli-compression-for.html?m=1
16. 16 https://www.nytimes.com/interactive/2017/02/07/science/earth/antarctic-crack.html?smid=pl-share
17. 17 https://www.nasa.gov/feature/goddard/2016/nasa-nears-finish-line-of-annual-study-of-changing-antarctic-ice
18. 18 https://ia600201.us.archive.org/8/items/NINETEENEIGHTY-FOUR1984ByGeorgeOrwellPDFAudioBook/1984.pdf
19. 19 https://archive.org/details/NINETEENEIGHTY-FOUR1984ByGeorgeOrwellPDFAudioBook/1984-01.mp3
20. 20 https://wdrl.info/donate
21. 21 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Creating a clock in Sketch might not sound exciting at first, but we’ll discover how easy it is to recreate real-world objects in a very accurate way. You’ll learn how to apply multiple layers of borders and shadows, you’ll take a deeper look at gradients and you will see how objects can be rotated and duplicated in special ways. To help you along the way you can also download the Sketch editable file¹ (139 KB).

This is a rather advanced tutorial, so if you are not that savvy with Sketch yet and need some help, I would recommend to first read “Design a Responsive Music Player in Sketch” (Part One² | Part Two³) that cover a few key aspects in detail when working with Sketch. You can also have a look at my personal project sketchtips.info⁴ where I regularly provide tips and tricks about Sketch.

The first step is to create a new document, named “clock.” Now, set up a new artboard with the same name, 600 pixels in both dimensions and positioned “0” (X) and “0” (Y). For the background color, choose a toned-down blue; I picked the one from the Global Colors in the color dialog (#4A90E2). Center the artboard to the canvas with Cmd + 3, and let’s get started.

⁵

Shadows and Borders Link

The base of the clock is a simple white circle with a diameter of “480px.” Drag it to this size after you have pressed O on the keyboard. Align it to the center of the artboard, and name it “Face.” For the bezel, add a first Inside border with a Thickness of “16.” With just a single solid color, it would look quite dull; to give it a metallic appearance, we will add an angular gradient instead (Fig. 2). After you have picked this fill type for the border in the color dialog (last icon), click on the first color stop on the left of this dialog. Move it a bit to the right with the arrow key (press it about four times). Jump to the other color stop with Tab, and use the arrow key again to slightly move its position, but this time to the left (about six times). Change the color to “#BFBEAC”; I’ve mixed in a small amount of yellow to give it a more natural look, which also applies to some of the other light colors in the gradient. Now go back to the first stop again and change this one to a color of “#484848”.

⁷

After that add six more color stops with a double-click each, their colors being (from left to right): “#BDBDBD”, “#A1A091”, “#C9C9C9”, “#575757”, “#C9C8B5”, “#555555”. For the positions, please refer to the Fig. 2. It looks way better now, but it is still not the result I had in mind. I also want the frame to have a 3D feeling, which is achieved with two additional borders: one below (add it with a click on the “+” button), with an Inside position and a thickness of “21.” Because it is placed below, it will be covered partly, but due to its increased size, it can still be seen a little. Keep this in mind when you stack borders.

Assign the second border a linear gradient (the second icon in the color dialog), going from the top-left of the clock face to the bottom-right. For the start color at the top, choose “#929292”; for the one at the bottom, “#D6D6D6” (Fig. 3). This alone gives the clock much more depth, but another border should give us the final look. This time, add one with an Outside border, stacked between the other two and with a thickness of 5 pixels. This one also needs a linear gradient in the same direction, but from light to dark, with a color of “#BDBDBD” at the beginning and “#676767” at the end.

⁹

Now that we have taken care of the frame itself, we also want it to look slightly raised from the clock face. This is accomplished with a light Inner Shadow. Because the borders already cover a certain part of the clock, the shadow needs to be quite big so that it can be seen. To counteract this, increase the Spread of the shadow to a relatively large value of “26,” which will pull the shadow in. Setting the Blur to “10” now gives us a nice centered shadow; however, that doesn’t respect the lightning of the scene. The light is supposed to come from the top-left, so we need to correct both the X and Y positions to “3.” To echo the theme of the artboard’s background, I have chosen a darker shade of the blue, with “#162A40” at “23%” alpha. Save this color to the Document Colors for later reference.

This is not the only shadow we will use. Another one on the outside will make sure that the clock contrasts with the background and looks as if it would hang on a wall. The shadow should be black, with an alpha value of “23%” and the remaining properties “6/6/14.” This time, we don’t need to increase the Spread because we’ve only set a slight outside border for the circle. The raised effect is even reinforced with a slight gradient on the background itself. Because we have set it directly on the artboard, we need to overlay a rectangle (press R) for this purpose.

Add one that covers the whole artboard (name it “Background shadow”) but that is behind the clock face, and change the fill to a radial gradient. Move its center to the bottom-right third of the artboard (Fig. 4, 1); to change the size, drag the indicator on the circle line to the top-left third of the artboard (Fig. 4, 2). Be sure to use the point that is connected to the center with a line (the other point would change the gradient’s shape to an ellipse). Set both color stops to black in the inspector: the one at the center should have full opacity (100%), and the one on the outside none at all (0%). The shadow would be way too strong like this, so decrease the general opacity of this layer to 24% (close the color dialog and press 2, rapidly followed by 4).

¹¹

The Clock Face Link

With the last step we finished the casing of the clock, so let’s take care of the clock face itself now. To make the alignment for all of the elements easier, let’s add some custom guides first: show the rulers with Ctrl + R, and make sure that the circle is selected. Now, add a vertical guide at its center with a click on the upper ruler. As a guide hover over the ruler until the red line is directly above the middle handles of the shape on the canvas. Do the same for the horizontal guide on the left ruler. For the correct placement, you could also have a look at the positions of the guides when you hover over the rulers: with an artboard size of 600 pixels, this would be 300 pixels for both.

To break the ground, we’ll add the scale for the hours. Create a rectangle at the top of the clock face, above the circle, for the mark of the twelfth hour. The easiest way is to add a rectangle with a random size first and then change it in the inspector. It should have the dimensions “6” (width) and “18” (height), with a black fill. Move it “31px” away from the outer edge of the circle: Hold Alt to show the smart guides, including the distance; point to the circle with the mouse; leave it there; and use the arrow keys to reposition the shape until the spacing is correct (while still holding Alt). Also, center it to the clock face horizontally after selecting both layers, making a right-click and selecting Align Horizontally. But what about the remaining hour marks? It would be quite tedious to create and rotate them by hand.

From Hours To Minutes Link

Luckily, Sketch offers a handy feature that can do both at the same time: Rotate Copies. Select it from Layer → Paths in the menu bar. The following dialog lets you define how many additional copies of the selected element to make. With a total of twelve hours, we require eleven more marks. After you have entered this value and confirmed the dialog, you will be presented with all of the lines and a circular indicator in the middle. You can drag this circle around at will; based on the position, it gives you a wealth of different patterns. Try to move it around! Also, give some other shapes (instead of a rectangle) a shot as a starting point to see what can be done with this option.

However, for the correct placement of the hour marks, move the indicator down until it is at the intersection of the guides that we added earlier (Fig. 5). That was easy! Please note that you won’t be able to alter this position anymore as soon as you click anywhere else on the canvas. But you will still be able to change the individual elements after accessing the related Boolean group with a double-click on the canvas. Rename it to “Hour marks.”

¹³

For the minutes, we can take a similar approach, but instead of lines, we will create circles for these marks. To make that easier, set the hours to “20%” opacity first with 2. Now, draw a circle with a diameter of “8px” at the same position as the current mark on the twelfth hour, which you should move “40px” from the top edge of the clock. Also, set its color to black.

The Rotate Copies option comes into play again. This time we need “59” additional copies. Like before, align the circular indicator to the intersection of the guides. At once, we’ve added all of the marks for the minutes. Rename the new Boolean group to “Minute marks,” and access it with a double-click. However, we don’t need the marks at the same positions as the hours, so we will delete them now: Click on the mark at “12” on the canvas, hold Shift, click on the other round marks that overlap, and delete all twelve of them. You can now set the hours to full opacity again.

From One To Twelve Link

This brings us a huge step closer to the final clock face. However, we have still some work to do. First, the digits. To give the clock a modern appearance I have chosen the futuristic Exo 2 family from Google¹⁵. Unfortunately, you can’t use Rotate Copies to distribute text layers, but we would need to align them manually anyway due to the different shapes of the numbers, so let’s go for it.

To make the alignment easier, create a circle with a diameter of “360” at the center of the clock, and assign it a thin gray border (no fill). Add the “12” at the top, with a font size of “52,” a “Bold” weight and a black fill: Align it with the arrow keys, so that its topside touches the helper circle (Fig. 6). The number should also be centered to the corresponding hour mark. Continue in the same manner for the remaining hours. Always make sure that they touch the circle on the inside. The easiest way is to drag the preceding number out while holding Alt, move it to the new place, change the content, and set the final position with the arrow keys. When you are finished, delete this helper shape. Also, create a “Digits” group for all of the numbers.

¹⁶

Tick-Tock Link

The remaining elements to take care of are the watch hands. Zoom in a bit to start with the second hand. It’s made of a simple red (#DF321E) rectangle with dimensions of “4” (width) and “200” (height), and whose lower two vector points are moved in “1px” each to form a slight trapezoid. To achieve this, press Enter to go into vector point mode, hit Tab two times to go to the lower-right point, and press the left arrow key on the keyboard to move it 1 pixel to the left. Hit Tab again to continue to the lower-left point, which you’ll move in with the right arrow key. Leave this mode again by pressing Esc two times, zoom back to 100% with Cmd + 0, and center the hand to the artboard horizontally. On the Y axis, it should be “192px” away from the top of the watch. Because it is supposed to point to the “6,” we don’t need to rotate it, but make sure that it is above the “Digits” group in the layers list. Finally, name it “Second,” but hide it for now.

You can create the minute hand in the same fashion: Add a black rectangle with the dimensions “10” (width) and “210” (height), and zoom into it with Cmd + 2. For this shape, we’ll add some points at the top and bottom. Like before, enter vector point mode, but move the lower points in “2px” each. Now hold Cmd and click on the top segment to add a point in the exact middle. Push this point up by 3 pixels. Do the same for the lower segment, but move it down by 4 pixels (Fig. 7).

¹⁸

Finally, give the pointer a three-dimensional appearance with a crest (Fig. 8). One way to achieve this is to add a gradient with a hard stop in the middle, consisting of two stops at the same position. Add a gradient fill on top of the existing fill, assigned black with “100%” alpha for the first color stop and white with “0%” for the last stop. Bring the gradient to a horizontal position with the left-pointing arrow in the color dialog.

Now add another point with a double-click on the gradient axis in the color dialog, moved to the exact middle with 5 on the keyboard. Give it 100% alpha, and make sure it is black. Add another one to the right, and also move it to the center with 5, but then press the right arrow key once to offset it slightly to the right. After you have changed it to white with “30%” alpha, you’ll see that this has resulted in a hard edge, thanks to the same position of the color stops. To conclude, leave the color dialog by clicking anywhere on the canvas, and name this shape “Minute.” Place it 188 pixels away from the top of the clock, centered horizontally on the artboard.

²⁰

It’s quite an easy task to get to the hour hand from here. Duplicate its minute counterpart, but hide the original layer, name the new one “Hour,” and change the dimensions to “12” (width) and “162” (height). That already gives us the final shape. However we need to mirror it horizontally to bring the gradient to the opposite side: Right-click on the shape, and select Flip Horizontal from the Transform menu. After that, position it “202px” from the top of the clock face, and center it. Be sure that the order of the hands is second, hour, minute in the layers list, and combine all of them into the new group, “Hands.” It should be above the “Digits” group.

Go Around The Circle Link

Time to set the clock. The second hand, which you can show again now, already points in the right direction, but the other two hands should read 10:07. Rotating the hour pointer in the default way doesn’t give us the correct result because it alters the position we’ve already set. You may remember that it’s possible to adjust the point around which an element rotates. For this to work, we need to use the Rotate icon in the toolbar (Fig. 9, 1), which gives us a little indicator at the center of the object (Fig. 9, 2).

Drag it to the intersection of the custom guides defined earlier, and try to perform the rotation now: The hand will move like on a real clock. Take this opportunity to set the hour hand to a little after 10:00, at about “233” degrees. Show the minute hand again, and proceed in the same manner, but rotate it until it is at the seventh minute of the hour (“–137” degrees). Please note that you need to perform the rotation on the canvas; the input field in the inspector won’t respect the altered rotation point.

²²

For the final touch and to further strengthen the 3D effect of the watch, add some shadows to the hands. Start with the second hand: To respect that the light comes from the top-left, we need to set the properties to “2/5/4/0” with the dark blue that we saved to the Document Colors (#162A40), but at “30%” opacity. The same blur and color can be used for the shadow of the hour hand, but the X and Y positions need to be changed to “–3” and “–2.” The same goes for the minute hand, but with values of “–4” and “–2.”

To top everything off, we will add one last element: a small red circle with a diameter of 12 pixels at the center of the clock that will hold all of the hands at their positions, and named “Cover” (Fig. 10). Take over the color from the second hand with the color picker and add a second fill on top of it: a radial gradient that has the same size and position as the circle, starting with 0% black at the center and going to 20% black on the outline. Also, add a shadow to raise it slightly from the hands. Give it the properties “0/0/5/0” with 50% black.

²⁴

Conclusion Link

The result is a realistic wall clock. You’ve learned not only how to stack multiple borders, but also how to apply gradients to create distinctive effects. You’ve also learned more about rotations and how to use the Rotate Copies function to add multiple copies of the same object in a very special way.

Did you find it useful? It’s just a small glimpse into The Sketch Handbook²⁸²⁶, written by Christian, and published by Smashing Magazine. The full book (which features many more topics²⁷) should help you become a proficient user of Sketch in (almost) no time. No guarantees though! 😉 Happy reading!

(mb, il)

This article is an excerpt from Christian’s The Sketch Handbook²⁸²⁶, available in print and as eBook, published by yours truly. The book contains twelve jam-packed chapters within 376 pages. Among other things, it will teach you how to design a multi-screen mobile app, a responsive article layout as well as icons and interfaces. You’ll also learn about the most recommended plugins for Sketch and a few useful tips, tricks and best practices.

Footnotes Link

1. 1 http://provide.smashingmagazine.com/sketch-clock.sketch
2. 2 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-1/
3. 3 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-2/
4. 4 http://www.sketchtips.info/
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/02/1-realistic-clock-fig-large.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/02/1-realistic-clock-fig-large.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/02/2-realistic-clock-fig-large.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/02/2-realistic-clock-fig-large.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/3-realistic-clock-fig-large.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/02/3-realistic-clock-fig-large.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-realistic-clock-fig-large.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-realistic-clock-fig-large.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-realistic-clock-fig-large.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-realistic-clock-fig-large.png
15. 15 https://fonts.google.com/specimen/Exo+2
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/02/6-realistic-clock-fig-large.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/6-realistic-clock-fig-large.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/7-realistic-clock-fig-large.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/02/7-realistic-clock-fig-large.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/02/8-realistic-clock-fig-large.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/02/8-realistic-clock-fig-large.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9-realistic-clock-fig-large.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9-realistic-clock-fig-large.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/02/10-realistic-clock-fig-large.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/02/10-realistic-clock-fig-large.png
26. 26 https://www.smashingmagazine.com/sketch-handbook/
27. 27 https://www.smashingmagazine.com/sketch-handbook/#toc
28. 28 https://www.smashingmagazine.com/sketch-handbook/

↑ Back to topTweet itShare on Facebook

As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the curse of knowledge¹: When we’re an expert on something, we cannot remember how confused we felt as newbies. We overestimate what people will find easy. Therefore, we think that requiring a bunch of JavaScript to initialize or configure the libraries we write is OK. Meanwhile, some of our users struggle to use them, frantically copying and pasting examples from the documentation, tweaking them at random until they work.

You might be wondering, “But all HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of my poll², which is the only data on this I’m aware of. (If you know of any proper studies on this, please mention them in the comments!)

³

One in two people who write HTML and CSS is not comfortable with JavaScript. One in two. Let that sink in for a moment.

As an example, look at the following code to initialize a jQuery UI autocomplete, taken from its documentation⁵:

<div> <label for="tags">Tags: </label> <input> </div> 

$( function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C" ]; $( "#tags" ).autocomplete({ source: availableTags }); } ); 

This is easy, even for people who don’t know any JavaScript, right? Wrong. A non-programmer would have all sorts of questions going through their head after seeing this example in the documentation. “Where do I put this code?” “What are these braces, colons and brackets?” “Do I need them?” “What do I do if my element does not have an ID?” And so on. Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge.

Now consider the equivalent declarative code from HTML5⁶:

<div> <label for="tags">Tags: </label> <input list="languages"> <datalist> <option>ActionScript</option> <option>AppleScript</option> <option>Asp</option> <option>BASIC</option> <option>C</option> </datalist> </div> 

Not only is this much clearer to anyone who can write HTML, it is even easier for programmers. We see that everything is set in one place, no need to care about when to initialize, how to get a reference to the element and how to set stuff on it. No need to know which function to call to initialize or which arguments it accepts. And for more advanced use cases, there is also a JavaScript API in place that allows all of these attributes and elements to be created dynamically. It follows one of the most basic API design principles: It makes the simple easy and the complex possible.

This brings us to an important lesson about HTML APIs: They would benefit not only people with limited JavaScript skill. For common tasks, even we, programmers, are often eager to sacrifice the flexibility of programming for the convenience of declarative markup. However, we somehow forget this when writing a library of our own.

So, what is an HTML API? According to Wikipedia⁷, an API (or application programming interface) is “is a set of subroutine definitions, protocols, and tools for building application software.” In an HTML API, the definitions and protocols are in the HTML itself, and the tools look in HTML for the configuration. HTML APIs usually consist of certain class and attribute patterns that can be used on existing HTML. With Web Components, even custom element names⁸ are game, and with the Shadow DOM⁹, those can even have an entire internal structure that is hidden from the rest of the page’s JavaScript or CSS. But this is not an article about Web Components; Web Components give more power and options to HTML API designers; but the principles of good (HTML) API design are the same.

HTML APIs improve collaboration between designers and developers, lift some work from the shoulders of the latter, and enable designers to create much higher-fidelity mockups. Including an HTML API in your library does not just make the community more inclusive, it also ultimately comes back to benefit you, the programmer.

Not every library needs an HTML API. HTML APIs are mostly useful in libraries that enable UI elements such as galleries, drag-and-drop, accordions, tabs, carousels, etc. As a rule of thumb, if a non-programmer cannot understand what your library does, then your library doesn’t need an HTML API. For example, libraries that simplify or help to organize code do not need an HTML API. What kind of HTML API would an MVC framework or a DOM helper library even have?

So far, we have discussed what an HTML API is, why it is useful and when it is needed. The rest of this article is about how to design a good one.

Init Selector Link

With a JavaScript API, initialization is strictly controlled by the library’s user: Because they have to manually call a function or create an object, they control precisely when it runs and on what. With an HTML API, we have to make that choice for them, and make sure not to get in the way of the power users who will still use JavaScript and want full control.

The common way to resolve the tension between these two use cases is to only auto-initialize elements that match a given selector, usually a specific class. Awesomplete¹⁰ follows this approach, only picking up input elements with class="awesomplete".

In some cases, making auto-initialization easy is more important than making opt-in explicit. This is common when your library needs to run on a lot of elements, and when avoiding having to manually add a class to every single one is more important than making opt-in explicit. For example, Prism¹⁷¹¹ automatically highlights any <code> element that contains a language-xxx class (which is what the HTML5 specification recommends for specifying the language of a code snippet¹²) or that is inside an element that does. This is because it could be included in a blog with a ton of code snippets, and having to go back and add a class to every single one of them would be a huge hassle.

In cases where the init selector is used very liberally, a good practice is to allow customization of it or allow opting-out of auto-initialization altogether. For example, Stretchy¹³ autosizes every<input>, <select> and <textarea> by default, but allows customization of its init selector to something more specific via a data-stretchy-filter attribute. Prism supports a data-manual attribute on its <script> element to completely disable automatic initialization. A good practice is to allow this option to be set via either HTML or JavaScript, to accommodate both types of library users.

Minimize Init Markup Link

So, for every element the init selector matches, your library needs a wrapper around it, three buttons inside it and two adjacent divs? No problem, but generate them yourself. This kind of grunt work is better suited to machines, not humans. Do not expect that everyone using your library is also using some sort of templating system: Many people are still hand-crafting markup and find build systems too complicated. Make their lives easier.

This also minimizes error conditions: What if a user includes the class that you expect for initialization but not all of the markup you need? When there is no extra markup to add, no such errors are possible.

There is one exception to this rule: graceful degradation and progressive enhancement. For example, embedding a tweet involves a lot of markup, even though a single element with data-* attributes for all the options would suffice. This is done so that the tweet is readable even before the JavaScript loads or runs. A good rule of thumb is to ask yourself, does the extra markup offer a benefit to the end user even without JavaScript? If so, then requiring it is OK. If not, then generate it with your library.

There is also the classic tension between ease of use and customization: Generating all of the markup for the library’s user is easier for them, but leaving them to write it gives them more flexibility. Flexibility is great when you need it, but annoying when you don’t, and you still have to set everything manually. To balance these two needs, you can generate the markup you need if it doesn’t already exist. For example, suppose you wrap all .foo elements with a .foo-container element? First, check whether the parent — or, better yet, any ancestor, via element.closest(".foo-container") — of your .foo element already has the foo-container class, and if so, use that instead of creating a new element.

Settings Link

Typically, settings should be provided via data-* attributes on the relevant element. If your library adds a ton of attributes, then you might want to namespace them to prevent collisions with other libraries, like data-foo-* (where foo is a one-to-three letter prefix based on your library’s name). If that’s too long, you could use foo-*, but bear in mind that this will break HTML validation and might put some of the more diligent HTML authors off your library because of it. Ideally, you should support both, if it won’t bloat your code too much. None of the options here are ideal, so there is an ongoing discussion¹⁴ in the WHATWG about whether to legalize such prefixes for custom attributes.

Follow the conventions of HTML as much as possible. For example, if you use an attribute for a boolean setting, its presence means true regardless of the value, and its absence means false. Do not expect things like data-foo="true" or data-foo="false" instead. Sure, ARIA does that, but if ARIA jumped off a cliff, would you do it, too?

When the setting is a boolean, you could also use classes. Typically, their semantics are similar to boolean attributes: The presence of the class means true, and the absence means false. If you want the opposite, you can use a no- prefix (for example, no-line-numbers). Keep in mind that class names are used more than data-* attributes, so there is a greater possibility of collision with the user’s existing class names. You could consider prefixing your classes with a prefix like foo- to prevent that. Another danger with class names is that a future maintainer might notice that they are not used in the CSS and remove them.

When you have a group of related boolean settings, using one space-separated attribute might be better than using many separate attributes or classes. For example, <div data-permissions="read add edit delete save logout>" is better than <div data-read data-add data-edit data-delete data-save data-logout">, and <div> would likely cause a ton of collisions. You can then target individual ones via the ~= attribute selector. For example, element.matches("[data-permissions~=read]") checks whether an element has the read permission.

If the type of a setting is an array or object, then you can use a data-* attribute that links to another element. For example, look at how HTML5 does autocomplete: Because autocomplete requires a list of suggestions, you use an attribute to link to a <datalist> element containing these suggestions via its ID.

This is a point when following HTML conventions becomes painful: In HTML, linking to another element in an attribute is always done by referencing its ID (think of <label for="…">). However, this is rather limiting: It’s so much more convenient to allow selectors or even nesting if it makes sense. What you go with will largely depend on your use case. Just keep in mind that, while consistency is important, usability is our goal here.

It’s OK if not every single setting is available via HTML. Settings whose values are functions can stay in JavaScript and be considered “advanced customization.” Consider Awesomplete¹⁵: All numerical, boolean, string and object settings are available as data-* attributes (list, minChars, maxItems, autoFirst). All function settings are only available in JavaScript (filter, sort, item, replace, data). If someone is able to write a JavaScript function to configure your library, then they can use the JavaScript API.

Regular expressions (regex) are a bit of a gray area: Typically, only programmers know regular expressions (and even programmers have trouble with them!); so, at first glance there doesn’t seem to be any point in including settings with regex values in your HTML API. However, HTML5 did include such a setting (<input pattern="regex">), and I believe it was quite successful, because non-programmers can look up their use case in a regex directory¹⁶ and copy and paste.

Inheritance Link

If your UI library is going to be used once or twice on each page, then inheritance won’t matter much. However, if it could be applied to multiple elements, then configuring the same settings on each one of them via classes or attributes would be painful. Remember that not everyone uses a build system, especially non-developers. In these cases, it might be useful to define that settings can be inherited from ancestor elements, so that multiple instances can be mass-configured.

Take Prism¹⁷¹¹, a popular syntax-highlighting library, used here on Smashing Magazine as well. The highlighting language is configured via a class of the form language-xxx. Yes, this goes against the guidelines we discussed in the previous section, but this was a conscious decision because the HTML5 specification recommends this¹⁸ for specifying the language of a code snippet. On a page with multiple code snippets (think of how often a blog post about code uses inline <code> elements!), specifying the coding language on each <code> element would become extremely tedious. To mitigate this pain, Prism supports inheritance of these classes: If a <code> element does not have a language-xxx class of its own, then the one of its closest ancestor that does is used. This enables users to set the coding language globally (by putting the class on the <body> or <html> elements) or by section, and override it only on elements or sections with a different language.

Now that CSS variables¹⁹ are supported by every browser²⁰, they are a good candidate for such settings: They are inherited by default and can be set inline via the style attribute, via CSS or via JavaScript. In your code, you get them via getComputedStyle(element).getPropertyValue("--variablename"). Besides browser support, their main downside is that developers are not yet used to them, but that is changing. Also, you cannot monitor changes to them via MutationObserver, like you can for elements and attributes.

Global Settings Link

Most UI libraries have two groups of settings: settings that customize how each instance of the widget behaves, and global settings that customize how the library behaves. So far, we have mainly discussed the former, so you might be wondering what is a good place for these global settings.

One candidate is the <script> element that includes your library. You can get this via document.currentScript²¹, and it has very good browser support²². The advantage of this is that it’s unambiguous what these settings are for, so their names can be shorter (for example, data-filter, instead of data-stretchy-filter).

However, the <script> element should not be the only place you pick up these settings from, because some users may be using your library in a CMS that does not allow them to customize <script> elements. You could also look for the setting on the <html> and <body> elements or even anywhere, as long as you have a clearly stated policy about which value wins when there are duplicates. (The first one? The last one? Something else?)

Documentation Link

So, you’ve taken care to design a nice declarative API for your library. Well done! However, if all of your documentation is written as if the user understands JavaScript, few will be able to use it. I remember seeing a cool library for toggling the display of elements based on the URL, via HTML attributes on the elements to be toggled. However, its nice HTML API could not be used by the people it targeted because the entire documentation was littered with JavaScript references. The very first example started with, “This is equivalent to location.href.match(/foo/).” What chance does a non-programmer have to understand this?

Also, remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.

Of course, you should document the JavaScript parts of your API as well. You could do that in an “Advanced usage” section. However, if you start your documentation with references to JavaScript objects and functions or software engineering concepts, then you’re essentially telling non-programmers that this library is not for them, thereby excluding a large portion of your potential users. Sadly, most documentation for libraries with HTML APIs suffers from these issues, because HTML APIs are often seen as a shortcut for programmers, not as a way for non-programmers to use these libraries. Hopefully, this will change in the future.

What About Web Components? Link

In the near future, the Web Components quartet of specifications will revolutionize HTML APIs. The <template> element will enable authors to provide scripts with partial inert markup. Custom elements will enable much more elegant init markup that resembles native HTML. HTML imports will enable authors to include just one file, instead of three style sheets, five scripts and ten templates (if Mozilla gets its act together and stops thinking that ES6 modules are a competing technology²³). The Shadow DOM will enable your library to have complex DOM structures that are properly encapsulated and that do not interfere with the user’s own markup.

However, <template> aside, browser support for the other three is currently limited²⁴. So, they require large polyfills, which makes them less attractive for library use. However, it’s something to keep on your radar for the near future.

MarkApp: A List Of Libraries With HTML APIs Link

If you’ve followed the advice in this article, then congratulations on making the web a better, more inclusive space to be creative in! I try to maintain a list of all libraries that have HTML APIs on MarkApp²⁵. Send a pull request and add yours, too!

(vf, il, al)

Footnotes Link

1. 1 https://en.wikipedia.org/wiki/Curse_of_knowledge
2. 2 https://twitter.com/LeaVerou/status/690583334414635009
3. 3 https://twitter.com/LeaVerou/status/690583334414635009
4. 4 https://twitter.com/LeaVerou/status/690583334414635009
5. 5 https://jqueryui.com/autocomplete/
6. 6 https://www.w3.org/TR/html5/forms.html#the-datalist-element
7. 7 https://en.wikipedia.org/wiki/Application_programming_interface
8. 8 https://www.w3.org/TR/custom-elements/
9. 9 https://dom.spec.whatwg.org/#shadow-trees
10. 10 http://leaverou.github.io/awesomplete
11. 11 http://prismjs.com/
12. 12 https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element
13. 13 https://leaverou.github.io/stretchy
14. 14 https://github.com/whatwg/html/issues/2271
15. 15 http://leaverou.github.io/awesomplete/#customization
16. 16 http://www.html5pattern.com/
17. 17 http://prismjs.com/
18. 18 https://www.w3.org/TR/html51/textlevel-semantics.html#the-code-element
19. 19 https://www.w3.org/TR/css-variables/
20. 20 http://caniuse.com/#feat=css-variables
21. 21 http://www.2ality.com/2014/05/current-script.html
22. 22 http://caniuse.com/#feat=document-currentscript
23. 23 https://hacks.mozilla.org/2014/12/mozilla-and-web-components
24. 24 http://caniuse.com/#search=web%20components
25. 25 http://markapp.io/

↑ Back to topTweet itShare on Facebook

The virtual realm is uncharted territory for many designers. In the last few years, we’ve witnessed an explosion in virtual reality (VR) hardware and applications. VR experiences range from the mundane to the wondrous, their complexity and utility varying greatly.

Taking your first steps into VR as a UX or UI designer can be daunting. We know because we’ve been there. But fear not! In this article, we’ll share a process for designing VR apps that we hope you’ll use to start designing for VR yourself. You don’t need to be an expert in VR; you just need to be willing to apply your skills to a new domain. Ultimately, as a community working together, we can accelerate VR to reach its full potential faster.

Further Reading on SmashingMag: Link

• Developing For Virtual Reality: What We Learned¹
• Gamification And UX: Where Users Win Or Lose²
• True Lies Of Optimistic User Interfaces³
• Designing Card-Based User Interfaces⁴

What Kinds Of VR Apps Are There? Link

Generally speaking from a designer’s perspective, VR applications are made up of two types of components: environments and interfaces.

You can think of an environment as the world that you enter when you put on a VR headset — the virtual planet you find yourself on, or the view from the rollercoaster⁵ that you’re riding.

An interface is the set of elements that users interact with to navigate an environment and control their experience. All VR apps can be positioned along two axes according to the complexity of these two components.

⁶

In the top-left quadrant are things like simulators, such as the rollercoaster experience linked to above. These have a fully formed environment but no interface at all. You’re simply locked in for the ride.

⁸

In the opposite quadrant are apps that have a developed interface but little or no environment. Samsung’s Gear VR home screen is a good example.

¹⁰

Designing virtual environments such as places and landscapes requires proficiency with 3D modelling tools, putting these elements out of reach for many designers. However, there’s a huge opportunity for UX and UI designers to apply their skills to designing user interfaces for virtual reality (or VR UIs, for short).

The first full VR UI design we did was an app for The Economist, created in collaboration with VR production studio Visualise¹². We did the design, while Visualise created the content and developed the app.

¹³

We’ll use this as a working example throughout the next section, in which we’ll lay out an approach to designing VR apps, before getting into the nitty-gritty of designing interfaces for VR. You can download the Economist app for Gear VR¹⁵ from the Oculus website.

A Process For VR UI Design Link

Whereas most designers have figured out their workflow for designing mobile apps, processes for designing VR interfaces are yet to be defined. When the first VR app design project came through our door, the logical first step was for us to devise a process.

Traditional Workflows, New Territory Link

When we first played with Gear VR by Samsung, we noticed similarities to traditional mobile apps. Interface-based VR apps work according to the same basic dynamic as traditional apps: Users interact with an interface that helps them navigate pages. We’re simplifying here, but just keep this in mind for now.

Given the similarity to traditional apps, the tried-and-tested mobile app workflows that designers have spent years refining won’t go to waste and can be used to craft VR UIs. You’re closer to designing VR apps than you think!

Before describing how to design VR interfaces, let’s step back and run through the process for designing a traditional mobile app.

1. Wireframes Link

First, we’ll go through rapid iterations, defining the interactions and general layout.

¹⁶

2. Visual Design Link

At this stage, the features and interactions have been approved. Brand guidelines are now applied to the wireframes, and a beautiful interface is crafted.

¹⁸

3. Blueprint Link

Here, we’ll organize screens into flows, drawing links between screens and describing the interactions for each screen. We call this the app’s blueprint, and it will be used as the main reference for developers working on the project.

²⁰

Now, how can we apply this workflow to virtual reality?

Set Up Link

Canvas Size Link

The simplest problems can be the most challenging. Faced with a 360-degree canvas, one might find it difficult to know where to begin. It turns out that UX and UI designers only need to focus on a certain portion of the total space.

We spent weeks trying to figure out what canvas size would make sense for VR. When you work on a mobile app, the canvas size is determined by the device’s size: 1334 × 750 pixels for the iPhone 6 and roughly 1280 × 720 pixels for Android.

To apply this mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.

Below is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.

²²

The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600 × 1800.

²⁴

Working with such a big size can be a challenge. But because we’re primarily interested in the interface aspect of VR apps, we can concentrate on a segment of this canvas.

Building on Mike Alger’s early research²⁶ on comfortable viewing areas, we can isolate a portion where it makes sense to present the interface.

The area of interest represents one ninth of the 360-degree environment. It’s positioned right at the centre of the equirectangular image and is 1200 × 600 pixels in size.

²⁷

Let’s sum up:

• “360 View“: 3600 × 1800 pixels
• “UI View“: 1200 × 600 pixels

²⁹

Testing Link

The reason for using two canvases for a single screen is testing. The “UI View” canvas helps to keep our focus on the interface we’re crafting and makes it easier to design flows.

Meanwhile, the “360 View” is used to preview the interface in a VR environment. To get a real sense of proportions, testing the interface with a VR headset is necessary.

³¹

Tools Link

Before we get started with the walkthrough, here are the tools we’ll need:

• Sketch³²
  We’ll use Sketch to design our interfaces and user flows. If you don’t have it, you can download a trial version. Sketch is our preferred interface design software, but if you’re more comfortable using Photoshop or anything else, that would work, too.
• GoPro VR Player³³
  GoPro VR Player is a 360-degree content viewer. It’s provided by GoPro and is free. We’ll use it to preview our designs and test them in context.
• Oculus Rift³⁴
  Hooking Oculus Rift into the GoPro VR Player will enable us to test the design in context.

A Process For VR Interface Design Link

In this section, we’ll run through a short tutorial on how to design a VR interface. We’ll design a simple one together, which should take five minutes tops.

³⁵

Download the assets pack³⁶, which contains presized UI elements and the background image. If you want to use your own assets, go for it; it won’t be a problem.

1. Set Up “360 View” Link

First things first. Let’s create the canvas that will represent the 360-degree view. Open a new document in Sketch, and create an artboard: 3600 × 1800 pixels.

Import the file named background.jpg, and place it in the middle of the canvas. If you’re using your own equirectangular background, make sure its proportions are 2:1, and resize it to 3600 × 1800 pixels.

³⁷

2. Set Up Artboard Link

As mentioned above, the “UI View” is a cropped version of the “360 View” and focuses on the VR interface only.

Create a new artboard next to the previous one: 1200 × 600 pixels. Then, copy the background that we just added to our “360 View,” and place it in the middle of our new artboard. Don’t resize it! We want to keep a cropped version of the background here.

³⁹

3. Design the Interface Link

We’re going to design our interface on the “UI View” canvas. We’ll keep things simple for the sake of this exercise and add a row of tiles. If you’re feeling lazy, just grab the file named tile.png in the assets pack and drag it into the middle of the UI view.

Duplicate it, and create a row of three tiles.

Grab kickpush-logo.png from the assets pack, and place it above the tiles.

⁴¹

Looking pretty good, eh?

4. Merge Artboards and Export Link

Now for the fun stuff. Make sure the “UI View” artboard is above the “360 View” artboard in the layers list on the left.

Drag the “UI View” artboard to the middle of the “360 View” artboard. Export the “360 View” artboard as a PNG; the “UI View” will be on top of it.

⁴³

5. Test It in VR Link

Open the GoPro VR Player and drag the “360 View” PNG that you just exported into the window. Drag the image with your mouse to preview your 360-degree environment.

We’re done! Pretty simple when you know how, right?

If you have an Oculus Rift set up on your machine, then the GoPro VR Player should detect it and allow you to preview the image using your VR device. Depending on your configuration, you might have to mess around with the display settings in MacOS.

⁴⁵

Technical Considerations Link

Low Resolution Link

The resolution of the VR headset is pretty bad. Well, that’s not entirely true: It’s equivalent to your phone’s resolution. However, considering the device is 5 centimeters from your eyes, the display doesn’t look crisp.

To get a crisp VR experience, we would need an 8K display per eye. That’s a 15,360 × 7680-pixel display. We’re pretty far off from that, but we’ll get there eventually.

Text Readability Link

Because of the display’s resolution, all of your beautifully crisp UI elements will look pixelated. This means, first, that text will be difficult to read and, secondly, that there will be a high level of aliasing on straight lines. Try to avoid using big text blocks and highly detailed UI elements.

Finishing Touches Link

Blueprint Link

Remember the blueprint from our mobile app design process? We’ve adapted this practice to VR interfaces. Using our UI views, we map and organize our flows into a comprehensible blueprint, ideal for developers to understand the overall architecture of the app we’ve designed.

⁴⁷

Motion Design Link

Designing a beautiful UI is one thing, but showing how it’s supposed to animate is a different story. Once again, we’ve decided to approach it with a two-dimensional perspective.

Using our Sketch designs, we animate the interface with Adobe After Effects⁴⁹ and Principle⁵⁰. While the outcome is not a 3D experience, it’s used as a guideline for the development team and to help our clients understand our vision at an early stage of the process.

⁵¹

We know what you’re thinking, though: “That’s cool, but VR apps can get way more complicated.” Yes, they can. The question is, to what extent can we apply our current UX and UI practices to this new medium?

How Far Can VR UIs Go? Link

Inter-Your-Faces Link

Some VR experiences rely so heavily on the virtual environment that a traditional interface that sits on top might not be the optimal way for the user to control the app. In this case, you might want users to interact directly with the environment itself.

Imagine that you’re making an app for a luxury travel agent. You’d want to transport the user to potential holiday destinations in the most vivid way possible. So, you invite the user to put on the headset and begin the experience in your swanky Chelsea office.

To transition from the office to some far away place, the user needs to choose where they want to go. They could pick up a travel magazine and flick through it until they land on an appealing page. Or there could be a collection of interesting objects on your desk that whisk the user to different locations depending on which one they pick up.

This is definitely cool, but there are some drawbacks. To get the full effect, you’d need a more advanced VR headset with handheld controllers. Plus, an app like this takes quite a bit more effort to develop than a set of well-presented options organized like in a traditional app interface.

Viva la Revolución! Link

The reality is that these immersive experiences are not commercially viable for most companies. Unless you’ve got virtually unlimited resources, like Valve and Google, creating an experience like the one described above is probably too costly, too risky and too time-consuming.

This kind of experience is brilliant for showing off that you’re at the cutting edge of media and technology, but not so great for taking your product to market through a new medium. Accessibility is important.

Usually, when a new format emerges, it’s pushed to the limit by early adopters: the creators and innovators of this world. In time, and with enough learning and investment, it becomes accessible to a wider range of potential users.

As VR headsets become more commonplace, companies will start to spot opportunities to integrate VR into the ways that they engage with customers.

From our perspective, VR apps with intuitive UIs — that is, UIs closer to what people are already accustomed to with their wearables, phones, tablets and computers — are what will make VR an affordable and worthwhile investment for the majority of companies that pursue it.

Time to Board the Rocketship Link

We hope we’ve made the VR space a bit less scary with this article and inspired you to start designing for VR yourself.

They say that if you want to travel fast, go alone. But if you want to travel far, travel together. We want to travel far. At Kickpush, we think that every company will have a VR app someday, just like every company now has a mobile website (or should have — it’s 2017, dang it!).

So, we’re building a rocketship, a joint effort by designers around the globe to boldly go where no designer has gone before. The sooner that producing VR apps make sense for companies, the sooner the whole ecosystem will blow up.

Our next challenges as digital product designers are more complex applications and handling other types of input through controllers. To begin to tackle this we’ll need robust prototyping tools that let us create and test designs quickly and easily. We’ll be writing a follow up article that looks at some of the early attempts to do this, and at some of the new tools in development.

Stay tuned!

Useful Links Link

• The UX of VR⁵², Max Glenister
  
  “A curated list of resources to help you on your journey into the user experience of virtual reality.”
• Mike Alger⁵³ (research vlog), YouTube channel
• AR & VR Weekly⁵⁴ (newsletter), Josh Anon
  
  “A curated list of AR/VR/MR news and interesting pieces sent about once a week.”
• Kickpush blog⁵⁵
• “Virtual Reality Glossary⁵⁶,” Freefly VR

(km, il, al)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/09/developing-for-virtual-reality-what-we-learned/
2. 2 https://www.smashingmagazine.com/2012/04/gamification-ux-users-win-lose/
3. 3 https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/
4. 4 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
5. 5 https://www.youtube.com/watch?v=l3V8zeSljUU
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/12/16-cross-graph-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/16-cross-graph-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/12/18-samsung-store-large-opt.jpg
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/18-samsung-store-large-opt.jpg
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/12/17-oculus-store-large-opt.jpg
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/17-oculus-store-large-opt.jpg
12. 12 http://visualise.com/
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/vr-working-example-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/02/vr-working-example-large-opt.png
15. 15 https://www.oculus.com/experiences/gear-vr/1020752464669083/
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/12/1-wireframes-large-opt.jpg
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/1-wireframes-large-opt.jpg
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-visual-design-large-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-visual-design-large-opt.jpg
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/3-blueprint-large-opt.jpg
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/3-blueprint-large-opt.jpg
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/12/4-equirectangular-image-large-opt.jpg
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/12/4-equirectangular-image-large-opt.jpg
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/12/5-equirectangular-image-dimensions-large-opt.jpg
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/12/5-equirectangular-image-dimensions-large-opt.jpg
26. 26 https://www.youtube.com/watch?v=iR4iRyLoJlg
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/12/7-dual-canvas2-large-opt.jpg
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/12/7-dual-canvas2-large-opt.jpg
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/6-dual-canvas-large-opt.jpg
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/12/6-dual-canvas-large-opt.jpg
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/02/using-avocode.gif
32. 32 https://www.sketchapp.com/
33. 33 http://www.kolor.com/kolor-eyes/
34. 34 https://www3.oculus.com/en-us/rift/
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/02/vr-result-preview.gif
36. 36 https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/12/9-create360-large-opt.jpg
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/12/9-create360-large-opt.jpg
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/12/10-create-ui-large-opt.jpg
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/12/10-create-ui-large-opt.jpg
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/12/11-design-interface-large-opt.jpg
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/12/11-design-interface-large-opt.jpg
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/12/12-drag-ui-large-opt.jpg
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/12/12-drag-ui-large-opt.jpg
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/12/13-oculus-large-opt.jpg
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/12/13-oculus-large-opt.jpg
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/12/14-vr-blueprint-large-opt.jpg
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/12/14-vr-blueprint-large-opt.jpg
49. 49 http://www.adobe.com/ca/products/aftereffects.html
50. 50 http://principleformac.com
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/02/first-vr-ui.gif
52. 52 http://www.uxofvr.com/
53. 53 https://www.youtube.com/channel/UCdnvAn8YIcUs0XfUNiHKz0A
54. 54 http://tinyletter.com/vrweekly
55. 55 http://blog.kickpush.co
56. 56 https://www.freeflyvr.com/virtual-reality-glossary/

↑ Back to topTweet itShare on Facebook

With great power comes great responsibility. This week I found some resources that got me thinking: Service Workers that download 16MB of data on the user’s first visit? A Bluetooth API in the browser? Private browser windows that aren’t so private at all?

We have a lot of methods and strategies to fix these kinds of things. We can give the browser smarter hints, put security headers and HTTPS in place, serve web fonts locally, and build safer network protocols. The responsibility is in our hands.

News Link

• Joseph Medley tells us about API deprecations and removals in the upcoming Chrome 57¹. <keygen> will be removed, for example, as well as the prefix in some webkit-prefixed APIs.
• Chrome 56 is here² with support for the Web Bluetooth API and the WebGL 2.0 API. The new version also finally supports position: sticky (the only browser still lacking support for it now is MS Edge).
• Safari 10.1 will be out soon³ with a lot of new features: fetch(), Custom Elements, CSS Grid Layout, Reduced Motion Media Query, and ES6 native modules are notable ones.
• Thanks to browser vendors pushing it aggressively, HTTPS adoption has now reached the tipping point⁴. Good to see, especially since man-in-the-middle traffic modifications increased a lot on non-encrypted traffic in the last few months. Sadly, these interceptions are not executed by federal authorities or hackers but by companies like Comcast, Norwegian Airlines, hotel WiFi network companies and the like.

⁵

Tools & Workflows Link

• Addy Osmani wrote the Webpack plugin preload-webpack-plugin⁸ for wiring up <link rel='preload'> (and prefetch) automatically.

Security Link

• Max Veytsman summarized everything you need to know about HTTP security headers⁹. An all-embracing but concise guide to security headers and when and how to use them.

Privacy Link

• DuckDuckGo published the results of a study they conducted on the question if private browsing really is private¹⁰. Interestingly, most people have no idea about what the private mode in browsers exactly does and 84% of Americans would consider trying another major web browser if it offered more features to help protect their privacy. The full paper¹¹ gives interesting insights into how people actually use search engines and how they try to protect their privacy.

¹²

Web Performance Link

• Not too long ago, I mentioned an article about QUIC¹⁴, Google’s protocol that uses UDP instead of TCP to make transfers to a client even faster than HTTP/2. Now Facebook shares details about their even faster Zero protocol¹⁵ that builds on top of QUIC while still being compatible with TCP. I like that there’s now an alternative to Google’s approach and that people think about innovating the core of the Internet, the network itself, again.
• Nicolas Hoizey analyzes why it’s not a good idea to just hook up Service Workers¹⁶ and save all resources offline. Given the fact that a lot of users might never come back or that they simply won’t read through all the pages of a website, downloading megabytes of data on first load might be a very bad practice — especially when we keep data plan costs in mind. Looking at these numbers, the 3MB of an average web page are nearly negligible if a Service Worker loads 16MB of useless data on initial page load without further ado.

Accessibility Link

• axe-cli¹⁷ brings the accessibility testing tool axe-core to the command line. It does require Webdriver but runs smoothly nevertheless. So integrating it into your local workflow or even on a CI server shouldn’t be a problem.

JavaScript Link

• Kyle Mathews published typefaces¹⁸, a self-host font-face loading package that makes it simple to host web fonts on your own. He also explains why self-hosting web fonts is faster and why it even works offline¹⁹.
• Paul Kinlan explains how you can use the Shape Detection API to detect text in an image on the web in real-time²⁰. An experiment that would be great for web applications to ease the user experience. You could, for example, provide a very easy sign-up form and read the name and address from a business card using this API and a device’s camera.

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://developers.google.com/web/updates/2017/02/chrome-57-deprecations
2. 2 https://developers.google.com/web/updates/2017/01/nic56
3. 3 https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html
4. 4 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
5. 5 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
6. 6 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
7. 7 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
8. 8 https://github.com/googlechrome/preload-webpack-plugin
9. 9 https://blog.appcanary.com/2017/http-security-headers.html
10. 10 https://spreadprivacy.com/private-browsing-9276d6d16ea4
11. 11 https://duckduckgo.com/download/Private_Browsing.pdf
12. 12 https://spreadprivacy.com/private-browsing-9276d6d16ea4
13. 13 https://spreadprivacy.com/private-browsing-9276d6d16ea4
14. 14 https://www.smashingmagazine.com/2016/08/web-development-reading-list-148/#web-performance
15. 15 https://code.facebook.com/posts/608854979307125/building-zero-protocol-for-fast-secure-mobile-connections/
16. 16 https://nicolas-hoizey.com/2017/01/how-much-data-should-my-service-worker-put-upfront-in-the-offline-cache.html
17. 17 https://www.npmjs.com/package/axe-cli/
18. 18 https://github.com/KyleAMathews/typefaces
19. 19 https://github.com/KyleAMathews/typefaces
20. 20 https://paul.kinlan.me/detecting-text-in-an-image/
21. 21 https://wdrl.info/donate
22. 22 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

If it’s still snowy where you live, then you’re probably tired of the cold weather by now. Winter may be in full swing but that shouldn’t stop us from hunting for inspiration. While the gray days always seem to find a way to make us more and more anxious for springtime to finally arrive, it’s also a time we can use to reflect on our work and perhaps better decide what it is that we hope to improve or change in the next months.

Believe it or not, some of these photographs and illustrations are the starting point of a design that I create. They are the spark that sets the process of creation in motion. It doesn’t take much; it can be any part of an element that catches my eye, be it a particular color, style, texture, or anything really. You’ll find a bit of everything in today’s selection: Architecture, colors, some of the best photographs from 2016, and more. I hope you’ll like my playground! 😉

Drowning In Thoughts Link

I’m admiring the textures and colors here. Wonderful to get some new ideas for backgrounds.

¹

Rooftop Link

I really like the style of Bodil Jane. This piece of beautiful artwork looks almost like a collage of separate items that is glued on a canvas.

³

Draw Everyday Link

Some good advice that I can totally get behind. Cleverly translated to something else you do everyday.

⁵

Shop Magazine — Karolis Link

The view angle is so well done in this illustration, as well as the shadow and light effects. A few other gems in here, such as the transparency of the bag on the desk and the wooden floor under the desk.

⁷

Vita Sackville-West Link

Beautiful book cover illustration. How deep she is in her thoughts is just so inspiring.

⁹

Fire In The Sky Link

A wonderful advertisement for planet Earth. Look at that fire in the sky! Purdy.

¹¹

The Golden Bicycle Touch Link

One of my own pictures shot during a morning bicycle ride. The best kind! Those colors are just wow!

¹³

Twins In The Forest Link

Creating hair is among the most difficult things to achieve. It takes a long time to get it right. That’s why I always study the ones who master it. The hair is simply gorgeous in this illustration, especially those braids.

¹⁵

The Best Photos Of The Year Link

Some fantastic photographs in this Strava collection of 2016. Hard to pick just one, but after much deliberation I chose this one. Isn’t it marvelous?

¹⁷

The New York Times Gift Guide Link

The first thing I noticed is the wonderful color palette. I’m also admiring all the different buildings created with very little elements. Imagine how it would look like if it was brought to life. Well, look here¹⁹!

²⁰

Sitting In Green Link

Perfect scenery for some daydreaming. The texture used in this illustration is awe-inspiring.

²²

The Law Of Attraction Link

Not your typical color palette. They really work quite well together. Lovely shapes, too!

²⁴

Modelle / BBDO Moscow Link

Using negative space in illustration is one of my favorite things. I’ve personally never done it, but would love to one day. This is one of those nice examples to look up to.

²⁶

Jenna Arts Link

I love the style in which the illustrator doesn’t draw perfect characters. It’s an illustration style that embraces the awkward. Hard to pull off right.

²⁸

Tuff Shed Link

First thing I checked out was the pattern on the guy’s shirt. I also love the use of sharp angles for the arms, legs and other elements in this scene.

³⁰

Tuff Shed II Link

Just like the illustration above, this one also features the sharp angles, but also some interesting textures. Look at how the shadows and highlights are applied. Truly amazing!

³²

Space: Planets, Stars, Rockets Link

The choice of colors and shapes are well considered here. Simple, yet effective.

³⁴

Lofoten, Norway Link

Such an incredible spot! Beautifully captured with some gorgeous light.

³⁶

Jun Takahashi | Square Up Link

Speaking of the use of sharp angles and shapes, Tokyo-based illustrator Jun Takahashi uses this technique to create geometric sports characters. All this with a muted, contemporary palette of colors. His series is called Square Modern.³⁸

³⁹

Merkur Magazine Link

Some fine details in this cover such as the dotted stripes on the pants of the male character. Another is the tree bast structure.

⁴¹

Merkur Magazine II Link

Very appropriate since we are still in the middle of winter. This snow landscape is just beautifully executed. Works so well with this pinkish mood/sky.

⁴³

Mount Fuji Link

Splendid shot! Stunning light, colors and lovely composition.

⁴⁵

Light Of A Spring Sunset Link

Beautiful smooth water and great sunlight colors.

⁴⁷

Sports Link

What makes this interesting is the way this illustration is compiled: the mix of lines and fills, in combination with a limited color palette. Clever.

⁴⁹

5 Seasons Link

So delicate and beautiful! Colors, subtle use of gradients, everything is inspiring.

⁵¹

5 Seasons II Link

I like the atmosphere in this fall like scenery. Many great details such as the way the collar and sleeve patterns are created. It creates a lovely accent.

⁵³

IBM Data Vis Guidelines Link

This is gorgeous! Loving the colors for this first set of Data Visualization Guidelines from IBM. Great composition and geometry.

⁵⁵

Time Travel Destinations Posters Link

If time travel was possible it would look like this. Jurassic Age is part of the Time Travel Destinations Posters. There are a few more, and some are animated too. Go have a look⁵⁷.

⁵⁸

City Streets Link

Really diggin’ the stylized perspective. It creates a nice composition.

⁶⁰

Tin Star BBQ Link

Great character in this clever logo illustration. That type is great – it really fits the tone of the logo.

⁶²

NYU Travel Link

So many details in this colorful illustration.

⁶⁴

Business City Link

Admiring the simplicity in this illustration.

⁶⁶

Colorful And Minimalist Miami Rescue Towers Link

If you love minimalistic architecture and colors like me, you’ll appreciate this work by Paolo Pettigiani. The new series is called “SHAPEGUARD”.

⁶⁸

Colorful And Minimalist Miami Rescue Towers II Link

A second one from the new series called “SHAPEGUARD” by Paolo Pettigiani.

⁷⁰

Bitch Magazine Link

Wonderful duotones at work, especially to create the feeling of the movement of the water. Those swimsuits are not too shabby as well.

⁷²

Red Dwarf Sunset Link

For the sci-fi fans among us. A hi-tech village on a transparent hill, enjoying a dramatic red sunset of a class M red dwarf sun. Those gradients and the glowy sun is so perfect!

⁷⁴

Sunset Curving Up Link

Talking about being in the right place at the right time. Sunset curving up a wave!

⁷⁶

The Martian II Link

One more for the sci-fi fans. A special color palette and a great illustration style.

⁷⁸

We The People Link

Shepard Fairey, whose iconic posters supporting Barack Obama’s 2008 election and won him Design of the Year, has a new offering. The American graphic designer has applied the same posterized style and palette of red, beige and blue of the Hope imagery to three new designs, created for a nonprofit organization called ‘the Amplifier Foundation’.

⁸⁰

Feel Good Swing Link

Loving this muted color palette and the organic style.

⁸²

Lindy Hop Link

If you love your classics you’ll recognize the Lindy Hop in this wonderful illustration.

⁸⁴

Sky-High Images Of Los Angeles At Dusk Link

Creative Director and photographer Dylan Schwartz‘s point-of-view is high above the cities he photographs, capturing the bridges, sports complexes, and tips of high rises from the cockpit of a helicopter.

⁸⁶

Rolling Images Of San Francisco’s Fog Link

I’ve featured an image of San Francisco’s fog here before. The waviness is almost surreal.

⁸⁸

Charles Manson Link

When Charles Manson and The Beach Boys‘ Dennis Wilson meet. So beautifully stylized!

⁹⁰

Sweater Friends Link

Such a great concept to have a panoramic scenery on the sweaters.

⁹²

Rough Day At Work Link

How does one look like after a rough day at work? I think this illustration pretty much nails it.

⁹⁴

Hong Kong Link

Great view on the hustle of Hong Kong. The flow of the water is greatly executed. Lovely color palette, perfectly executed.

⁹⁶

Magazine Italiana Link

Riccardo is a regular guest here. Love how he works with flat colors and sharp-angled shapes.

⁹⁸

Magazine Italiana II Link

One more of Riccardo’s recent work. Brilliant as always! I also love the retro touch in all of them.

¹⁰⁰

Multicolored Architectural Photography In Spain Link

The Swedish photographer Jeanette Hägglund seems to have found a nice playground in the city of La Manzanera, near Alicante. She plays with the architecture, colors, and light and shadows. Be sure to see the rest of the series.

¹⁰²

(yk, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Drowning-in-thoughts-preview-opt.png
2. 2 https://www.behance.net/gallery/29412079/Illustrations-of-2015
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/02/rooftop-preview-opt.jpg
4. 4 http://cargocollective.com/bodiljane/Amara-Living-Property
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Draw-Everyday-preview-opt.jpg
6. 6 http://weandthecolor.com/steffen-kraft-illustrations/81944
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Shop-Magazine-Karolis-preview-opt.jpg
8. 8 https://www.behance.net/gallery/31179379/Karolis-Strautniekas-SHOP-Magazine
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Vita-Sackville-West-preview-opt.jpg
10. 10 https://www.behance.net/gallery/35685589/Various-illustrations-Winter-20152016
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/02/danrubin-2016-Dec-29-preview-opt.jpg
12. 12 https://twitter.com/danrubin/status/814404688028254208
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/vpieters_2016-Dec-27-preview-opt.jpg
14. 14 https://twitter.com/vpieters/status/813794757642244096
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Twins-in-the-Forest-preview-opt.jpg
16. 16 https://www.behance.net/gallery/43997885/twins-in-the-forest
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Best-Photos-of-the-Year-preview-opt.jpg
18. 18 http://blog.strava.com/galleries/best-of-photos-2016/
19. 19 https://vimeo.com/196598514
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/02/New-York-Times-gift-guide-preview-opt.jpg
21. 21 https://www.behance.net/gallery/46596251/The-New-York-Times-gift-guide
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Sitting-in-Green-preview-opt.jpg
23. 23 https://www.behance.net/gallery/46770419/Green
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Law-of-Attraction-preview-opt.jpg
25. 25 https://dribbble.com/shots/1438617-The-Law-of-Attraction
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Modelle-BBDO-Moscow-preview-opt.jpg
27. 27 http://www.cajsaholgersson.com/BBDO-Moscow
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Jenna-Arts-preview-opt.jpg
29. 29 https://eyeondesign.aiga.org/i-dont-draw-perfect-characters-why-this-dutch-illustrator-prefers-clumsy-limbs/
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/02/tuff-shed-preview-opt.jpg
31. 31 https://www.behance.net/gallery/29345765/Tuff-Shed
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/02/tuff-shed-II-preview-opt.jpg
33. 33 https://www.behance.net/gallery/29345765/Tuff-Shed
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Space-planets-stars-rockets-preview-opt.jpg
35. 35 https://www.behance.net/gallery/26627287/Space-planets-stars-rockets-Vector-flat-set
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Lofoten-Norway-preview-opt.jpg
37. 37 https://500px.com/photo/49968096/lofoten-by-fredrik-meling
38. 38 http://juntakahashi.jp/category/square-modern/
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Square-Modern-preview-opt.jpg
40. 40 http://juntakahashi.jp/2016/10/06/tarzan-no-705-lsdランの底力/
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Merkur-Magazine-preview-opt.jpg
42. 42 http://orlincultureshop.com/luxembourg/
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Merkur-Magazine-II-big.jpg
44. 44 http://orlincultureshop.com/luxembourg/
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Mount-Fuji-preview-opt.jpg
46. 46 https://500px.com/photo/191805707/mount-fuji-by-takashi-yasui
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Light-of-a-spring-sunset-preview-opt.jpg
48. 48 https://500px.com/photo/191738935/light-of-a-spring-sunset-by-aleksei-malygin
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/02/sports-preview-opt.jpg
50. 50 https://www.behance.net/gallery/28025671/Sports
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-Seasons-preview-opt.jpg
52. 52 https://www.behance.net/gallery/46815917/5-MUA-ARTBOOK
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-Seasons-II-preview-opt.jpg
54. 54 https://www.behance.net/gallery/46815917/5-MUA-ARTBOOK
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/02/data-vis-ibm-preview-opt.jpg
56. 56 https://dribbble.com/shots/3226536-IBM-Data-Vis-Guidelines
57. 57 https://travelblog.expedia.ca/time-travel-destinations-posters/
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Jurassic-Age-preview-opt.jpg
59. 59 https://travelblog.expedia.ca/time-travel-destinations-posters/
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/02/City-Streets-preview-opt.jpg
61. 61 https://dribbble.com/shots/3201715-City-Streets
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Tin-Star-BBQ-preview-opt.jpg
63. 63 https://dribbble.com/shots/3203522-Tin-Star-BBQ
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/02/NYU-Travel-preview-opt.jpg
65. 65 https://dribbble.com/shots/3230795-NYU-Travel
66. 66 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Business-city-preview-opt.jpg
67. 67 https://dribbble.com/shots/3231227-Business-city
68. 68 https://www.smashingmagazine.com/wp-content/uploads/2017/02/LAtowersmonimalist-preview-opt.jpg
69. 69 http://www.paolopettigiani.com/shapeguard
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2017/02/LAtowersmonimalist-II-preview-opt.jpg
71. 71 http://www.paolopettigiani.com/shapeguard
72. 72 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Bitch-Magazine-preview-opt.jpg
73. 73 http://www.elenikalorkoti.com/Bitch-Magazine
74. 74 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Red-Dwarf-sunset-preview-opt.jpg
75. 75 https://dribbble.com/shots/3200033-Red-Dwarf-sunset
76. 76 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Sunset-curving-up-preview-opt.jpg
77. 77 https://twitter.com/historylvrsclub/status/817154690177757186
78. 78 https://www.smashingmagazine.com/wp-content/uploads/2017/02/The-Martian-II-preview-opt.jpg
79. 79 http://www.fromupnorth.com/design/96875/oliver-barretts-poster-for-the-martian/
80. 80 https://www.smashingmagazine.com/wp-content/uploads/2017/02/We-The-People-preview-opt.jpg
81. 81 http://designyoutrust.com/2017/01/artist-shepard-fairey-adapts-obamas-hope-poster-for-trump-inauguration/
82. 82 https://www.smashingmagazine.com/wp-content/uploads/2017/02/feel-good-swing-preview-opt.jpg
83. 83 https://micheletenaglia.com/feel-good-swing/
84. 84 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Lindy-Hop-preview-opt.jpg
85. 85 https://micheletenaglia.com/feel-good-swing/
86. 86 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Sky-High-Images-LA-preview-opt.jpg
87. 87 http://www.thisiscolossal.com/2017/01/sky-high-images-of-los-angeles/
88. 88 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Rolling-Images-of-SF-preview-opt.jpg
89. 89 http://www.thisiscolossal.com/2016/12/rolling-images-of-san-franciscos-fog-against-neon-skies-shot-by-nick-steinberg/
90. 90 https://www.smashingmagazine.com/wp-content/uploads/2017/02/charles-manson-preview-opt.jpg
91. 91 https://dribbble.com/shots/3238976-Charles-Manson
92. 92 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Sweater-Friends-preview-opt.jpg
93. 93 http://makethebigeye.tumblr.com/post/127633887795
94. 94 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Rough-Day-At-Work-preview-opt.jpg
95. 95 http://todayilovethis.tumblr.com/post/111189001566
96. 96 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Hong-Kong-preview-opt.jpg
97. 97 https://www.behance.net/gallery/46058159/Hong-Kong
98. 98 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Magazine-Italiana-preview-opt.jpg
99. 99 https://www.behance.net/gallery/47624585/Magazine-Italiana
100. 100 https://www.smashingmagazine.com/wp-content/uploads/2017/02/Magazine-Italiana-II-preview-opt.jpg
101. 101 https://www.behance.net/gallery/47624585/Magazine-Italiana
102. 102 https://www.smashingmagazine.com/wp-content/uploads/2017/02/architecturespain-preview-opt.jpg
103. 103 http://www.fubiz.net/en/2017/01/30/multicolored-architectural-photography-in-spain/

↑ Back to topTweet itShare on Facebook

In a recent sales meeting for a prospective healthcare client, our team at Mad*Pow found ourselves answering an all-too-familiar question. We had covered the fundamental approach of user-centered design, agreed on leading with research and strategy, and everything was going smoothly. Just as we were wrapping up, the head of their team suddenly asked, “Oh, you guys design mobile-first, right?”

Well, that’s a difficult question to answer.

While the concept of mobile-first began as a philosophy to help prioritize content and ensure positive, device-agnostic experiences, budgetary and scheduling constraints often result in mobile-first meaning mobile-only.

But according to the analytics data of our healthcare clients, the majority of their users are still on desktop. We want to provide a positive experience for those users and for users on mobile and tablet apps and for those using mobile browsers — and even for users having an in-person experience! It is not accurate to assume that mobile is the primary experience.

¹

We’ve come to the conclusion that mobile-first is not specific enough to user needs. Truly user-centered design needs to start with the journeys our users are taking and the flows they follow to complete their objectives. In other words, journey-driven design. Journey-driven design naturally emerges from a user-centered approach that factors in the who, the when and the how to reveal the truly complex set of user needs. Good design doesn’t force users to pick up the device that we designers want them to pick up; good design gives users the best of what a company has to offer on the device that the user wants to use at that point in their journey.

What’s Wrong With Mobile-First? Link

Early in the world of mobile, we (designers in general) essentially designed for desktops… desktops with small screens. UX designers were used to thinking about things like how their users would approach a website and what visual, linguistic and contextual clues they would need to complete their tasks, but we didn’t think about the screen’s size changing. In 1999, we merely worked with 800 pixels. Then, we expanded to 1024, then 1200. Designers rejoiced!

As mobile design improved, battery life lengthened and Wi-Fi became ubiquitous, we learned that users were likely to approach a website from their mobile screen. But all of the design considerations for desktop didn’t translate well.

⁴

The idea of mobile-first was a triumph for the user. In 2009, Luke Wroblewski introduced⁶ this best practice. Karen McGrane added to the conversation⁷ with her Content Strategy for Mobile in 2012. They found that designing with the constraints of small screens helps us to prioritize content, which leads to a better experience for the end user. In addition, the capabilities of mobile devices left more opportunities for engaging experiences.

Still, it focused on only one great experience. One variation focused on the concept of graceful degradation, which suggested that we design a perfect experience (typically for desktop), and then account for older browsers and less common devices by ensuring functionality, even if the design suffered. Similarly, we tried progressive enhancement, which suggested starting small (mobile), and then enhancing the design as the device or browser gets bigger. Neither accounted for a great design across the realm.

And, more importantly, no one intended mobile-first to mean mobile-only.

Now it’s 2017, and we assume that every project needs to be mobile-friendly; so, when budgets decrease, mobile-first does become mobile-only. After all, 34% of people⁸ use the Internet predominantly from their mobile phones, and as of April 2015, Google penalizes websites that aren’t usable on mobile. But the choice isn’t as simple as mobile or desktop. Many users switch devices mid-task⁹, making it even more vital that we focus our content and create consistency across the experiences. In healthcare, 50% of smartphone users download health apps¹⁰ — which also means that 50% do not yet.

In a recent report on mobile marketing statistics, Smart Insights’ founder Dave Chafey analyzed the reports¹¹ and concluded:

The reality is that while smartphone use is overwhelmingly popular for some activities such as social media, messaging and catching up with news and gossip, the majority of consumers in western markets also have desktop (and tablet) devices which they tend to use for more detailed review and purchasing.

We have to ask: Did a patient get their diagnosis via a phone call at home and then turn to their desktop, or were they at the doctor’s office searching on their mobile phone? Did that shoe shopper peek at their phone for a cheaper online deal, or did they go home and make the purchase on their tablet?

¹²

The divide between online and offline has dissolved as the Internet of Things¹⁵ expands, and our experiences are likely to cross between phone, laptop, tablet, TV, watch, refrigerator, car and even toilet¹⁶! Pixels and dimensions mean far less than responsive design, adaptive content and journey mapping. There is no obvious starting point for a journey, and no clear template to follow. In order to prioritize content as well as to design for screens beyond mobile, we need to focus on the journey as a holistic piece.

Uncovering The Journey Link

What makes journey-first design more effective than mobile-first is that we are looking at the process holistically. This means that even small budgets have the time and money to take into account design thinking for more screen sizes. In addition, journey-first provides context, a necessary element of today’s design, which was not a focus when mobile-first design began.

The first step in journey-driven design is to map the journey itself, with a focus on how someone accomplishes their goals, and the best person to ask is the end user. Most user-centered design projects already begin with a research phase. It’s an opportunity to hear from users or prospective users and to learn what their expectations are, where they have pain points, and what device or devices they will use as they navigate through the experience.

Based on the research, we create personas¹⁷, and then map out each persona’s ideal journey, including making note of every touchpoint along the way to the final objective. These are the times when the business and the persona communicate, whether via email, website, social media, store visit, phone call, mailing or other method. Those touchpoints will be what we can actually design, in order to shape the complete experience. In other words, we can’t necessarily control what a user does when they’re out for a walk, with their phone on silent, but we can control what they see when they receive an email from us, and that will affect the portions of their experience when we’re not connected.

For one of our healthcare clients, this became particularly clear when we considered how end users interact with insurance companies. Though the patient’s goal is to get their lab results, on the way to the doctor’s office, the patient might wonder what their copayment is. If they check the mobile website to log in, that’s a touchpoint for us. If they look for signs in the doctor’s office that list typical copayments, that’s another potential touchpoint. After the appointment, when the claim is filed, we have an opportunity to email the patient an update — another touchpoint.

¹⁸

All of these touchpoints come together in an ecosystem web²¹, which is one of our primary tools when we engage in journey-driven design. The ecosystem web will help us make connections between the areas of our website, the various other technologies involved in the Internet of Things, and the actions the user is taking. On the ecosystem web, we can also identify which device the persona is using at each digital touchpoint. We might know this information from user research, or we can gather it from analytics, which can get so granular as to tell us which pages on a website are most visited by which devices.

From Journey To Design Link

Knowing the touchpoints and designing an ecosystem map is all well and good, but there’s still the matter of designing an appropriate user interface and interactions to help the end user accomplish their goal(s). We still need to build out wireframes or mockups that can ultimately be developed into an app or website.

For some designers, creating an ecosystem map or shifting that into a journey map (whether current or idealized) is as far as journey-driven design goes, before shifting back to mobile-first. The consistency of viewing all designs in mobile-sized mockups is attractive, and stakeholders love the cohesive feel. But our job as designers is to sell them on the need for a variety of screens. We need to consider each set of interactions independently. If there is an ideal user journey that begins on mobile but after four screens switches to desktop, then we need to design four steps for mobile and then change to desktop. If another prospective user journey (maybe the power user’s journey) within the same app begins on a tablet, then we should begin with a tablet design. If still another begins on the watch, then that’s where we begin. We’re still prioritizing content, but we’re also accounting for the visual frame.

After designing each interaction, ask these key questions:

• Have I designed for the most critical device?
• What other devices might come into play here?
• What is the context for this interaction²²? Where will my user physically be?

Although the designs won’t have the cohesive feel of a stack of mobile screens, it will have the context of the user’s scenario and their rationale for particular actions. As an added benefit, this type of non-linear thinking will encourage new design approaches. Plus, front-end developers love getting a few screens for each screen size early on; it helps them to structure their development work.

For our healthcare client, we sketched out an ideal journey map on sticky notes, using one sticky note for each touchpoint, and different colors for each likely device. Once we understood the touchpoints along the journey, we were able to think in terms of interactions on screens. We designed every screen for tablet, as well as variations for the six screens most likely to be done on mobile and the four most likely to be done on a larger desktop monitor. We used mobile-first and responsive design best practices, resulting in screens that engage users across all devices.

²³

But best of all, we improve our work as storytellers by linking interactions back to the journey. Even the best, most user-focused designers can forget about the narrative when they begin to focus on individual interactions. The shift from one device to another will help recenter you, reminding you again and again of who the user is, where they are, why they’re doing what they’re doing and what their main focus is — particularly when their focus is not on your UI!

Adding In Content Link

For designers working with content, there’s still another benefit to journey-driven design. Content strategists tend to plan out screen content by identifying what the goal of a screen is, and then providing copy to accomplish that goal and to get across any related messages. In traditional UX design, different content strategists have different methods for determining the goal of any given screen. But with journey-drive design, the designer and strategist will identify the goal or action happening each step of the way early on.

The designer and content strategist should work together to consider the goals of each touchpoint through the journey. Rather than waiting to ultimately write copy in wireframes, the content strategist can help ascertain the goals during the mapping of the ecosystem, which gives the designer a leg up on designing something that will work hand in hand with the content.

In addition, content strategists need to consider what content will be static and what will be adaptive²⁶. When the designer designs different screens for different steps of the journey, they provide insight into how content will be perceived, whether the user will be distracted and what other clues to context the content strategist should consider.

In short, journey-driven design provides us with a big-picture approach that ensures fewer surprises and easier work the farther you go into the project. It keeps the whole team working together, all engaged in the creation of the ecosystem, so that decisions are shared early on, before designs are begun.

Evolving And Expanding Link

At its heart, journey-driven design is still just another flavor of user-centered design. Once the ecosystem is mapped and the journey identified, journey-driven design proceeds like any other UX project. Designs need to be created for other screen sizes and then checked for consistency across devices to account for edge cases. Usability testing, revising and iterating is as much a part of journey-driven design as any other.

Looking to get started with your own journey maps? Try out these steps:

1. Begin with user research.
   
   Ask current members how they accomplish their goals — it’s a great way to identify the current user’s journey!
2. During research, pursue pain points.
   
   When you understand the pain points, it’s easier to brainstorm potential solutions. Those potential solutions become the ideal user journey.
3. Keep track of the steps in the journey.
   
   When the team moves into wireframes and visual design, don’t lose sight of the rationale for beginning each step on its designated device. Annotations or a digitized version of the journey can help keep these top of mind.
4. Test the journey.
   
   Designing based on a journey is great, but then we need to make sure it works! Follow the analytics to find out where people drop off and what devices people are using along the way. Then go back and improve the ideal journey.

We live in an Internet of Things. There’s no use pretending that mobile, desktop or tablets will be the way of the future. There are still more devices to come our way, more technologies to infuse our homes, workplaces and commutes. Journey-driven design allows design to expand and evolve as technologies evolve. We’re starting to practice this more and more, and we hope to share a case study or two in the coming months.

Resources Link

• “New BBC News Website: Your Reaction²⁷,” Niko Vijayaratnam
  
  See why the BBC News website changed to responsive in 2015.
• “5 UX Demons That Need Exorcising²⁸,” Robert Hoekman Jr
  
  The problem with “the fold” and other UX myths.
• “Designing Digital Strategies, Part 1: Cartography²⁹,” Sofia Hussain
  
  An overview of ecosystem maps.
• “Mobile First³⁰,” Luke Wroblewski
  
  Luke’s 2009 explanation of mobile-first.
• “Adapting Ourselves to Adaptive Content³¹,” Karen McGrane
  
  A presentation that showcases how the web affects our static views of content.
• “Desktop-First vs. Mobile-First Web Design: What’s Best for Your Business?³²,” Splash Omnimedia
  
  The pros and cons of desktop- and mobile-first design.
• “Mobile First Design: Why It’s Great and Why It Sucks³³,” Code My Views
  
  Graceful degradation, progressive enhancement and how mobile-first design works.
• “Consumers Take a Multi-Device Path to Purchase³⁴,” Steve Olenski
  
  67% of people start shopping on one device and continue on another. See the stats.
• “The Data Digest: Our Multi-Device Journey Through the Digital World³⁵,” Anjali Lai
  
  A look at popular activities that encourage changing devices midstream.
• “Is Mobile Healthcare the Future? [Infographic]³⁶,” GreatCall Inc.
  
  An infographic of the ways in which mobile devices are used for healthcare.
• “30 Amazing Mobile Health Technology Statistics for Today’s Physician³⁷,” Jonathan Govette
  
  An article about the ways people interact with healthcare professionals.
• “How Successful Companies Design for Users’ Multi-Device Lives³⁸,” Marc Abraham
  
  A look at the digital ecosystem and designing across devices.

(cc, vf, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/11/1-Devices-large-opt.jpg
2. 2 https://www.pexels.com/photo/apple-iphone-desk-office-425/
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/11/1-Devices-large-opt.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/2-Resolution-large-opt.png
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/2-Resolution-large-opt.png
6. 6 http://www.lukew.com/ff/entry.asp?933
7. 7 http://abookapart.com/products/content-strategy-for-mobile
8. 8 http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
9. 9 https://econsultancy.com/blog/64464-more-than-40-of-online-adults-are-multi-device-users-stats/
10. 10 http://www.greatcall.com/greatcall/lp/is-mobile-healthcare-the-future-infographic.aspx
11. 11 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/3-appwatch-large-opt.jpg
13. 13 https://www.pexels.com/photo/smartwatch-smart-watch-watch-apple-28208/
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/3-appwatch-large-opt.jpg
15. 15 http://www.uxbooth.com/articles/web-2-0-web-3-0-and-the-internet-of-things/
16. 16 http://www.wired.com/insights/2014/04/toilet-role-internet-things/
17. 17 http://www.usability.gov/how-to-and-tools/methods/personas.html
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-new-Ecosystem-large-opt.png
19. 19 http://www.madpow.com/
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-new-Ecosystem-large-opt.png
21. 21 http://www.uxbooth.com/articles/designing-digital-strategies-part-1-cartography/
22. 22 https://medium.com/@mattsutt0n/designing-for-context-going-beyond-mobile-first-e0c4f4babd65#.l2g2992p9
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/5-companion-large-opt.jpg
24. 24 //madpow.com/
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/5-companion-large-opt.jpg
26. 26 http://contentmarketinginstitute.com/2014/09/adaptive-content-omni-channel-technique/
27. 27 http://www.bbc.co.uk/blogs/internet/entries/ca4e1ad8-edef-4bf8-947a-97409e5c53c4
28. 28 http://thenextweb.com/dd/2015/10/01/5-ux-demons-that-need-exorcising/
29. 29 http://www.uxbooth.com/articles/designing-digital-strategies-part-1-cartography/
30. 30 http://www.lukew.com/ff/entry.asp?933
31. 31 http://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/
32. 32 http://www.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design
33. 33 https://codemyviews.com/blog/mobilefirst
34. 34 http://www.forbes.com/sites/marketshare/2012/12/04/consumers-take-a-multi-device-path-to-purchase/
35. 35 http://blogs.forrester.com/anjali_lai/14-06-27-the_data_digest_our_multi_device_journey_through_the_digital_world
36. 36 http://www.greatcall.com/greatcall/lp/is-mobile-healthcare-the-future-infographic.aspx
37. 37 https://getreferralmd.com/2015/08/mobile-healthcare-technology-statistics/
38. 38 http://www.nirandfar.com/2014/07/how-successful-companies-design-for-users-multi-device-lives.html

↑ Back to topTweet itShare on Facebook

Time flies by! February is already here and artists and designers from across the globe have once again diligently created a potpourri of unique wallpaper calendars to freshen up your desktop. This monthly wallpapers mission has been going on for eight years¹ already and we are very thankful to all the creative minds who challenge their skills and contribute to it each month anew.

This post features their desktop artwork for February 2017. The wallpapers all come in versions with and without a calendar and can be downloaded for free. Now there’s only one question left to answer: Which one will make it to your desktop this month?

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?

Further Reading on SmashingMag: Link

• Valentines Day Wallpapers — Love And Hearts³
• Girls Wallpaper — Great Desktop Backgrounds From Smashing Magazine⁴
• Cuddly Pet Wallpapers & Cute Animals For Your Desktop⁵

Balloons

Designed by Xenia Latii⁶ from Germany.

⁷

• preview⁸
• with calendar: 320×480⁹, 640×480¹⁰, 800×480¹¹, 800×600¹², 1024×768¹³, 1152×864¹⁴, 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: 320×480²⁹, 640×480³⁰, 800×480³¹, 800×600³², 1024×768³³, 1152×864³⁴, 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⁴⁸

Febpurrary

“I was doodling pictures of my cat one day and decided I could turn it into a fun wallpaper – because a cold, winter night in February is the perfect time for staying in and cuddling with your cat, your significant other, or both!” — Designed by Angelia DiAntonio⁴⁹ from Ohio, USA.

⁵⁰

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

To Love And Be Loved

“Amantine-Lucile-Aurore Dupin, best known by her pseudonym George Sand, was a French novelist and memoirist.” — 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¹⁰⁸

Same Poles Can Make It Work

“Valentine’s day is coming and there’s always this saying that ‘opposites attract’ and while it is true, I think that even if you are the same, if love is strong, you can always make it work. No matter if the odds are against you.” — Designed by Maria Keller¹⁰⁹ from Mexico.

¹¹⁰

• preview¹¹¹
• with calendar: 320×480¹¹², 640×480¹¹³, 640×1136¹¹⁴, 750×1334¹¹⁵, 800×480¹¹⁶, 800×600¹¹⁷, 1024×768¹¹⁸, 1024×1024¹¹⁹, 1152×864¹²⁰, 1242×2208¹²¹, 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¹³⁵, 2880×1800¹³⁶
• without calendar: 320×480¹³⁷, 640×480¹³⁸, 640×1136¹³⁹, 750×1334¹⁴⁰, 800×480¹⁴¹, 800×600¹⁴², 1024×768¹⁴³, 1024×1024¹⁴⁴, 1152×864¹⁴⁵, 1242×2208¹⁴⁶, 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¹⁶⁰, 2880×1800¹⁶¹

Stolen Heart

“Valentine’s Day is probably celebrated almost everywhere in the world today. These celebrations and traditions on how a particular form of society celebrates love vary based on the place or the country. Mostly Valentine’s day is recognized as the day that celebrates love. But in many cultures, it can also be recognized as many other things such as spring, happiness and so on. There are so many folk traditions based on Valentine’s day and the belief it holds among various cultures also differs with respect to the history of the day.” — Designed by Dipanjan Karmakar¹⁶² from India.

¹⁶³

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

Minimalistic Love

“This minimalistic love logo is designed from geometric shapes, where the heart represents the letter ‘O’ and love. The anchor represents the letter ‘V’ very delicately and stylish and it symbolizes your wanderlust. The anchor is a symbol of adventure and travels.” — Designed by Antun Hirsman¹⁸¹ from Croatia.

¹⁸²

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

Love Boat Baby

“I got my inspiration from a children’s song here in Belgium. It’s a song by K3, they were and still are my favorite Belgian girl band from my childhood. ‘Love boat baby’ is a recent song from the new girls of K3, and this is my favorite one. I thought it would be a really nice wallpaper with an actual love boat on the sea to represent the month of love.” — 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²⁴⁴

Be Mine!

“Hearts, kisses, chocolates, cards and flowers… Love is everywhere — it’s Valentine‘s Day!” — Designed by Hemangi Rane²⁴⁵ from Gainesville, Forida.

²⁴⁶

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

Food Crush

“February is a month of love and friendship! Valentine’s Day – a time for special presents, going out drinking with mates and most importantly, sharing delicious meals with loved ones. Food Crush!” — Designed by foodpanda Hong Kong²⁵⁴ from Hong Kong.

²⁵⁵

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

The Day Of Love

“The best and most beautiful things in the world can’t be seen or even touched — they must be felt with the heart.” — Designed by Colorgraphicz²⁹¹ from India.

²⁹²

• preview²⁹³
• with calendar: 1280×960²⁹⁴, 1920×1440²⁹⁵, 2560×1440²⁹⁶
• without calendar: 1280×960²⁹⁷, 1920×1440²⁹⁸, 2560×1440²⁹⁹

Love In Winter

“Love is what makes you live and gives you the hope to live and look for a better future.” — Designed by Hatim M. M. Yousif Al-Sharif³⁰⁰ from the United Arab Emirates.

³⁰¹

• 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×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×1200³³⁸, 1680×1050³³⁹, 1680×1200³⁴⁰, 1920×1080³⁴¹, 1920×1200³⁴², 1920×1440³⁴³, 2560×1440³⁴⁴

A Day Of Love

“Love is like a cloud… love is like a dream… love is one word and everything in between… love is a fairytale come true… I found love when I found you.” — 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³⁷⁵

Be My Queen

“Flowers, chocolates, teddy, gifts are so mainstream. This year touch her heart and soul and rather than saying those obvious ‘Three Magical Words’, say ‘Be my queen’.” — Designed by Damn Perfect³⁷⁶ from Jaipur, India.

³⁷⁷

• preview³⁷⁸
• with calendar: 320×480³⁷⁹, 640×480³⁸⁰, 640×1136³⁸¹, 800×480³⁸², 800×600³⁸³, 1024×768³⁸⁴, 1024×1024³⁸⁵, 1080×1920³⁸⁶, 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⁴⁰⁴, 640×1136⁴⁰⁵, 800×480⁴⁰⁶, 800×600⁴⁰⁷, 1024×768⁴⁰⁸, 1024×1024⁴⁰⁹, 1080×1920⁴¹⁰, 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⁴²⁶

Traditional Love

“Love is something eternal – the aspect may change, but not the essence. A Valentine’s Day wallpaper with traditional motifs especially for you!” — Designed by Roxi Nastase⁴²⁷ from Romania.

⁴²⁸

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

For The Birds

“February is National Bird Feeding Month. I used to feed the birds in our backyard as a kid so this is what inspired the imagery.” — 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⁵⁰⁰

Love, Love

“February means Valentine’s Day – and love is in the air!” — Designed by James Mitchell⁵⁰¹ from the United Kingdom.

⁵⁰²

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

Love Is In The Air

“Happy Valentine’s day! We want everyone to find somebody to love.” — Designed by Anto Fernández | Destaca Imagen⁵²² from Spain.

⁵²³

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

Soft Sunset, Warm Hearts

“February is a short month with a whirlwind of romance smack dab in the middle. Whether there is a special someone in your life or not, a gorgeous view at sunset stirs the heart and refreshes the soul. This particular sunset did that to me the moment I walked up, and I knew it needed to be captured. Taken at Lyall Bay Rocks in Wellington, New Zealand.” — Designed by Jenni Adamitis⁵⁴³ from Houston, Texas.

⁵⁴⁴

• 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⁵⁸⁵

Give The World Some Love

“The world needs some love, now more then ever. In this wallpaper, you can see there is a girl giving some of her love to a tree. The tree of love which spreads the love it gets to the world.” — Designed by Mira Van der Jeugt⁵⁸⁶ from Belgium.

⁵⁸⁷

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

“Greben” Icebreaker

“Danube is Europe’s second largest river, connecting 10 different countries. In these cold days, when ice paralyzes rivers and closes waterways, a small but brave icebreaker called Greben (Serbian word for ‘reef’) seems stronger than winter. It cuts through the ice on Đerdap gorge (Iron Gate) – the longest and biggest gorge in Europe – thus helping the production of electricity in the power plant. This is our way to give thanks to Greben!” — 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⁶¹⁵, 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⁶³⁵, 1366×768⁶³⁶, 1400×1050⁶³⁷, 1440×900⁶³⁸, 1600×1200⁶³⁹, 1680×1050⁶⁴⁰, 1680×1200⁶⁴¹, 1920×1080⁶⁴², 1920×1200⁶⁴³, 1920×1440⁶⁴⁴, 2560×1440⁶⁴⁵

In Another Place At The Same Time

“February is the month of love par excellence, but also a different month. Perhaps because it is shorter than the rest or because it is the one that makes way for spring, but we consider it a special month. It is a perfect month to make plans because we have already finished the post-Christmas crunch and we notice that spring and summer are coming closer. That is why I like to imagine that maybe in another place someone is also making plans to travel to unknown lands.” — 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⁶⁶⁶

February Ferns

Designed by Nathalie Ouederni⁶⁶⁷ from France.

⁶⁶⁸

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

Winter Wonderland

“In February, nature shows its creativity. Our artwork occurs when it is being drawn.” — Designed by Ana Masnikosa⁶⁸⁴ from Belgrade, Serbia.

⁶⁸⁵

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

Happy Birthday Charles Dickens!

“Charles Dickens is most famous for writing Oliver Twist and A Christmas Carol. The 7th of February is Charles Dickens birthday, so to honour his birthday I created this wallpaper with a quote from my favourite book, Oliver Twist!” — 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⁷⁴³

Snowy Sunset

Designed by Nathalie Croze⁷⁴⁴ from France.

⁷⁴⁵

• preview⁷⁴⁶
• with calendar: 320×480⁷⁴⁷, 1680×1050⁷⁴⁸, 1920×1080⁷⁴⁹, 2560×1440⁷⁵⁰
• without calendar: 320×480⁷⁵¹, 1680×1050⁷⁵², 1920×1080⁷⁵³, 2560×1440⁷⁵⁴

Little Red Riding Hood

Designed by Gregor Haslinger⁷⁵⁵ from Germany.

⁷⁵⁶

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

The Proud Rooster

“This design is dedicated to the rooster, the one who starts with his cock-a-doodle-do at the crack of dawn to wake everyone up from their deep slumber. He’s not just nature’s alarm clock but the protector of the coop as well, watchful as he walks through the farm with his pointed saddle feathers and red comb.” — 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⁸¹⁴

Inertia

Designed by Elise Vanoorbeek – Doud⁸¹⁵ from Belgium.

⁸¹⁶

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

Made In Japan

“See the beautiful colors, precision, and the nature of Japan in one picture.” — Designed by Fatih Yilmaz⁸⁴⁶ from the Netherlands.

⁸⁴⁷

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

Golden Rooster

“2017 is the Chinese Year of the Rooster, the golden eggs on behalf of auspicious meaning.” — Designed by Sunny Hong⁸⁶⁹ from Taiwan.

⁸⁷⁰

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

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.

(cm)

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.smashingmagazine.com/valentines-day-wallpapers/
4. 4 https://www.smashingmagazine.com/girls-wallpaper/
5. 5 https://www.smashingmagazine.com/pet-wallpapers/
6. 6 https://www.behance.net/xenialatii
7. 7 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/feb-17-balloons-full.jpg
8. 8 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/feb-17-balloons-preview.jpg
9. 9 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-320×480.jpg
10. 10 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-640×480.jpg
11. 11 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-800×480.jpg
12. 12 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-800×600.jpg
13. 13 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1024×768.jpg
14. 14 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1152×864.jpg
15. 15 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1280×720.jpg
16. 16 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1280×800.jpg
17. 17 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1280×960.jpg
18. 18 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1280×1024.jpg
19. 19 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1366×768.jpg
20. 20 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1400×1050.jpg
21. 21 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1440×900.jpg
22. 22 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1600×1200.jpg
23. 23 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1680×1050.jpg
24. 24 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1680×1200.jpg
25. 25 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1920×1080.jpg
26. 26 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1920×1200.jpg
27. 27 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-1920×1440.jpg
28. 28 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/cal/feb-17-balloons-cal-2560×1440.jpg
29. 29 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-320×480.jpg
30. 30 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-640×480.jpg
31. 31 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-800×480.jpg
32. 32 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-800×600.jpg
33. 33 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1024×768.jpg
34. 34 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1152×864.jpg
35. 35 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280×720.jpg
36. 36 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280×800.jpg
37. 37 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280×960.jpg
38. 38 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1280×1024.jpg
39. 39 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1366×768.jpg
40. 40 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1400×1050.jpg
41. 41 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1440×900.jpg
42. 42 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1600×1200.jpg
43. 43 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1680×1050.jpg
44. 44 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1680×1200.jpg
45. 45 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1920×1080.jpg
46. 46 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1920×1200.jpg
47. 47 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-1920×1440.jpg
48. 48 http://files.smashingmagazine.com/wallpapers/feb-17/balloons/nocal/feb-17-balloons-nocal-2560×1440.jpg
49. 49 https://angeliadesign.com/
50. 50 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/feb-17-febpurrary-full.jpg
51. 51 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/feb-17-febpurrary-preview.jpg
52. 52 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-320×480.jpg
53. 53 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-800×480.jpg
54. 54 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1024×768.jpg
55. 55 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1024×1024.jpg
56. 56 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1152×864.jpg
57. 57 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1280×720.jpg
58. 58 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1280×1024.jpg
59. 59 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1366×768.jpg
60. 60 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1400×1050.jpg
61. 61 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1440×900.jpg
62. 62 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1600×1200.jpg
63. 63 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1680×1200.jpg
64. 64 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1920×1080.jpg
65. 65 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1920×1200.jpg
66. 66 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-1920×1440.jpg
67. 67 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/cal/feb-17-febpurrary-cal-2560×1440.jpg
68. 68 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-320×480.jpg
69. 69 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-800×480.jpg
70. 70 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1024×768.jpg
71. 71 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1024×1024.jpg
72. 72 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1152×864.jpg
73. 73 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1280×720.jpg
74. 74 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1280×1024.jpg
75. 75 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1366×768.jpg
76. 76 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1400×1050.jpg
77. 77 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1440×900.jpg
78. 78 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1600×1200.jpg
79. 79 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1680×1200.jpg
80. 80 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1920×1080.jpg
81. 81 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1920×1200.jpg
82. 82 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-1920×1440.jpg
83. 83 http://files.smashingmagazine.com/wallpapers/feb-17/febpurrary/nocal/feb-17-febpurrary-nocal-2560×1440.jpg
84. 84 http://www.tazi.com.au
85. 85 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/feb-17-to-love-and-be-loved-full.png
86. 86 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/feb-17-to-love-and-be-loved-preview.png
87. 87 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-320×480.png
88. 88 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-640×480.png
89. 89 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-800×600.png
90. 90 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1024×768.png
91. 91 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1152×864.png
92. 92 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1280×720.png
93. 93 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1280×960.png
94. 94 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1600×1200.png
95. 95 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1920×1080.png
96. 96 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-1920×1440.png
97. 97 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/cal/feb-17-to-love-and-be-loved-cal-2560×1440.png
98. 98 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-320×480.png
99. 99 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-640×480.png
100. 100 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-800×600.png
101. 101 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1024×768.png
102. 102 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1152×864.png
103. 103 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1280×720.png
104. 104 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1280×960.png
105. 105 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1600×1200.png
106. 106 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1920×1080.png
107. 107 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-1920×1440.png
108. 108 http://files.smashingmagazine.com/wallpapers/feb-17/to-love-and-be-loved/nocal/feb-17-to-love-and-be-loved-nocal-2560×1440.png
109. 109 http://www.mariakellerac.com
110. 110 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/feb-17-same-poles-can-make-it-work-full.png
111. 111 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/feb-17-same-poles-can-make-it-work-preview.png
112. 112 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-320×480.png
113. 113 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-640×480.png
114. 114 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-640×1136.png
115. 115 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-750×1334.png
116. 116 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-800×480.png
117. 117 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-800×600.png
118. 118 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1024×768.png
119. 119 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1024×1024.png
120. 120 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1152×864.png
121. 121 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1242×2208.png
122. 122 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1280×720.png
123. 123 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1280×800.png
124. 124 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1280×960.png
125. 125 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1280×1024.png
126. 126 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1366×768.png
127. 127 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1400×1050.png
128. 128 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1440×900.png
129. 129 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1600×1200.png
130. 130 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1680×1050.png
131. 131 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1680×1200.png
132. 132 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1920×1080.png
133. 133 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1920×1200.png
134. 134 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-1920×1440.png
135. 135 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-2560×1440.png
136. 136 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/cal/feb-17-same-poles-can-make-it-work-cal-2880×1800.png
137. 137 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-320×480.png
138. 138 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-640×480.png
139. 139 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-640×1136.png
140. 140 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-750×1334.png
141. 141 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-800×480.png
142. 142 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-800×600.png
143. 143 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1024×768.png
144. 144 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1024×1024.png
145. 145 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1152×864.png
146. 146 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1242×2208.png
147. 147 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1280×720.png
148. 148 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1280×800.png
149. 149 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1280×960.png
150. 150 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1280×1024.png
151. 151 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1366×768.png
152. 152 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1400×1050.png
153. 153 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1440×900.png
154. 154 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1600×1200.png
155. 155 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1680×1050.png
156. 156 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1680×1200.png
157. 157 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1920×1080.png
158. 158 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1920×1200.png
159. 159 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-1920×1440.png
160. 160 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-2560×1440.png
161. 161 http://files.smashingmagazine.com/wallpapers/feb-17/same-poles-can-make-it-work/nocal/feb-17-same-poles-can-make-it-work-nocal-2880×1800.png
162. 162 http://0effortthemes.com/
163. 163 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/feb-17-stolen-heart-full.jpg
164. 164 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/feb-17-stolen-heart-preview.jpg
165. 165 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1280×720.jpg
166. 166 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1280×800.jpg
167. 167 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1280×960.jpg
168. 168 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1366×768.jpg
169. 169 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1400×1050.jpg
170. 170 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1440×900.jpg
171. 171 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1680×1200.jpg
172. 172 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/cal/feb-17-stolen-heart-cal-1920×1080.jpg
173. 173 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1280×720.jpg
174. 174 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1280×800.jpg
175. 175 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1280×960.jpg
176. 176 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1366×768.jpg
177. 177 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1400×1050.jpg
178. 178 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1440×900.jpg
179. 179 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1680×1200.jpg
180. 180 http://files.smashingmagazine.com/wallpapers/feb-17/stolen-heart/nocal/feb-17-stolen-heart-nocal-1920×1080.jpg
181. 181 http://hirsdesign.com/
182. 182 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/feb-17-minimalistic-love-full.jpg
183. 183 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/feb-17-minimalistic-love-preview.jpg
184. 184 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-800×600.jpg
185. 185 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1024×768.jpg
186. 186 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1152×864.jpg
187. 187 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1280×960.jpg
188. 188 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1280×1024.jpg
189. 189 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1440×900.jpg
190. 190 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1680×1200.jpg
191. 191 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-1920×1080.jpg
192. 192 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/cal/feb-17-minimalistic-love-cal-2560×1440.jpg
193. 193 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-800×600.jpg
194. 194 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1024×768.jpg
195. 195 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1152×864.jpg
196. 196 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1280×960.jpg
197. 197 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1280×1024.jpg
198. 198 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1440×900.jpg
199. 199 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1680×1200.jpg
200. 200 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-1920×1080.jpg
201. 201 http://files.smashingmagazine.com/wallpapers/feb-17/minimalistic-love/nocal/feb-17-minimalistic-love-nocal-2560×1440.jpg
202. 202 http://melissa.bogemans.com/
203. 203 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/feb-17-love-boat-baby-full.png
204. 204 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/feb-17-love-boat-baby-preview.png
205. 205 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-320×480.png
206. 206 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-640×480.png
207. 207 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-800×480.png
208. 208 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-800×600.png
209. 209 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1024×768.png
210. 210 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1024×1024.png
211. 211 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1152×864.png
212. 212 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1280×720.png
213. 213 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1280×800.png
214. 214 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1280×960.png
215. 215 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1280×1024.png
216. 216 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1400×1050.png
217. 217 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1440×900.png
218. 218 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1600×1200.png
219. 219 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1680×1050.png
220. 220 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1680×1200.png
221. 221 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1920×1080.png
222. 222 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1920×1200.png
223. 223 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-1920×1440.png
224. 224 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/cal/feb-17-love-boat-baby-cal-2560×1440.png
225. 225 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-320×480.png
226. 226 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-640×480.png
227. 227 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-800×480.png
228. 228 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-800×600.png
229. 229 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1024×768.png
230. 230 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1024×1024.png
231. 231 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1152×864.png
232. 232 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1280×720.png
233. 233 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1280×800.png
234. 234 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1280×960.png
235. 235 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1280×1024.png
236. 236 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1400×1050.png
237. 237 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1440×900.png
238. 238 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1600×1200.png
239. 239 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1680×1050.png
240. 240 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1680×1200.png
241. 241 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1920×1080.png
242. 242 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1920×1200.png
243. 243 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-1920×1440.png
244. 244 http://files.smashingmagazine.com/wallpapers/feb-17/love-boat-baby/nocal/feb-17-love-boat-baby-nocal-2560×1440.png
245. 245 https://www.facebook.com/kilmouskiscraftbox/
246. 246 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/feb-17-be-mine-full.jpg
247. 247 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/feb-17-be-mine-preview.jpg
248. 248 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/cal/feb-17-be-mine-cal-1280×720.jpg
249. 249 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/cal/feb-17-be-mine-cal-1920×1080.jpg
250. 250 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/cal/feb-17-be-mine-cal-2560×1440.jpg
251. 251 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/nocal/feb-17-be-mine-nocal-1280×720.jpg
252. 252 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/nocal/feb-17-be-mine-nocal-1920×1080.jpg
253. 253 http://files.smashingmagazine.com/wallpapers/feb-17/be-mine/nocal/feb-17-be-mine-nocal-2560×1440.jpg
254. 254 https://www.foodpanda.hk
255. 255 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/feb-17-food-crush-full.png
256. 256 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/feb-17-food-crush-preview.png
257. 257 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-320×480.png
258. 258 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-640×480.png
259. 259 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-800×600.png
260. 260 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1024×768.png
261. 261 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1024×1024.png
262. 262 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1152×864.png
263. 263 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1280×720.png
264. 264 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1280×800.png
265. 265 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1280×960.png
266. 266 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1366×768.png
267. 267 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1400×1050.png
268. 268 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1440×900.png
269. 269 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1600×1200.png
270. 270 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1680×1050.png
271. 271 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1920×1200.png
272. 272 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-1920×1440.png
273. 273 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/cal/feb-17-food-crush-cal-2560×1440.png
274. 274 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-320×480.png
275. 275 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-640×480.png
276. 276 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-800×600.png
277. 277 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1024×768.png
278. 278 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1024×1024.png
279. 279 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1152×864.png
280. 280 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1280×720.png
281. 281 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1280×800.png
282. 282 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1280×960.png
283. 283 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1366×768.png
284. 284 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1400×1050.png
285. 285 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1440×900.png
286. 286 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1600×1200.png
287. 287 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1680×1050.png
288. 288 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1920×1200.png
289. 289 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-1920×1440.png
290. 290 http://files.smashingmagazine.com/wallpapers/feb-17/food-crush/nocal/feb-17-food-crush-nocal-2560×1440.png
291. 291 http://www.colorgraphicz.com/
292. 292 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/feb-17-the-day-of-love-full.jpg
293. 293 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/feb-17-the-day-of-love-preview.jpg
294. 294 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/cal/feb-17-the-day-of-love-cal-1280×960.jpg
295. 295 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/cal/feb-17-the-day-of-love-cal-1920×1440.jpg
296. 296 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/cal/feb-17-the-day-of-love-cal-2560×1440.jpg
297. 297 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/nocal/feb-17-the-day-of-love-nocal-1280×960.jpg
298. 298 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/nocal/feb-17-the-day-of-love-nocal-1920×1440.jpg
299. 299 http://files.smashingmagazine.com/wallpapers/feb-17/the-day-of-love/nocal/feb-17-the-day-of-love-nocal-2560×1440.jpg
300. 300 https://www.behance.net/hatimjam
301. 301 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/feb-17-love-in-winter-full.png
302. 302 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/feb-17-love-in-winter-preview.png
303. 303 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-320×480.png
304. 304 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-640×480.png
305. 305 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-800×480.png
306. 306 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-800×600.png
307. 307 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1024×768.png
308. 308 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1024×1024.png
309. 309 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1152×864.png
310. 310 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1280×720.png
311. 311 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1280×800.png
312. 312 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1280×960.png
313. 313 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1280×1024.png
314. 314 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1366×768.png
315. 315 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1400×1050.png
316. 316 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1440×900.png
317. 317 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1600×1200.png
318. 318 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1680×1050.png
319. 319 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1680×1200.png
320. 320 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1920×1080.png
321. 321 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1920×1200.png
322. 322 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-1920×1440.png
323. 323 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/cal/feb-17-love-in-winter-cal-2560×1440.png
324. 324 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-320×480.png
325. 325 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-640×480.png
326. 326 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-800×480.png
327. 327 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-800×600.png
328. 328 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1024×768.png
329. 329 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1024×1024.png
330. 330 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1152×864.png
331. 331 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1280×720.png
332. 332 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1280×800.png
333. 333 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1280×960.png
334. 334 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1280×1024.png
335. 335 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1366×768.png
336. 336 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1400×1050.png
337. 337 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1440×900.png
338. 338 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1600×1200.png
339. 339 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1680×1050.png
340. 340 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1680×1200.png
341. 341 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1920×1080.png
342. 342 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1920×1200.png
343. 343 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-1920×1440.png
344. 344 http://files.smashingmagazine.com/wallpapers/feb-17/love-in-winter/nocal/feb-17-love-in-winter-nocal-2560×1440.png
345. 345 http://itobuz.com/
346. 346 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/feb-17-a-day-of-love-full.jpg
347. 347 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/feb-17-a-day-of-love-preview.jpg
348. 348 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1280×720.jpg
349. 349 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1280×800.jpg
350. 350 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1280×960.jpg
351. 351 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1280×1024.jpg
352. 352 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1366×768.jpg
353. 353 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1400×1050.jpg
354. 354 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1440×900.jpg
355. 355 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1600×1200.jpg
356. 356 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1680×1050.jpg
357. 357 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1680×1200.jpg
358. 358 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1920×1080.jpg
359. 359 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1920×1200.jpg
360. 360 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-1920×1440.jpg
361. 361 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/cal/feb-17-a-day-of-love-cal-2560×1440.jpg
362. 362 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1280×720.jpg
363. 363 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1280×800.jpg
364. 364 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1280×960.jpg
365. 365 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1280×1024.jpg
366. 366 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1366×768.jpg
367. 367 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1400×1050.jpg
368. 368 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1440×900.jpg
369. 369 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1600×1200.jpg
370. 370 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1680×1050.jpg
371. 371 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1680×1200.jpg
372. 372 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1920×1080.jpg
373. 373 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1920×1200.jpg
374. 374 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-1920×1440.jpg
375. 375 http://files.smashingmagazine.com/wallpapers/feb-17/a-day-of-love/nocal/feb-17-a-day-of-love-nocal-2560×1440.jpg
376. 376 http://www.damnperfect.com
377. 377 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/feb-17-be-my-queen-full.png
378. 378 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/feb-17-be-my-queen-preview.png
379. 379 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-320×480.png
380. 380 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-640×480.png
381. 381 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-640×1136.png
382. 382 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-800×480.png
383. 383 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-800×600.png
384. 384 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1024×768.png
385. 385 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1024×1024.png
386. 386 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1080×1920.png
387. 387 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1152×864.png
388. 388 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1280×720.png
389. 389 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1280×800.png
390. 390 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1280×960.png
391. 391 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1280×1024.png
392. 392 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1366×768.png
393. 393 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1400×1050.png
394. 394 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1440×900.png
395. 395 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1600×900.png
396. 396 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1600×1200.png
397. 397 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1680×1050.png
398. 398 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1680×1200.png
399. 399 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1920×1080.png
400. 400 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1920×1200.png
401. 401 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-1920×1440.png
402. 402 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/cal/feb-17-be-my-queen-cal-2560×1440.png
403. 403 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-320×480.png
404. 404 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-640×480.png
405. 405 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-640×1136.png
406. 406 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-800×480.png
407. 407 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-800×600.png
408. 408 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1024×768.png
409. 409 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1024×1024.png
410. 410 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1080×1920.png
411. 411 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1152×864.png
412. 412 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1280×720.png
413. 413 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1280×800.png
414. 414 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1280×960.png
415. 415 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1280×1024.png
416. 416 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1366×768.png
417. 417 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1400×1050.png
418. 418 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1440×900.png
419. 419 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1600×900.png
420. 420 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1600×1200.png
421. 421 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1680×1050.png
422. 422 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1680×1200.png
423. 423 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1920×1080.png
424. 424 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1920×1200.png
425. 425 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-1920×1440.png
426. 426 http://files.smashingmagazine.com/wallpapers/feb-17/be-my-queen/nocal/feb-17-be-my-queen-nocal-2560×1440.png
427. 427 https://www.shutterstock.com/g/roxananastase
428. 428 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/feb-17-traditional-love-full.jpg
429. 429 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/feb-17-traditional-love-preview.jpg
430. 430 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-320×480.jpg
431. 431 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-640×480.jpg
432. 432 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-800×480.jpg
433. 433 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-800×600.jpg
434. 434 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1024×768.jpg
435. 435 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1024×1024.jpg
436. 436 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1152×864.jpg
437. 437 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1280×720.jpg
438. 438 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1280×800.jpg
439. 439 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1280×960.jpg
440. 440 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1366×768.jpg
441. 441 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1440×900.jpg
442. 442 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1440×1050.jpg
443. 443 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1600×1200.jpg
444. 444 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1680×1050.jpg
445. 445 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1680×1200.jpg
446. 446 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1920×1080.jpg
447. 447 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1920×1200.jpg
448. 448 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-1920×1440.jpg
449. 449 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/cal/feb-17-traditional-love-cal-2560×1440.jpg
450. 450 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-320×480.jpg
451. 451 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-640×480.jpg
452. 452 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-800×480.jpg
453. 453 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-800×600.jpg
454. 454 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1024×768.jpg
455. 455 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1024×1024.jpg
456. 456 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1152×864.jpg
457. 457 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1280×720.jpg
458. 458 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1280×800.jpg
459. 459 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1280×960.jpg
460. 460 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1366×768.jpg
461. 461 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1440×900.jpg
462. 462 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1440×1050.jpg
463. 463 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1600×1200.jpg
464. 464 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1680×1050.jpg
465. 465 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1680×1200.jpg
466. 466 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1920×1080.jpg
467. 467 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1920×1200.jpg
468. 468 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-1920×1440.jpg
469. 469 http://files.smashingmagazine.com/wallpapers/feb-17/traditional-love/nocal/feb-17-traditional-love-nocal-2560×1440.jpg
470. 470 https://www.codesign.cc
471. 471 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/feb-17-for-the-birds-full.jpg
472. 472 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/feb-17-for-the-birds-preview.jpg
473. 473 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1024×768.jpg
474. 474 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1024×1024.jpg
475. 475 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1280×800.jpg
476. 476 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1280×960.jpg
477. 477 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1280×1024.jpg
478. 478 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1366×768.jpg
479. 479 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1440×900.jpg
480. 480 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1600×1200.jpg
481. 481 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1680×1050.jpg
482. 482 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1680×1200.jpg
483. 483 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1920×1080.jpg
484. 484 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1920×1200.jpg
485. 485 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-1920×1440.jpg
486. 486 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/cal/feb-17-for-the-birds-cal-2560×1440.jpg
487. 487 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1024×768.jpg
488. 488 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1024×1024.jpg
489. 489 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1280×800.jpg
490. 490 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1280×960.jpg
491. 491 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1280×1024.jpg
492. 492 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1366×768.jpg
493. 493 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1440×900.jpg
494. 494 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1600×1200.jpg
495. 495 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1680×1050.jpg
496. 496 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1680×1200.jpg
497. 497 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1920×1080.jpg
498. 498 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1920×1200.jpg
499. 499 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-1920×1440.jpg
500. 500 http://files.smashingmagazine.com/wallpapers/feb-17/for-the-birds/nocal/feb-17-for-the-birds-nocal-2560×1440.jpg
501. 501 https://www.behance.net/jamesmitchell23
502. 502 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/feb-17-love-love-full.png
503. 503 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/feb-17-love-love-preview.png
504. 504 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1280×720.png
505. 505 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1280×800.png
506. 506 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1440×900.png
507. 507 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1680×1050.png
508. 508 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1920×1080.png
509. 509 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1920×1200.png
510. 510 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-2560×1440.png
511. 511 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-2880×1800.png
512. 512 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/cal/feb-17-love-love-cal-1366×768.png
513. 513 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1280×720.png
514. 514 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1280×800.png
515. 515 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1440×900.png
516. 516 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1680×1050.png
517. 517 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1920×1080.png
518. 518 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1920×1200.png
519. 519 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-2560×1440.png
520. 520 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-2880×1800.png
521. 521 http://files.smashingmagazine.com/wallpapers/feb-17/love-love/nocal/feb-17-love-love-nocal-1366×768.png
522. 522 http://www.destacaimagen.com
523. 523 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/feb-17-love-is-in-the-air-full.jpg
524. 524 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/feb-17-love-is-in-the-air-preview.jpg
525. 525 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1024×1024.jpg
526. 526 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1280×720.jpg
527. 527 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1280×960.jpg
528. 528 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1366×768.jpg
529. 529 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1400×1050.jpg
530. 530 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1600×1200.jpg
531. 531 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1680×1200.jpg
532. 532 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-1920×1440.jpg
533. 533 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/cal/feb-17-love-is-in-the-air-cal-2560×1440.jpg
534. 534 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1024×1024.jpg
535. 535 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1280×720.jpg
536. 536 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1280×960.jpg
537. 537 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1366×768.jpg
538. 538 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1400×1050.jpg
539. 539 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1600×1200.jpg
540. 540 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1680×1200.jpg
541. 541 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-1920×1440.jpg
542. 542 http://files.smashingmagazine.com/wallpapers/feb-17/love-is-in-the-air/nocal/feb-17-love-is-in-the-air-nocal-2560×1440.jpg
543. 543 http://www.jenniadamitisphoto.com
544. 544 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/feb-17-soft-sunset-warm-hearts-full.jpg
545. 545 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/feb-17-soft-sunset-warm-hearts-preview.jpg
546. 546 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-320×480.jpg
547. 547 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-640×480.jpg
548. 548 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-800×480.jpg
549. 549 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-800×600.jpg
550. 550 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1024×768.jpg
551. 551 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1024×1024.jpg
552. 552 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1152×864.jpg
553. 553 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1280×720.jpg
554. 554 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1280×800.jpg
555. 555 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1280×960.jpg
556. 556 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1280×1024.jpg
557. 557 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1400×1050.jpg
558. 558 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1440×900.jpg
559. 559 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1600×1200.jpg
560. 560 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1680×1050.jpg
561. 561 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1680×1200.jpg
562. 562 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1920×1080.jpg
563. 563 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1920×1200.jpg
564. 564 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-1920×1440.jpg
565. 565 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/cal/feb-17-soft-sunset-warm-hearts-cal-2560×1440.jpg
566. 566 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-320×480.jpg
567. 567 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-640×480.jpg
568. 568 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-800×480.jpg
569. 569 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-800×600.jpg
570. 570 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1024×768.jpg
571. 571 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1024×1024.jpg
572. 572 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1152×864.jpg
573. 573 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1280×720.jpg
574. 574 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1280×800.jpg
575. 575 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1280×960.jpg
576. 576 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1280×1024.jpg
577. 577 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1400×1050.jpg
578. 578 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1440×900.jpg
579. 579 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1600×1200.jpg
580. 580 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1680×1050.jpg
581. 581 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1680×1200.jpg
582. 582 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1920×1080.jpg
583. 583 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1920×1200.jpg
584. 584 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-1920×1440.jpg
585. 585 http://files.smashingmagazine.com/wallpapers/feb-17/soft-sunset-warm-hearts/nocal/feb-17-soft-sunset-warm-hearts-nocal-2560×1440.jpg
586. 586 http://miravanderjeugt.com/
587. 587 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/feb-17-give-the-world-some-love-full.png
588. 588 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/feb-17-give-the-world-some-love-preview.png
589. 589 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/cal/feb-17-give-the-world-some-love-cal-800×450.png
590. 590 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/cal/feb-17-give-the-world-some-love-cal-1280×720.png
591. 591 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/cal/feb-17-give-the-world-some-love-cal-1440×810.png
592. 592 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/cal/feb-17-give-the-world-some-love-cal-1600×900.png
593. 593 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/cal/feb-17-give-the-world-some-love-cal-1920×1080.png
594. 594 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/cal/feb-17-give-the-world-some-love-cal-2560×1440.png
595. 595 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/nocal/feb-17-give-the-world-some-love-nocal-800×450.png
596. 596 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/nocal/feb-17-give-the-world-some-love-nocal-1280×720.png
597. 597 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/nocal/feb-17-give-the-world-some-love-nocal-1440×810.png
598. 598 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/nocal/feb-17-give-the-world-some-love-nocal-1600×900.png
599. 599 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/nocal/feb-17-give-the-world-some-love-nocal-1920×1080.png
600. 600 http://files.smashingmagazine.com/wallpapers/feb-17/give-the-world-some-love/nocal/feb-17-give-the-world-some-love-nocal-2560×1440.png
601. 601 http://www.popwebdesign.net/index_eng.html
602. 602 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/feb-17-greben-icebreaker-full.jpg
603. 603 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/feb-17-greben-icebreaker-preview.jpg
604. 604 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-320×480.jpg
605. 605 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-640×480.jpg
606. 606 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-800×480.jpg
607. 607 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-800×600.jpg
608. 608 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1024×768.jpg
609. 609 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1024×1024.jpg
610. 610 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1152×864.jpg
611. 611 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1280×720.jpg
612. 612 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1280×800.jpg
613. 613 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1280×960.jpg
614. 614 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1280×1024.jpg
615. 615 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1366×768.jpg
616. 616 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1400×1050.jpg
617. 617 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1440×900.jpg
618. 618 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1600×1200.jpg
619. 619 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1680×1050.jpg
620. 620 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1680×1200.jpg
621. 621 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1920×1080.jpg
622. 622 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1920×1200.jpg
623. 623 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-1920×1440.jpg
624. 624 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/cal/feb-17-greben-icebreaker-cal-2560×1440.jpg
625. 625 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-320×480.jpg
626. 626 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-640×480.jpg
627. 627 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-800×480.jpg
628. 628 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-800×600.jpg
629. 629 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1024×768.jpg
630. 630 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1024×1024.jpg
631. 631 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1152×864.jpg
632. 632 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280×720.jpg
633. 633 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280×800.jpg
634. 634 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280×960.jpg
635. 635 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1280×1024.jpg
636. 636 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1366×768.jpg
637. 637 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1400×1050.jpg
638. 638 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1440×900.jpg
639. 639 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1600×1200.jpg
640. 640 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1680×1050.jpg
641. 641 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1680×1200.jpg
642. 642 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1920×1080.jpg
643. 643 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1920×1200.jpg
644. 644 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-1920×1440.jpg
645. 645 http://files.smashingmagazine.com/wallpapers/feb-17/greben-icebreaker/nocal/feb-17-greben-icebreaker-nocal-2560×1440.jpg
646. 646 http://www.silocreativo.com/en
647. 647 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/feb-17-in-another-place-at-the-same-time-full.png
648. 648 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/feb-17-in-another-place-at-the-same-time-preview.png
649. 649 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-800×480.png
650. 650 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1024×768.png
651. 651 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1152×864.png
652. 652 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1280×800.png
653. 653 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1280×960.png
654. 654 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1440×900.png
655. 655 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1680×1200.png
656. 656 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-1920×1080.png
657. 657 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/cal/feb-17-in-another-place-at-the-same-time-cal-2560×1440.png
658. 658 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-800×480.png
659. 659 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1024×768.png
660. 660 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1152×864.png
661. 661 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1280×800.png
662. 662 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1280×960.png
663. 663 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1440×900.png
664. 664 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1680×1200.png
665. 665 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-1920×1080.png
666. 666 http://files.smashingmagazine.com/wallpapers/feb-17/in-another-place-at-the-same-time/nocal/feb-17-in-another-place-at-the-same-time-nocal-2560×1440.png
667. 667 http://www.nathalieouederni.com
668. 668 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/feb-17-february-ferns-full.jpg
669. 669 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/feb-17-february-ferns-preview.jpg
670. 670 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-320×480.jpg
671. 671 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-1024×768.jpg
672. 672 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-1280×1024.jpg
673. 673 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-1440×900.jpg
674. 674 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-1680×1200.jpg
675. 675 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-1920×1200.jpg
676. 676 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/cal/feb-17-february-ferns-cal-2560×1440.jpg
677. 677 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-320×480.jpg
678. 678 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1024×768.jpg
679. 679 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1280×1024.jpg
680. 680 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1440×900.jpg
681. 681 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1680×1200.jpg
682. 682 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-1920×1200.jpg
683. 683 http://files.smashingmagazine.com/wallpapers/feb-17/february-ferns/nocal/feb-17-february-ferns-nocal-2560×1440.jpg
684. 684 https://www.creitive.com/
685. 685 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/feb-17-winter-wonderland-full.png
686. 686 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/feb-17-winter-wonderland-preview.png
687. 687 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-640×480.png
688. 688 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-800×480.png
689. 689 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-800×600.png
690. 690 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1024×768.png
691. 691 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1024×1024.png
692. 692 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1152×864.png
693. 693 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1280×720.png
694. 694 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1280×800.png
695. 695 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1280×960.png
696. 696 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1280×1040.png
697. 697 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1400×1050.png
698. 698 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1440×900.png
699. 699 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1600×1200.png
700. 700 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1680×1050.png
701. 701 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1680×1200.png
702. 702 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1920×1080.png
703. 703 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1920×1200.png
704. 704 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-1920×1440.png
705. 705 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/cal/feb-17-winter-wonderland-cal-2560×1440.png
706. 706 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-640×480.png
707. 707 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-800×480.png
708. 708 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-800×600.png
709. 709 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1024×768.png
710. 710 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1024×1024.png
711. 711 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1152×864.png
712. 712 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1280×720.png
713. 713 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1280×800.png
714. 714 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1280×960.png
715. 715 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1280×1040.png
716. 716 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1400×1050.png
717. 717 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1440×900.png
718. 718 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1600×1200.png
719. 719 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1680×1050.png
720. 720 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1680×1200.png
721. 721 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1920×1080.png
722. 722 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1920×1200.png
723. 723 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-1920×1440.png
724. 724 http://files.smashingmagazine.com/wallpapers/feb-17/winter-wonderland/nocal/feb-17-winter-wonderland-nocal-2560×1440.png
725. 725 http://www.safiabegum.com/
726. 726 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/feb-17-happy-birthday-charles-dickens-full.png
727. 727 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/feb-17-happy-birthday-charles-dickens-preview.png
728. 728 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-800×450.png
729. 729 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-1280×720.png
730. 730 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-1366×768.png
731. 731 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-1440×810.png
732. 732 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-1600×900.png
733. 733 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-1680×945.png
734. 734 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-1920×1080.png
735. 735 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/cal/feb-17-happy-birthday-charles-dickens-cal-2560×1440.png
736. 736 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-800×450.png
737. 737 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-1280×720.png
738. 738 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-1366×768.png
739. 739 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-1440×810.png
740. 740 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-1600×900.png
741. 741 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-1680×945.png
742. 742 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-1920×1080.png
743. 743 http://files.smashingmagazine.com/wallpapers/feb-17/happy-birthday-charles-dickens/nocal/feb-17-happy-birthday-charles-dickens-nocal-2560×1440.png
744. 744 http://www.nathalie-croze.com
745. 745 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/feb-17-snowy-sunset-full.jpg
746. 746 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/feb-17-snowy-sunset-preview.jpg
747. 747 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/cal/feb-17-snowy-sunset-cal-320×480.jpg
748. 748 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/cal/feb-17-snowy-sunset-cal-1680×1050.jpg
749. 749 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/cal/feb-17-snowy-sunset-cal-1920×1080.jpg
750. 750 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/cal/feb-17-snowy-sunset-cal-2560×1440.jpg
751. 751 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-320×480.jpg
752. 752 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-1680×1050.jpg
753. 753 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-1920×1080.jpg
754. 754 http://files.smashingmagazine.com/wallpapers/feb-17/snowy-sunset/nocal/feb-17-snowy-sunset-nocal-2560×1440.jpg
755. 755 http://www.haslinger-design.de
756. 756 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/feb-17-little-red-riding-hood-full.png
757. 757 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/feb-17-little-red-riding-hood-preview.png
758. 758 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-320×480.png
759. 759 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-1024×768.png
760. 760 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-1280×1024.png
761. 761 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-1440×900.png
762. 762 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-1920×1080.png
763. 763 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-1920×1200.png
764. 764 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/cal/feb-17-little-red-riding-hood-cal-2560×1440.png
765. 765 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-320×480.png
766. 766 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-1024×768.png
767. 767 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-1280×1024.png
768. 768 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-1440×900.png
769. 769 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-1920×1080.png
770. 770 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-1920×1200.png
771. 771 http://files.smashingmagazine.com/wallpapers/feb-17/little-red-riding-hood/nocal/feb-17-little-red-riding-hood-nocal-2560×1440.png
772. 772 http://acodez.in/work.php
773. 773 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/feb-17-the-proud-rooster-full.png
774. 774 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/feb-17-the-proud-rooster-preview.png
775. 775 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-320×480.png
776. 776 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-640×480.png
777. 777 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-800×480.png
778. 778 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-800×600.png
779. 779 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1024×768.png
780. 780 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1024×1024.png
781. 781 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1152×864.png
782. 782 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1280×720.png
783. 783 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1280×960.png
784. 784 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1280×1024.png
785. 785 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1366×768.png
786. 786 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1400×1050.png
787. 787 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1440×900.png
788. 788 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1600×1200.png
789. 789 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1680×1050.png
790. 790 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1680×1200.png
791. 791 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1920×1080.png
792. 792 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1920×1200.png
793. 793 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-1920×1440.png
794. 794 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/cal/feb-17-the-proud-rooster-cal-2560×1440.png
795. 795 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-320×480.png
796. 796 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-640×480.png
797. 797 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-800×480.png
798. 798 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-800×600.png
799. 799 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1024×768.png
800. 800 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1024×1024.png
801. 801 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1152×864.png
802. 802 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1280×720.png
803. 803 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1280×960.png
804. 804 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1280×1024.png
805. 805 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1366×768.png
806. 806 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1400×1050.png
807. 807 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1440×900.png
808. 808 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1600×1200.png
809. 809 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1680×1050.png
810. 810 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1680×1200.png
811. 811 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1920×1080.png
812. 812 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1920×1200.png
813. 813 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-1920×1440.png
814. 814 http://files.smashingmagazine.com/wallpapers/feb-17/the-proud-rooster/nocal/feb-17-the-proud-rooster-nocal-2560×1440.png
815. 815 http://www.facebook.com/doud.design
816. 816 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/feb-17-inertia-full.jpg
817. 817 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/feb-17-inertia-preview.jpg
818. 818 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1280×720.jpg
819. 819 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1280×800.jpg
820. 820 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1280×960.jpg
821. 821 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1280×1024.jpg
822. 822 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1366×768.jpg
823. 823 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1440×900.jpg
824. 824 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1440×1050.jpg
825. 825 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1600×1200.jpg
826. 826 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1680×1050.jpg
827. 827 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1680×1200.jpg
828. 828 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1920×1050.jpg
829. 829 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1920×1200.jpg
830. 830 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-1920×1440.jpg
831. 831 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/cal/feb-17-inertia-cal-2560×1440.jpg
832. 832 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1280×720.jpg
833. 833 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1280×800.jpg
834. 834 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1280×960.jpg
835. 835 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1280×1024.jpg
836. 836 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1366×768.jpg
837. 837 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1440×900.jpg
838. 838 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1440×1050.jpg
839. 839 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1600×1200.jpg
840. 840 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1680×1050.jpg
841. 841 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1680×1200.jpg
842. 842 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1920×1050.jpg
843. 843 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1920×1200.jpg
844. 844 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-1920×1440.jpg
845. 845 http://files.smashingmagazine.com/wallpapers/feb-17/inertia/nocal/feb-17-inertia-nocal-2560×1440.jpg
846. 846 https://www.hotusernames.com
847. 847 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/feb-17-made-in-japan-full.png
848. 848 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/feb-17-made-in-japan-preview.png
849. 849 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1280×720.png
850. 850 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1280×960.png
851. 851 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1400×1050.png
852. 852 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1440×900.png
853. 853 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1600×1200.png
854. 854 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1680×1200.png
855. 855 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1920×1080.png
856. 856 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-1920×1440.png
857. 857 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-2560×1440.png
858. 858 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/cal/feb-17-made-in-japan-cal-3840×2160.png
859. 859 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1280×720.png
860. 860 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1280×960.png
861. 861 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1400×1050.png
862. 862 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1440×900.png
863. 863 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1600×1200.png
864. 864 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1680×1200.png
865. 865 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1920×1080.png
866. 866 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-1920×1440.png
867. 867 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-2560×1440.png
868. 868 http://files.smashingmagazine.com/wallpapers/feb-17/made-in-japan/nocal/feb-17-made-in-japan-nocal-3840×2160.png
869. 869 https://pixiv.me/sunday1216
870. 870 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/feb-17-golden-rooster-full.png
871. 871 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/feb-17-golden-rooster-preview.png
872. 872 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-800×600.png
873. 873 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-1280×720.png
874. 874 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-1280×1024.png
875. 875 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-1366×768.png
876. 876 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-1400×1050.png
877. 877 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-1680×1200.png
878. 878 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-1920×1080.png
879. 879 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/cal/feb-17-golden-rooster-cal-2560×1440.png
880. 880 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-800×600.png
881. 881 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-1280×720.png
882. 882 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-1280×1024.png
883. 883 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-1366×768.png
884. 884 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-1400×1050.png
885. 885 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-1680×1200.png
886. 886 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-1920×1080.png
887. 887 http://files.smashingmagazine.com/wallpapers/feb-17/golden-rooster/nocal/feb-17-golden-rooster-nocal-2560×1440.png
888. 888 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook