Free Fonts With Personality And Style

Quick TipsFree Fonts With Personality And Style

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:

L-7 Stencil Link

Luis Calzadilla’s font L-7 Stencil5 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.

6
Designer: Luis Calzadilla7

Westfalia Link

It’s not only the name of the brush sans Westfalia8 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.

Westfalia9
Designer: Pixelsurplus1610

Setta Script Link

If you’re looking for something to add a personal touch to your projects, the modern calligraphy typeface Setta Script11 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.

Setta Script12
Designer: Ian Mikraz13

Old Growth Link

Inspired by the old growth forests of the West Coast, Old Growth14 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.

Old Growth15
Designer: Pixelsurplus1610

Moderne Sans Link

Inspired by the typography of the 1920’s, Marius Kempken designed Moderne Sans17. 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.

Moderne Sans18
Designer: Marius Kempken19

Octanis Link

The font family Octanis20 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.

Octanis21
Designer: Pavel Korzhenko22

Escafina Link

A balanced upright script with style and moxie. That’s Escafina23. 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.

Escafina24
Designer: Riley Cran25

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 “Noto26”, 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.

Noto27
Designer: Google28

Bonfire Link

To give your project an authentic, handmade touch, Bonfire29 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.

Bonfire30
Designer: Jeremy Vessey31

Etna Link

If you’re looking for a typeface with a seamless flow that still makes a bold statement, Etna32 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.

Etna33
Designer: Krišjānis Mežulis4034

Vintii Link

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

Vintii36
Designer: Evita Vilaka37

Plume Link

To create his typeface Plume38, 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.

Plume39
Designer: Krišjānis Mežulis4034

Coves Link

Simple rounded shapes and a sleek overall look are the determining elements of the font Coves41. 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.

Coves42
Designer: Jack Harvatt43

Zefani Link

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

Zefani45
Designer: Andrew Herndon46

Kano Link

If you’re looking for a font with personality that is humble enough not to steal your content the show, check out Kano47. 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.

Kano48
Designer: Frederick Lee49

Ailerons Link

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

Ailerons51
Designer: Adilson Gonzales de Oliveira Junior52

Noelan Script Link

Do you have a sweet spot for handlettering? Then, take a look at Noelan Script53. 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.

Noelan Script54
Designer: Ndro Adv55

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 Phalanx56, 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.

Phalanx57
Designer: Mark Richardson58

Shkoder 1989 Link

How about some 90s vibes for a change? Shkoder 198959 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.

Shkoder 198960
Designer: Julian Hoxhaj61 and Ana Hoxha62

Wayward Link

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

Wayward64
Designer: Jeremy Vessey65

Aqua Grotesque Link

Aqua Grotesque66 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.

Aqua Grotesque67
Designer: Laura Pol68

Daddy Link

“A funny font for funny people.” That’s how the font Daddy69 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.

Daddy70
Designer: Scott Cohn71

Santral Link

A sharp and precise design that enables a clear communication with the reader – that’s Santral72. 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.

Santral73
Designer: Taner Ardali74

Hensa Link

The hand-painted brush script typeface Hensa75 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.

Hensa76
Designer: Graphic Burger77

Affogato Link

Its high x-height and long descenders make Affogato78 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.

Affogato79
Designer: Eric Lobdell80

Stijla Link

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

Stijla82
Designer: Alfonso Armenteros Parras83

Accent Link

Another rather experimental font is Accent84. 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.

Accent85
Designer: Nelson Balaban86

Soria Link

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

Soria88
Designer: By Dani89

Orkney Link

A unique yet functional font is Orkney90. 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.

Orkney91
Designer: Samuel Oakes92 and Alfredo Marco Pradil93

Multicolore Link

Technically speaking, Multicolore94 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.

Multicolore95
Designer: Ivan Filipov96

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

To Use Or Not To Use: Touch Gesture Controls For Mobile Interfaces

To Use Or Not To Use: Touch Gesture Controls For Mobile Interfaces

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 1980s1 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

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.

6
Chart of gestural controls (Image credit: Touch Gesture Reference Guide) (View large version7)

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

Minority-Report9
(Image credit: YouTube10) (View large version11)

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

Slide-unlock13
Slide to unlock (Image credit: Flickr14) (View large version15)

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 interfaces16, Thomas Joos, contributor to Smashing Magazine, covers this process thoroughly, pointing to YouTube’s Capture application as an example.

Gesture-driven-interface17
“Beyond the Button: Embracing the Gesture-Driven Interface” (Image credit: Smashing Magazine18) (View large version19)

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 step20) can be seen in the Lumosity app.

luminosity-app21
(Image credit: Lumosity262422)

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.

luminosity-app23
(Image credit: Lumosity262422)

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.

luminosity-app25
(Image credit: Lumosity262422)

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.

mobile-menu27
Hamburger menu icon hides navigation controls (Image credit: Wiki Commons28)

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.

mobile-menu29
Minimalist app with subtle cues (Image credit: Solar30)

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

bloom-fm32
Image credit: Bloom.fm33

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:

(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

Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments

Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments

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 projects1 that we heavily rely on2. 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)3”, a friendly web development tutorial for complete beginners.
4
Oliver James’ complete guide to web development5 covers everything from the absolute basics to Flexbox and responsive images. (Image credit6)

Tools & Workflows Link

  • With the Enterprise Onion Toolkit7, 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.js8 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

How Etsy Manages HTTPS AND SSL Certificates For Custom Domains11
Two Etsy devs share how they manage HTTPS and SSL certificates12 for custom domains on Etsy. (Image credit13)

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 Boykis14 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

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 months16, 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 detail17.
  • 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 PDF18 and Audio19 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 donation20 or share this resource with other people. You can learn more about the costs of the project here21. 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

How To Create A Realistic Clock In Sketch

How To Create A Realistic Clock In Sketch

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 file1 (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 One2 | Part Two3) that cover a few key aspects in detail when working with Sketch. You can also have a look at my personal project sketchtips.info4 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.

5
Fig. 1: This is the clock we are going to create. (View large6)

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

Assign an angular gradient to the border with several color stops. The red point marks the start color stop.7
Fig. 2: Assign an angular gradient to the border with several color stops. The red point marks the start color stop. (View large8)

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.

Add two more borders, each with a linear gradient going from the top-left to the bottom-right.9
Fig. 3: Add two more borders, each with a linear gradient going from the top-left to the bottom-right. (View large10)

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

A rectangle in the background with a radial gradient adds depth to the scene.11
Fig. 4: A rectangle in the background with a radial gradient adds depth to the scene. Set the center point (1) to the bottom-right, and drag the indicator on the circle line (2) to the top left, to change its size. (View large12)

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

Create the rectangle for the twelfth hour, and add the remaining marks with the Rotate Copies function. Drag the indicator (red circle) to the intersection of the guides. 13
Fig. 5: Create the rectangle for the twelfth hour, and add the remaining marks with the Rotate Copies function. Drag the indicator (red circle) to the intersection of the guides. (View large14)

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

Use a helper circle with a gray outline to align all of the digits properly.16
Fig. 6: Use a helper circle with a gray outline to align all of the digits properly. (View large17)

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

The minute hand is made of a simple rectangle, with additional points that are slightly moved.18
Fig. 7: The minute hand is made of a simple rectangle, with additional points that are slightly moved. (View large19)

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.

A linear gradient with a hard color stop in the middle gives the minute hand a three-dimensional appearance with a crest. It is achieved with two stops at the same position.20
Fig. 8: A linear gradient with a hard color stop in the middle gives the minute hand a three-dimensional appearance with a crest. It is achieved with two stops at the same position. (View large21)

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.

Use the Rotate icon on the toolbar (1), which lets you alter the rotation point (2). Set it to the intersection of the custom guides, so that you can turn the minute hand like on a real watch. Rotate it by 233 degrees.22
Fig. 9: Use the Rotate icon on the toolbar (1), which lets you alter the rotation point (2). Set it to the intersection of the custom guides, so that you can turn the minute hand like on a real watch. Rotate it by 233 degrees. (View large23)

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.

As a final touch, add a circle on top of the hands, with a radial gradient and a shadow. In the screenshot, you can also see the shadows of the hands.24
Fig. 10: As a final touch, add a circle on top of the hands, with a radial gradient and a shadow. In the screenshot, you can also see the shadows of the hands. (View large25)

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 Handbook2826, written by Christian, and published by Smashing Magazine. The full book (which features many more topics27) 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 Handbook2826, 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

The Role Of Empty States In User Onboarding

Sponsored ArticleThe Role Of Empty States In User Onboarding

The first set of screens with which users interact, set the expectations of the app. To make sure your users don’t delete your app after the first use, you should teach them how to complete key tasks and make them want to come back for more. In other words, you need to successfully onboard and engage your users during those first interactions.

The onboarding process is a critical step in setting up your users for success with your product. You only get one chance to make a first impression. In this article, we’ll provide some tips on how to approach onboarding using a simple pattern called “empty states.” If you’d like to bring your app or website to life with little effort, you can download and test Adobe XD1for free.

Further Reading On SmashingMag: Link

What Is An Empty State? Link

Content is what provides value for most apps. Whether it’s a news feed, a to-do app, or system dashboard, it’s why people use apps – for the content. This is why it’s critical to consider how we design empty states; those moments in a user’s journey where an app might not have content for a user yet.

An app screen whose default state is empty and requires users to go through one or more steps to populate it with data, is perfectly suited to onboarding. Besides informing the user about what content to expect on the page, empty states also teach people how to use your app. Even if the onboarding process consists of just one step, the guidance will reassure users that they are doing the right thing.

5
The empty state in Expensify6 app reassures users by telling them how to get started.

The Value Of An Empty State During Onboarding Link

Consider a “first-use” empty state as part of a cohesive onboarding experience. You should utilize the empty state screen to educate and engage your users. Use this screen as an opportunity to turn a moment of nothing into something.

Educate Users Link

First and foremost, the empty state screen should help users understand the context. Setting expectations for what’ll happen makes users get comfortable. The best way to deliver this information is a show-or-tell format: show the user what the screen will look like when it’s filled with content or tell them with a clear instructions.

Prompt to Action Link

Most empty states will tell you what they are for and why you’re seeing them. But, effective empty states will take this even further and tell you what you can do next. Educating your users is important, but true success in your first empty state means driving an action. Think of this empty state as a starting point and design it to encourage user activity.

Create a Pleasurable User Experience Link

While your app should be functional (it should solve a problem for your users) and usable (it should be easy to learn and easy to use), it should also be pleasurable. Empty states are an excellent opportunity to make a human connection with your users and get across the personality of your app.

How To Design An Ideal Blank State Link

Despite the fact that empty states can engage users, they’re often overlooked during design and development. This happens because we normally design for a populated interface where everything in the layout looks well arranged. However, how should we design our page when the content is pending user action? Empty state design is actually an amazing opportunity for creativity and usability.

Avoid Dead-Ends Link

The absolute worst thing you can do with an empty state is to drop your users into a dead-end. Dead-ends create confusion and lead to additional and unnecessary taps. Consider the difference between the following two examples from Modspot’s Posts screens. The first image is Modspot’s current screen for first-time users; a useful and smartly crafted empty state reduces friction by guiding users along to an action that will get them started.

7
Modspot’s view effectively leverages the empty state to guide users.

The second image is a fake version of the same screen that I’ve created to demonstrate an ineffective empty state that provides no guidance, no examples – only a dead end.

8
A dead-end version of the same screen clearly demonstrates why it’s critical to completely avoid empty states.

Keep Empty States Visually Simple Link

The beauty of a great empty state design is its simplicity. You should use a minimalist design approach in order to bring the most important content to the forefront and minimize distractions. Thus, only include well-written and easily scannable copy (clear, brief descriptions or easy-to-follow instructions) and wrap it together with good visuals.

9
Dropbox10 for iOS

Make Empty States Intuitive Link

Don’t forget that empty states aren’t only about visual aesthetics. They should also help users understand the context. Even if it’s meant to be just a temporary onboarding step, you should maximize its communication value for users and provide directions on how to change an empty state to an active one.

Let’s take an empty state screen from Google Photos as an example. Visually it looks great: a well-composed layout with beautiful graphics. However, this empty state simply doesn’t help users understand the context, and doesn’t provide an answer on following questions:

  • What is a collection?
  • How can I get one?
11
Google Photos12 for iOS.

Let Personality Shine Link

A good first impression isn’t just about usability, it’s also about personality. Personality is what makes your app memorable and pleasurable to use. It may not seem like much, but if your first empty state looks a bit different from similar products, your users will notice and expect the entire product experience to be different, as well. For example, below you can see how Khaylo Workout uses its empty states to convey personality and tone.

13
Khaylo Workout14 for iOS.

Encourage Users to Act Link

Your primary goal is to persuade your users to do something as soon as possible so that the screen won’t be empty. To prompt action on an empty state don’t just show users the benefit they will receive when they interact with your app, but direct them to the desired action as well.

Let’s examine the install screen of Facebook Messenger. When users arrive at this screen, they are met with encouragement – the screen lets users know the benefits of the product (a user can take pictures or record video using Messenger) and tells them how many of their Facebook friends are already using the app. The ‘Install’ button guides users onto the next step necessary to clear up the empty state. Users simply have no other option than to touch install.

15
Facebook for iOS16

If Possible, Provide Content That’s Personalized Link

When you personalize your app for users, you show off the value of your product even faster. The main goal of personalization is to deliver content that matches specific user needs or interests, with no effort from the targeted users. The app profiles the user and adjusts the interface – fill empty states – according to that profile.

Consider providing starter content that will allow users to explore your app right away. For example, a book reading app might provide all users with a few books based on information about a user.

17
Image credits: Material Design18

Bake Emotion Into the UI Link

Empty states can help you show the human side of your business or product. Positive emotional stimuli can build a sense of engagement with your users. What kind of feeling your empty state conveys, depends on the purpose of your app. An example below shows the emotional side of empty state in Google Hangouts and how it can incentivize users to get invites on Hangouts.

19
Google Hangouts20 for Android. (Large preview21)

Of course, showing emotion in design like in the example above is risky – some people don’t get it, and some people may even hate it. But, that’s OK, since emotional response to your design is much better than indifference.

Introduce Success States Link

The moment a first-time user completes an important task is a great opportunity for you to create a positive emotional connection between them and your product. Let your users know that they are doing great by acknowledging their progress and celebrate success with the user.

Success state is an amazing opportunity to congratulate users on a job well done and prompt them toward new interactions. For example, clearing a task list is certainly a positive achievement for Writeupp users. It’s great that the app offers a congratulatory, “Well done!” as a positive reinforcement. This success state delights users and offers next steps to keep them engaged.

22
WriteUpp23 for iOS

Dig In Deeper Link

The following resources can help you find user onboarding and user interface inspiration:

  • Useronboard2624 is a great resource for exploring existing onboarding experiences and reading detailed teardowns.
25
Credits: Useronboard2624 (Large preview27)
  • Uxarchive28 is another great resource that contains breakdowns of onboarding in many popular apps.
  • Ui-patterns3129 has a collection of web-app user onboarding & user interface.
30
Credits: Ui-patterns3129 (Large preview32)
  • Emptystat.es33 is a collection of empty state screenshots that has been taking user submissions since 2013. A majority of screenshots for this article were taken from this resource.

Conclusion Link

Your empty state should never feel empty. Don’t let the user face a blank screen the first time they open an app. Invest in empty states because they aren’t a temporary or minor part of the user experience. In fact, they are just as important as other design components and full of potential to drive engagement and delight users when they have just signed up.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app34 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them – all in one place.

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

(ms, vf, yk, aa, il)

Footnotes Link

  1. 1 https://adobe.ly/2jwvPi9
  2. 2 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  3. 3 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  4. 4 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/12/1-preview-opt.png
  6. 6 https://itunes.apple.com/en/app/expensify-expense-reports/id471713959?mt=8
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-preview-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/12/3-preview-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-preview-opt-1.png
  10. 10 https://itunes.apple.com/en/app/dropbox/id327630330?mt=8
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-preview-opt-2.png
  12. 12 https://itunes.apple.com/us/app/google-photos-free-photo-video/id962194608?mt=8
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/7-preview-opt.png
  14. 14 https://itunes.apple.com/us/app/khaylo-workout/id940269385?mt=8
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-preview-opt-2.png
  16. 16 https://itunes.apple.com/us/app/facebook/id284882215?mt=8
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-preview-opt-1.png
  18. 18 https://material.io/guidelines/patterns/empty-states.html#empty-states-avoiding-completely-empty-states
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-large-opt.png
  20. 20 https://play.google.com/store/apps/details?id=com.google.android.talk&hl=en
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-preview-opt-2.png
  23. 23 https://itunes.apple.com/us/app/writeupp/id989857344?mt=8
  24. 24 http://www.useronboard.com
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-large-opt.png
  26. 26 http://www.useronboard.com
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-large-opt.png
  28. 28 http://uxarchive.com/tasks/onboarding
  29. 29 http://ui-patterns.com/patterns/BlankSlate/examples
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-2.png
  31. 31 http://ui-patterns.com/patterns/BlankSlate/examples
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-2.png
  33. 33 http://emptystat.es/
  34. 34 https://adobe.ly/2jwvPi9
  35. 35 http://adobe.ly/1U9LS0E
  36. 36 https://adobe.ly/2jwvPi9

↑ Back to topTweet itShare on Facebook

HTML APIs: What They Are And How To Design A Good One

HTML APIs: What They Are And How To Design A Good One

As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the curse of knowledge1: 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 poll2, 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!)

3
Poll: “How comfortable are you with JavaScript?” (22 January 20164)

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

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

<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 Wikipedia7, 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 names8 are game, and with the Shadow DOM9, 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. Awesomplete10 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, Prism1711 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 snippet12) 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, Stretchy13 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 discussion14 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 Awesomplete15: 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 directory16 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 Prism1711, 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 this18 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 variables19 are supported by every browser20, 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.currentScript21, and it has very good browser support22. 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 technology23). 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 limited24. 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 MarkApp25. 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

Getting Started With VR Interface Design

Getting Started With VR Interface Design

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

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

6
(View large version7)

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.

8
(View large version9)

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.

10
(View large version11)

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 Visualise12. We did the design, while Visualise created the content and developed the app.

VR working example13
(Large preview14)

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

16
(View large version17)

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.

18
(View large version19)

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.

20
(View large version21)

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.

22
(View large version23)

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.

24
(View large version25)

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

27
(View large version28)

Let’s sum up:

  • 360 View“: 3600 × 1800 pixels
  • UI View“: 1200 × 600 pixels
29
(View large version30)

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.

Using Avocode31
Using Avocode, you can visually compare revisions of designs easily.

Tools Link

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

  • Sketch32
    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 Player33
    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 Rift34
    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.

result preview35

Download the assets pack36, 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.

37
(View large version38)

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.

39
(View large version40)

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.

41
(View large version42)

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.

43
(View large version44)

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.

45
(View large version46)

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.

47
(View large version48)

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 Effects49 and Principle50. 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.

your first VR UI51
You’ve just designed your first VR UI. Check you out! Booty shake.

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

(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

Web Development Reading List #168: Preload With Webpack, A Guide To Security Headers, And Service Worker Fallacies

Web Development Reading List #168: Preload With Webpack, A Guide To Security Headers, And Service Worker Fallacies

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 571. <keygen> will be removed, for example, as well as the prefix in some webkit-prefixed APIs.
  • Chrome 56 is here2 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 soon3 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 point4. 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.
5
A step into the right direction: Analyzing the Alexa top million websites, the percentage of sites that are redirecting users’ browsers from HTTP to HTTPs has doubled from August 2015 to August 20166. (Image credit7)

Tools & Workflows Link

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

Security Link

Privacy Link

  • DuckDuckGo published the results of a study they conducted on the question if private browsing really is private10. 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 paper11 gives interesting insights into how people actually use search engines and how they try to protect their privacy.
Is Private Browsing Really Private?12
Privacy please! DuckDuckGo surveyed 5,710 random Americans to find out what they know about private browsing13 and how they use the common privacy feature.

Web Performance Link

  • Not too long ago, I mentioned an article about QUIC14, 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 protocol15 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 Workers16 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-cli17 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

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation21 or share this resource with other people. You can learn more about the costs of the project here22. 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

Colorful Inspiration For Gray Days: Illustration And Photography At Their Best

Breaking Out Of The BoxColorful Inspiration For Gray Days: Illustration And Photography At Their Best

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.

1
Image credit: Kathrin Honesta2

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.

3
Image credit: Bodil Jane4

Draw Everyday Link

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

5
Image credit: We and The Color6

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.

7
Image credit: Folio Art8

Vita Sackville-West Link

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

9
Image credit: Gosia Herba10

Fire In The Sky Link

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

11
Image credit: Dan Rubin12

The Golden Bicycle Touch Link

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

13
Image credit: Veerle Pieters14

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.

15
Image credit: Ezgi Pamir16

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?

17
Image credit: Strava18

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 here19!

20
Image credit: Florent Hauchard21

Sitting In Green Link

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

22
Image credit: Xuan loc Xuan23

The Law Of Attraction Link

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

24
Image credit: Martin Azambuja25

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.

26
Image credit: Cajsa Holgersson 27

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.

28
Image credit: Eye On Design29

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.

30
Image credit: Brian Miller3331

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!

32
Image credit: Brian Miller3331

Space: Planets, Stars, Rockets Link

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

34
Image credit: Tasty Vector35

Lofoten, Norway Link

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

36
Image credit: Fredrik Meling37

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

39
Image credit: Jun Takahashi40

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.

41
Image credit: Orlin Culture Shop4442

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.

43
Image credit: Orlin Culture Shop4442

Mount Fuji Link

Splendid shot! Stunning light, colors and lovely composition.

45
Image credit: Takashi Yasui46

Light Of A Spring Sunset Link

Beautiful smooth water and great sunlight colors.

47
Image credit: Aleksei Malygin48

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.

49
Image credit: Xoana Herrera50

5 Seasons Link

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

51
Image credit: Killien Huynh5452

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.

53
Image credit: Killien Huynh5452

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.

55
Image credit: Patrick Lowden56

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

58
Image credit: Expedia.ca59

City Streets Link

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

60
Image credit: Matt Carlson61

Tin Star BBQ Link

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

62
Image credit: Steve Wolf63

NYU Travel Link

So many details in this colorful illustration.

64
Image credit: Owen Davey65

Business City Link

Admiring the simplicity in this illustration.

66
Image credit: Vilolett Stolz67

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

68
Image credit: Paolo Pettigiani7169

Colorful And Minimalist Miami Rescue Towers II Link

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

70
Image credit: Paolo Pettigiani7169

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.

72
Image credit: Eleni Kalorkoti73

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!

74
Image credit: Nina Geometrieva75

Sunset Curving Up Link

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

76
Image credit: Historic Lovers Club77

The Martian II Link

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

78
Image credit: From Up North79

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

80
Image credit: Design You Trust81

Feel Good Swing Link

Loving this muted color palette and the organic style.

82
Image credit: Michele Tenaglia8583

Lindy Hop Link

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

84
Image credit: Michele Tenaglia8583

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.

86
Image credit: Colossal87

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.

88
Image credit: Colossal89

Charles Manson Link

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

90
Image credit: Owen Davey91

Sweater Friends Link

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

92
Image credit: Make The Big Eye93

Rough Day At Work Link

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

94
Image credit: Today I love This95

Hong Kong Link

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

96
Image credit: MUTI97

Magazine Italiana Link

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

98
Image credit: Riccardo Guasco10199

Magazine Italiana II Link

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

100
Image credit: Riccardo Guasco10199

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.

102
Image credit: Fubiz103

(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

Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design

Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design

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.

1
We have so many devices today, it’s impossible to assume someone will use mobile. (Image credit2) (View large version3)

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.

A comparison of different screen resolutions.4
A comparison of different screen resolutions, including MacBook Pro, iPhone 4, Traditional/XGA/iPad, BlackBerry 8520/HTC Wildfire, Nokia 5228, and Kindle. (FlySource) (View large version5)

The idea of mobile-first was a triumph for the user. In 2009, Luke Wroblewski introduced6 this best practice. Karen McGrane added to the conversation7 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 people8 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-task9, making it even more vital that we focus our content and create consistency across the experiences. In healthcare, 50% of smartphone users download health apps10 — which also means that 50% do not yet.

In a recent report on mobile marketing statistics, Smart Insights’ founder Dave Chafey analyzed the reports11 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?

Apple watch on a wrist, helping someone find their car.12
The Internet of Things connects physical devices to one another and to us, like this Apple Watch app that helps people find their car. (Image credit13) (View large version14)

The divide between online and offline has dissolved as the Internet of Things15 expands, and our experiences are likely to cross between phone, laptop, tablet, TV, watch, refrigerator, car and even toilet16! 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 personas17, 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.

An ecosystem web18
An ecosystem web can be as loose or tightly connected as the touchpoints it displays. (Image: Amy Cueva, Mad*Pow19) (View large version20)

All of these touchpoints come together in an ecosystem web21, 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 interaction22? 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.

A full storyboard showing how a patient would interact with an app.23
For a project designed to help rheumatoid arthritis patients, we sketched out a full storyboard to understand the touchpoints between patient, doctor, application and website. The information on the phone represented the ideas we were going to design, rather than the exact content and UI. (Image credit24) (View large version25)

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

(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

Live Stream From Awwwards London Conference: Chat Bots, Virtual Reality, And The Future Of UX

Live Stream From Awwwards London Conference: Chat Bots, Virtual Reality, And The Future Of UX

Chat bots, virtual reality and conversational design are just a few of the hot topics that are about to change the way we craft digital experiences. So, it’s a good time to rethink current practices and prepare for what’s about to come, don’t you think?

To give us all an early head start into the future of designing meaningful experiences, we are happy to live stream the backstage interviews which we’ll hold at the Awwwards Digital Design Conf in London1 today. Kindly organized by our good friends at Adobe.

Join Vitaly and creative digital thinkers and designers today, live from the Awwwards Conference in London. Starting at 12 PM GMT. (Watch and send in questions on YouTube2)

We’ll sit down with some of the creative minds out there to discuss their workflows, techniques, failures and lessons learned from crafting digital experiences today. We’ll talk about ongoing and upcoming developments and the challenges they bring along for you as a designer. Light-bulb moments are guaranteed.

Sounds good? Well then, prepare yourself a nice cuppa coffee, or better yet, find a comfy spot not too far away from the coffee machine: the 5-hour long live stream will start right here on Thursday, February 2nd at 12 PM GMT.

What’s The Live Stream About? Link

Designing for the web today isn’t easy. We have to deal with so many unknowns – ranging from screen sizes to network conditions to capabilities of devices. To manage this unpredictability, we tend to rely on predictable patterns – predictable solutions which bring us to predictable results — faster. However, as a result, we tend to create same-looking experiences as well.

The live stream today will explore how we can break out of the box and create unpredictable, delightful experiences based on the new possibilities web technologies offer today. We’ll discuss all those fancy new technologies such as AR/VR, conversational interfaces and new hardware capabilities with established designers and developers from the industry to find out how we can apply them in our work, too.

We’ll talk about how we all can use these technologies in actual projects and how other designers and developers out there make use of them already. More importantly, you’ll get insights into lessons learned from their work – things that worked well, failures and successes, and the rationale behind all of the design decisions in-between.

You’ll find the schedule below, so you can jump in and out whenever you are interested, or just having lunch! There will be 20-25 min interview sessions, with short breaks in-between, in addition to two panels, in the middle and end of the day.

Send your questions! This is going to be quite a day, and we’d love you to be a part of it! We highly encourage you to take part in the livestream and send in your questions in the live chat window on YouTube3. We’ll moderate all questions and we’ll ask our speakers live during the Q&A. Big thanks to Adobe and Awwwwards for making it all possible!

Schedule Link

  • 12.00 PM

    Opening talk with your host, Vitaly Friedman.
  • 12.15 PM

    Adobe XD Keynote: “Assumptions Prohibited” by Andre Jay Meissner.
  • 12.45 PM (changed!)

    Interview with Julien Denoel, Christophe Mallet and Ramy Najjar from Exze about VR and its design challenges connected to it.
  • 1.10 PM (changed!)

    Interview with Paul Boag about digital strategy, new UX challenges (chat bots, small screens, VR) and UX in a responsive world.
  • 1.35 PM

    UX Panel with Chris Constantine (Head of UX at Syzygy) and Iain McConchie (Head of Design at The App Business).
  • 1.05 PM

    Interview with Keiichi Matsuda on augmented (hyper)reality, filmmaking and UX/UI.
  • 2.30 PM

    Interview with Oliver Reichenstein (iA) on the role of iconography in interface design and what’s coming up next in typography on the web.
  • 2.55 PM

    Interview with Adrian Zumbrunnen (Google) about conversational interfaces and chatbots.
  • 3.20 PM

    Interview with Stefanie Posavec, a data-centered designer, on how to make sense of data and how to kick off a heavy data-focused project.
  • 3.45 PM

    Interview with Andrew Herzog, design and thinker at Google Creative Lab.
  • 4.10 PM

    Interview with Lin Yi-Wen and Bertrand Carrara from Kuafu on how customers use VR and what it means for UX designers in terms of process and tooling.
  • 4.25 PM

    We’ll sit down for a UX panel with some AWWWARDS nominees, including Andy Thelande (Active Theory), Bryan James, Henry Daubrez and Gilles Bazelaire (Dogstudio), Thomas Ragger (Wild), Keitaro Suzuki (Shiftbrain), Enea Rossi (Adoratorio), Your majesty and Build in Amsterdam. We’ll try to get as many practical tips from practitioners in the industry as possible.
  • 5.00 PM

    Goodbye from London!

SmashingConf UX Talks Highlights Link

Not enough? Well, to help the learning continue even after the live stream has ended, we did some digging in our own archives, as well to bring you eleven timeless SmashingConf talks that’ll take your UX skills to the next level. After all, a good foundation is the best way to be equipped for the new challenges that the future might bring, right? Happy learning!

15 Lessons From 15 Years In UX Link

After a decade and a half as a user experience professional, Jesse James Garrett has had more than his fair share of scrapes and bruises. In this presentation, he reflects on what he’s learned about what it really takes to deliver great UX work, from working with teams and managing stakeholders to breaking a creative rut and finding innovative solutions to design problems.

4
15 Lessons From 15 Years In UX5, Jesse James Garrett, SmashingConf New York 2014

The UX Of User Experience Link

UX design is all the rage at the moment, but how usable is it as a process? When the top industry experts can’t even agree to its definition (or it’s existence) how are you supposed to bake it into your practice, let alone sell it to your clients? In fact, should you or your clients even care? In this session Andy Budd will try to demystify some of the rhetoric and dogma floating around about User Experience Design and explain what should and shouldn’t matter to your business, your clients, and your day-to-day work as a web designer.

The UX Of User Experience6
The UX Of User Experience7, Andy Budd, SmashingConf San Francisco 2015

The Why And How Of Designing For People Link

Often when solving design problems we take into account the demands of stakeholders, or our desire to create beautiful work. These are both valuable for informing the choices we make, but there’s another factor that’s imperative to our design’s success: the needs of real people. Meagan Fisher will share why human need matters in design, why we resist getting close to our users, and easy ways to put users front and center in our process.

The Why And How Of Designing For People8
The Why And How Of Designing For People9, Meagan Fisher, SmashingConf Oxford 2015

Vision, Hearing, And The Brain: The Top 10 Things You Need To Know About Perception Link

When you design a website, an app, software, or a product, you expect a human to interact with your design with their perceptual and sensory systems. If you want to design a product that is easy to use, engaging, and that meets your goals and objectives for user experience, you need to know about the psychology of perception. In this talk, Susan Weinschenk will share her top ten most important research studies on perception – concentrating on vision and hearing.

Vision, Hearing, And The Brain: The Top 10 Things You Need To Know About Perception10
Vision, Hearing, And The Brain: The Top 10 Things You Need To Know About Perception11, Susan Weinschenk, SmashingConf San Francisco 2016

Psychology And The Perfect Design Link

Joe Leech will take you on a journey to find the holy grail we are all looking for: the “perfect” design. To get you a step closer to finding it, he’ll share a practical strategy that uses psychology to produce the ideal design for those tricky user experience design problems we face everyday.

Psychology And The Perfect Design12
Psychology And The Perfect Design13, Joe Leech, SmashingConf Oxford 2014

Overthinking Design And Embracing Minutia Link

As experience designers, we spend our days, and often nights, working hard to solve problems for people. Often, the focus of our work is solely put on how a user will interact with any given digital experience. We’re told to work quickly, fail fast, and to not overthink it. What we tend to miss are the many touch points that can help shape the larger user experience and enable customers to have an emotional connection to a product, a service or a company. In this talk, Jon Setzen will explain how embracing a “design for service” thinking can help digital design teams shift from transaction-driven thinking to a relationship-centric approach.

Overthinking Design And Embracing Minutia14
Overthinking Design And Embracing Minutia15, Jon Setzen, SmashingConf Oxford 2016

Designing Choice Link

Can good design turn people into better citizens? In this talk Adrian Zumbrunnen will discuss how design can drive behavior, the responsibilities of our craft, and explore a few rules we can use to nudge people in our desired direction.

Designing Choice16
Designing Choice17, Adrian Zumbrunnen, SmashingConf Barcelona 2016

The Tail And Its Dog Link

Our current focus on components, design systems, pattern libraries, and frameworks has helped make design and development easier for us. It’s made it easier for us to make things consistent. But it has also provided fertile ground for design sameness and boring websites. One part of art direction is focusing on the details. But another part, the part that should define the details, the part too often quietly kicked under the bed, so people don’t see it, is the big picture. In this talk, Stephen Hay will talk about stepping back and looking at how all the small parts of your design can add up to a meaningful experience. That also involves looking at how meaningful experience can lead to all the small parts of your design.

The Tail And Its Dog18
The Tail And Its Dog19, Stephen Hay, SmashingConf Barcelona 2016

The Secret Life Of Comedy Link

It has never been easier to make a website, and our digital toolbox has never been greater. At the same time, we seem more concerned with automating our process and systemising design than with creative thinking and generating ideas. Is web design purely about utility? Is it all about convention? Is it a science? Or, is there room for beauty, expression and art? In this talk, Espen Brunborg will take a tongue-in-cheek look at the state of web design, explore different creative mindsets, and show how adding a pinch of comedy can make a real difference to the bottom line.

The Secret Life Of Comedy20
The Secret Life Of Comedy21, Espen Brunborg, SmashingConf New York 2016

Addicted To Community Link

Based on his experience at Stack Overflow and Discourse, Jeff Atwood talks about building a habit forming community based on fun, tangible progress, and respect. It’s about how to gently guide your community members down the path toward mutual cooperation. You’ll gain a closer look at how Q&A and Discussion are different and how they can learn from each other and at building habits that lead to positive community behaviors.

Addicted To Community22
Addicted To Community23, Jeff Atwood, SmashingConf San Francisco 2016

Magical UX And The Internet Of Things Link

What if this thing was magic? The web is touching everyday objects now, and designing for the internet of things means blessing everyday objects, places, even people with extraordinary abilities—requiring designers, too, to break with the ordinary. Designing for this new medium is less a challenge of technology than imagination. Sharing a rich trove of examples, Josh Clark explores the new experiences that are possible when anything can be an interface.

Magical UX And The Internet Of Things24
Magical UX And The Internet Of Things25, Josh Clark, SmashingConf New York 2015

Still Have Coffee Left In Your Cup? Link

Well then, why not watch a couple more SmashingConf videos? Our Vimeo channel26 has got you covered.

(il, aa)

Footnotes Link

  1. 1 http://conference.awwwards.com/london-2017/
  2. 2 https://www.youtube.com/watch?v=5VZNJ0Y7ggM&feature=youtu.be
  3. 3 https://www.youtube.com/watch?v=5VZNJ0Y7ggM&feature=youtu.be
  4. 4 https://vimeo.com/102373044
  5. 5 https://vimeo.com/102373044
  6. 6 https://vimeo.com/128771442
  7. 7 https://vimeo.com/128771442
  8. 8 https://vimeo.com/124495109
  9. 9 https://vimeo.com/124495109
  10. 10 https://vimeo.com/162935387
  11. 11 https://vimeo.com/162935387
  12. 12 https://vimeo.com/96426731
  13. 13 https://vimeo.com/96426731
  14. 14 https://vimeo.com/160593675
  15. 15 https://vimeo.com/160593675
  16. 16 https://vimeo.com/190908713
  17. 17 https://vimeo.com/190908713
  18. 18 https://vimeo.com/190403456
  19. 19 https://vimeo.com/190403456
  20. 20 https://vimeo.com/173326452
  21. 21 https://vimeo.com/173326452
  22. 22 https://vimeo.com/162935384
  23. 23 https://vimeo.com/162935384
  24. 24 https://vimeo.com/132548195
  25. 25 https://vimeo.com/132548195
  26. 26 https://vimeo.com/search?q=smashingconf

↑ Back to topTweet itShare on Facebook

From The Design Community With Love: Unique And Inspiring Desktop Wallpapers

From The Design Community With Love: Unique And Inspiring Desktop Wallpapers

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 years1 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 magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Further Reading on SmashingMag: Link

Balloons

Designed by Xenia Latii6 from Germany.

7

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 DiAntonio49 from Ohio, USA.

Febpurrary50

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 Design84 from Australia.

To Love And Be Loved85

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 Keller109 from Mexico.

Same Poles Can Make It Work110

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 Karmakar162 from India.

Stolen Heart163

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 Hirsman181 from Croatia.

Minimalistic Love182

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 Bogemans202 from Belgium.

Love Boat Baby203

Be Mine!

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

Be Mine!246

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 Kong254 from Hong Kong.

Food Crush255

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 Colorgraphicz291 from India.

The Day Of Love292

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-Sharif300 from the United Arab Emirates.

Love In Winter301

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 Sil345 from India.

A Day Of Love346

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 Perfect376 from Jaipur, India.

Be My Queen377

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 Nastase427 from Romania.

Traditional Love428

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 Frolo470 from the United States.

For The Birds471

Love, Love

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

Love, Love502

Love Is In The Air

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

Love Is In The Air523

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 Adamitis543 from Houston, Texas.

Soft Sunset, Warm Hearts544

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 Jeugt586 from Belgium.

Give The World Some Love587

“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 Studio601 from Serbia.

“Greben” Icebreaker602

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 Valenzuela646 from Spain.

In Another Place At The Same Time647

February Ferns

Designed by Nathalie Ouederni667 from France.

February Ferns668

Winter Wonderland

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

Winter Wonderland685

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 Begum725 from the United Kingdom.

Happy Birthday Charles Dickens!726

Snowy Sunset

Designed by Nathalie Croze744 from France.

Snowy Sunset745

Little Red Riding Hood

Designed by Gregor Haslinger755 from Germany.

Little Red Riding Hood756

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 Solutions772 from India.

The Proud Rooster773

Inertia

Designed by Elise Vanoorbeek – Doud815 from Belgium.

Inertia816

Made In Japan

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

Made In Japan847

Golden Rooster

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

Golden Rooster870

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 month888!

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

Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks

Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks

When working in a team, we focus so much on the work, that we often forget that we all have something in common. Something that is so obvious that we underestimate it: we all are human beings. And well, if we want to grow as a team and get better at what we do, we should embrace this fact more. In fact, I just came back from a week-long team retreat where we had team activities, team games, and sessions and discussions about how we can achieve just that.

We figured out how much we value diversity, we realized how different the English language and its words are perceived by people from different countries, and we’ve seen short talks on various topics like work-life-balance but also on technical stuff like Docker or intercepting any computer’s traffic with a Raspberry Zero. So if you have the chance to work in a team, use the opportunity and exchange views and share information with your co-workers. Work is part of your life, so why not make it a lovely part?

News Link

  • Say hello to Firefox 511. It ships unprefixed ::placeholder, broader ES2015 support, WebGL 2, IndexedDB v2, and tabindex for SVG. Scripts served with an image/*, video/*, audio/* or text/csv MIME type are now blocked.
  • Samuel Reed shares how Google Chrome 56 will make throttling of background tabs more aggressive2, what this actually means and what the plans for Chrome 57 are.

General Link

Tools & Workflow Link

Security Link

Web Performance Link

HTML & SVG Link

  • SVG icons often have one problem: They don’t align well to the text surrounding them. Elliot Dahl explains how to fix that9.
10
SVG icons and text neatly aligned. Elliot Dahl explains how to do it11.

JavaScript Link

How To Build An Accessible Tooltip14
How can you make a tooltip like the one in the top right corner accessible? Sara Soueidan explains15. (Image credit16)

CSS/Sass Link

  • Rachel Andrew explains the new display property value flow-root17 that was added to Chrome and Firefox (both Nightly/Canary only) and why it will finally replace the old clearfix hacks that we’re currently using to fix parent box sizes when floating inner elements.

Work & Life Link

Going Beyond… Link

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

— Anselm

Footnotes Link

  1. 1 https://developer.mozilla.org/en-US/Firefox/Releases/51
  2. 2 http://blog.strml.net/2017/01/chrome-56-now-aggressively-throttles.html
  3. 3 https://wdrl.info/archive/137/bits-up-cache-control-immutable
  4. 4 https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/
  5. 5 https://annevankesteren.nl/2017/01/secure-secure-shell
  6. 6 https://jkphl.is/articles/certbot-http-public-key-pinning-hpkp/
  7. 7 https://ma.ttias.be/return-unauthenticated-unfirewalled-protocols/
  8. 8 https://blog.twitter.com/2017/the-infrastructure-behind-twitter-scale
  9. 9 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  10. 10 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  11. 11 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  12. 12 https://sarasoueidan.com/blog/accessible-tooltips/
  13. 13 https://mathiasbynens.be/notes/es-regexp-proposals
  14. 14 https://sarasoueidan.com/blog/accessible-tooltips/
  15. 15 https://sarasoueidan.com/blog/accessible-tooltips/
  16. 16 https://sarasoueidan.com/blog/accessible-tooltips/
  17. 17 https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/
  18. 18 http://larahogan.me/blog/better-meetings/
  19. 19 https://superyesmore.com/productivity-has-a-personality-8d71d90938e9a85b64bb67dcfe06012c
  20. 20 https://slapdashery.org/thinking-with-paper-6e1064b1c67a
  21. 21 https://wdrl.info/donate
  22. 22 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

30 Sugar-Sweet Valentine’s Day Icons

Freebie30 Sugar-Sweet Valentine’s Day Icons

So, you want to give your projects some extra love? With Valentine’s Day coming up soon, we’ve got a fresh new set that consists of a delicious selection — just like a good box of chocolates. Take a peek, and you’ll find icons especially tailored to e-commerce1 projects (such as shopping carts and price tags), but also some more versatile motifs like a love letter, calendar, and even a WiFi sign that sends off some lovely vibes.

2
Sugar-sweet icons dedicated to special designers and websites (Large preview3)

This catchy icon set is available in two different styles — each available in AI, SVG, EPS, Sketch, CSH and PNG formats. Thanks to the creative minds behind Roundicons104 who created these 30 sugar-sweet icons dedicated just for you to use for all things valentine. Perfect to spread some love, and hopefully, conquer the hearts of your users.

Further Freebies on SmashingMag: Link

Full Preview Of The Icon Set Link

Please note that the set is released under a Creative Commons Attribution 3.0 Unported8. This means that you may modify the size, color and shape of the icons (more details in the readme.txt file). No attribution is required, however, reselling of bundles or individual pictograms is not cool. If you would like to spread the word in blog posts or anywhere else, please also remember to credit the designers and provide a link to this article.

9
Full preview of the icon set

Download The Icon Set For Free Link

Insights From The Designers Link

“We’re proud to share this icon set: it’s part of a 4-year-old project that is being used by thousands of designers around the world, and will keep growing. We hope you like each one, and don’t forget to spread the love!”

A big thank you to Roundicons — we sincerely appreciate your time and efforts. Keep up the brilliant work!

(il, cm)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/09/freebie-e-commerce-icons-33-png-ps-ai/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Valentine-icons-flat-line-800w-opt.jpg
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Valentine-icons-flat-line-800w-opt.jpg
  4. 4 https://roundicons.com/
  5. 5 https://www.smashingmagazine.com/valentines-day-wallpapers/
  6. 6 https://www.smashingmagazine.com/2013/02/valentines-freebie-icon-set/
  7. 7 https://www.smashingmagazine.com/2012/02/freebie-valentines-day-icon-set/
  8. 8 https://creativecommons.org/licenses/by/3.0/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Valentine-icons-flat-line-800w-opt.jpg
  10. 10 https://roundicons.com/
  11. 11 http://provide.smashingmagazine.com/Freebies/smashingmag-freebie-sugar-sweet-val-icons.zip

↑ Back to topTweet itShare on Facebook