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

How Mail.Ru Reduced Email Storage From 50 To 32 PB

case studyHow Mail.Ru Reduced Email Storage From 50 To 32 PB

When the Russian ruble’s exchange rate slumped two years ago, it drove us to think of cutting hardware and hosting costs for the Mail.Ru email service. To look at ways to save money, let’s first take a look at what email consists of.

1

Indexes and bodies account for only 15% of the storage size, whereas 85% is taken up by files. So, optimization of files (that is, attachments) is worth exploring in more detail. At the time, we didn’t have file deduplication in place, but we estimated that it could shrink the total storage size by 36%, because many users receive the same messages, such as price lists from online stores and newsletters from social networks that contain images2 and so on. In this article, I’ll describe how we implemented a deduplication system under the guidance of PSIAlt3.

Further Reading on SmashingMag: Link

Meta Data Storage Link

We’re dealing with a stream of files. When we receive a message, we must deliver it to the user as soon as possible. We need to be able to quickly recognize duplicates. An easy solution would be to name files based on their contents. We’re using SHA-1 for this purpose. The initial name of the file is stored in the email itself, so we don’t need to worry about it.

Once a new email arrives, we retrieve the files, compute their hashes and add the result to the email. It’s a necessary step to be able to easily locate the files belonging to a particular email in our future storage when this email is being sent.

Now, let’s upload a file to our storage and find out whether another file with the same hash already exists there. This means we’ll need to store all hashes in memory. Let’s call this storage for hashes “FileDB.”

8

A single file can be attached to different emails, so we’ll need a counter that keeps track of all emails containing this file.

9

The counter increments with every new file uploaded. About 40% of all files are deleted, so if a user deletes an email containing files uploaded to the cloud, the counter must be decremented. If the counter reaches zero, the file can be deleted.

Here we face the first issue: Information about an email (indexes) is stored in one system, whereas information about a file is stored in another. This could lead to an error. For example, consider the following workflow:

  1. The system receives a request to delete an email.
  2. The system checks the email indexes.
  3. The system can see there’s an attachment (SHA-1).
  4. The system sends a request to delete a file.
  5. A crash occurs, so the email doesn’t get deleted.
10

In this case, the email stays in the system, but the counter gets decremented by 1. When the system receives a second request to delete this email, the counter gets decremented again — and we could encounter a situation in which the file is still attached to an email but the counter is already at 0.

11

Not losing data is critical. We can’t have a situation in which a user opens an email and discovers no attachment there. That being said, storing some redundant files on disks is no big deal. All we need is a mechanism to unambiguously determine whether the counter is correctly set to 0. That’s why we have one more field — magic.

12

The algorithm is simple. Along with the hash of a file, we store a randomly generated number in an email. All requests to upload or delete a file take this random number into account: In case of an upload request, this number is added to the current value of the magic number; if it’s a delete request, this random number is subtracted from the current value of the magic number.

Thus, if all emails have incremented and decremented the counter the correct number of times, then the magic number will also equal 0. Otherwise, the file must not be deleted.

Let’s consider an example. We have a file named sha1. It’s uploaded once, and the email generates a random (magic) number for it, which is equal to 345.

13

Then a new email arrives with the same file. It generates its own magic number (123) and uploads the file. The new magic number is added to the current value of the magic number (345), and the counter gets incremented by 1. As a result, what we have in FileDB is the magic number with the value of 468 and the counter set to 2.

14

After the user deletes the second email, the magic number generated for this email is subtracted from the current value of the magic number (468), and the counter gets decremented by 1.

15

Let’s first look at the normal course of events. The user deletes the first email, and the magic number and the counter both become 0. This means the data is consistent and the file can be deleted.

16

Now, suppose something goes wrong: The second email sends two delete requests. The counter being equal to 0 means there are no more links to the file, but the magic number, which equals 222, signals a problem: The file can’t be deleted until the data is consistent.

17

Let’s develop the situation a little more. Suppose the first email also gets deleted. In this case, the magic number (-123) still signals an inconsistency.

18

As a safety measure, once the counter reaches 0 but the magic number doesn’t (in our case, the magic number is 222 and the counter is 0), the file is assigned a “Do not delete” flag. This way, even if — after a series of deletions and uploads — both the magic number and the counter somehow become 0, we’ll still know that this file is problematic and must not be deleted. The system isn’t allowed to generate a magic peer 0. If you send 0 as the magic number, you’ll receive an error.

Back to FileDB. Every entity has a set of flags. Whether you plan to use them or not, you’re going to need them (if, say, a file needs to be marked as undeletable).

19

We have all of the file attributes, except for where the file is physically located. This place is identified by a server (IP) and a disk. There should be two such servers and two such disks. We store two copies of each file.

20

But one disk stores a lot of files (in our case, about 1 million), which means these records will be identified by the same disk pair in FileDB, so storing this information in FileDB would be wasteful. Let’s put it in a separate table, PairDB, linked to FileDB via a disk pair ID.

21

I guess it goes without saying that, apart from a disk pair ID, we’ll also need a flags field. I’ll jump ahead a bit and mention that this field signals whether the disks are locked (say, one disk has crashed and the other is being copied, so no new data can be written to either of them).

22

Also, we need to know how much free space each disk has — hence, the corresponding fields.

23

To make sure everything works fast, both FileDB and PairDB must be RAM-resident. We were using Tarantool 1.5, but now the latest version should be used. FileDB has five fields (20, 4, 4, 4 and 4 bytes long), which add up to 36 bytes. Also, each record has a 16-byte header, plus a 1-byte length pointer per field, which brings the total record size to 57 bytes.

24

Tarantool allows you to specify the minimum allocation size, so memory-associated overhead can be kept close to zero. We’ll be allocating the exact amount of memory needed for one record. We have 12 billion files.

(57 * 12 * 10^9) / (1024^3) = 637 GB

But that’s not all, we’ll also need an index on the sha1 field, which adds 12 more bytes to the total record size.

(12 * 12 * 10^9) / (1024^3) = 179 GB

All in all, 800 GB of RAM are needed. And let’s not forget about replication, which doubles the amount of RAM required.

25

If we buy machines with 256 GB of RAM on board, we’d need eight of them.

We can assess the size of PairDB. The average file size is 1 MB and disk capacity is 1 TB, which allows storage of about 1 million files on a single disk; so, we’d need some 28,000 disks. One PairDB record describes two disks. Therefore, PairDB contains 14,000 records — negligible compared to FileDB.

File Upload Link

Now that we’ve got the database structure out of the way, let’s turn to the API for interacting with the system. At first glance, we need the upload and delete methods. But don’t forget about deduplication: Chances are good that the file we’re trying to upload is already in storage, and uploading it a second time wouldn’t make sense. So, the following methods are necessary:

  • inc(sha1, magic) increments the counter. If a file doesn’t exist, it returns an error. Recall that we also need a magic number that helps to prevent incorrect file deletion.
  • upload(sha1, magic) should be called if inc has returned an error, which means this file doesn’t exist and must be uploaded.
  • dec(sha1, magic) should be called if a user deletes an email. The counter is decremented first.
  • GET /sha1 downloads a file via HTTP.

Let’s take a closer look at what happens during uploading. For the daemon that implements this interface, we chose the IProto protocol. Daemons must scale well to any number of machines, so they don’t store states. Suppose we receive a request via a socket:

26

The command name tells us the header’s length, so we read the header first. Now, we need to know the length of the origin-len file. It’s necessary to choose a couple of servers to upload it. We just retrieve all of the records (a few thousand) from PairDB and use the standard algorithm to find the needed pair: Take a segment with the length equal to the sum of free spaces on all pairs, randomly pick a point on this segment, and choose whatever pair this point belongs to.

27

However, choosing a pair this way is risky. Suppose all of our disks are 90% full — and then we add a new empty disk. It’s highly likely that all new files will be uploaded to this disk. To avoid this problem, we should sum not the free space of a disk pair, but the nth root of this free space.

So, we’ve chosen a pair, but our daemon is a streaming one, and if we start uploading a file to storage, there’s no turning back. That being said, before uploading a real file, we’ll upload a small test file first. If the test upload is successful, we’ll read filecontent from the socket and upload it to storage; otherwise, another pair is chosen. SHA-1 hash can be read on the fly, so it is also checked during uploading.

Let’s now examine a file upload from a loader to a chosen disk pair. On machines that contain the disks, we set up nginx and use the WebDAV protocol. An email arrives. FileDB doesn’t have this file yet, so it needs to be uploaded to a disk pair via a loader.

28

But nothing prevents another user from receiving the same email — suppose two recipients are specified. Remember that FileDB doesn’t have this file yet, so one more loader will be uploading this very file and might pick the same disk pair for uploading.

29

Nginx would likely resolve this situation correctly, but we need to control the whole process, so we’ll save the file with a complex name.

30

The part of the name in red is where each loader puts a random number. Thus, the two PUT methods won’t overlap and upload two different files. Once nginx responds with 201 (OK), the first loader performs an atomic MOVE operation, which specifies the final name of the file.

31

When the second loader is done uploading the file and also performs MOVE, the file will get overwritten, but it’s no big deal because the file is one and the same. Once the file is on the disks, a new record needs to be added to FileDB. Our version of Tarantool is divided into two spaces. We’ve only been using space0 so far.

32

However, instead of simply adding a new record to FileDB, we’re using a stored procedure that either increments the file counter or adds a new record to FileDB. Why? In the time that has passed since the loader made sure the file doesn’t exist in FileDB, uploaded it and proceeded to add a new record to FileDB, someone else could have uploaded this file and added the corresponding record. We’ve considered this very case: Two recipients are specified for one email, so two loaders start uploading the file; once the second loader finishes the upload, it also proceeds to add a new record to FileDB.

33

In this case, the second loader just increments the file counter.

Let’s now look at the dec method. Our system has two high-priority tasks: to reliably write a file to disk and to quickly give it back to a client from this disk. Physically deleting a file generates a certain workload and slows down these two tasks. That’s why we perform deletions offline. The dec method itself decrements the counter. If the latter becomes 0, just like the magic number, then it means nobody needs the file anymore, so we move the corresponding record from space0 to space1 in Tarantool.

decrement (sha1, magic){ counter-- current_magic –= magic if (counter == 0 && current_magic == 0){ move(sha1, space1) } } 

Valkyrie Link

Each storage has a Valkyrie daemon that monitors data integrity and consistency — and it works with space1. There’s one daemon instance per disk. The daemon iterates over all of the files on a disk and checks whether space1 contains a record corresponding to a particular file, which would mean that this file should be deleted.

34

But after the dec method is called and a file is moved to space1, Valkyrie might take a while to find this file. This means that, in the time between these two events, the file may be reuploaded and, thus, moved to space0 again.

35

That’s why Valkyrie also checks whether a file exists in space0. If this is the case and the pair_id of the corresponding record points to a pair of disks that this Valkyrie instance is running on, then the record is deleted from space1.

36

If no record is found in space0, then the file is a potential candidate for deletion. However, between a request to space0 and the physical deletion of a file, there’s still a window of time in which a new record corresponding to this file might appear in space0. To deal with this, we put the file in quarantine.

37

Instead of deleting the file, we append deleted and a timestamp to its name. This means we’ll physically delete the file at timestamp plus some time specified in the config file. If a crash occurs and the file is deleted by mistake, the user will come to reclaim it. We’ll be able to restore it and resolve the issue without losing any data.

Now, recall that there are two disks, with a Valkyrie instance running on each. The two instances are not synced. Hence the question: When should the record be deleted from space1?

38

We’ll do two things. First, for the file in question, let’s make one of the Valkyrie instances the master. This is easily done by using the first bit of the file name: If it equals zero, then disk0 is the master; otherwise, disk1 is the master.

39

Let’s introduce a processing delay. Recall that when a record sits in space0, it contains the magic field for checking consistency. When the record is moved to space1, this field is not used, so we’ll put there a timestamp corresponding to the time that this record appeared in space1. This way, the master Valkyrie instance will start processing records in space1 at once, whereas the slave will add some delay to the timestamp and will process and delete records from space1 a little later.

40

This approach has one more advantage. If a file was mistakenly put in quarantine on the master, it’ll be evident from the log once we query the master. Meanwhile, the client that requested the file will fall back to the slave — and the user will receive the needed file.

So, we have considered the situation in which the Valkyrie daemon locates a file named sha1, and this file (being a potential candidate for deletion) has a corresponding record in space1. What other variants are possible?

Suppose a file is on a disk, but FileDB doesn’t have any corresponding record. If, in the case considered above, the master Valkyrie instance, for some reason, hasn’t been working for some time, it would mean the slave’s had enough time to put the file in quarantine and to delete the corresponding record from space1. In this case, we would also put the file in quarantine by using sha1.deleted.timestamp.

Another situation: A record exists but points to a different disk pair. This could happen during uploading if two recipients are specified for one email. Recall this scheme:

41

What happens if the second loader uploads the file to a different pair than the first one? It will increment the counter in space0, but the disk pair where the file was uploaded would contain some junk files. What we need to do is make sure these files can be read and that they match sha1. If everything’s fine, such files can be deleted at once.

Also, Valkyrie might encounter a file that has been put in quarantine. If the quarantine is over, this file will get deleted.

Now, imagine that Valkyrie encounters a good file. It needs to be read from disk, checked for integrity and compared to sha1. Then, Valkyrie needs to query the second disk to see if it has this same file. A simple HEAD method is enough here: The daemon running on the second disk will itself check the file’s integrity. If the file is corrupt on the first disk, it’s immediately copied over from the second disk. If the second disk doesn’t have the file, its copy is uploaded from the first disk.

We’re left with the last situation, which has to do with disk problems. If any problem with a disk is identified in the course of system monitoring, the problematic disk is put in service (read-only) mode, while on the second disk, the UNMOVE operation is run. This effectively distributes all of the files on the second disk among other disk pairs.

Result Link

Let’s get back to where we started. Our email storage used to look like this:

42

We’ve managed to reduce the total size by 18 PB after implementing the new system:

43

Emails now occupy 32 PB (25% for indexes, 75% for files). Thanks to the 18-PB cut, we didn’t have to buy new hardware for quite some time.

About SHA-1 Link

As of now, there are no known examples of SHA-1 collisions. There exist collision examples for its internal compression function (SHA-1 freestart collision), though. Given 12 billion files, the probability of a hash collision is less than 10^-38.

But let’s assume it’s possible. In this case, when a file is requested by its hash value, we check whether it has the correct size and CRC32 checksum that were saved in the indexes of the corresponding email during upload. That is to say, the requested file will be provided if and only if it was uploaded along with this email.

(vf, yk, il, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/01/01-preview-opt.png
  2. 2 https://www.smashingmagazine.com/2013/12/imageoptim-cli-batch-compression-tool/
  3. 3 https://www.facebook.com/psialt
  4. 4 https://www.smashingmagazine.com/2014/08/improve-your-email-workflow-with-modular-design/
  5. 5 https://www.smashingmagazine.com/2017/01/making-responsive-html-email-coding-easy-with-mjml/
  6. 6 https://www.smashingmagazine.com/2013/06/email-templates-web-designers-developers-pdf-odt-txt/
  7. 7 https://shop.smashingmagazine.com/products/designing-for-email
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/01/02-preview-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/03-preview-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/04-preview-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/05-preview-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/06-preview-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/07-preview-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/01/08-preview-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/09-preview-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-preview-opt-1.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-preview-opt-1.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-preview-opt-2.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-preview-opt-2.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-preview-opt-2.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/01/15-preview-opt-2.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-preview-opt-2.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-preview-opt-2.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-preview-opt-1.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-preview-opt-1.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-preview-opt-1.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/21-preview-opt-1.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-preview-opt-1.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/01/23-preview-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt-1.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/01/25-preview-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/26-preview-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/01/27-preview-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/01/28-preview-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/01/29-preview-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/01/30-preview-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/01/31-preview-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/32-preview-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/01/33-preview-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/34-preview-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/01/35-preview-opt.png
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/36-preview-opt.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/01/37-preview-opt.png

↑ Back to topTweet itShare on Facebook

The Underestimated Power Of Color In Mobile App Design

Sponsored ArticleThe Underestimated Power Of Color In Mobile App Design

Color is arguably the second most important aspect of your app, after functionality. The human to computer interaction is heavily based on interacting with graphical UI elements, and color plays a critical role in this interaction. It helps users see and interpret your app’s content, interact with the correct elements, and understand actions. Every app has a color scheme, and it uses the primary colors for its main areas.

When designing a new app, it’s often difficult to decide on a color scheme that works well, as there are an infinite number of possible color combinations out there. In this article, we’ll go over the most important points related to color in apps. We’ll cover traditional color scheme patterns (monochrome, analogous, complementary), custom color combinations that aren’t based strictly on any one pattern, and we’ll also learn how to choose colors and contrasts for your app that support usability. If you’d like to hone your own color usage skills, you can download and test Adobe XD1for free, and get started right away.

Further Reading on SmashingMag: Link

How To Select An Effective Color Scheme Link

When creating a color scheme there are many factors to consider, including brand colors and color associations for your region.

How Many Colors?Link

Keeping your color combinations simple will help you improve the user experience6. A simple color scheme isn’t overwhelming to the eye and makes your content easier to understand. Conversely, having too many colors in too many places is an easy way to mess up a design.

A University of Toronto study7 on how people used Adobe Color CC8 revealed that most people preferred simple color combinations that relied on only two to three colors.

How To Create a SchemeLink

So, how do you choose those two or three colors? The color wheel can help.

9
The twelve-spoke color wheel is an important tool in creating color schemes. (Large preview10)

There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners.

MonochromaticLink

Monochromatic schemes are the simplest color schemes to create, as each color is taken from the same base color. Monochromatic colors go well together, producing a soothing effect.

11
Monochromatic colors are a single color, and its tints, shades, and tones. (Large preview12)

The monochromatic scheme is very easy on the eyes, especially with blue or green hues.

13
Image credit: Adobe Color CC36282314. (Large preview15)
16
Image credit: Louis Saville17

As you can see, the scheme looks clean and elegant.

AnalogousLink

Analogous color schemes are created from related colors that don’t stand out from one another; one color is used as a dominant color while others are used to enrich the scheme.

18
Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. (Large preview19)

While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated. For example, Clear20, a gesture-driven21 to-do app, uses the analogous colors to visually prioritize current set of tasks.

22
Image credit: Adobe Color CC36282314. (Large preview24)
25
The default color scheme in Clear is reminiscent of a heat map, where the hotter items are displayed in bright red.

While Calm26, a meditation app, uses the analogous colors blue and green to help users feel relaxed and peaceful.

27
Image credit: Adobe Color CC36282314. (Large preview29)
30
Calm 31uses analogous colors to establish an overall mood.

ComplementaryLink

Colors aren’t always at odds with each other; complementary colors are opposite colors.

32
Complementary colors are opposite of each other on the color wheel. (Large preview33)

They contrast strongly, and they can be used to attract the viewer’s attention. When using a complementary scheme, it is important to choose a dominant color and use its complementary color for accents. For example, when the human eye sees an object full of different hues of greens, a bit of red is going to stand out very well.

34
Using complementary colors is the easiest way to make something to stand out.

However, you have to use complementary colors carefully to keep your content from being visually jarring.

Custom Color SchemeLink

Creating your own color schemes is not as complicated as many people think. Adding a bright accent color into an otherwise neutral palette is one of the easiest color schemes to create, and it’s also one of the most visually striking.

35
Adding one color to a grayscale design draws the eye simply and effectively. Image credit: Adobe Color CC36282314. (Large preview37)

White canvases and cool gray copy, splashed with accents of blue, make up the Dropbox color scheme.

38
Image credit: Dropbox39 (Large preview40)

Adobe Color CC Makes Your Life Easier Link

Adobe Color CC41, previously known as Kuler, makes color selection extremely easy. Every color on the palette can be individually modified or chosen as the base color with a few simple clicks.

42
Under each color, the export codes are provided (including hexadecimal). (Large preview43)
44

Palettes can be saved and added directly to a library. In addition, there are a number of great color schemes created by the community available on the site.

45
Large preview46

Check it out, so you don’t need to start from scratch.

The Impact Of Color Contrast Link

Typically, a colored object or area on a UI is not displayed in isolation, but is adjacent to or superimposed on another colored object or area. This creates contrast effects. Contrast is how one color stands apart from another. Properly used, it reduces eyestrain and focuses user attention by clearly dividing elements on a screen.

47
High contrast is when colors easily stand apart from each other. Low contrast is when they don’t. (Large preview48)

Contrast and Text ReadabilityLink

Color contrast is one area where color theory is crucial to the usability of a design. Designers often like to use low contrast techniques because low contrast makes things look beautiful and harmonious. However, beautiful isn’t always the best for readability. When you’re using colors in text, be aware that placing two colors with low-value contrast next to each other can make your copy very difficult to read. This is especially true on mobile screens, where users are often on devices outdoors or in bright places that cause screen glare.

49
These lines of text are difficult to read against their background colors.

Make sure you have a fair amount of contrast between elements. It’s really not that hard — all you need to do is to check the contrast ratio. Contrast ratios represent how different a color is from another color (commonly written as 1:1 or 21:1). The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The W3C50 recommends51 the following contrast ratios for body text and image text:

  • Small text should have a contrast ratio of at least 4.5:1 against its background.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

This guideline also helps users with low vision, color blindness, or worsening vision see and read the text on your screen.

52
These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

Icons or other critical elements should also use the above-recommended contrast ratios.

53
Left: Icons don’t follow the color contrast ratio recommendations. Right: Icons follow the color contrast ratio recommendations and are legible against their backgrounds. Image credit: Material Design54. (Large preview55)

There are several free tools available to give you meaningful feedback about the levels of contrast in your chosen palette. One of them is WebAIM’s Color Contrast Checker56 which let you test colors you have already chosen.

Contrast and User’s Attention Link

Along with establishing readable text, contrast can also draw the user’s attention towards specific elements on a screen. Generally, high-contrast is the best choice for important content or key elements. So, if you want users to see or click something, make it stand out! For example, users are much more likely to click a call-to-action button that strongly contrasts with its background.

57
Contrast makes the area look different than the rest of the screen.

Designing For Color Blindness Link

Have you thought about your app appears to users who have visual impairments?

When people talk about color blindness58, they usually refer to the inability of perceiving certain colors. Approximately 8% of men and 0.5% of women are affected by some form of color blindness. Red and green colors are a common problematic combination.

59
Colors, as seen with normal vision, and same colors, as seen with red-green color deficiency (Deuteranopia and Protanopia) (Large preview60)

Since colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), it’s important to use multiple visual cues to communicate important states in your app. Never rely on a color solely to indicates system status. Instead, use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.

Avocode lets you visually compare revisions of designs.

Also, Photoshop61 has really useful tools to help, and can simulate color blindness. This feature allows the designer to see what the app’s screen will look like to people with different types of color blindness.

62
Airbnb app login screen Image credit: Pinterest63. (Large preview64)

Conclusion Link

We’ve barely covered the fundamentals of how color theory can enhance your app UI design. Honing your color usage skills is an ongoing endeavor. If you want to learn how to create beautiful, functional color schemes, all it takes is practice, determination, and lots of user testing.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app65 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 Behance66, 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 free67.

(ms, aa, il)

Footnotes Link

  1. 1 https://adobe.ly/2iHmxQr
  2. 2 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  3. 3 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  4. 4 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  5. 5 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  6. 6 https://www.smashingmagazine.com/2010/10/what-is-user-experience-design-overview-tools-and-resources/
  7. 7 http://www.dgp.toronto.edu/~donovan/color/colorcomp.pdf
  8. 8 https://color.adobe.com/create/color-wheel/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/01/2-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/2-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/3-large-opt.png
  14. 14 https://color.adobe.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/3-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-preview-opt.jpg
  17. 17 https://twitter.com/louis_saville
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-large-opt.png
  20. 20 https://itunes.apple.com/en/app/clear-tasks-reminders-to-do/id493136154?mt=8
  21. 21 https://blogs.adobe.com/creativecloud/in-app-gestures-and-mobile-app-user-experience/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-large-opt.png
  23. 23 https://color.adobe.com/
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/01/6-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/01/7-preview-opt.jpg
  26. 26 http://www.calm.com/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-large-opt.png
  28. 28 https://color.adobe.com/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/01/8-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/01/9-preview-opt.png
  31. 31 https://blogs.adobe.com/creativecloud/how-the-calm-app-uses-empathy-and-simplicity-to-connect-with-users/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/01/10-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/01/11-preview-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-1.png
  36. 36 https://color.adobe.com/
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt-1.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt-1.png
  39. 39 https://blogs.dropbox.com/
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt-1.png
  41. 41 https://color.adobe.com/
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt-1.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt-1.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/01/15-preview-opt-1.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt-1.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt-1.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-preview-opt.jpg
  50. 50 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  51. 51 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-preview-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-large-opt.png
  54. 54 http://material.google.com/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2017/01/20-large-opt.png
  56. 56 http://webaim.org/resources/contrastchecker/
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/01/21-preview-opt.png
  58. 58 https://en.wikipedia.org/wiki/Color_blindness#Dichromacy
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-large-opt.png
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2017/01/22-large-opt.png
  61. 61 http://www.adobe.com/accessibility/products/photoshop.html
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt.png
  63. 63 https://ru.pinterest.com/pin/396457573423276783/
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/01/24-preview-opt.png
  65. 65 https://adobe.ly/2iHmxQr
  66. 66 http://adobe.ly/1U9LS0E
  67. 67 https://adobe.ly/2iHmxQr

↑ Back to topTweet itShare on Facebook

Making Responsive HTML Email Coding Easy With MJML

Making Responsive HTML Email Coding Easy With MJML

Email is one of the best ways to engage with your users, especially during the holiday season. However, if you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. Creating responsive email is not an easy task, and there are various reasons for that.

First, there is no standard in the way email clients render HTML. This is true for email clients from different companies, such as Outlook and Apple Mail, but not only. Even different versions of Outlook, such as Outlook 2003, Outlook 2013 and Outlook.com, render HTML differently.

Then, while email clients render HTML, many of them have very limited support of it. Some email clients will just strip the head of your HTML file, including media queries, which is why inline styles are heavily recommended. On a good note, this is moving in the right direction with the Gmail update1.

Now, there are a few techniques out there to help email developers. You might be familiar with some of them, such as the hybrid approach2, the mobile-first approach3 or even the Fab Four technique4 by HTeuMeuLeu5. But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once.

Abstracting Away The Complexity Of Responsive Email With MJML Link

MJML is an open-source framework that abstracts away the complexity of responsive email. The idea behind it is pretty simple. Just as jQuery normalizes the DOM and abstracts low-level interactions and animations, MJML abstracts the low-level hacks for responsive emails with an easy syntax. MJML is responsive by design. This means you can forget about nested tables and conditional comments and, more generally, about making your email responsive. MJML does it for you.

Leveraging a semantic syntax and high-level components such as the carousel6 (yes, you can display an interactive image gallery within an email!), MJML is really easy to learn for anyone. Responsive emails are no longer only accessible to a handful of experts anymore.

7
Example of an MJML component: carousel

Being easy to use doesn’t mean that MJML is not powerful. It just enables experts to streamline their development workflow, while still giving them the flexibility they need with lower-level components such as tables8.

For instance, our example email9 was coded in 788 lines of HTML10 and reproduced in fewer than 240 lines of MJML11.

The Approach Link

MJML is built in React12, a JavaScript library developed and maintained by Facebook, and it leverages the power of React’s components. The component names are semantic, starting with mj-, so that they are straightforward as well as easy to recognize and understand: mj-text, mj-image, mj-button, etc.

MJML will transpile to responsive HTML, following a mix of the mobile-first and hybrid coding approaches. Going mobile-first enables you to make sure that the most readable version is displayed by default in email clients that do not change the layout according to the device used.

For example, in Outlook.com, the mobile version will be displayed on both desktop and mobile (which is far more readable than a desktop version being displayed on mobile). The hybrid approach then enables the layout to change according to the device’s size wherever possible, using a mix of fallbacks, conditional comments, nested tables and media queries to target as many clients as possible. The layout degrades nicely, with multi-column layouts on desktop turning into single-column layouts on mobile.

2-column layout - desktop view.13
Two-column layout, desktop view
2-column layout - mobile view.14
Two-column layout, mobile view

Coding In MJML Link

Before we start the tutorial, let’s get ready to code in MJML. We have different ways to use MJML, such as running it locally15 or using the online editor2316. By choosing the online editor, you’ll be able to start immediately, but running it locally enables you to use MJML with your favorite code editor (with plugins for Atom17, Sublime Text18 and Vim19), task runners such as gulp-mjml20 and grunt-mjml21 and a lot more22.

For this tutorial, the online editor2316 is recommended because it doesn’t require any setup.

If you still want to use it locally, open your terminal and run npm install mjml -g (requires to have Node.js and npm24 installed).

Once MJML is installed, create a file named example.mjml (or any name you like) with some MJML and run mjml -r example.mjml in your terminal (make sure to be in the same folder as the file you’re rendering). It will render your MJML file in a file named example.html, with the responsive HTML inside. You can find all available options for the command line in the documentation25.

Creating Your First Newsletter With MJML Link

Now that you’re all set up, we can start creating a responsive newsletter together. To find inspiration, one of the best places around is ReallyGoodEmails26. I found a great example of a newsletter27 by Thrive Market28. Let’s recreate it with MJML!

(Brand names, logos and trademarks used herein remain the property of their respective owners, and their use does not imply any endorsement by or affiliation with Thrive Market.)

Thrive Market newsletter29
Thrive Market newsletter

First, here is what the basic layout30 of an MJML document looks like:

 <mjml> <mj-head> <!-- Head components go here: https://mjml.io/documentation/#standard-head-components --> </mj-head> <!-- All of the content of our email will go in mj-body --> <mj-body> <!-- mj-container defines the default styling of our email, including the default width, set to 600px but overwritable --> <mj-container> <!-- Body components go here (https://mjml.io/documentation/#standard-body-components) --> </mj-container> </mj-body> </mjml> 

Streamlining The Style Link

While inlining is the norm in HTML to ensure responsiveness, MJML also allows you to create custom MJML classes and MJML styles, which will then automatically be inlined from the head of your MJML file31. In MJML, styles come as component attributes.

<mj-text font-size="20px" color="#F45E43" font-family="helvetica"> Hello World </mj-text>

To start, we’ll set a default sans-serif font family for text components, because sans-serif is used for most text here. Then, we’ll create classes for elements used repeatedly, so that we don’t have to manually set styles over and over again. We could have created more custom classes and styles, but the most useful styles will be for:

  • buttons,
  • image descriptions,
  • text below the six icons in the footer.

Here, we’ll be leveraging head components32 in three ways:

  • Set a default padding of 0 for every component, using <mj-all />. This default padding can be overridden by manually specifying a padding directly on the components we are using.
  • Override the default font family of <mj-text>, using <mj-text /> in the head. Each time we use <mj-text>, the default font family will be sans-serif. We can still manually override this new default font by specifying a new one directly on the component.
  • Create classes using <mj-class /> and, more specifically, using the following mj-classes:
    • pill

      This is to design a nice button. Attributes worth noting are the background-color set to transparent and the inner-padding, used to size the button as we want.
    • desc

      This is to style the descriptions of the images in the two-column layout.
    • ico

      This is to style the text below the six icons just before the footer.
<mj-head> <mj-title>Discover the latest trends</mj-title> <mj-attributes> <mj-all padding="0" /> <mj-text font-family="sans-serif" color="#8e8b85" /> <mj-class name="pill" font-weight="700" color="#d5ad4b" border-radius="50" border="2px solid #d5ad4b" font-size="16px" line-height="16px" padding="8 20 20 20" inner-padding="10 75 10 75" background-color="transparent" /> <mj-class name="desc" font-family="Georgia" font-size="20px" color="#45495d" padding="25 5 10 10" /> <mj-class name="ico" font-family="Helvetica" font-size="14px" align="center" padding="0 0"/> </mj-attributes> </mj-head> 

(As you may have noticed, we have omitted the units on some attributes, such as padding. If you do so, MJML will output the attributes with px by default.)

Adding Content Link

Now that the styles are defined in the head (you can see here33 what your code should look like now), let’s start adding content to our email! MJML layouts are based on <mj-section>34 to create rows and <mj-column>3835 to create columns inside rows, which is very practical for email design. Note that, except for high-level components such as <mj-hero>36 and <mj-navbar>37, content should always be wrapped in a <mj-column>3835, which itself should go in a <mj-section>39, even when there is only one column in a section.

Let’s see this with two examples, the preheader and the header of the email.

Preheader Link

There’s nothing very fancy here. We’re just creating a text preheader using the <mj-text>40 component, wrapped in a column, and giving it some MJML styles.

Hack: <mj-text> enables you to use HTML directly inside MJML, granting you full control over the content and allowing you to use the <span> and <a> tags you’re used to, for example.

 <mj-section padding="0" background-color="#eeebe7"> <mj-column> <mj-text padding="0 2" align="center" font-size="10px"> The latest tips, trends, recipes, and more </mj-text> </mj-column> </mj-section> 

Header Link

Header of the email41
Header of the email

Three-Column Layout for Blog, Logo and Referral Link Link

The header is a bit fancier but very easy to achieve with MJML. All we have to do is create a section that we’ll split into three equal columns (because columns are equal, we don’t even have to manually set the width). We’ll use images as in the original email, leveraging the explicit component <mj-image>42, which comes with the common attributes you would expect, including src, padding and border.

By default, columns will stack in the mobile version of our email. Here, because we want those three columns to stay side by side even on mobile, we’ll wrap them in an <mj-group>43 component, which will prevent the columns from stacking.

Hack: As noted in the documentation, due to a bug in iOS, you might have to use a minifier, or else the columns could stack on iPhone even if they’re wrapped in <mj-group>. The MJML command-line interface44 comes with a built-in minifier45 that you can use to run the -m option when rendering MJML.

<mj-section padding="0" background-color="#ffffff"> <mj-group> <mj-column> <mj-image align="right" padding="40 0 0 0" width="100" href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/blog_zpscedcgvla.jpg" alt="blog" title="blog" /> </mj-column> <mj-column> <mj-image padding="15 0 0 0" href="https://thrivemarket.com/?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/thrive-logo-250_zps4lonavha.jpg" title="logo" alt="logo" /> </mj-column> <mj-column> <mj-image align="left" padding="40 0 0 0" width="100" href="https://thrivemarket.com/customer/account/login/referer/aHR0cHM6Ly90aHJpdmVtYXJrZXQuY29tL2ludml0ZT9jY29kZT1LRzZPQ0QzSCZ1YWV4cHRpbWU9MTc3ODYzNzg2MiZ1YXRva2VuPTE0NjJiOTc3YzFmYTcwYjA5YjU4NWYzYTg5NDNkNzlhNzA3OWFiMzE0MzkzZmU4OTg1MmZkODNmZDA1YjYzMWUmdWlkPTUwMTk4NTAmdXRtX2NhbXBhaWduPWRheTgmdXRtX2NvbnRlbnQ9bGVhZF93ZWxjb21lJnV0bV9tZWRpdW09bGlmZWN5Y2xlJnV0bV9zb3VyY2U9c2FpbHRocnU,/" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/refer_zpsnoo1uzvu.jpg" title="refer and win" alt="refer and win" /> </mj-column> </mj-group> </mj-section> 

One-Column Layout for the GIF and CTA Link

We’ll create another section in which we’ll simply add an image, some text and a button. The only new component here is <mj-button>46, which should be clear enough and which comes with the standard attributes. Please note that you must specify an href, or else the text of the button might not display in some email clients.

<mj-section padding="20"> <mj-column> <mj-image padding="5 0 23 0" width="200px" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/566f6a67e871e_zpskalhjefi.gif" /> <mj-text align="center" font-size="16px"> Your daily destination for healthy living </mj-text> <mj-button padding="20 0 10 0" mj-class="pill" href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"> Read more </mj-button> </mj-column> </mj-section> 

Divider Between Body and Header Link

Yes, there’s a component for that, too! It’s a good practice to split different rows into different sections, instead of dumping everything into the same section, because that gives you more control over styling (especially through padding), and it also makes it easier to isolate any problems that occur.

<mj-section padding="0 0 20 0"> <mj-column> <mj-divider border-width="5px" border-color="#EEEBE7" /> </mj-column> </mj-section> 

We’ll use the same divider between the body and footer later.

Body Link

Now that we have a beautiful header47, let’s start with what seems to be the complex part of this email.

Two-Column Layout That Stacks on Mobile Link

Two-column layout48
Two-column layout

Here, we’ll create a section for each two-column row. Each column will consist of an image, a piece of text and a button. The good news is that, thanks to MJML’s hybrid approach, we don’t have to do anything to make the images stack on mobile. It’s responsive by default!

Regarding the styling, we don’t have much to do because we’re leveraging the mj-classes pill and desc, which we created earlier. All we need to do is add some padding to match the style of the original email.

Hack: Due to an issue with Outlook 2000, 2002 and 2003 ignoring the set width, it’s a good practice in MJML to set images to the sizes you want them to display at in those clients.

<mj-section padding="20 10 0 10"> <mj-column> <mj-image width="280px" href="https://thrivemarket.com/blog/foods-for-happiness?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/5-foods_zps9escvg7g.jpg" /> <mj-text mj-class="desc"> <a href="https://thrivemarket.com/blog/foods-for-happiness?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> 5 Foods to Boost Your Happiness </a> </mj-text> <mj-button mj-class="pill" href="https://thrivemarket.com/blog/foods-for-happiness?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> Read more </mj-button> </mj-column> <mj-column> <mj-image width="280px" href="https://thrivemarket.com/blog/whiten-teeth-instantly-activated-charcoal?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/teeth_zpsr1sycjxi.jpg" /> <mj-text mj-class="desc"> <a href="https://thrivemarket.com/blog/whiten-teeth-instantly-activated-charcoal?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> Whiten Teeth Instantly with Activated Charcoal </a> </mj-text> <mj-button mj-class="pill" href="https://thrivemarket.com/blog/whiten-teeth-instantly-activated-charcoal?uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&uid=5019850&utm_campaign=day8&utm_content=lead_welcome&utm_medium=lifecycle&utm_source=sailthru"> Read more </mj-button> </mj-column> </mj-section> 

Here, we can see that the default HTML style for links is applied. In addition to <mj-attributes>, you can also inline CSS right into MJML using <mj-style>49. Let’s do just that by updating the head to overwrite the default style of links once and for all. We’ll also create a CSS class to apply to the <a> tags to give them the right color (we’re creating a class because the links in the email shouldn’t all have the same color).

 <mj-head> <mj-title>Discover the latest trends</mj-title> <mj-attributes> <mj-all padding="0" /> <mj-text font-family="sans-serif" color="#8e8b85" /> <mj-class name="pill" font-weight="700" color="#d5ad4b" border-radius="50" border="2px solid #d5ad4b" font-size="16px" line-height="16px" padding="8 20 20 20" inner-padding="10 75 10 75" background-color="transparent" /> <mj-class name="desc" font-family="Georgia" font-size="20px" color="#45495d" padding="25 5 10 10" /> <mj-class name="ico" font-family="Helvetica" font-size="14px" align="center" padding="0 0"/> </mj-attributes> <mj-style> a { text-decoration:none; } .desc { color: #45495d; } </mj-style> </mj-head> 

Follow the same steps with the other two-column sections.

Blue Section With CTA Link

Blue section50
Blue section

To create this section, we’ll use the components that we’re getting familiar with: <mj-section>, <mj-column> and <mj-button>.

First, we’ll add a background-color to our section and some padding so that it looks as expected. Then, we just have to create two columns, one wider than the other, leveraging the width attribute with percentages. As usual, columns will stack on mobile. Because the button is different from the others here, we won’t use the pill class, but rather will manually create a new style.

Hack: Because of poor support for shorthand HEX colors in Internet Explorer, we recommend using six-digit HEX colors. This is a hack that we’ll reintegrate in MJML at some point to make sure that three-digit HEX codes are turned into six-digit codes.

<mj-section background-color="#6d8be1" padding="15 40 10 40"> <mj-column width="60%"> <mj-text font-weight="bold" color="#ffffff" font-size="16px" padding="0 0 10 0"> Get all your healthy groceries at Thrive Market! </mj-text> </mj-column> <mj-column width="40%"> <mj-button background-color="#ffffff" color="#45495d" font-weight="800" font-family="sans-serif" font-size="16px" border-radius="2px" inner-padding="15 60"> Shop Now </mj-button> </mj-column> </mj-section> 

Last Section Of The Body Link

Last section of the body51
Last section of the body

To design the title, we’ll create a three-column layout. The columns will consist of the following, respectively:

  • the dark blue line to the left of the title,
  • the title "Want More Tips, Tricks, and Delicious Recipes?",
  • the dark blue line to the right of the title.

Then, we will wrap the three columns in an <mj-group> so that it doesn’t stack on mobile.

We’ll start creating the lines, leveraging the <mj-divider> component, setting its border-width to 2px and adding some padding so that it looks the way we want. By default, the divider will fill the column it’s contained in, so that it looks consistent across devices. Therefore, we don’t need to explicitly set the width of the divider.

Then, we’re just using <mj-text> to add our title, leveraging the desc mj-class (because we want to inherit some of the styles set in this class) and overriding the font-family and align properties that are different from this class. We could have also manually set the style without using the desc mj-class.

Finally, we just have to use our button with the pill mj-class as we did before. We’re overriding the inner-padding because, according to the original design, this button is not as wide as the others.

<mj-section padding="40px 0 0 0"> <mj-group> <mj-column width="12%"> <mj-divider border-width="2px" padding="10 0 0 10" /> </mj-column> <mj-column width="75%"> <mj-text padding="0 0 20 0" mj-class="desc" font-family="Helvetica" align="center"> <a href="https://thrivemarket.com/blog?utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"> Want More Tips, Tricks, and Delicious Recipes? </a> </mj-text> </mj-column> <mj-column width="13%"> <mj-divider border-width="2px" padding="10 10 0 0" /> </mj-column> </mj-group> </mj-section> <mj-section padding="5px"> <mj-column> <mj-image src="https://img.thrivemarket.com/emails/images/img-18.jpg" href="https://thrivemarket.com/blog?utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> </mj-column> </mj-section> <mj-section padding="15px"> <mj-column> <mj-button mj-class="pill" inner-padding="12 25" href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"> Read our Blog </mj-button> </mj-column> </mj-section> 

You can see52 what our MJML template should look like so far.

Footer Link

Footer of the email53
Footer of the email

Title Link

We’re wrapping our title in a section and a column, as we’ve seen before, and we’re using the desc style that we created earlier. We need to alter only a few styles by manually setting a different align, font-size and font-style from our mj-class.

<mj-section background-color="#EEEBE7" padding="25"> <mj-column> <mj-text padding-top="20px" mj-class="desc" align="center" font-size="28px" font-style="italic"> Stay Connected </mj-text> </mj-column> </mj-section> 

Six-Icon Section Link

This section is made up of six icons, with accompanying text below. The icons display side by side on desktop and wrap to two lines of three icons on mobile. By now, you probably know that creating such layouts is easy if we leverage the <mj-column> component. To make the icons stack onto two lines, all we have to do is wrap the columns in two groups of three columns in an <mj-group>.

To design the text below the icons, we just have to use the ico mj-class that we created before. We’ll also create a CSS class named ico to apply to the a tags, like we did in the two-column layout section.

<mj-section padding="40 0"> <mj-group> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-01_zpssvjtmopj.png" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/paleo?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Paleo</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-02_zpshj3vgh1w.png" href="https://thrivemarket.com/gluten-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"/> <mj-text mj-class="ico"><a href="https://thrivemarket.com/gluten-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Gluten Free</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-03_zpshvwomzpo.png" href="https://thrivemarket.com/vegan?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru"/> <mj-text mj-class="ico"><a href="https://thrivemarket.com/vegan?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Vegan</a></mj-text> </mj-column> </mj-group> <mj-group> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-04_zpsyeczb1sp.png" href="https://thrivemarket.com/ingredients/gmo-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/ingredients/gmo-free?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Non-GMO</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-05_zpsryppwpok.png" href="https://thrivemarket.com/certifications/certified-organic?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/certifications/certified-organic?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Organic</a></mj-text> </mj-column> <mj-column> <mj-image padding="10" src="http://i1044.photobucket.com/albums/b447/ngarnier/Thrive%20Market/img-06_zpsoq4ulmbq.png" href="https://thrivemarket.com/raw?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru" /> <mj-text mj-class="ico"><a href="https://thrivemarket.com/raw?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Raw</a></mj-text> </mj-column> </mj-group> </mj-section> 

Social Networks Link

Once again, this section is easy to achieve by leveraging the <mj-column> component, using one column per social network icon and wrapping all of the icons in an <mj-group> so that they don’t stack on mobile. The only trick here is to fine-tune the width of the images and the padding so that the result is consistent with the original design.

Divider and Text Link

Because this part is pretty simple, it’s OK to wrap the divider and the text in the same column and section, even though we could have separated the divider from the text. As we did before when styling the links, we’ll create a footer class so that our links have the proper color.

<mj-section background-color="#EEEBE7" padding="25 40"> <mj-column> <mj-divider /> <mj-text padding="30 0 0 0" align="center" font-size="14"><a href="https://thrivemarket.com/blog?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Read Our Blog</a> <a href="https://thrivemarket.com/">View Email Online</a></mj-text> <mj-text align="center" color="#45495d" font-size="10px" line-height="14px"> <p>Please don't hit 'reply' to this email—we won't be able to email you back from this address and help you thrive! If you need anything, visit our <a href="https://thrivemarket.com/faq?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">FAQ</a> or contact <a href="https://thrivemarket.com/faq/contact?uid=5019850&uaexptime=1778637862&uatoken=1462b977c1fa70b09b585f3a8943d79a7079ab314393fe89852fd83fd05b631e&ccode=KG6OCD3H&utm_content=lead_welcome&utm_medium=lifecycle&utm_campaign=day8&utm_source=sailthru">Member Services</a> anytime, and we'll be happy to help!</p> <p>We don't want to see you go, but if you no longer wish to receive promotional emails from us, you can <a href="https://thrivemarket.com/">unsubscribe here</a> or <a href="https://thrivemarket.com/">change your email preferences</a> anytime.</p> <p>4509 Glencoe Ave, Marina Del Rey, CA 90292 <br />@2016 Thrive Market All Rights Reserved</p> </mj-text> </mj-column> </mj-section> 

Rendering the HTML File and Testing Link

You should now have fewer than 240 lines of MJML (you can check the full code54), whereas the original file was a bit less than 800 lines of HTML. Congrats! You’ve just created your first responsive email using MJML! How easy was that?

Testing how an email renders in different email clients is always a good practice, so let’s do just that using Litmus55 (Email on Acid56 is another great platform for email testing).

Go to Litmus57 (create an account if you don’t have one already), create a new project, and paste the HTML that we generated earlier in the code area. You’ll be able to see the results in various email clients by clicking “Instant Previews” in the right pane. You can see58 the results for major email clients, from Outlook 2003 to Inbox by Gmail.

Going Further Link

Now that you know how to use MJML to easily create a responsive email, why not try to create your own component? My tutorial59 will guide you through this step by step.

What did you think about your first experience with MJML? Feel free to reach out on Twitter60 and join the MJML community now by signing up to the Slack61 channel. You can also subscribe to the newsletter62 to keep up to date on the latest news.

(rb, vf, yk, al, il)

Footnotes Link

  1. 1 https://www.mailjet.com/blog/gmail-responsive-email-design
  2. 2 https://litmus.com/blog/understanding-responsive-and-hybrid-email-design
  3. 3 https://getflywheel.com/layout/design-emails-for-mobile/
  4. 4 https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.86y5xm2q7
  5. 5 https://twitter.com/hteumeuleu
  6. 6 https://mjml.io/documentation/#mjml-carousel
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/mj-carousel-gmail-preview-opt.gif
  8. 8 https://mjml.io/documentation/#mjml-table
  9. 9 http://reallygoodemails.com/wp-content/uploads/discover-the-latest-trends.html
  10. 10 http://codepen.io/mjml/pen/woeNwp
  11. 11 https://mjml.io/try-it-live/templates/thrive_email
  12. 12 https://facebook.github.io/react/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/desktop-view2-preview-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/12/mobile-view2-preview-opt.png
  15. 15 https://mjml.io/download
  16. 16 https://mjml.io/try-it-live
  17. 17 https://atom.io/users/mjmlio
  18. 18 https://packagecontrol.io/packages/MJML-syntax
  19. 19 https://github.com/amadeus/vim-mjml
  20. 20 https://github.com/mjmlio/gulp-mjml
  21. 21 https://github.com/smbeiragh/grunt-mjml
  22. 22 https://mjml.io/community
  23. 23 https://mjml.io/try-it-live
  24. 24 https://nodejs.org/en/
  25. 25 https://mjml.io/documentation/#command-line-interface
  26. 26 http://reallygoodemails.com/
  27. 27 http://reallygoodemails.com/wp-content/uploads/discover-the-latest-trends.html
  28. 28 https://thrivemarket.com/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/thrive-market-newsletter-large-opt.png
  30. 30 https://mjml.io/documentation/#overview
  31. 31 https://mjml.io/documentation/#standard-head-components
  32. 32 https://mjml.io/documentation/#standard-head-components
  33. 33 https://mjml.io/try-it-live/templates/thrive_head
  34. 34 https://mjml.io/documentation/mjml-section
  35. 35 https://mjml.io/documentation/#mjml-column
  36. 36 https://mjml.io/documentation/#mjml-hero
  37. 37 https://mjml.io/documentation/#mjml-navbar
  38. 38 https://mjml.io/documentation/#mjml-column
  39. 39 https://mjml.io/documentation/#mjml-section
  40. 40 https://mjml.io/documentation/mjml-text
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/12/header-preview-opt.png
  42. 42 https://mjml.io/documentation/#mjml-image
  43. 43 https://mjml.io/documentation/#mjml-group
  44. 44 https://mjml.io/documentation/#command-line-interface
  45. 45 https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md#render-and-minify-the-output-html
  46. 46 https://mjml.io/documentation/#mjml-button
  47. 47 https://mjml.io/try-it-live/templates/thrive_header
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/12/2-column-layout-preview-opt.png
  49. 49 https://mjml.io/documentation/#mjml-style
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/12/blue-section-preview-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/12/last-part-preview-opt.png
  52. 52 https://mjml.io/try-it-live/templates/thrive_body
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/12/footer-preview-opt.png
  54. 54 https://mjml.io/try-it-live/templates/thrive_email
  55. 55 https://litmus.com/builder/
  56. 56 https://www.emailonacid.com/
  57. 57 https://litmus.com/builder/
  58. 58 http://imgur.com/a/l3xHE
  59. 59 https://medium.com/mjml-making-responsive-email-easy/tutorial-creating-your-own-mjml-component-d3a236ab7093#.d1ji1oheq
  60. 60 https://twitter.com/mjmlio
  61. 61 https://slack.mjml.io/
  62. 62 http://mjml.io/

↑ Back to topTweet itShare on Facebook

A Case Study: Is App Indexing For Google Worth The Effort?

A Case Study: Is App Indexing For Google Worth The Effort?

Will the resources spent implementing app indexing for Google search be a boon or a bust for your app’s traffic? In this article, I’ll take you through a case study for app indexing at our company, the results of which may surprise you.

App indexing is one of the hottest topics in SEO right now, and in some sense for good reason. Google has only been indexing apps for everyone1 for a little more than two years, and with only 30% of apps being indexed2 there is huge potential for websites to draw additional search traffic to their apps.

What’s more, Google has given not one but two ranking boosts3 to websites that use app indexing and the app indexing API4; so, implementing app indexing for your website is likely to increase your search traffic.

However, when we did it, it was a bust. We got a lot more app traffic from Google search when we implemented app indexing, but it was so little traffic compared to web search at that point that it was almost not worth the effort. Read on to learn more about what we did and what effect it had on our overall traffic.

What Is App Indexing? Link

If you’re not familiar with app indexing5, it is basically the process by which your app appears in Google search results alongside relevant web results. By supporting HTTP URLs in your app and adding the App Indexing SDK, you allow Google to crawl and index your app as it would a web page, and you enable users to install or launch your app from search results when they search with relevant keywords.

If the app is already installed, you’ll see a button to launch it in the relevant search results:

6
View of an indexed app on a Nexus 6P running Android 7.0 when the app is installed on the device. (Image: Bryson Meunier) (View large version7)

If the searcher doesn’t have the app installed yet, they will see an “Install” button in search results:

View of an indexed app on a Nexus 6P running Android 7.0 when the app is not installed on the device.8
View of an indexed app on a Nexus 6P running Android 7.0 when the app is not installed on the device. (Image: Bryson Meunier) (View large version9)

Theoretically, this is great for users because they can find relevant authoritative content in Google regardless of whether they prefer websites or apps, and it’s great for app developers and marketers because it allows apps to be exposed to a whole new audience outside of the app store, potentially increasing app usage and downloads. But “theoretically” doesn’t necessarily mean that app indexing brings a lot of real traffic from search.

While I have seen a lot of great info on how10 and why11 to implement app indexing, I haven’t yet seen a case study on the benefits of app indexing in terms of traffic (though Google does highlight several other benefits12). So, I looked at our app indexing traffic at Vivid Seats so that marketers, developers and webmasters can get a better sense of how much traffic, realistically, they can expect from getting their app indexed.

I want to start the case study with a small caveat: Vivid Seats13 is the largest independent ticket marketplace, and the number-three resale marketplace behind StubHub and Ticketmaster, according to Bloomberg14. As such, we get a lot of web traffic. A website that doesn’t get as much web traffic as we do or an app that has no equivalent website will probably have different results than ours — especially if it’s in a different industry. That said, a lot of large websites might see similar results and might want to adjust their strategy accordingly.

This is also an Android-only case study, because we haven’t yet been given access to the iOS app-indexing beta in Google’s Search Console15, and we don’t have the same kind of visibility into our iOS app’s indexing and ranking.

Background Link

Vivid Seats has had an Android app16 indexed since September of 2015. However, Google had a difficult time finding the equivalent app URI for our web pages at first, and in February of this year we had about 18 app URIs indexed and more than 35,000 pages with the “Intent URI not supported” error17. We had had different URIs for our app than for our website at the time, which was making it difficult for Google to find equivalent pages.

Solution Link

Initially, we tried to add alternate tags to our web pages pointing to the equivalent app URIs, as instructed by Google’s help section on the subject18.

For example, Adele’s Vivid Seats page19http://www.vividseats.com/concerts/adele-tickets.html — had the following rel="alternate" tag, which was dynamically served to mobile user agents and which pointed to the equivalent app URI:

<link rel="alternate" href="android-app://com.vividseats.android/vividseats/performer/15313">
Mobile view of Adele's tickets page.20
Mobile view of Adele’s tickets page. (Image: Fawaad Ahmad)
View of the code for the same page with the alternate tag highlighted.21
View of the code for the same page with the alternate tag highlighted. (Image: Fawaad Ahmad)

We were initially hopeful that this solution would be all that was necessary, because Google recommended it in its help section as a solution to this problem. Unfortunately, weeks after implementation, it was clear that Google was still having a difficult time figuring it out, and it didn’t index many more app URIs.

And the crawl errors persisted because Google was assuming that a lot of web pages on our website had equivalent app views, which at the time wasn’t the case.

We supported universal links22 in our iOS app and HTTP URLs in Android23 in April, which reduced the number of errors from 40,000 at its apex to about 85 today. As a result, we have seen the number of app URIs indexed go from 18 in February to about 35,000 today.

Screenshot of Search Console Crawl Status report from 5/31/2016 which shows the effect of implementing HTTP URLs in Android on pages with errors and pages indexed.24
Screenshot of Search Console’s “Crawl Status” report from 31 May 2016, which shows the effect of implementing HTTP URLs in Android on pages with errors and pages indexed. (Image: Bryson Meunier) (View large version25)

To do this, we simply followed the procedure outlined in the Firebase documentation26:

  • We made sure that each type of link on our website had an equivalent view and corresponding URI in our Android app. To do this, we designed templates for page types that were not included in our app previously, and we built them in our Android app. The unique information on each page is dynamically served from our RESTful endpoint, so it’s only necessary to design and code the templates, not individual pages.
  • We verified our website in Search Console and associated it with our website, since our website isn’t in SSL, as required by Digital Asset Links.
  • We added an intent filter27 in our Android manifest file.
  • We called getIntent in the onCreate code and deployed the app to the Play store.

Results Link

Predictably, clicks and impressions grew exponentially from December, when 18 app URIs were indexed, to September, when 40,000 app URIs were indexed. Overall, clicks grew 919%, with clicks from non-brand queries (i.e. informational queries that don’t mention Vivid Seats, like “packers tickets”) growing 5,500%. The clickthrough rate (CTR) went down, predictably, as a result of the increase in impressions, specifically non-brand ones.

Clicks to app from Google search grew 919% after getting additional URLs indexed, with non-brand traffic growing 5500%.28
Traffic to the app from Google search grew 919% after getting additional URLs indexed, with non-brand traffic growing 5500%. (Image: Bryson Meunier) (View large version29)

While app traffic (defined in Search Console as “clicks”) grew exponentially as a result of the increase in app URIs getting indexed, relative to the website traffic, app traffic has been underwhelming to date.

Even with an additional 40,000 app URIs indexed, 99.82% of our traffic from search currently goes to web pages, with just 0.23% of total search traffic going to our app URIs.

A few reasons why this might be so low:

  • Android traffic is a lower percentage of our mobile traffic than iOS, which isn’t included in this study.
  • We also have fewer app pages indexed than web pages — more than three times fewer, in fact. Because we grew traffic exponentially by having more app URIs indexed, there’s probably more traffic out there to be had that we will see when Google finally indexes all of our app URIs.
  • But the biggest reason is that CTRs vary dramatically for app listings and web listings. Our brand term, which we usually rank in position 1 and for which we usually get around a 40% CTR on the web, has a CTR of less than 1% for the app equivalent. This suggests that, though the app buttons are prominent in Google for navigational terms, most people still prefer to click through to the website.

This last point could just be a matter of this being fairly new technology and searchers not fully understanding the new layout, and we could imagine this trend reversing sometime in the future. For now, however, it’s important that this point is understood by all who are looking to index their app pages in search results. It’s tempting to think that the presence of a large colorful button in search results will increase the CTR and traffic, but our research hasn’t found any evidence to support this.

In fact, we found just the opposite: The CTR to app content is less than half of what it is to web content, with our Android app pages getting a CTR of 1.55%, at an average position of 5.1, compared to our web content CTR of 4.67%, two positions below our app content, at 7.6.

Breakdown of the CTR across all content types, as reported by Search Console.30
Breakdown of the CTR across all content types, as reported by Search Console. (Image: Bryson Meunier) (View large version31)

Though app content in general has a lower CTR than web content, we found that navigational (or branded) search terms actually have a lower CTR for us than informational terms, which is the opposite of how it works for web content.

Branded navigational terms drove much less traffic to apps than web pages.32
Branded navigational terms drove much less traffic to apps than to web pages. (Image: Bryson Meunier)

56% of the app traffic we received came from branded queries, compared to just 40% of our web traffic.

The CTR varies significantly for web and app traffic by query type.33
The CTR varies significantly for web and app traffic by query type. (Image: Bryson Meunier) (View large version34)

Looking deeper into query type, we broke down queries into two distinct types: first, navigational queries that mention our brand (for example, “vivid seats”) and informational queries that don’t (for example, “packer tickets”), and secondly, queries that indicate the searcher is looking for a website (for example, “www.vividseats.com”) or an app (for example, “download vivid seats app”) specifically.

If the searcher hadn’t indicated in their query that they were looking for an app or a website, we recorded that the query was branded or not, and that the website or app preference was “Not Specified.”

In this chart of app and web impressions and traffic to Vivid Seats from Google search, 93% of web impressions came from non-brand queries that didn't specify an app or website preference, compared to just 12% for the same category in app impressions.35
In this chart of app and web impressions and traffic to Vivid Seats from Google search, 93% of web impressions came from non-brand queries that didn’t specify an app or website preference, compared to just 12% for the same category in app impressions. (Image: Bryson Meunier) (View large version36)

4% of total app traffic specified that they’re looking for an app, compared to less than 1% for web traffic. This is important traffic to be aware of, because it doesn’t have an equivalent on the desktop, and it could be a new query type to optimize for, but it’s not representative of app traffic. The great majority of queries for both web (99%) and app (96%) do not use qualifiers to describe whether the searchers are looking for an app or website specifically.

The traffic to app content from search has so far been underwhelming, but the real reason most developers would index their app content would be to drive downloads.

Fortunately, with Search Console, we can see installations from search as well. It’s kind of hidden in the Search Console reports; to see it, go to “Search analytics” → “Search appearance” → “Filter search appearance” → “Install app button.”

View of Install App Button filter within Google Search Console's Search Analytics Report.37
View of “Install app button” filter in Search Console’s “Search Analytics” report. (Image: Bryson Meunier) (View large version38)

When we did that, we found that just 0.03% of our total search traffic led to an app installation from search in the last 90 days.

But when you take the total number of installations from the last 90 days and compare it to the installations we’ve gotten from search, it’s clear that about 2% of our total Android downloads came from users installing the downloads in search results. This isn’t terribly impressive, but when you consider that this represents many app installations from search that we may not have had otherwise, it justifies for us the little bit of work it took to implement it.

Summary Link

If your resources are limited and you’re wondering if app indexing would deliver enough traffic and installations to justify the effort, our experience would suggest you should focus on web content instead. Even after growing our traffic from app indexing by 919%, web content still brings in more than 99.8% of the total traffic from search to our website. If you’re considering other high-value projects, you might want to do those instead.

Still, if you only have an app to index, or if you have resources on your team, then app indexing does bring traffic that you wouldn’t get otherwise, and it might be worth the long-term benefits to your website and to Google users.

Have you implemented app indexing with similar (or dissimilar) results? I’d love to hear about it in the comments.

Many thanks to the UX design and development group at Vivid Seats, including Fawaad Ahmad, who made a lot of this happen.

(da, vf, il, yk, al)

Front page image credits: Introducing Firebase App Indexing39

Footnotes Link

  1. 1 https://webmasters.googleblog.com/2014/06/android-app-indexing-is-now-open-for.html
  2. 2 http://searchengineland.com/searchmetrics-study-shows-most-apps-not-utilizing-google-app-indexing-api-244432
  3. 3 http://searchengineland.com/google-adds-additional-ranking-boost-for-using-app-indexing-api-232018
  4. 4 https://firebase.google.com/docs/app-indexing/android/activity
  5. 5 https://firebase.google.com/docs/app-indexing/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-when-the-app-is-not-installed-on-the-device-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/View-of-an-indexed-app-on-a-Nexus-6P-running-Android-7.0-when-the-app-is-not-installed-on-the-device-large-opt.png
  10. 10 http://searchengineland.com/smx-advanced-recap-advanced-google-app-deep-linking-253134
  11. 11 http://searchengineland.com/app-indexing-new-frontier-seo-app-packs-app-store-search-242319
  12. 12 https://firebase.google.com/docs/app-indexing/partners/case-study-one-pager.pdf
  13. 13 http://www.vividseats.com/
  14. 14 https://www.bloomberg.com/gadfly/articles/2016-06-22/stubhub-ebay-s-next-ticket-to-ride
  15. 15 https://www.google.com/webmasters/
  16. 16 http://www.vividseats.com/app
  17. 17 https://support.google.com/webmasters/answer/6216428?hl=en
  18. 18 https://developer.android.com/training/app-indexing/enabling-app-indexing.html
  19. 19 http://www.vividseats.com/concerts/adele-tickets.html
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/adele-tickets-alternate-tag-app-uri-preview-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/adele-tickets-alternate-tag-code-view-preview-opt.png
  22. 22 https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html
  23. 23 https://firebase.google.com/docs/app-indexing/android/app
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/universal-links-large-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/universal-links-large-opt.jpg
  26. 26 https://firebase.google.com/docs/app-indexing/android/app
  27. 27 https://developer.android.com/studio/write/app-link-indexing.html#intent
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/traffic-growth-post-app-indexing-vivid-seats-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/11/traffic-growth-post-app-indexing-vivid-seats-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/overall-ctr-by-content-type-web-and-apps-search-console-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/overall-ctr-by-content-type-web-and-apps-search-console-large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-vs-non-brand-ctr-apps-web-preview-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-non-brand-traffic-apps-web-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-non-brand-traffic-apps-web-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-device-breakdown-app-web-queries-large-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brand-device-breakdown-app-web-queries-large-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/search-analytics-google-search-performance-large-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/11/search-analytics-google-search-performance-large-opt.png
  39. 39 https://www.youtube.com/watch?v=C35OSHlTNwA

↑ Back to topTweet itShare on Facebook

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

What fuels your work? What fuels your mind? What do you do on a non-productive day or when you’re sad? Nowadays, I try to embrace these times. I try to relax and not be angry at myself for not being productive.

And the fun fact about it? Well, most of the times when I could convince my mind that not being productive is nothing to feel bad about, things take a sudden turn: I get my ideas back, my productivity rises and, in effect, I even achieve more work than on an average day. It’s important to try to be human.

News Link

General Link

Tools & Workflows Link

Security Link

Web Performance Link

11
With its modernized progressive enhancement delivery12 in place, the Filament Group website can even be deemed a bonified Progressive Web App.

Accessibility Link

JavaScript Link

  • Chart.js15 is a nice library that uses subtle animations to draw canvas charts on a page. Mixed chart types are available.
  • Stefan Judis wrote about the global object in JavaScript16, variables and the issues around it. This is not only useful for people with beginner or intermediate JavaScript knowledge but also for advanced users who want to understand the topic better.
  • Todd Motto published an “Angular 2+ Fundamentals17” video course in which he explains Angular, Typescript, component architecture, and other modern programming concepts.
The Global Object In JavaScript18
Stefan Judis takes a new look at the global object in JavaScript19. (Image credit20)

Work & Life Link

Going Beyond… Link

  • This visual introduction to machine learning22 explains how computers apply statistical learning techniques to automatically identify patterns in data. If you’re not familiar with how machine learning works, this will give you a rough idea.
  • As we’ve seen in statistics and data from the NASA before, this is, unfortunately, the truth: 2016 was the hottest year on record23. The consequences: Nearly a quarter of the Great Barrier Reef died, Canada had to deal with the costliest wildfires ever, and the Arctic sea ice has been at its smallest winter maximum for two years now. And do you remember Hurricane Matthew? Such weather events are mostly driven by the climate change that we’re facing right now, with no trend of change over the upcoming years. Fortunately, there’s something everyone of us can do: The UN shows how we can take action, even from the couch at home24.

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

— Anselm

Footnotes Link

  1. 1 https://ma.ttias.be/despite-revoked-cas-startcom-wosign-continue-sell-certificates/
  2. 2 https://www.rachelandrew.co.uk/archives/2017/01/12/browser-support-for-evergreen-websites/
  3. 3 http://csswizardry.com/2017/01/ack-for-css-developers/
  4. 4 http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/
  5. 5 https://tobiastom.name/explains/docker
  6. 6 http://githubengineering.com/githubs-csp-journey/
  7. 7 https://githubengineering.com/githubs-post-csp-journey/
  8. 8 http://www.japantimes.co.jp/news/2017/01/11/national/crime-legal/researchers-warn-fingerprint-theft-peace-sign/
  9. 9 https://www.ccc.de/en/updates/2014/ursel
  10. 10 https://www.filamentgroup.com/lab/modernizing-delivery.html
  11. 11 https://www.filamentgroup.com/lab/modernizing-delivery.html
  12. 12 https://www.filamentgroup.com/lab/modernizing-delivery.html
  13. 13 http://www.ssbbartgroup.com/blog/differences-aria-1-0-1-1-additions-role/
  14. 14 https://allyjs.io/tutorials/focusing-in-svg.html
  15. 15 http://www.chartjs.org/
  16. 16 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
  17. 17 https://ultimateangular.com/angular-2-fundamentals
  18. 18 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
  19. 19 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
  20. 20 https://www.contentful.com/blog/2017/01/17/the-global-object-in-javascript/
  21. 21 https://superyesmore.com/rockbots-6-tricks-to-leading-a-healthy-productive-life-8b553b6c4ac1112787d2d52d3804ea64
  22. 22 http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
  23. 23 https://www.bloomberg.com/graphics/hottest-year-on-record/
  24. 24 http://www.un.org/sustainabledevelopment/takeaction/
  25. 25 https://wdrl.info/donate
  26. 26 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Internationalizing React Apps

Internationalizing React Apps

First of all, let’s define some vocabulary. “Internationalization” is a long word, and there are at least two widely used abbreviations: “intl,” “i18n”. “Localization” can be shortened to “l10n”.

Internationalization can be generally broken down into the following challenges:

  • detecting the user’s locale;
  • translating UI elements, titles and hints;
  • serving locale-specific content such as dates, currencies and numbers.

Note: In this article, I am going to focus only on front-end part. We’ll develop a simple universal React application with full internationalization support.

Let’s use my boilerplate repository1 as a starting point. Here we have the Express web server for server-side rendering, webpack for building client-side JavaScript, Babel for translating modern JavaScript to ES5, and React for the UI implementation. We’ll use better-npm-run to write OS-agnostic scripts, nodemon to run a web server in the development environment and webpack-dev-server to serve assets.

Our entry point to the server application is server.js. Here, we are loading Babel and babel-polyfill to write the rest of the server code in modern JavaScript. Server-side business logic is implemented in src/server.jsx. Here, we are setting up an Express web server, which is listening to port 3001. For rendering, we are using a very simple component from components/App.jsx, which is also a universal application part entry point.

Our entry point to the client-side JavaScript is src/client.jsx. Here, we mount the root component component/App.jsx to the placeholder react-view in the HTML markup provided by the Express web server.

So, clone the repository, run npm install and execute nodemon and webpack-dev-server in two console tabs simultaneously.

In the first console tab:

 git clone https://github.com/yury-dymov/smashing-react-i18n.git cd smashing-react-i18n npm install npm run nodemon

And in the second console tab:

 cd smashing-react-i18n npm run webpack-devserver 

A website should become available at localhost:30012. Open your favorite browser and try it out.

We are ready to roll!

1. Detecting The User’s Locale Link

There are two possible solutions to this requirement. For some reason, most popular websites, including Skype’s and the NBA’s, use Geo IP to find the user’s location and, based on that, to guess the user’s language. This approach is not only expensive in terms of implementation, but also not really accurate. Nowadays, people travel a lot, which means that a location doesn’t necessarily represent the user’s desired locale. Instead, we’ll use the second solution and process the HTTP header Accept-Language on the server side and extract the user’s language preferences based on their system’s language settings. This header is sent by every modern browser within a page request.

Accept-Language Request Header Link

The Accept-Language request header provides the set of natural languages that are preferred as a response to the request. Each language range may be given an associated “quality” value, which represents an estimate of the user’s preference for the languages specified by that range. The quality value defaults to q=1. For example, Accept-Language: da, en-gb;q=0.8, en;q=0.7 would mean, “I prefer Danish, but will accept British English and other types of English.” A language range matches a language tag if it exactly equals the tag or if it exactly equals a prefix of the tag such that the first tag character following the prefix is -.

(It is worth mentioning that this method is still imperfect. For example, a user might visit your website from an Internet cafe or a public computer. To resolve this, always implement a widget with which the user can change the language intuitively and that they can easily locate within a few seconds.)

Implementing Detection of User’s Locale Link

Here is a code example for a Node.js Express web server. We are using the accept-language package, which extracts locales from HTTP headers and finds the most relevant among the ones supported by your website. If none are found, then you’d fall back to the website’s default locale. For returning users, we will check the cookie’s value instead.

Let’s start by installing the packages:

 npm install --save accept-language npm install --save cookie-parser js-cookie 

And in src/server.jsx, we’d have this:

import cookieParser from 'cookie-parser'; import acceptLanguage from 'accept-language'; acceptLanguage.languages(['en', 'ru']); const app = express(); app.use(cookieParser()); function detectLocale(req) { const cookieLocale = req.cookies.locale; return acceptLanguage.get(cookieLocale || req.headers['accept-language']) || 'en'; } … app.use((req, res) => { const locale = detectLocale(req); const componentHTML = ReactDom.renderToString(<App />); res.cookie('locale', locale, { maxAge: (new Date() * 0.001) + (365 * 24 * 3600) }); return res.end(renderHTML(componentHTML)); }); 

Here, we are importing the accept-language package and setting up English and Russian locales as supported. We are also implementing the detectLocale function, which fetches a locale value from a cookie; if none is found, then the HTTP Accept-Language header is processed. Finally, we are falling back to the default locale (en in our example). After the request is processed, we add the HTTP header Set-Cookie for the locale detected in the response. This value will be used for all subsequent requests.

2. Translating UI Elements, Titles And Hints Link

I am going to use the React Intl3 package for this task. It is the most popular and battle-tested i18n implementation of React apps. However, all libraries use the same approach: They provide “higher-order components” (from the functional programming design pattern4, widely used in React), which injects internationalization functions for handling messages, dates, numbers and currencies via React’s context features.

First, we have to set up the internationalization provider. To do so, we will slightly change the src/server.jsx and src/client.jsx files.

 npm install --save react-intl 

Here is src/server.jsx:

import { IntlProvider } from 'react-intl'; … --- const componentHTML = ReactDom.renderToString(<App />); const componentHTML = ReactDom.renderToString( <IntlProvider locale={locale}> <App /> </IntlProvider> ); … 

And here is src/client.jsx:

import { IntlProvider } from 'react-intl'; import Cookie from 'js-cookie'; const locale = Cookie.get('locale') || 'en'; … --- ReactDOM.render(<App />, document.getElementById('react-view')); ReactDOM.render( <IntlProvider locale={locale}> <App /> </IntlProvider>, document.getElementById('react-view') ); 

So, now all IntlProvider child components will have access to internationalization functions. Let’s add some translated text to our application and a button to change the locale (for testing purposes). We have two options: either the FormattedMessage component or the formatMessage function. The difference is that the component will be wrapped in a span tag, which is fine for text but not suitable for HTML attribute values such as alt and title. Let’s try them both!

Here is our src/components/App.jsx file:

import { FormattedMessage } from 'react-intl'; … --- <h1>Hello World!</h1> <h1><FormattedMessage defaultMessage="Hello World!" description="Hello world header greeting" /></h1> 

Please note that the id attribute should be unique for the whole application, so it makes sense to develop some rules for naming your messages. I prefer to follow the format componentName.someUniqueIdWithInComponent. The defaultMessage value will be used for your application’s default locale, and the description attribute gives some context to the translator.

Restart nodemon and refresh the page in your browser. You should still see the “Hello World” message. But if you open the page in the developer tools, you will see that text is now inside the span tags. In this case, it isn’t an issue, but sometimes we would prefer to get just the text, without any additional tags. To do so, we need direct access to the internationalization object provided by React Intl.

Let’s go back to src/components/App.jsx:

 --- import { FormattedMessage } from 'react-intl'; import { FormattedMessage, intlShape, injectIntl, defineMessages } from 'react-intl'; const propTypes = { intl: intlShape.isRequired, }; const messages = defineMessages({ helloWorld2: { id: 'app.hello_world2', defaultMessage: 'Hello World 2!', }, }); --- export default class extends Component { class App extends Component { render() { return ( <div className="App"> <h1> <FormattedMessage defaultMessage="Hello World!" description="Hello world header greeting" /> </h1> <h1>{this.props.intl.formatMessage(messages.helloWorld2)}</h1> </div> ); } } App.propTypes = propTypes; export default injectIntl(App); 

We’ve had to write a lot more code. First, we had to use injectIntl, which wraps our app component and injects the intl object. To get the translated message, we had to call the formatMessage method and pass a message object as a parameter. This message object must have unique id and defaultValue attributes. We use defineMessages from React Intl to define such objects.

The best thing about React Intl is its ecosystem. Let’s add babel-plugin-react-intl to our project, which will extract FormattedMessages from our components and build a translation dictionary. We will pass this dictionary to the translators, who won’t need any programming skills to do their job.

 npm install --save-dev babel-plugin-react-intl 

Here is .babelrc:

{ "presets": [ "es2015", "react", "stage-0" ], "env": { "development": { "plugins":[ ["react-intl", { "messagesDir": "./build/messages/" }] ] } } } 

Restart nodemon and you should see that a build/messages folder has been created in the project’s root, with some folders and files inside that mirror your JavaScript project’s directory structure. We need to merge all of these files into one JSON. Feel free to use my script5. Save it as scripts/translate.js.

Now, we need to add a new script to package.json:

"scripts": { … "build:langs": "babel scripts/translate.js | node", … } 

Let’s try it out!

 npm run build:langs 

You should see an en.json file in the build/lang folder with the following content:

{ "app.hello_world": "Hello World!", "app.hello_world2": "Hello World 2!" } 

It works! Now comes interesting part. On the server side, we can load all translations into memory and serve each request accordingly. However, for the client side, this approach is not applicable. Instead, we will send the JSON file with translations once, and a client will automatically apply the provided text for all of our components, so the client gets only what it needs.

Let’s copy the output to the public/assets folder and also provide some translation.

 ln -s ../../build/lang/en.json public/assets/en.json 

Note: If you are a Windows user, symlinks are not available to you, which means you have to manually copy the command below every time you rebuild your translations:

cp ../../build/lang/en.json public/assets/en.json 

In public/assets/ru.json, we need the following:

{ "app.hello_world": "Привет мир!", "app.hello_world2": "Привет мир 2!" } 

Now we need to adjust the server and client code.

For the server side, our src/server.jsx file should look like this:

--- import { IntlProvider } from 'react-intl'; import { addLocaleData, IntlProvider } from 'react-intl'; import fs from 'fs'; import path from 'path'; import en from 'react-intl/locale-data/en'; import ru from 'react-intl/locale-data/ru'; addLocaleData([…ru, …en]); const messages = {}; const localeData = {}; ['en', 'ru'].forEach((locale) => { localeData[locale] = fs.readFileSync(path.join(__dirname, `../node_modules/react-intl/locale-data/${locale}.js`)).toString(); messages[locale] = require(`../public/assets/${locale}.json`); }); --- function renderHTML(componentHTML) { function renderHTML(componentHTML, locale) { … <script type="application/javascript" src="${assetUrl}/public/assets/bundle.js"></script> <script type="application/javascript">${localeData[locale]}</script> … --- <IntlProvider locale={locale}> <IntlProvider locale={locale} messages={messages[locale]}> … --- return res.end(renderHTML(componentHTML)); return res.end(renderHTML(componentHTML, locale)); ``` 

Here we are doing the following:

  • caching messages and locale-specific JavaScript for the currency, DateTime and Number formatting during startup (to ensure good performance);
  • extending the renderHTML method so that we can insert locale-specific JavaScript into the generated HTML markup;
  • providing the translated messages to IntlProvider (all of those messages are now available to child components).

For the client side, first we need to install a library to perform AJAX requests. I prefer to use isomorphic-fetch because we will very likely also need to request data from third-party APIs, and isomorphic-fetch can do that very well in both client and server environments.

 npm install --save isomorphic-fetch 

Here is src/client.jsx:

--- import { IntlProvider } from 'react-intl'; import { addLocaleData, IntlProvider } from 'react-intl'; import fetch from 'isomorphic-fetch'; const locale = Cookie.get('locale') || 'en'; fetch(`/public/assets/${locale}.json`) .then((res) => { if (res.status >= 400) { throw new Error('Bad response from server'); } return res.json(); }) .then((localeData) => { addLocaleData(window.ReactIntlLocaleData[locale]); ReactDOM.render( --- <IntlProvider locale={locale}> <IntlProvider locale={locale} messages={localeData}> … ); }).catch((error) => { console.error(error); }); 

We also need to tweak src/server.jsx, so that Express serves the translation JSON files for us. Note that in production, you would use something like nginx instead.

app.use(cookieParser()); app.use('/public/assets', express.static('public/assets')); 

After the JavaScript is initialized, client.jsx will grab the locale from the cookie and request the JSON file with the translations. Afterwards, our single-page application will work as before.

Time to check that everything works fine in the browser. Open the “Network” tab in the developer tools, and check that JSON has been successfully fetched by our client.

6
AJAX request (View large version7)

To finish this part, let’s add a simple widget to change the locale, in src/components/LocaleButton.jsx:

import React, { Component, PropTypes } from 'react'; import Cookie from 'js-cookie'; const propTypes = { locale: PropTypes.string.isRequired, }; class LocaleButton extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick() { Cookie.set('locale', this.props.locale === 'en' ? 'ru' : 'en'); window.location.reload(); } render() { return <button onClick={this.handleClick}>{this.props.locale === 'en' ? 'Russian' : 'English'}; } } LocaleButton.propTypes = propTypes; export default LocaleButton; 

Add the following to src/components/App.jsx:

import LocaleButton from './LocaleButton'; … <h1>{this.props.intl.formatMessage(messages.helloWorld2)}</h1> <LocaleButton locale={this.props.intl.locale} /> 

Note that once the user changes their locale, we’ll reload the page to ensure that the new JSON file with the translations is fetched.

High time to test! OK, so we’ve learned how to detect the user’s locale and how to show translated messages. Before moving to the last part, let’s discuss two other important topics.

Pluralization And Templates Link

In English, most words take one of two possible forms: “one apple,” “many apples.” In other languages, things are a lot more complicated. For example, Russian has four different forms. Hopefully, React Intl will help us to handle pluralization accordingly. It also supports templates, so you can provide variables that will be inserted into the template during rendering. Here’s how it works.

In src/components/App.jsx, we have the following:

const messages = defineMessages({ counting: { id: 'app.counting', defaultMessage: 'I need to buy {count, number} {count, plural, one {apple} other {apples}}' }, … <LocaleButton locale={this.props.intl.locale} /> <div>{this.props.intl.formatMessage(messages.counting, { count: 1 })}</div> <div>{this.props.intl.formatMessage(messages.counting, { count: 2 })}</div> <div>{this.props.intl.formatMessage(messages.counting, { count: 5 })}</div> 

Here, we are defining a template with the variable count. We will print either “1 apple” if count is equal to 1, 21, etc. or “2 apples” otherwise. We have to pass all variables within formatMessage‘s values option.

Let’s rebuild our translation file and add the Russian translations to check that we can provide more than two variants for languages other than English.

npm run build:langs 

Here is our public/assets/ru.json file:

{ … "app.counting": "Мне нужно купить {count, number} {count, plural, one {яблоко} few {яблока} many {яблок}}" } 

All use cases are covered now. Let’s move forward!

3. Serving Locale-Specific Content Such As Dates, Currencies And Numbers Link

Your data will be represented differently depending on the locale. For example, Russian would show 500,00 $ and 10.12.2016, whereas US English would show $500.00 and 12/10/2016.

React Intl provides React components for such kinds of data and also for the relative rendering of time, which will automatically be updated each 10 seconds if you do not override the default value.

Add this to src/components/App.jsx:

--- import { FormattedMessage, intlShape, injectIntl, defineMessages } from 'react-intl'; import { FormattedDate, FormattedRelative, FormattedNumber, FormattedMessage, intlShape, injectIntl, defineMessages, } from 'react-intl'; … <div>{this.props.intl.formatMessage(messages.counting, { count: 5 })}</div> <div><FormattedDate value={Date.now()} /></div> <div><FormattedNumber value="1000" currency="USD" currencyDisplay="symbol" /></div> <div><FormattedRelative value={Date.now()} /></div> 

Refresh the browser and check the page. You’ll need to wait for 10 seconds to see that the FormattedRelative component has been updated.

You’ll find a lot more examples in the official wiki8.

Cool, right? Well, now we might face another problem, which affects universal rendering.

Universal rendering is broken9
Universal rendering is broken. (View large version10)

On average, two seconds will elapse between when the server provides markup to the client and the client initializes client-side JavaScript. This means that all DateTimes rendered on the page might have different values on the server and client sides, which, by definition, breaks universal rendering. To resolve this, React Intl provides a special attribute, initialNow. This provides a server timestamp that will initially be used by client-side JavaScript as a timestamp; this way, the server and client checksums will be equal. After all components have been mounted, they will use the browser’s current timestamp, and everything will work properly. So, this trick is used only to initialize client-side JavaScript, in order to preserve universal rendering.

Here is src/server.jsx:

--- function renderHTML(componentHTML, locale) { function renderHTML(componentHTML, locale, initialNow) { return ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello React</title> </head> <body> <div>${componentHTML}</div> <script type="application/javascript" src="${assetUrl}/public/assets/bundle.js"></script> <script type="application/javascript">${localeData[locale]}</script> <script type="application/javascript">window.INITIAL_NOW=${JSON.stringify(initialNow)}</script> </body> </html> `; } const initialNow = Date.now(); const componentHTML = ReactDom.renderToString( --- <IntlProvider locale={locale} messages={messages[locale]}> <IntlProvider initialNow={initialNow} locale={locale} messages={messages[locale]}> <App /> </IntlProvider> ); res.cookie('locale', locale, { maxAge: (new Date() * 0.001) + (365 * 24 * 3600) }); --- return res.end(renderHTML(componentHTML, locale)); return res.end(renderHTML(componentHTML, locale, initialNow)); 

And here is src/client.jsx:

--- <IntlProvider locale={locale} messages={localeData}> <IntlProvider initialNow={parseInt(window.INITIAL_NOW, 10)} locale={locale} messages={localeData}> 

Restart nodemon, and the issue will almost be gone! It might persist because we are using Date.now(), instead of some timestamp provided by the database. To make the example more realistic, in app.jsx replace Date.now() with a recent timestamp, like 1480187019228.

(You might face another issue when the server is not able to render the DateTime in the proper format, which will also break universal rendering. This is because version 4 of Node.js is not built with Intl support by default. To resolve this, follow one of the solutions described in the official wiki11.)

4. A Problem Link

It sounds too good to be true so far, doesn’t it? We as front-end developers always have to be very cautious about anything, given the variety of browsers and platforms. React Intl uses the native Intl browser API for handling the DateTime and Number formats. Despite the fact that it was introduced in 2012, it is still not supported by all modern browsers. Even Safari supports it partially only since iOS 10. Here is the whole table from CanIUse for reference.

Internationalization browser support12
Intl browser support (View large version13)

This means that if you are willing to cover a minority of browsers that don’t support the Intl API natively, then you’ll need a polyfill. Thankfully, there is one, Intl.js14. It might sound like a perfect solution once again, but from my experience, it has its own drawbacks. First of all, you’ll need to add it to the JavaScript bundle, and it is quite heavy. You’ll also want to deliver the polyfill only to browsers that don’t support the Intl API natively, to reduce your bundle size. All of these techniques are well known, and you might find them, along with how to do it with webpack, in Intl.js’ documentation15. However, the biggest issue is that Intl.js is not 100% accurate, which means that the DataTime and Number representations might differ between the server and client, which will break server-side rendering once again. Please refer to the relevant GitHub issue16 for more details.

I’ve come up with another solution, which certainly has its own drawbacks, but it works fine for me. I implemented a very shallow polyfill17, which has only one piece of functionality. While it is certainly unusable for many cases, it adds only 2 KB to the bundle’s size, so there is not even any need to implement dynamic code-loading for outdated browsers, which makes the overall solution simpler. Feel free to fork and extend it if you think this approach would work for you.

Conclusion Link

Well, now you might feel that things are becoming too complicated, and you might be tempted to implement everything yourself. I did that once; I wouldn’t recommend it. Eventually, you will arrive at the same ideas behind React Intl’s implementation, or, worse, you might think there are not many options to make certain things better or to do things differently. You might think you can solve the Intl API support issue by relying on Moment.js18 instead (I won’t mention other libraries with the same functionality because they are either unsupported or unusable). Fortunately, I tried that, so I can save you a lot of time. I’ve learned that Moment.js is a monolith and very heavy, so while it might work for some folks, I wouldn’t recommend it. Developing your own polyfill doesn’t sound great because you will surely have to fight with bugs and support the solution for quite some time. The bottom line is that there is no perfect solution at the moment, so choose the one that suits you best.

(If you feel lost at some point or something doesn’t work as expected, check the “solution” branch of my repository19.)

Hopefully, this article has given you all of the knowledge needed to build an internationalized React front-end application. You should now know how to detect the user’s locale, save it in the cookie, let the user change their locale, translate the user interface, and render currencies, DateTimes and Numbers in the appropriate formats! You should also now be aware of some traps and issues you might face, so choose the option that fits your requirements, bundle-size budget and number of languages to support.

(rb, al, il, vf)

Footnotes Link

  1. 1 https://github.com/yury-dymov/smashing-react-i18n
  2. 2 http://localhost:3001
  3. 3 https://github.com/yahoo/react-intl
  4. 4 https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#.zb3t19yyx
  5. 5 https://github.com/yury-dymov/smashing-react-i18n/blob/solution/scripts/translate.js
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/AJAX-request-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/01/AJAX-request-large-opt.png
  8. 8 https://github.com/yahoo/react-intl/wiki/Components
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/01/universal-rendering-is-broken-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/01/universal-rendering-is-broken-large-opt.png
  11. 11 https://github.com/nodejs/node/wiki/Intl
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/intl-browser-support-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/intl-browser-support-large-opt.png
  14. 14 https://github.com/andyearnshaw/Intl.js
  15. 15 https://github.com/andyearnshaw/Intl.js/
  16. 16 https://github.com/andyearnshaw/Intl.js/issues/124
  17. 17 https://github.com/yury-dymov/intl-polyfill
  18. 18 http://momentjs.com/
  19. 19 https://github.com/yury-dymov/smashing-react-i18n/tree/solution

↑ Back to topTweet itShare on Facebook

More Than Just Pretty: How Imagery Drives User Experience

Sponsored ArticleMore Than Just Pretty: How Imagery Drives User Experience

As the saying goes, “A picture is worth a thousand words.” Human beings are highly visual creatures who are able to process visual information almost instantly; 90 percent1 of all information that we perceive and that gets transmitted to our brains is visual. Images can be a powerful way to capture users’ attention and differentiate your product. A single image can convey more to the observer than an elaborate block of text. Furthermore, images can cross language barriers in a way text simply can’t.

Images are more than just decoration; they have the power to make or break a user’s experience. In this article, we’ll cover a good number of useful principles and best practices that will help you successfully integrate imagery into your designs. If you’d like to bring your app or website to life with little effort, you can download and test Adobe XD2for free.

Further Reading on SmashingMag: Link

Only Use Relevant Images Link

Every image has a story to tell. Just like it is with writing, it’s better if you know what you want to say before you begin. Compelling images have a unique ability to inspire and engage your audience, but not all images improve the experience. Some of them just take up space or, in the worst case, confuse the user. One of the most dangerous elements in any design is imagery that conveys the wrong message.

6
Images that aren’t related to the topic often cause confusion. (Image credit7) (Large preview8)

Users react to visuals faster than text, so make sure your content matches the supporting visuals. You should select images that have a strong relationship with your product goals and ensure that they are context-relevant.

Images Shouldn’t Create A Visual Noise Link

The principle “more is better” doesn’t apply to images. Don’t put a lot of effort in creating purely decorative images because people usually ignore such images. Instead, choose images that showcase the purpose of your product. Use limited number of striking visuals in your designs — the ones that really capture users’ attention.

Use High-Quality Assets Without Distortion Link

Make sure your images are appropriately sized for displays across all platforms. Images shouldn’t appear pixelated, so be sure to test appropriate resolution sizes for specific ratios and devices. Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. You don’t want the artwork or graphics in your product to look skewed, too small or too large.

psdistort9
Left: Degraded imagery. Right: Correct resolution. (Image credit10) (Large preview11)

Responsive websites and mobile apps often struggle with selecting image resolutions that best match the various user devices. It’s quite clear that one image for all screen resolutions and different devices is not enough. However, an image per pixel is too much; cropping images one at a time can be overwhelming especially if you have a ton of images.

So, how can someone automatically choose the optimal responsive image sizes? Hopefully, there are online tools that allow you to manage multiple sizes for an entire folder of images. One of them is Cloudinary1412 which enables you to interactively generate responsive image breakpoints. This tool uses advanced algorithms to easily generate best matching breakpoints for each uploaded image; images are analyzed to find the best breakpoints on an image by image basis, rather than creating all possible image resolutions.

13
Cloudinary1412 is a cloud-based service which is used to batch, crop and resize images. (Large preview15)

Image-Focussed Design Isn’t For Every Page Link

Getting people’s attention with aesthetically pleasing images certainly has value, but it comes at the price of making other elements harder to see and use.

Putting too much focus on images in your designs may create a visual overkill that can seriously distract users from meaningful engagement with your content. You can see this effect in SoundCloud’s app in which the image takes all the attention and you barely notice the two buttons.

16
Screen buttons are overshadowed by the image in Soundcloud’17s home view.

Although image-focused design is appropriate in some cases (e.g. Apple’s homepage), the vast majority of apps and sites should follow a balanced approach — images that are used in user interfaces should support the product, but not obscure other important content or overshadow functionality.

Use Multiple Mediums Link

Both illustration and photography can be used within the same product.

  • Photography is ideal to showcase specific entities and stories. For example, if we need to show not just any flower, but in particular a rose:
  • redrose18
    For specific entities, use photographic representations. (Image credit3528252219) (Large preview20)
  • Illustration is effective for representing concepts and metaphors, where photography might be alienating.
  • flower21
    Illustration conveys an approximation of content to aid comprehension when total specificity isn’t required. (Image credit3528252219) (Large preview23)

Have A Point Of Focus Link

Imagery is a visual communication tool that conveys your message. A clear focus communicates the concept at a glance, whereas a lack of focus makes the image meaningless.

When the point of focus is obscured, the iconic quality of the image is lost:

planesinsun24
Don’t. A lack of focus makes the image meaningless. (Image credit3528252219) (Large preview26)

Avoid making the user hunt for the meaning in the image and ensure that a clear concept is conveyed to the user in a memorable way.

airplane27
Do. A clear focus communicates the concept at a glance. (Image credit3528252219) (Large preview29)

Try to minimize distraction and focus on meaningful elements in your images.

Show Real People Link

Human images are a very effective way to get your users engaged. When we see faces of other humans, it makes us feel like we are actually connecting with them, and not just using a product. However, many corporate sites are notorious for the overuse of insincere photography which is employed to “build trust.”

family30
Don’t. Inauthentic images leaves the user with a sense of shallow, false pretense. (Image credit31)

U32sability tests33 show that purelydecorative photos rarely add value to the design and more often harm than improve the user experience. Users usually overlook such images and might even get frustrated by them.

A very simple rule of thumb is to use high-quality photographs of people who match your app’s or website’s character. Imagery you use should be an authentic representation of your product, company or culture.

fatherdaughter34
Do. Show real, down-to earth people and make sure that they really match your product’s characters. (Image credit3528252219) (Large preview36)

Tips: Link

  • Try to avoid crowd shots; use photos that have a single main subject instead.
  • Strive for images that represent genuine stories. Take photos of your people doing interesting things. If you have a product, consider ways they can interact with that product.

Blend Images With Designs Link

When using images in your design, ask yourself if the images you’re taking will match the aesthetic of your app or website. The homepage for Squarespace37 is a good example of focus on imagery. It’s elegant, clean and uses a huge amount of white space and large, full-screen images to create a bold design that grabs your attention.

38
It’s important to choose pictures that fit the theme of the experiences we create. (Large preview39)

Improve Your E-Commerce Design Link

The product image sells the item. Users often rely on the product image to assess product and it’s features. Regardless of your product, whether it be headphones or toys, product photography is the most important element of any e-commerce website. Ultimately, the more attractive your products look to visitors, the more confident they’ll feel about purchasing from you, and the better your conversion rate will be.

40
The image should be used to get a feel for the product. (Image credit41) (Large preview42)

Make product images beautiful. A good image does all the hard work for you: It captures users’ attention and differentiates your product. However, good product photography requires work. Consider reading the article “Improve Your E-Commerce Design With Brilliant Product Photos43” on how to take quality photographs of your products.

Let products sell themselves. Consider the Gorilla Pod44 example shown below. The photo demonstrates brilliantly the benefits of the product.

45
Large preview46

Display the primary image above the fold. Don’t make users scroll in order to see the main image for a product. The main product image should be anchored in a prominent position in order to merchandise your priority offerings.

For the image to be effective it needs to be big — as big as you can make it. Then, when you’ve maxed out the size of your image, you need to integrate the ability to zoom in on specific details of the product. This is especially important for products like apparel where users are more concerned with detail. The zoomed-in images also need to maintain high quality.

47
Don’t. Zoomed-in view forces the user to look at a specific part. (Image credit5048)
49
Do. Put users in control by allowing them to zoom in as they prefer (both depth and area of zoom is controlled by the user). (Image credit5048)

Express Personality And Trigger User Emotions Link

Imagery can convey the essence of a product or service, but it can surprise and delight, too. Images have the capacity to entertain as much as to inform. If you already have a satisfying customer experience, adding delight to your product helps create an emotional connection with your users. Emotionally powerful imagery is a factor in ensuring that users continue to delve into your experience.

51
Imagery is able to evoke emotional responses in the viewer. A dash of humor can ease the burden and your users might love it. (Image credit52) (Large preview53)

The emotional brain is affected by photos and illustrations, especially of people, and by stories. Speaking about illustrations, even sites or apps that don’t incorporate the drawn style throughout still can use cartoons for these purposes. For example, illustrations can be used for instructions, tutorials and empty states.

54
Choose striking images that capture attention and express personal relevance. (Image credit55) (Large preview56)

Real-Life Scenario: How To Pick Images For Landing Page That Serves A Purpose Well Link

Landing pages are essentially your shop window and in most cases you have only one chance to impress the user. When it comes to landing pages, you want your visitors to have just one task on your page: to convert. Great landing pages are built around solid user experiences and imagery plays important role in building this experience. When users come to your page, they’ll have some kind of reaction. Whether it’s positive or negative, in large part, is determined by what they see.

Following the advice “show, don’t tell” and:

  1. Choose imagery that fits your message.

    It’s important to choose images that can simply explain the concept of the product or service. That doesn’t mean that the image needs to say everything — the image seen alone might not even seem to be clear, but it should logically fit when it’s connected to everything else on the page. It should visually reinforce the message you try to deliver to visitors.
  2. Show images in the right place.

    If the image supports a high priority goal, it should have more visual emphasis; conversely, images related to secondary goals should have less emphasis. The most important images should be anchored in a prominent position (i.e. above the fold), and should be a primary point of focus.
  3. Choose striking visuals that capture attention.

    Focus on selecting the most compelling images you can find. As Steven Snell mentioned, “A vivid, striking image will last in the minds of visitors. Text may be read and forgotten, but a strong image will be remembered.”
  4. Use emotionally powerful imagery.

    Your images should be emotionally persuasive — have an emotional impact and reinforce the feelings you are trying to create. After all, emotion often overrides logic when it comes to decision making.

Below is an example of landing page by Intercom57, a service that allows you to communicate with your customers more efficiently. The landing page takes a reasonably complex idea and makes it easy to understand how the product works, and why it might be beneficial.

58
Intercom uses illustration to compare the the old way of working, versus a simple approach. (Large preview59)

Conclusion Link

Thinking about images in terms of their usability is important. All visual communication in your design leaves a cumulative impression on the user.

Compelling images have a unique ability to inspire and engage your audience to provide useful information. Take the time to make every image in your app or site reinforce user experience.

Recommended Reading Link

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app63 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 Behance64, 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 free65.

(ms, vf, yk, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/10/the-dos-and-donts-of-infographic-design/
  2. 2 https://adobe.ly/2iHiSBS
  3. 3 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  4. 4 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  5. 5 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.jpg
  7. 7 http://hubpages.com/business/11-Vintage-Food-Ads-Featuring-Creepy-Soulless-Children
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/psdistort-large-opt.png
  10. 10 https://www.adobe.com/products/photoshop.html?promoid=KLXLS
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/psdistort-large-opt.png
  12. 12 http://www.responsivebreakpoints.com/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-large-opt.png
  14. 14 http://www.responsivebreakpoints.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-preview-opt.png
  17. 17 https://soundcloud.com/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/redrose-large-opt.png
  19. 19 https://stock.adobe.com/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/redrose-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/flower-large-opt.png
  22. 22 https://stock.adobe.com/
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/12/flower-large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/12/planesinsun-large-opt.png
  25. 25 https://stock.adobe.com/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/12/planesinsun-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/12/airplane-large-opt.png
  28. 28 https://stock.adobe.com/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/airplane-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/12/family-preview-opt.png
  31. 31 https://material.google.com/
  32. 32 https://articles.uie.com/deciding_when_graphics_help/
  33. 33 https://articles.uie.com/deciding_when_graphics_help/
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/12/fatherdaughter-large-opt.png
  35. 35 https://stock.adobe.com/
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/12/fatherdaughter-large-opt.png
  37. 37 https://www.squarespace.com/
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt.png
  41. 41 https://dribbble.com/mutlu82
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt.png
  43. 43 https://www.smashingmagazine.com/2010/08/improve-your-e-commerce-design-with-brilliant-product-photos/
  44. 44 http://joby.com/gorillapod
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/01/15-preview-opt.png
  48. 48 https://www.thinkwithgoogle.com/
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-preview-opt.png
  50. 50 https://www.thinkwithgoogle.com/
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt.png
  52. 52 https://basecamp.com/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-large-opt.png
  55. 55 http://emptystat.es/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-large-opt.png
  57. 57 http://intercom.com
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-large-opt.png
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-large-opt.png
  60. 60 https://articles.uie.com/deciding_when_graphics_help/
  61. 61 https://www.smashingmagazine.com/2010/06/how-to-use-photos-to-sell-more-online/
  62. 62 https://www.nngroup.com/articles/image-focused-design/
  63. 63 https://adobe.ly/2iHiSBS
  64. 64 http://adobe.ly/1U9LS0E
  65. 65 https://adobe.ly/2iHiSBS

↑ Back to topTweet itShare on Facebook

How To Design Eye-Catching App Icons

How To Design Eye-Catching App Icons

Creating that singular piece of graphic design1 that users will first interact with each time they encounter your product can be intimidating. A beautiful, identifiable and memorable app icon can have a huge impact on the popularity and success of the app. But how exactly does one make a “good” app icon? What does that even mean? Fear not, I’ve put together some tips and advice to help answer these questions and to guide you on your way to designing great app icons.

I’ve been designing2, making resources3 and giving talks4 about icon design for the past couple of years. In this article, and in the video at the end, I’ll sum up what I’ve learned about this amazing craft.

Further Reading on SmashingMag: Link

What Is An App Icon? Link

The first things you need to understand when setting out to create an icon is what exactly an app icon is and what job it performs. An app icon is a visual anchor for your product. Think of it as a tiny piece of branding that not only needs to look attractive and stand out, but ideally also communicates the essence of your application.

The word “logo” is thrown around carelessly these days. App icons are not logos. While they certainly share branding-like qualities, they’re under a lot of different restrictions. It’s an important distinction for a designer to make: Logos are scalable vector pieces of branding designed for letterheads and billboards. Icons are most often raster-based outputs customized to look good within a square canvas, at specific sizes and in specific contexts. The approach, the tools, the job and, therefore, the criteria for success are different.

9
App icon packages consist of a range of sizes. Get this template from Apply Pixels211210. (View large version11)

From a practical standpoint, when you’re making an app icon, you are creating a set of PNG files in multiple sizes — ranging from small sizes like 29 × 29 pixels all the way up to 1024 × 1024 pixels — that need to be bundled with your app. This set of carefully crafted designs will be used in the many contexts of the operating system where users will encounter your application — including the iOS App Store and Google Play, the settings panel, the search results and the home screen.

App icons can essentially be made in any application capable of producing raster files, but common choices are Photoshop, Illustrator and Sketch. Tools like the ones found on Apply Pixels211210 offer clever PSD templates that can help you get off the ground quickly.

A short video demonstrating how to use one of the templates on Apply Pixels

The Five Core Aspects Link

Now, let’s look at some of the best practices in designing app icons. I’ll discuss each of my five core aspects of app icon design, give tips on how to improve each aspect and show off some examples of how I’ve worked with that quality. A lot of these examples will be based on my own work. That’s not because I feel like it is the best or only way to illustrate these things, but it has the added benefit of my knowing what thoughts went into the process. When going through the aspects, try to imagine icons that you like and how the individual aspects take shape in the icons on your home screen. Let’s get started.

1. Scalability Link

One of the most important aspects of an icon is scalability. Because the icon is going to be shown in several places throughout the platform, and at several sizes, it’s important that your creation maintains its legibility and uniqueness. It needs to look good in the App Store, on “Retina” devices and even in the settings panel.

13
An app icon needs to work at multiple resolutions, retaining the legibility of the concept across the range of sizes.

Overly complicated icons that cram too much into the canvas often fall victim to bad scalability. A very big part of the conceptual stage of app icon design should be dedicated to thinking about whether a given design will scale gracefully.

How to Improve Scalability Link

  • Working on a 1024 × 1024-pixel canvas can be deceptive. Try out the design on the device and in multiple contexts and sizes.
  • Embrace simplicity and focus on a single object, preferably a unique shape or element that retains its contours and qualities when scaled.
  • Make sure the icon looks good against a variety of backgrounds.
14
A few icons I’ve made with scalability in mind.

2. Recognizability Link

An app icon is like a little song, and being able to identify it easily amidst the noise of the store and the home screen is a key component in great icon design. Just as the verse of a song needs to resonate with the listener, so do the shapes, colors and ideas of an app icon. The design needs to instill a memory and sense of connection on both a functional and an emotional level.

15
An icon can be detailed or simple; just make sure it’s creative and interesting and accurately conveys your intentions.

Your icon will be vying for attention among thousands of other icons, all of which have the same 1024-pixel canvas to make their impact and secure their connection with the viewer. While scalability is a huge part of recognizability, so is novelty. The search for balance between these qualities is the very crux of the discipline.

How to Improve Recognizability Link

  • Bland, overly complicated icons are the enemy of recognizability. Try removing details from your icon until the concept starts to deteriorate. Does this improve recognizability?
  • Try out several variations of your design. Line them up on a grid and glance over them, seeing which aspects of the designs catch your eye.
  • Deconstruct your favourite app icons and figure out why you like them and what methods were used to make them stand out.

3. Consistency Link

There’s something to be said for creating consistency between the experience of interacting with an app icon and interacting with the app it represents. I feel like good icon design is an extension of what the app is all about. Making sure the two support each other will create a more memorable encounter.

16
Consistency between icon and interface is important to strengthening the visual narrative.

Shaping a sleek, unified image of your app in the user’s mind increases product satisfaction, retention and virality. In short, getting your icon to work harmoniously with the essence, functionality and design of your application is a big win.

How to Improve Consistency Link

  • One way to ensure consistency between app and icon is to align their color palettes and to use a similar and consistent design language — a green interface reinforced by a green app icon, for example.
  • Although it’s not always possible, one way to tighten the connection between an app and its icon is to tie the symbolism of the icon directly to the functionality of the app.
17
Icons can also be made consistent across a suite of related apps.

4. Uniqueness Link

This almost goes without saying, but try to make something unique. Mimicking a style or a trend is perfectly fine, but make it your own. Your icon will be constantly competing with other icons for the user’s attention, and standing out can be a perfectly valid argument for a design.

18
The “Productivity” category in the iOS App Store is a great example of how uniqueness hasn’t entered the design process.

Uniqueness is a tricky part of design, because it relies not only on your skill but also on the choices of others who are tackling a similar task.

How to Improve Uniqueness Link

  • Consider what everyone else is doing in your space and go in a different direction. Always do your research — the world doesn’t need another checkmark icon.
  • A single glyph on a one-color background can be a tricky route to go down if you want to be unique. Play around with different colors and compositions, and challenge yourself to find new and clever metaphors.
  • Color is a great and often overlooked way to reframe a concept.
19
Whatever your design style, uniqueness is often an exercise in finding a novel idea.
20
Game icon design can be a great source of inspiration because there’s usually a broader range of ideas on display, free of convention.

5. Don’t Use Words Link

This is one of my all-time top pet peeves. Only on the rarest of occasions is it OK to use words in an app icon. If you have to retreat to another tool of abstraction — the written word — then I’d say you’re not using the full force of your pictorial arsenal.

Words and pictures are separate representational tools, and mixing them in what is supposed to be a graphical representation usually leads to an experience that is cluttered, unfocused and harder to decode. Is there really no better way to visualize the application than with dry words? Whenever I see words in an app icon, I feel like the designer missed an opportunity to clearly convey their intention.

What to Think About When You’re Considering Words in Icons Link

  • There’s no need to include the app’s name in the icon — it will usually accompany the icon in the interface. Instead, spend your time coming up with a cool pictorial concept.
  • “But Facebook has the ‘f’ in its app icon,” I hear you say. If you’re using a single letter and it’s a good (and unique) fit, then the letter will lose its “wordy” quality and become iconic. However, this is more often the exception than the rule.
  • Your company logo and name in a square is never a good solution. Do you have a mark or a glyph that works well within the constraints? If not, then you’d probably be best off coming up with something new. Remember that an icon is not the same as a logo and shouldn’t be forced into the same context.

Making Your Mark Link

The App Store and Google Play have many examples of bland and unopinionated icon design. Your icon is the strongest connection you’ll have with the user. It is what they’ll see first when they meet you in the App Store. It’s what they’ll interact with every single time they use your app. It is what they’ll think of when they think of the app. Anything short of a well-thought-out, fitting and attractive solution will be a failure of your greatest visual asset. Your app icon should not be an afterthought; it should be a working part of the process.

App icons are tiny little pieces of concentrated design, and the qualities of good iconography are universal: scalability, recognizability, consistency and uniqueness. Mastering these will spill over to other areas of your design. Becoming an iconist will make you a better designer.

Whether they’re detailed or simple, conventional or creative, good icons have one unifying property: They all grab people’s attention in the same limited amount of space, on a completely level playing field. It’s a specific challenge, and the answer is always within that same canvas.

Crowning your application with a singular piece of graphic design is no doubt intimidating, but I hope the tips outlined above will make you more confident in taking on the challenge. Now go forth and make a fantastic app icon!

Resources Link

In this article, I’ve used icon tools available to subscribing members of Apply Pixels211210, but many icon tools are out there, both free and paid. Icon design is one of my great passions, and if you’re hungry for more, I’ve made several videos and given a lot of talks on the subject. Below are two that elaborate on the theories behind this article.

In the video above, in roughly 10 minutes, I go through the five major aspects of app icon design and give real working examples of how I’ve worked on them. It’s packed full of stories, advice and pixels, and I hope there’s something in it for everybody — whether you’re about to make your first app icon or are a seasoned veteran.
In this one-hour neon-infused video, I go over some of my work and the concepts outlined in this article, and finally I give a demo on stage on improving an existing app icon.

(da, yk, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/03/inspiring-graphic-design/
  2. 2 http://pixelresort.com
  3. 3 https://applypixels.com
  4. 4 https://www.youtube.com/playlist?list=PLxpqfOFALZU8rKlftjcG42SOhhfIB33it
  5. 5 https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
  6. 6 https://www.smashingmagazine.com/2009/03/how-to-use-icons-to-support-content-in-web-design/
  7. 7 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  8. 8 https://www.smashingmagazine.com/2009/06/50-fresh-useful-icon-sets-for-your-next-design/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/appicontemplate-large-opt.jpg
  10. 10 https://applypixels.com
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/appicontemplate-large-opt.jpg
  12. 12 https://applypixels.com
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/scalability-preview-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/12/scalability-examples-preview-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/12/recognisability-preview-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/12/consistency-preview-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/photocookbook-preview-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/uniqueness-preview-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/12/unique1-preview-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/unique2-preview-opt.png
  21. 21 https://applypixels.com

↑ Back to topTweet itShare on Facebook

Algorithm-Driven Design: How Artificial Intelligence Is Changing Design

Algorithm-Driven Design: How Artificial Intelligence Is Changing Design

I’ve been following the idea of algorithm-driven design for several years now and have collected some practical examples. The tools of the approach can help us to construct a UI, prepare assets and content, and personalize the user experience. The information, though, has always been scarce and hasn’t been systematic.

However, in 2016, the technological foundations of these tools became easily accessible, and the design community got interested in algorithms, neural networks and artificial intelligence (AI). Now is the time to rethink the modern role of the designer.

1
Album covers processed through Prisma and Glitché (View large version2)

Will Robots Replace Designers? Link

One of the most impressive promises of algorithm-driven design was given by the infamous CMS The Grid3. It chooses templates and content-presentation styles, and it retouches and crops photos — all by itself. Moreover, the system runs A/B tests to choose the most suitable pattern. However, the product is still in private beta, so we can judge it only by its publications and ads.

The Designer News community found real-world examples of websites created with The Grid, and they had a mixed reaction4 — people criticized the design and code quality. Many skeptics opened a champagne bottle on that day.

5
The Grid CMS (View large version6)

The idea to fully replace a designer with an algorithm sounds futuristic, but the whole point is wrong. Product designers help to translate a raw product idea into a well-thought-out user interface, with solid interaction principles and a sound information architecture and visual style, while helping a company to achieve its business goals and strengthen its brand.

Designers make a lot of big and small decisions; many of them are hardly described by clear processes. Moreover, incoming requirements are not 100% clear and consistent, so designers help product managers solve these collisions — making for a better product. It’s much more than about choosing a suitable template and filling it with content.

However, if we talk about creative collaboration, when designers work “in pair” with algorithms to solve product tasks, we see a lot of good examples and clear potential. It’s especially interesting how algorithms can improve our day-to-day work on websites and mobile apps.

Creative Collaboration With Algorithms Link

Designers have learned to juggle many tools and skills to near perfection, and as a result, a new term emerged, “product designer7.” Product designers are proactive members of a product team; they understand how user research works, they can do interaction design and information architecture, they can create a visual style, enliven it with motion design, and make simple changes in the code for it. These people are invaluable to any product team.

However, balancing so many skills is hard — you can’t dedicate enough time to every aspect of product work. Of course, a recent boon of new design tools has shortened the time we need to create deliverables and has expanded our capabilities. However, it’s still not enough. There is still too much routine, and new responsibilities eat up all of the time we’ve saved. We need to automate and simplify our work processes even more. I see three key directions for this:

  • constructing a UI,
  • preparing assets and content,
  • personalizing the UX.

I’ll show you some examples and propose a new approach for this future work process.

Constructing A UI Link

Publishing tools such as Medium, Readymag and Squarespace have already simplified the author’s work — countless high-quality templates will give the author a pretty design without having to pay for a designer. There is an opportunity to make these templates smarter, so that the barrier to entry gets even lower.

For example, while The Grid is still in beta, a hugely successful website constructor, Wix, has started including algorithm-driven features. The company announced Advanced Design Intelligence8, which looks similar to The Grid’s semi-automated way of enabling non-professionals to create a website. Wix teaches the algorithm by feeding it many examples of high-quality modern websites. Moreover, it tries to make style suggestions relevant to the client’s industry. It’s not easy for non-professionals to choose a suitable template, and products like Wix and The Grid could serve as a design expert.

 

Introducing Wix Artificial Design Intelligence
Surely, as in the case of The Grid, rejecting designers from the creative process leads to clichéd and mediocre results (even if it improves overall quality). However, if we consider this process more like “paired design” with a computer, then we can offload many routine tasks; for example, designers could create a moodboard on Dribbble or Pinterest, then an algorithm could quickly apply these styles to mockups and propose a suitable template. Designers would become art directors to their new apprentices, computers.

Of course, we can’t create a revolutionary product in this way, but we could free some time to create one. Moreover, many everyday tasks are utilitarian and don’t require a revolution. If a company is mature enough and has a design system9, then algorithms could make it more powerful.

For example, the designer and developer could define the logic that considers content, context and user data; then, a platform would compile a design using principles and patterns. This would allow us to fine-tune the tiniest details for specific usage scenarios, without drawing and coding dozens of screen states by hand. Florian Schulz shows how you can use the idea of interpolation10 to create many states of components.

11
Florian Schultz Interpolation (Large preview12)

My interest in algorithm-driven design sprung up around 2012, when my design team at Mail.Ru Group required an automated magazine layout. Existing content had a poor semantic structure, and updating it by hand was too expensive. How could we get modern designs, especially when the editors weren’t designers?

Well, a special script would parse an article. Then, depending on the article’s content (the number of paragraphs and words in each, the number of photos and their formats, the presence of inserts with quotes and tables, etc.), the script would choose the most suitable pattern to present this part of the article. The script also tried to mix patterns, so that the final design had variety. It would save the editors time in reworking old content, and the designer would just have to add new presentation modules. Flipboard launched a very similar model13 a few years ago.

Vox Media made a home page generator14 using similar ideas. The algorithm finds every possible layout that is valid, combining different examples from a pattern library. Next, each layout is examined and scored based on certain traits. Finally, the generator selects the “best” layout — basically, the one with the highest score. It’s more efficient than picking the best links by hand, as proven by recommendation engines such as Relap.io15.

16
Vox’s home page generator (View large version17)

Preparing Assets And Content Link

Creating cookie-cutter graphic assets in many variations is one of the most boring parts of a designer’s work. It takes so much time and is demotivating, when designers could be spending this time on more valuable product work.

Algorithms could take on simple tasks such as color matching. For example, Yandex.Launcher uses an algorithm to automatically set up colors for app cards, based on app icons18. Other variables could be automatically set, such as changing text color according to the background color19, highlighting eyes in a photo to emphasize emotion20, and implementing parametric typography21.

22
Yandex.Launcher (View large version23)

Algorithms can create an entire composition. Yandex.Market uses a promotional image generator for e-commerce product lists (in Russian24). A marketer fills a simple form with a title and an image, and then the generator proposes an endless number of variations, all of which conform to design guidelines. Netflix went even further25 — its script crops movie characters for posters, then applies a stylized and localized movie title, then runs automatic experiments on a subset of users. Real magic! Engadget has nurtured a robot apprentice to write simple news articles about new gadgets26. Whew!

27
Netflix movie ads (View large version28)

Truly dark magic happens in neural networks. A fresh example, the Prisma app29, stylizes photos to look like works of famous artists. Artisto30 can process video in a similar way (even streaming video).

31
Prisma (View large version32)

 

Aristo app: example
However, all of this is still at an early stage. Sure, you could download an app on your phone and get a result in a couple of seconds, rather than struggle with some library on GitHub (as we had to last year); but it’s still impossible to upload your own reference style and get a good result without teaching a neural network. However, when that happens at last, will it make illustrators obsolete? I doubt it will for those artists with a solid and unique style. But it will lower the barrier to entry when you need decent illustrations for an article or website but don’t need a unique approach. No more boring stock photos!

For a really unique style, it might help to have a quick stylized sketch based on a question like, “What if we did an illustration of a building in our unified style?” For example, the Pixar artists of the animated movie Ratatouille tried to apply several different styles to the movie’s scenes and characters; what if a neural network made these sketches? We could also create storyboards and describe scenarios with comics (photos can be easily converted to sketches). The list can get very long.

Finally, there is live identity, too. Animation has become hugely popular in branding recently, but some companies are going even further. For example, Wolff Olins presented a live identity for Brazilian telecom Oi33, which reacts to sound. You just can’t create crazy stuff like this without some creative collaboration with algorithms.

 

Oi — Logo loop fundo cinza

Personalizing UX Link

One way to get a clear and well-developed strategy is to personalize a product for a narrow audience segment or even specific users. We see it every day in Facebook newsfeeds, Google search results, Netflix and Spotify recommendations, and many other products. Besides the fact that it relieves the burden of filtering information from users, the users’ connection to the brand becomes more emotional when the product seems to care so much about them.

However, the key question here is about the role of designer in these solutions. We rarely have the skill to create algorithms like these — engineers and big data analysts are the ones to do it. Giles Colborne of CX Partners sees a great example in Spotify’s Discover Weekly feature: The only element of classic UX design here is the track list, whereas the distinctive work is done by a recommendation system that fills this design template with valuable music.

34
Spotify’s Discover Weekly feature (a slide from Giles Colborne’s presentation)

Colborne offers advice to designers35 about how to continue being useful in this new era and how to use various data sources to build and teach algorithms. It’s important to learn how to work with big data and to cluster it into actionable insights. For example, Airbnb learned how to answer the question, “What will the booked price of a listing be on any given day in the future?” so that its hosts could set competitive prices36. There are also endless stories about Netflix’s recommendation engine.

 

“Interaction designers vs. algorithms” by Giles Colborne (Source37)
A relatively new term, “anticipatory design38” takes a broader view of UX personalization and anticipation of user wishes. We already have these types of things on our phones: Google Now automatically proposes a way home from work using location history data; Siri proposes similar ideas. However, the key factor here is trust. To execute anticipatory experiences, people have to give large companies permission to gather personal usage data in the background.

I already mentioned some examples of automatic testing of design variations used by Netflix, Vox Media and The Grid. This is one more way to personalize UX that could be put onto the shoulders of algorithms. Liam Spradlin describes the interesting concept of mutative design39; it’s a well-though-out model of adaptive interfaces that considers many variables to fit particular users.

An Exoskeleton For Designers Link

I’ve covered several examples of algorithm-driven design in practice. What tools do modern designers need for this? If we look back to the middle of the last century, computers were envisioned as a way to extend human capabilities. Roelof Pieters and Samim Winiger have analyzed computing history and the idea of augmentation of human ability40 in detail. They see three levels of maturity for design tools:

  1. First-generation systems mimic analogue tools with digital means.
  2. The second generation is assisted creation systems, where humans and machines negotiate the creative process through tight action-feedback loops.
  3. The third generation is assisted creation systems 3.0, which negotiate the creative process in fine-grained conversations, augment creative capabilities and accelerate the acquisition of skills from novice to expert.
CreativeAI41
CreativeAI (Large preview42)

Algorithm-driven design should be something like an exoskeleton for product designers — increasing the number and depth of decisions we can get through. How might designers and computers collaborate?

The working process of digital product designers could potentially look like this:

  1. Explore a problem space, and pick the most valuable problem for the business and users to solve (analysis).
  2. Explore a solution space, and pick the best solution to fix the problem (analysis).
  3. Develop, launch and market a product that solves this problem (synthesis).
  4. Evaluate how the product works for real users, and optimize it (analysis and synthesis).
  5. Connect and unify the solution with other products and solutions of the company (synthesis).

These tasks are of two types: the analysis of implicitly expressed information and already working solutions, and the synthesis of requirements and solutions for them. Which tools and working methods do we need for each of them?

Analysis Link

Analysis of implicitly expressed information about users that can be studied with qualitative research is hard to automate. However, exploring the usage patterns of users of existing products is a suitable task. We could extract behavioral patterns and audience segments, and then optimize the UX for them. It’s already happening in ad targeting, where algorithms can cluster a user using implicit and explicit behavior patterns (within either a particular product or an ad network).

To train algorithms to optimize interfaces and content for these user clusters, designers should look into machine learning43. Jon Bruner gives44 a good example: A genetic algorithm starts with a fundamental description of the desired outcome — say, an airline’s timetable that is optimized for fuel savings and passenger convenience. It adds in the various constraints: the number of planes the airline owns, the airports it operates in, and the number of seats on each plane. It loads what you might think of as independent variables: details on thousands of flights from an existing timetable, or perhaps randomly generated dummy information. Over thousands, millions or billions of iterations, the timetable gradually improves to become more efficient and more convenient. The algorithm also gains an understanding of how each element of the timetable — the take-off time of Flight 37 from O’Hare, for instance — affects the dependent variables of fuel efficiency and passenger convenience.

In this scenario, humans curate an algorithm and can add or remove limitations and variables. The results can be tested and refined with experiments on real users. With a constant feedback loop, the algorithm improves the UX, too. Although the complexity of this work suggests that analysts will be doing it, designers should be aware of the basic principles of machine learning. O’Reilly published45 a great mini-book on the topic recently.

Synthesis Link

Two years ago, a tool for industrial designers named Autodesk Dreamcatcher46 made a lot of noise and prompted several publications from UX gurus47. It’s based on the idea of generative design, which has been used in performance, industrial design, fashion and architecture for many years now. Many of you know Zaha Hadid Architects; its office calls this approach “parametric design48.”

49
Autodesk Dreamcatcher (View large version50)

Logojoy51 is a product to replace freelancers for a simple logo design. You choose favorite styles, pick a color and voila, Logojoy generates endless ideas. You can refine a particular logo, see an example of a corporate style based on it, and order a branding package with business cards, envelopes, etc. It’s the perfect example of an algorithm-driven design tool in the real world! Dawson Whitfield, the founder, described machine learning principles behind it52.

53
Logojoy (Large preview54)

However, it’s not yet established in digital product design, because it doesn’t help to solve utilitarian tasks. Of course, the work of architects and industrial designers has enough limitations and specificities of its own, but user interfaces aren’t static — their usage patterns, content and features change over time, often many times. However, if we consider the overall generative process — a designer defines rules, which are used by an algorithm to create the final object — there’s a lot of inspiration. The working process of digital product designers could potentially look like this:

  1. An algorithm generates many variations of a design using predefined rules and patterns.
  2. The results are filtered based on design quality and task requirements.
  3. Designers and managers choose the most interesting and adequate variations, polishing them if needed.
  4. A design system runs A/B tests for one or several variations, and then humans choose the most effective of them.

It’s yet unknown how can we filter a huge number of concepts in digital product design, in which usage scenarios are so varied. If algorithms could also help to filter generated objects, our job would be even more productive and creative. However, as product designers, we use generative design every day in brainstorming sessions where we propose dozens of ideas, or when we iterate on screen mockups and prototypes. Why can’t we offload a part of these activities to algorithms?

Experiment by Jon Gold Link

The experimental tool Rene55 by Jon Gold, who worked at The Grid, is an example of this approach in action. Gold taught a computer to make meaningful typographic decisions56. Gold thinks that it’s not far from how human designers are taught, so he broke this learning process into several steps:

  1. Analyze glyphs to understand similarities in typefaces.
  2. Formulate basic guidelines for combining typefaces.
  3. Identify the best examples of type combinations to understand trends.
  4. Create algorithms to observe how great designers work.

His idea is similar to what Roelof and Samim say: Tools should be creative partners for designers, not just dumb executants.

57
Generative design by Jon Gold: Plausible combinations

Gold’s experimental tool Rene is built on these principles58. He also talks about imperative and declarative approaches to programming and says that modern design tools should choose the latter — focusing on what we want to calculate, not how. Jon uses vivid formulas to show how this applies to design and has already made a couple of low-level demos. You can try out the tool59 for yourself. It’s a very early concept but enough to give you the idea.

 

Rene — A Product Design Tool
While Jon jokingly calls this approach “brute-force design” and “multiplicative design,” he emphasizes the importance of a professional being in control. Notably, he left The Grid team earlier this year.

Do Tools Already Exist? Link

Unfortunately, there are no tools for product design for web and mobile that could help with analysis and synthesis on the same level as Autodesk Dreamcatcher does. However, The Grid and Wix could be considered more or less mass-level and straightforward solutions. Adobe is constantly adding features that could be considered intelligent: The latest release of Photoshop has a content-aware feature60 that intelligently fills in the gaps when you use the cropping tool to rotate an image or expand the canvas beyond the image’s original size.

 

Introducing Content-Aware Crop
There is another experiment by Adobe and University of Toronto. DesignScape61 automatically refines a design layout for you. It can also propose an entirely new composition.

 

DesignScape: Design with Interactive Layout Suggestions
You should definitely follow Adobe in its developments, because the company announced a smart platform named Sensei62 at the MAX 2016 conference. Sensei uses Adobe’s deep expertise in AI and machine learning, and it will be the foundation for future algorithm-driven design features in Adobe’s consumer and enterprise products. In its announcement63, the company refers to things such as semantic image segmentation (showing each region in an image, labeled by type — for example, building or sky), font recognition (i.e. recognizing a font from a creative asset and recommending similar fonts, even from handwriting), and intelligent audience segmentation.

However, as John McCarthy, the late computer scientist who coined the term “artificial intelligence,” famously said, “As soon as it works, no one calls it AI anymore.” What was once cutting-edge AI is now considered standard behavior for computers. Here are a couple of experimental ideas and tools64 that could become a part of the digital product designer’s day-to-day toolkit:

But these are rare and patchy glimpses of the future. Right now, it’s more about individual companies building custom solutions for their own tasks. One of the best approaches is to integrate these algorithms into a company’s design system. The goals are similar: to automate a significant number of tasks in support of the product line; to achieve and sustain a unified design; to simplify launches; and to support current products more easily.

Modern design systems started as front-end style guidelines, but that’s just a first step (integrating design into code used by developers). The developers are still creating pages by hand. The next step is half-automatic page creation and testing using predefined rules.

 

“Platform Thinking” by Yury Vetrov (Source67)

Pros And Cons Link

Should your company follow this approach?

Pros Link

If we look in the near term, the value of this approach is more or less clear:

  • Remove the routine of preparing assets and content, which is more or less mechanical work.
  • Broaden creative exploration, where a computer makes combinations of variables, while the designer filters results to find the best variations.
  • Optimize a user interface for narrow audience segments or even specific users.
  • Quickly adapt a design to various platforms and devices, though in a primitive way.
  • Experiment with different parts of a user interface or particular patterns — ideally, automatically.

Altogether, this frees the designer from the routines of both development support and the creative process, but core decisions are still made by them. A neat side effect is that we will better understand our work, because we will be analyzing it in an attempt to automate parts of it. It will make us more productive and will enable us to better explain the essence of our work to non-designers. As a result, the overall design culture within a company will grow.

Cons Link

However, all of these benefits are not so easy to implement or have limitations:

  • We can only talk about a company’s custom solutions in the context of the company’s own tasks. The work requires constant investment into development, support and enhancement.
  • As The Grid’s CMS shows, a tool alone can’t do miracles. Without a designer at the helm, its results will usually be mediocre. On the other hand, that’s true of most professional tools.
  • Breaking past existing styles and solutions becomes harder. Algorithm-driven design is based on existing patterns and rules.
  • Copying another designer’s work becomes easier if a generative design tool can dig through Dribbble.

There are also ethical questions: Is design produced by an algorithm valuable and distinct? Who is the author of the design? Wouldn’t generative results be limited by a local maximum? Oliver Roeder says68 that “computer art” isn’t any more provocative than “paint art” or “piano art.” The algorithmic software is written by humans, after all, using theories thought up by humans, using a computer built by humans, using specifications written by humans, using materials gathered by humans, in a company staffed by humans, using tools built by humans, and so on. Computer art is human art — a subset, rather than a distinction. The revolution is already happening, so why don’t we lead it?

Conclusion Link

This is a story of a beautiful future, but we should remember the limits of algorithms — they’re built on rules defined by humans, even if the rules are being supercharged now with machine learning. The power of the designer is that they can make and break rules; so, in a year from now, we might define “beautiful” as something totally different. Our industry has both high- and low-skilled designers, and it will be easy for algorithms to replace the latter. However, those who can follow and break rules when necessary will find magical new tools and possibilities.

Moreover, digital products are getting more and more complex: We need to support more platforms, tweak usage scenarios for more user segments, and hypothesize more. As Frog’s Harry West says, human-centered design has expanded from the design of objects (industrial design) to the design of experiences (encompassing interaction design, visual design and the design of spaces). The next step will be the design of system behavior: the design of the algorithms that determine the behavior of automated or intelligent systems. Rather than hire more and more designers, offload routine tasks to a computer. Let it play with the fonts.

(vf, il, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Cover-large-opt.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Cover-large-opt.jpg
  3. 3 https://thegrid.io/
  4. 4 https://www.designernews.co/stories/65265-the-first-gridio-sites-have-surfaced-and-theyre-kinda-terrible
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/TheGrid-large-opt.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/TheGrid-large-opt.png
  7. 7 http://www.uxmatters.com/mt/archives/2015/02/applied-ux-strategy-part-2-the-product-designer.php
  8. 8 http://www.fastcodesign.com/3060934/can-you-teach-ai-to-design-wix-is-trying
  9. 9 http://www.uxmatters.com/mt/archives/2015/08/applied-ux-strategy-part-3-platform-thinking.php
  10. 10 https://medium.com/@getflourish/designing-with-intent-be6664b10ac
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/11/FlorianSchultzInterpolation.gif
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/FlorianSchultzInterpolation.gif
  13. 13 http://techcrunch.com/2014/03/23/layout-in-flipboard-for-web-and-windows/
  14. 14 http://product.voxmedia.com/2014/12/17/7405131/algorithmic-design-how-vox-picks-a-winning-layout-out-of-thousands
  15. 15 https://relap.io/en
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/VoxChorus-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/11/VoxChorus-large-opt.png
  18. 18 https://translate.google.com/translate?hl=en&sl=ru&tl=en&u=https%3A%2F%2Fmedium.com%2F%40mishanikin%2F%25D0%25BE%25D1%2587%25D0%25B5%25D0%25BD%25D1%258C-%25D0%25BF%25D1%2580%25D0%25BE%25D1%2581%25D1%2582%25D0%25BE%25D0%25B9-%25D0%25B0%25D0%25BB%25D0%25B3%25D0%25BE%25D1%2580%25D0%25B8%25D1%2582%25D0%25BC-%25D0%25BF%25D0%25BE%25D0%25B4%25D0%25B1%25D0%25BE%25D1%2580%25D0%25B0-%25D1%2586%25D0%25B2%25D0%25B5%25D1%2582%25D0%25B0-%25D0%25BA%25D0%25BE%25D1%2582%25D0%25BE%25D1%2580%25D1%258B%25D0%25B9-%25D1%2580%25D0%25B0%25D0%25B1%25D0%25BE%25D1%2582%25D0%25B0%25D0%25B5%25D1%2582-98b8f0dcfdc5
  19. 19 http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
  20. 20 http://berglondon.com/blog/2012/08/01/headliner/
  21. 21 http://alistapart.com/blog/post/variable-fonts-for-responsive-design
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/YandexLauncherColor-large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/YandexLauncherColor-large-opt.png
  24. 24 https://translate.google.com/translate?hl=en&sl=ru&tl=en&u=https%3A%2F%2Fevents.yandex.ru%2Flib%2Ftalks%2F3532%2F&sandbox=1
  25. 25 http://techblog.netflix.com/2016/03/extracting-image-metadata-at-scale.html
  26. 26 https://www.engadget.com/2016/08/15/robot-journalism-wordsmith-writer/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Netflix-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Netflix-large-opt.png
  29. 29 http://prisma-ai.com/
  30. 30 http://artisto.my.com/
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/PrismaAI-large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/PrismaAI-large-opt.png
  33. 33 http://www.fastcodesign.com/3059059/the-ultimate-responsive-logo-reacts-to-the-sound-of-your-voice
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/SpotifyDiscoverWeekly-opt.png
  35. 35 https://www.cxpartners.co.uk/our-thinking/interaction-design-in-the-age-of-algorithms/
  36. 36 http://airbnb.design/invisible-design/
  37. 37 http://www.slideshare.net/cxpartners/algorithms-slideshare
  38. 38 https://www.smashingmagazine.com/2015/09/anticipatory-design/
  39. 39 https://medium.com/project-phoebe
  40. 40 https://medium.com/@ArtificialExperience/creativeai-9d4b2346faf3
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/11/CreativeAI.gif
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/11/CreativeAI.gif
  43. 43 http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
  44. 44 https://www.oreilly.com/ideas/artificial-intelligence-and-the-future-of-design
  45. 45 http://www.oreilly.com/design/free/machine-learning-for-designers.csp
  46. 46 https://autodeskresearch.com/projects/dreamcatcher
  47. 47 http://radar.oreilly.com/2014/05/the-automation-of-design.html
  48. 48 http://www.patrikschumacher.com/Texts/Parametricism%20-%20A%20New%20Global%20Style%20for%20Architecture%20and%20Urban%20Design.html
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/11/AutodeskDreamcatcher-large-opt.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/11/AutodeskDreamcatcher-large-opt.png
  51. 51 http://logojoy.com/
  52. 52 https://www.indiehackers.com/businesses/logojoy
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/12/logojoy-large-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/12/logojoy-large-opt.png
  55. 55 http://rene.jon.gold/
  56. 56 http://www.jon.gold/2016/05/robot-design-school/
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/11/robot-design-school-selection-opt.png
  58. 58 http://www.jon.gold/2016/06/declarative-design-tools/
  59. 59 http://rene.jon.gold/
  60. 60 https://www.youtube.com/watch?v=1DoCQMelAMM
  61. 61 http://www.dgp.toronto.edu/~donovan/design/index.html
  62. 62 http://www.adobe.com/ru/sensei.html
  63. 63 https://blogs.adobe.com/conversations/2016/11/adobe-sensei.html
  64. 64 http://www.creativeai.net/
  65. 65 https://www.subtraction.com/2016/06/17/hand-drawn-rendering-of-3d-objects-and-animation/
  66. 66 http://www.fastcodesign.com/3052463/microsoft-research-debuts-autocomplete-for-animation-and-its-incredible
  67. 67 http://www.slideshare.net/jvetrau/amuse-ux-2015-yvetrov-platform-thinking
  68. 68 https://aeon.co/ideas/there-is-no-such-thing-as-computer-art-it-s-all-just-art

↑ Back to topTweet itShare on Facebook

Illustrating Animals With 13 Circles: A Tutorial And Drawing Challenge

Illustrating Animals With 13 Circles: A Tutorial And Drawing Challenge

Editor’s Note: New year, new challenges! You might have set up your New Year’s resolutions already, but if not, how about designing something… different for a change? Today, we’re happy to introduce Dorota1, an artist who created a fun little project last year that was inspired by Twitter’s new logo based on 13 circles2. Below you’ll find the lessons Dorota has learned along the process, so maybe you’d like to embark on a similar journey as well?

If you can make a bird out of circles, then you can probably make all sorts of animals. I wanted to add something more design-based to my portfolio, so I made that my personal challenge. The idea was to draw animals from exactly 13 circles, and I decided to match that number by making 13 animals. This makes for a nicer title for the project, and it helps to get others to share it around the web, too. Knowing what you want to create early on helps, because then all you have to do is figure out ways to make it happen.

The project mostly consisted of three Adobe applications: Photoshop, Illustrator and After Effects.

Getting Started: Sketching Link

I prefer to sketch things on paper first, but you can do so digitally as well. First, I chose some animals that I didn’t think would be extremely difficult to draw. Then, I chose prominent features of those animals to focus on. I also Googled logos, designs and illustrations of the animals to see what features other people emphasize. When limited to 13 circles, you can’t fit everything! For example, with the monkey, all I could fit were the ears, the long tail and the outline around the eyes, leaving me with few circles to play with, but that’s OK.

While sketching, I kept track of the number of circles I was using, counting one for every curve. If I had too many circles, I would examine them to see if two curves could somehow come from one circle. For example, in the part of the giraffe below, the orange circle serves as both the top of the left horn and the bottom of the ear:

3
(View large version4)

Illustrator Link

After I had a sketch I was happy with, I photographed it or scanned it to my computer.

Before I began, I decided on a size for the project. This is important for consistency and to keep things moving quickly in Photoshop and After Effects. I chose 8 × 10 inches at 300 DPI (or PPI), just in case I decided to print them after, because that’s a common print size. I also felt the ratio would be good to turn them into animated GIFs later.

Here are the first steps to take in Illustrator:

  1. Open your sketch, or drag or paste it into your sized document. Select the sketch, and click Ctrl + 2 to lock it in place.
  2. Draw circles using the Ellipse tool (L); to make perfect circles, hold Shift while dragging. You can find the ellipses by holding or right-clicking the Rectangle tool. Select your circle(s), and set the fill to none, and choose a small stroke to work with. Hide the sketch layer once you’ve finished by clicking the eye.
  3. Select all of your circles by enabling the Selection tool (V) and dragging from one corner over the entire screen. Resize them to the size you want the animal to be in the document. This is important if you want to save time later.
  4. With the circles still selected, we’re going to make a backup by clicking Ctrl + C, then clicking “New Layer,” then clicking Ctrl + F. This pastes in the exact same location. Hide the backup layer.
  5. Click the Shape Builder tool (Shift + M), choose a fill color (removing the stroke), and click in the parts of the circles that you want to fill in.
  6. Once you’re happy with the shape, isolate all the filled shapes from the circles by clicking on one and then going to menu “Select” → “Same” → “Fill Color”. Once they’re selected, you can simply copy them, select & delete everything in the document (we backed up the circles), and press Ctrl + F to bring back just the filled shapes.

Instead of the Shape Builder tool in step 4, you could also use the Live Paint Bucket tool (K), which allows you to move the circles safely while keeping your area filled in, and then you would expand at the very end.

Sometimes the curves I sketched didn’t perfectly form a circle, so I’d have to go back and move a few curves around or change their sizes. If you merely want to suggest some shapes in your animal (rather than being explicit), you may have to add more circles. For example, sometimes I would want an area to be cut out, such as the inside of the fox tail. Other times, I would want an area to be a different color from the rest of the shape, such as the toucan’s beak. There are many ways to create separation.

At this point, I had the animal (still in pieces), a hidden layer with the circles, and a hidden layer with the sketch.

5
Steps 1, 2, 5 and 6 (View large version6)

Sometimes, at this point, I would turn the animal into one solid shape. To do this, select the animal, open the Pathfinder panel (in the menu, “Window” → Pathfinder, or Ctrl/Cmd + Shift + F9) and click the “Unite” option. The paths might have small flaws, but you can usually fix those using the Direct Selection tool (A), which allows you to click individual anchors and paths to easily move, modify or delete them.

Often, however, rather than turning an animal into a solid shape, I would add a bit of shading using gradients. I would often add these to one section of the animal, and I would use the same method as above to select a couple of pieces of an animal and merge those pieces into one (often, my animals would be in two or three pieces by the end).

In this example, you can see that I used different shading methods on different parts of the monkey. Above the monkey’s eyes, I used the Mesh tool (U) to get a gradient that follows the curves. A fast way to add a mesh is to click an object and go to “Object” → “Create Gradient Mesh.” I’m not an expert with this tool yet, so my attempt is more of an experiment.

Underneath the monkey’s face, I simply used a regular gradient. A fast way to apply a gradient to an object is to click the object and press the period key (.). Then, in the menu, go to “Window” → “Gradient” to open the Gradient panel and change the settings of that gradient.

7
(View large version8)

Because I knew I would be bringing the animals into Photoshop after, I simply shaded them with shades of gray. This way, if I wanted to use different blending modes with colors and textures, the hues that I chose would be retained.

9
(View large version10)

Photoshop Link

Create a document in Photoshop of the exact size as your Illustrator document (this is to make things easy and is not a requirement). I also stayed with the RGB color space because my focus is the web, but I can always convert to CMYK later if I want to print. Before bringing in the animals, I would create the background first.

I started with the colors. There are many ways to create gradients. I started with a white background and then simply stacked a few transparent layers of lightly brushed colors. Sometimes I would further tweak the colors using an Adjustment Layer such as “Curves” (experiment to find what works best for you).

Once you’ve got the color gradients down, it’s time to add some texture! I experimented with many different textures that I downloaded online — you can find many by searching for terms like “free paper texture.” There are also some nice textures on Subtle Patterns11, but they’re usually small image tiles meant to be repeated, and I personally don’t like repeating ones.

I often used a subtle paper texture as a base and then used other textures to bring out more light and dark speckles. It’s easy to bring out speckles from a texture using Curves or Levels. All of my textures are overlaid using different blending modes, as well as by experimenting with opacity.

12
(View large version13)

Below are the noise layer and the texture image that I used for the background above:

14
(View large version15)

And below are the layers for the background, along with my settings for each Curves layer. The really crazy curves were the ones I used to bring out different parts of the textures, such as the speckles.

16
(View large version17)

As I said, experiment with Photoshop’s functionality until you’re happy. Here are the layers for this background, starting from the bottom:

  1. a blank white background;
  2. lightly painted colors at a small opacity using the brush;
  3. noise (“Filter” → “Noise” → “Add Noise”) at a 41% “Overlay” blending mode, sometimes enlarged or blurred;
  4. a texture layer with “Color Burn”;
  5. a Curves adjustment layer clipped to the texture layer, to create a high contrast for the speckles in the texture;
  6. a texture layer again, rotated to a different position and a “Color Burn” of 40%;
  7. a Curves layer clipped to the texture, this time bringing out the textures in a different way;
  8. a blue layer set to “Divide” at 37%;
  9. an overall Curves layer to brighten the entire image (including the monkey).

Once my background was ready, I brought in the animal as a smart object. Use smart objects18 whenever possible. I simply copied and pasted the animal from Illustrator. Because the documents are the same size, the animal should be pasted into Photoshop at the same size. I didn’t resize the animal in Photoshop, so that I could easily align the circles in a further step.

19
(View large version20)

Here are the layers I used for the monkey:

  1. a monkey smart object;
  2. a stamp of only the background (Ctrl + Alt + Shift + E), clipped to the monkey, at “Multiply”;
  3. another stamp of background, clipped to monkey, with a “Hard Light” of 34%;
  4. another stamp of background, clipped to the monkey, with “Multiply” set to 34%;
  5. a Curves layer, clipped to the monkey, to brighten it up;
  6. a “Hue/Saturation” layer, clipped to the monkey, to make the hue a more blueish-purple.

Here are a few points in the evolution of the monkey:

21
(View large version22)

Illustrator Again Link

It’s almost time to animate! I animated in After Effects, although many programs will do it (Photoshop has some basic animation capability, too).

Use “File” → “Place” (Shift + Ctrl + P) to place the Photoshop file in Illustrator as a linked object; this way, if you need to make any changes in the Photoshop file, it will automatically update in Illustrator. Placing the file in the top-left corner anchor works best, from what I’ve seen. Next, bring back your circles by unhiding the backup layer we created. You may have to drag and change the order of the layers to stack the circles on top, and you might have to realign them to your animal if it has moved.

I decided to stoke the circles with a dashed line. I did this by selecting the circles, clicking “Stroke,” checking “Dashed line” and specifying the size of the dash and the size of the gap. I used 5 points for the dash and 3 points for the gap.

In case you need to slightly resize the circles, select them and use the width (“W”) and height (“H”) boxes on top to change the size in small increments. Make sure the chain in the middle is activated, to maintain the proportions.

I had to put each circle on a separate layer so that I could animate them in After Effects. I simply created 13 new layers, then dragged a circle into each one. Your file will look like this:

23
(View large version24)

After Effects Link

First, download and install Ease & Wizz25, which will make the movement of our circles a bit more interesting — moving in slow, speeding up quickly, and ending slow again. This is a “name your price” script, so you could technically download it for $0.

26
Without the script (left), and with (right). (View large version27)

Start a new project, go to “Import” → “File” (Ctrl + I), and select your Illustrator file. But make sure where it says “Import as Footage,” you change it to “Composition — Retain layer sizes.”

If the composition doesn’t open up right away, double-click it in the “Project” tab. If you’re planning to resize the composition, make sure to click the little gear icon to the right of it.

It might also be a good idea to choose an animation frame rate before starting (“Composition” → “Composition Settings”). I chose 20 frames per second because I knew my animation would be quite short and would loop. If you’re working with a longer animation, you should lower it, because animated GIFs with a high number of frames can end up being too big in size.

Select all of the layers except for the layer with the background; right-click and choose “Create shapes from vector layer.” These are the shapes we’ll be animating. The original Illustrator layers should still be there, but their visibility should now be off.

Choose a shape layer, and click its contents; to the right of it, where it says “Add,” select “Trim Paths.” First, I set “End” to 0%. Clicking the stopwatch near “Start” or “End” will activate the keyframes for that action and turn blue. A keyframe will be created at that point, depending on where your indicator is placed. It’ll be a small diamond. I set mine to “Start 0%,” which made my circle invisible, and I moved it down the timeline to where I wanted my circles to start animating. Move your indicator down the timeline, and then change “Start” to 100%; you’ll see a new keyframe appear automatically.

Depending on which direction you want the path to disappear (clockwise versus counterclockwise), you might have to start with “Start” or “End.” Below is an example of what I did to make the circle be invisible at first for a moment, appear into the frame, pause, and then disappear in the direction that it appeared. The timing isn’t what I used for my project — it’s just an example.

28
(View large version29)

Here is the breakdown of my keyframes:

  1. Start 0%
  2. Start 100%
  3. Start 100% and End 0%
  4. End 100%

Then, I added the Ease & Wizz effect. Open the plugin by going to “Window” → “Ease and Wizz” (.jsx). Then, highlight and select all of the keyframes, and click “Apply” (I used the plugin’s default settings). The percentage text should now be in red. You could also drag the plugin window into your toolbar, so that it’s not floating around.

Also, I used the Rotation tool (W) on the circles to rotate them, so that the animation starts at a different point, such as the end of the tail, rather than right in the middle of it.

You can also copy and paste your keyframes into the “Trim Paths” folder of another circle if that animation is going in the same direction that you want this circle to go in. I created a clockwise animation and then a counterclockwise one (renaming the layer folders to not lose my place), and I would copy and paste those keyframes into the rest of the circles according to how I wanted; for example, the monkey’s tail would be counterclockwise, whereas the ears would be clockwise.

Once all of the circles are done, you can go to “File” → “Export” → “Add to Render Queue” (or Ctrl + Shift + /) and render it as an AVI file (or any video format of your choice).

Turning the video into an animated GIF

Back To Photoshop Link

To turn the video into an animated GIF, I opened Photoshop and went to “File” → “Import” → “Video Frames to Layers.” Once it opens up, I went to “Windows” → “Timeline” (or “Animation”) to open the “Animation” tab. In newer versions of Photoshop, you have the option of a video timeline or a frame animation. I chose frame animation.

Because there were pauses in my animation, each pause rendered as its own frame, so I had to delete all of the duplicate frames from each pause in the animation and keep only one frame, but then set the timing of that one frame to a higher duration. You can avoid this by removing all gaps in your After Effects animation and then adding the pauses back in Photoshop; however, not being able to see the entire thing at once might make it a little harder to decide on the duration of the animation. Also, don’t forget to set the looping option to “forever.”

30
Frames 1, 28 and 53 are consolidated in my example (you could further combine 1 and 53). (View large version31)

Once that’s done, go to “File” → “Export” → “Save for Web” and choose “GIF.” Here is where it gets experimental, because I had to play around with the settings to get a good balance of quality and file size. Choosing the best quality will often make the file size way too big (I try never to exceed 1 MB for a GIF).

I also found that when resizing the image to be smaller, the color table would change and would often look much worse (or even vice versa). Here’s a trick: Change the animated GIF to various sizes until the colors look as best as possible, then save that color table, resize it to your desired size, and then load that color table:

32
(View large version33)

All done!

Some Reflections Link

  • When I initially created the animals, I didn’t make sure that all of my document sizes were the same, and so I had to resize and realign all of the circles for each animal! Pay close attention to document size.
  • I haven’t figured out why an image loads in After Effects at narrower than 600 pixels, even when the original document is much larger! I have a lot to learn about After Effects.
  • I haven’t yet figured out a way to quickly remove extra frames in a Photoshop animation. Maybe better applications for creating GIFs are out there?

I also gained some knowledge while working on this:

  • I’ve never really drawn so many animals before. I realized with this project that you’re not really drawing the animal — you’re mainly just drawing its features! That takes a lot of the pressure off.
  • I also realized that experimenting with textures can be extremely difficult and sometimes hit or miss. Start building your texture collection folder early on! I wish I had started years ago.
  • I discovered the color table trick only after getting extremely annoyed when some of the GIFs would suddenly look horrible when I’d change their size by a slight amount (for example, 50 pixels in width). Always be open to discovering tricks, even in the applications most familiar to you!
  • This was probably my third time making something in After Effects, so there was a lot of tedious trial and error here, as well as some help from a friend. It helps having friends who share your passion.

I did many things that could probably have been done more quickly or easily. This was a learning experience. If you have any tips for making these types of animations faster, better or easier, feel free to share in the comments!

Hope you enjoyed the animations!

Full Preview Of All 13 Illustrated Animals Link

Owl made from circles34
Owl made from circles (Large preview35)
Rabbit made from circles36
Rabbit made from circles (Large preview37)
Monkey made from circles38
Monkey made from circles (Large preview39)
Elephant made from circles40
Elephant made from circles (Large preview41)
Toucan made from circles42
(Large preview43)
Giraffe made from circles44
Giraffe made from circles (Large preview45)
Mouse made from circles46
Mouse made from circles (Large preview47)
Dog made from circles48
Dog made from circles (Large preview49)
Owl made from circles50
Cat made from circles (Large preview51)
Fox made from circles52
Fox made from circles (Large preview53)
Whale made from circles54
Whale made from circles (Large preview55)
Frog made from circles56
Frog made from circles (Large preview57)
Walrus made from circles58
Walrus made from circles (Large preview59)

(vf, il, al)

Footnotes Link

  1. 1 http://dorotapankowska.com
  2. 2 http://dorotapankowska.com/13-animals-13-circles.html
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img3-large-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img3-large-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img4-large-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img4-large-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img5-large-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img5-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img6-large-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img6-large-opt.jpg
  11. 11 http://subtlepatterns.com/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img7-large-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img7-large-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img8-large-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img8-large-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img9-large-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img9-large-opt.jpg
  18. 18 https://helpx.adobe.com/photoshop/using/create-smart-objects.html
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img10-large-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img10-large-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img11-large-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img11-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img12-large-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img12-large-opt.jpg
  25. 25 http://aescripts.com/ease-and-wizz/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img13-large-opt.gif
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img13-large-opt.gif
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img14-large-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img14-large-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img15-large-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img15-large-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img16-large-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/11/13-animals-13-circles-img16-large-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-owl.gif
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-owl.gif
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-rabbit.gif
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-rabbit.gif
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-monkey.gif
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-monkey.gif
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-elephant.gif
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-elephant.gif
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-toucan.gif
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-toucan.gif
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-giraffe.gif
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-giraffe.gif
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-mouse.gif
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-mouse.gif
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-dog.gif
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-dog.gif
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-cat.gif
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-cat.gif
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-fox.gif
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-fox.gif
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-whale.gif
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-whale.gif
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-frog.gif
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-frog.gif
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-walrus.gif
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/12/poster-walrus.gif

↑ Back to topTweet itShare on Facebook

Desktop Wallpaper Calendars: January 2017

Desktop Wallpaper Calendars: January 2017

New year, new beginnings! To cater for a fresh start into 2017 and all the challenges, endeavors and adventures it might bring along, artists and designers from across the globe put their creative skills to the test and created unique desktop wallpapers for you to indulge in.

This monthly wallpapers mission has been going on for eight years1 now, and we are very thankful to all the creative minds who contribute to it tirelessly each month anew. Today’s wallpapers all come in versions with and without a calendar and can be downloaded for free. Happy New Year!

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?
  • Looking for more winter-related wallpapers3 dedicated to snow, ice and frost? We’ve got you covered with only the best ones since 2008.

Angel In Snow

Designed by Brainer4 from Ukraine.

5

Colorful 2017

“As 2016 ends, we head to a new beginning where hopefully the best is yet to come. Happy 2017!” — Designed by Maria Keller31 from Mexico.

Colorful 201732

A New Start

“The new year brings hope, festivity, lots and lots of resolutions, and many more goals that need to be achieved. This wallpaper is based on the idea of ‘A New Start’.” — Designed by Damn Perfect84 from India.

A New Start85

Happy Hot Tea Month

“You wake me up to a beautiful day; lift my spirit when I’m feeling blue. When I’m home you relieve me of the long day’s stress. You help me have a good time with my loved ones; give me company when I’m all alone. You’re none other than my favourite cup of hot tea.” — Designed by Acodez IT Solutions129 from India.

Happy Hot Tea Month!130

Love Makes You Warm

“Following the busy Christmas season, the cold and boring January comes, love is one thing, what can make us warm for sure!” — Designed by Barbara Dörnyei172 from Hungary.

Love makes you warm!173

Hello Summer In Australia

Designed by Tazi Designs191 from Australia.

Hello Summer in Australia!192

Summer Celebration

“Summer in Australia is about sun and the beach – which inspired the colours I have used. It is a wonderful celebration of the ending on one year and the beginning of another. I hope my illustration inspires this feeling of the celebration of rebirth and growth.” — Designed by Katherine Appleby216 from Australia.

Summer Celebration217

The Year Of The Rooster

“2017 is the year of the rooster according to the Chinese horoscope, which begins January 28, 2017. The rooster being the sign of dawn and awakening, triumph and success can only be achieved at the price of hard work and patience in 2017.” — Designed by Lucas Debelder259 from Belgium.

2017 - The Year Of The Rooster260

New Beginnings

“2016 was an exciting year, many things happened and changed our world. In the coming year of 2017, we wish all to be more successful, to love and be loved, and to look into the future holding hands with your better half. Let every day in January be smashing for you. Happy New Year, everybody!” — Designed by PopArt Studio304 from Serbia.

New Beginnings305

Fire Rooster

“Inspired by the upcoming year of the Fire Rooster.” — Designed by Lia Pantazi345 from Greece.

Year of the Rooster.346

Reindeer

Designed by Ana Masnikosa380 from Belgrade, Serbia.

Reindeer381

Travel And Explore

“For once you have tasted flight you will walk the earth with your eyes turned skywards, for there you have been and there you will long to return. (Leonardo da Vinci)” — Designed by Dipanjan Karmakar421 from India.

Travel & Explore422

The Rooster Wishes You A Happy New Year

“2017 is the year of the rooster, so I made a wallpaper with a rooster on it. I myself have 8 chickens at home but no rooster, so maybe we could buy one this year to celebrate the year of the rooster. Happy New Year to everyone!” — Designed by Melissa Bogemans450 from Belgium.

The rooster wishes you a happy New Year!451

Happy Birthday A. A. Milne

“I love Winnie the Pooh! January 18th marks A.A. Milne’s 135th birthday, the creator of Winnie the Pooh. I have included one of my favourite quotes to symbolize what an inspiration his stories have been to both kids and adults.” — Designed by Safia Begum491 from United Kingdom.

Happy Birthday A. A. Milne!492

Ice Crime

Designed by Doud – Elise Vanoorbeek534 from Belgium.

Ice Crime535

The Worried Weighing Scales

“Most of us have over-indulged a little over the holiday period – spare a thought for our bathroom scales, who will have much heavier people standing on them for the next few months!” — Designed by James Mitchell559 from United Kingdom.

The Worried Weighing Scales560

Wake Up, It Is Time To Study

“Sitting on a chair before my desk playing video games when a friend called me to ask something about the exams. Then I realized that I have one more week to study before the first exam begins. So wake up guys! It is time to study!” — Designed by Robert Vaida580 from Belgium.

Wake up! It is time to study581

Angels Of Heaven

“January is a month of cold winter days. Whenever I hear ‘January’, the first thing that comes to my mind are long sleepy winter nights, cause these days are the most comfortable for sleeping. It gives me the feeling of a baby from heaven sleeping comfortably.” — Designed by Swapnil Chavan599 from India.

Angels Of Heaven600

The Tree

“Before reaching the spring it is necessary to go through the intense cold of winter.” — Designed by Ana Travassos614 from Portugal.

The tree615

Let’s Do Great Things Together

“I choose a typographic wallpaper for the mont January to clearly emphasize my message to the world. We need to make this upcoming year a better year than 2016 and and we can only achieve that if we stand together and try making the best of it.” — Designed by Thomas Debelder637 from Belgium.

Let's do great things together!638

Observing Cat

“I took a shot of this cat while she was observing the world on a chilly sunny day.” — Designed by Marija Zaric656 from Belgrade, Serbia.

Observing Cat657

It Shines

“January represents a new beginning, a new chance to start over. This wallpaper is made to charge everyone with energy and to remember that smiling everyday does make the difference.” — Designed by Rodrigo Flores675 from Costa Rica.

It shines!676

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

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, il)

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/winter-wallpaper/
  4. 4 https://www.behance.net/DesignStudioBrainer
  5. 5 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/jan-17-angel-in-snow-full.jpg
  6. 6 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/jan-17-angel-in-snow-preview.jpg
  7. 7 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-800×600.jpg
  8. 8 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1024×768.jpg
  9. 9 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1152×864.jpg
  10. 10 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1280×800.jpg
  11. 11 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1280×960.jpg
  12. 12 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1400×1050.jpg
  13. 13 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1440×900.jpg
  14. 14 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1600×1200.jpg
  15. 15 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1680×1050.jpg
  16. 16 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1680×1260.jpg
  17. 17 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1920×1200.jpg
  18. 18 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/cal/jan-17-angel-in-snow-cal-1920×1440.jpg
  19. 19 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-800×600.jpg
  20. 20 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1024×768.jpg
  21. 21 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1152×864.jpg
  22. 22 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1280×800.jpg
  23. 23 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1280×960.jpg
  24. 24 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1400×1050.jpg
  25. 25 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1440×900.jpg
  26. 26 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1600×1200.jpg
  27. 27 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1680×1050.jpg
  28. 28 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1680×1260.jpg
  29. 29 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1920×1200.jpg
  30. 30 http://files.smashingmagazine.com/wallpapers/jan-17/angel-in-snow/nocal/jan-17-angel-in-snow-nocal-1920×1440.jpg
  31. 31 http://www.mariakellerac.com
  32. 32 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/jan-17-colorful-2017-full.png
  33. 33 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/jan-17-colorful-2017-preview.png
  34. 34 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-320×480.png
  35. 35 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-640×480.png
  36. 36 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-640×1136.png
  37. 37 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-750×1334.png
  38. 38 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-800×480.png
  39. 39 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-800×600.png
  40. 40 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1024×768.png
  41. 41 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1024×1024.png
  42. 42 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1152×864.png
  43. 43 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1242×2208.png
  44. 44 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×720.png
  45. 45 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×800.png
  46. 46 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×960.png
  47. 47 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1280×1024.png
  48. 48 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1366×768.png
  49. 49 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1400×1050.png
  50. 50 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1440×900.png
  51. 51 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1600×1200.png
  52. 52 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1680×1050.png
  53. 53 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1680×1200.png
  54. 54 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1920×1080.png
  55. 55 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1920×1200.png
  56. 56 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-1920×1440.png
  57. 57 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-2560×1440.png
  58. 58 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/cal/jan-17-colorful-2017-cal-2880×1800.png
  59. 59 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-320×480.png
  60. 60 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-640×480.png
  61. 61 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-640×1136.png
  62. 62 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-750×1334.png
  63. 63 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-800×480.png
  64. 64 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-800×600.png
  65. 65 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1024×768.png
  66. 66 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1024×1024.png
  67. 67 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1152×864.png
  68. 68 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1242×2208.png
  69. 69 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×720.png
  70. 70 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×800.png
  71. 71 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×960.png
  72. 72 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1280×1024.png
  73. 73 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1366×768.png
  74. 74 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1400×1050.png
  75. 75 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1440×900.png
  76. 76 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1600×1200.png
  77. 77 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1680×1050.png
  78. 78 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1680×1200.png
  79. 79 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1920×1080.png
  80. 80 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1920×1200.png
  81. 81 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-1920×1440.png
  82. 82 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-2560×1440.png
  83. 83 http://files.smashingmagazine.com/wallpapers/jan-17/colorful-2017/nocal/jan-17-colorful-2017-nocal-2880×1800.png
  84. 84 http://www.damnperfect.com
  85. 85 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/jan-17-a-new-start-full.jpg
  86. 86 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/jan-17-a-new-start-preview.jpg
  87. 87 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-320×480.jpg
  88. 88 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-640×480.jpg
  89. 89 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-800×480.jpg
  90. 90 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-800×600.jpg
  91. 91 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1024×768.jpg
  92. 92 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1024×1024.jpg
  93. 93 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1152×864.jpg
  94. 94 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×720.jpg
  95. 95 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×800.jpg
  96. 96 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×960.jpg
  97. 97 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1280×1024.jpg
  98. 98 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1366×768.jpg
  99. 99 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1400×1050.jpg
  100. 100 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1440×900.jpg
  101. 101 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1600×1200.jpg
  102. 102 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1680×1050.jpg
  103. 103 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1680×1200.jpg
  104. 104 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1920×1080.jpg
  105. 105 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1920×1200.jpg
  106. 106 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-1920×1440.jpg
  107. 107 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/cal/jan-17-a-new-start-cal-2560×1440.jpg
  108. 108 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-320×480.jpg
  109. 109 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-640×480.jpg
  110. 110 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-800×480.jpg
  111. 111 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-800×600.jpg
  112. 112 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1024×768.jpg
  113. 113 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1024×1024.jpg
  114. 114 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1152×864.jpg
  115. 115 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×720.jpg
  116. 116 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×800.jpg
  117. 117 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×960.jpg
  118. 118 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1280×1024.jpg
  119. 119 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1366×768.jpg
  120. 120 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1400×1050.jpg
  121. 121 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1440×900.jpg
  122. 122 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1600×1200.jpg
  123. 123 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1680×1050.jpg
  124. 124 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1680×1200.jpg
  125. 125 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920×1080.jpg
  126. 126 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920×1200.jpg
  127. 127 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-1920×1440.jpg
  128. 128 http://files.smashingmagazine.com/wallpapers/jan-17/a-new-start/nocal/jan-17-a-new-start-nocal-2560×1440.jpg
  129. 129 http://acodez.in/
  130. 130 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/jan-17-happy-hot-tea-month-full.png
  131. 131 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/jan-17-happy-hot-tea-month-preview.png
  132. 132 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-320×480.png
  133. 133 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-640×480.png
  134. 134 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-800×480.png
  135. 135 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-800×600.png
  136. 136 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1024×768.png
  137. 137 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1024×1024.png
  138. 138 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1152×864.png
  139. 139 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1280×720.png
  140. 140 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1280×960.png
  141. 141 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1280×1024.png
  142. 142 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1366×768.png
  143. 143 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1400×1050.png
  144. 144 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1440×900.png
  145. 145 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1600×1200.png
  146. 146 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1680×1050.png
  147. 147 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1680×1200.png
  148. 148 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1920×1080.png
  149. 149 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1920×1200.png
  150. 150 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-1920×1440.png
  151. 151 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/cal/jan-17-happy-hot-tea-month-cal-2560×1440.png
  152. 152 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-320×480.png
  153. 153 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-640×480.png
  154. 154 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-800×480.png
  155. 155 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-800×600.png
  156. 156 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1024×768.png
  157. 157 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1024×1024.png
  158. 158 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1152×864.png
  159. 159 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280×720.png
  160. 160 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280×960.png
  161. 161 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1280×1024.png
  162. 162 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1366×768.png
  163. 163 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1400×1050.png
  164. 164 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1440×900.png
  165. 165 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1600×1200.png
  166. 166 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1680×1050.png
  167. 167 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1680×1200.png
  168. 168 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920×1080.png
  169. 169 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920×1200.png
  170. 170 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-1920×1440.png
  171. 171 http://files.smashingmagazine.com/wallpapers/jan-17/happy-hot-tea-month/nocal/jan-17-happy-hot-tea-month-nocal-2560×1440.png
  172. 172 https://www.facebook.com/Barberrydesign/
  173. 173 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/jan-17-love-makes-you-warm-full.png
  174. 174 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/jan-17-love-makes-you-warm-preview.png
  175. 175 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-320×480.png
  176. 176 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-640×480.png
  177. 177 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1024×768.png
  178. 178 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1280×720.png
  179. 179 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1280×800.png
  180. 180 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1680×1050.png
  181. 181 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-1920×1200.png
  182. 182 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/cal/jan-17-love-makes-you-warm-cal-2560×1440.png
  183. 183 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-320×480.png
  184. 184 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-640×480.png
  185. 185 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1024×768.png
  186. 186 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1280×720.png
  187. 187 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1280×800.png
  188. 188 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1680×1050.png
  189. 189 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-1920×1200.png
  190. 190 http://files.smashingmagazine.com/wallpapers/jan-17/love-makes-you-warm/nocal/jan-17-love-makes-you-warm-nocal-2560×1440.png
  191. 191 http://www.tazi.com.au
  192. 192 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/jan-17-hello-summer-in-australia-full.png
  193. 193 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/jan-17-hello-summer-in-australia-preview.png
  194. 194 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-320×480.png
  195. 195 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-640×480.png
  196. 196 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-800×600.png
  197. 197 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1024×768.png
  198. 198 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1152×864.png
  199. 199 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1280×720.png
  200. 200 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1280×960.png
  201. 201 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1600×1200.png
  202. 202 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1920×1080.png
  203. 203 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-1920×1440.png
  204. 204 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/cal/jan-17-hello-summer-in-australia-cal-2560×1440.png
  205. 205 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-320×480.png
  206. 206 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-640×480.png
  207. 207 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-800×600.png
  208. 208 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1024×768.png
  209. 209 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1152×864.png
  210. 210 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1280×720.png
  211. 211 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1280×960.png
  212. 212 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1600×1200.png
  213. 213 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1920×1080.png
  214. 214 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-1920×1440.png
  215. 215 http://files.smashingmagazine.com/wallpapers/jan-17/hello-summer-in-australia/nocal/jan-17-hello-summer-in-australia-nocal-2560×1440.png
  216. 216 http://www.katherine-appleby.com
  217. 217 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/jan-17-summer-celebration-full.png
  218. 218 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/jan-17-summer-celebration-preview.png
  219. 219 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-320×480.png
  220. 220 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-640×480.png
  221. 221 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-800×480.png
  222. 222 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-800×600.png
  223. 223 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1024×768.png
  224. 224 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1024×1024.png
  225. 225 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1152×864.png
  226. 226 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×720.png
  227. 227 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×800.png
  228. 228 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×960.png
  229. 229 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1280×1024.png
  230. 230 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1400×1050.png
  231. 231 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1440×900.png
  232. 232 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1600×1200.png
  233. 233 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1680×1050.png
  234. 234 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1680×1200.png
  235. 235 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1920×1080.png
  236. 236 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1920×1200.png
  237. 237 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-1920×1440.png
  238. 238 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/cal/jan-17-summer-celebration-cal-2560×1440.png
  239. 239 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-320×480.png
  240. 240 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-640×480.png
  241. 241 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-800×480.png
  242. 242 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-800×600.png
  243. 243 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1024×768.png
  244. 244 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1024×1024.png
  245. 245 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1152×864.png
  246. 246 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×720.png
  247. 247 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×800.png
  248. 248 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×960.png
  249. 249 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1280×1024.png
  250. 250 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1400×1050.png
  251. 251 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1440×900.png
  252. 252 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1600×1200.png
  253. 253 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1680×1050.png
  254. 254 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1680×1200.png
  255. 255 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1920×1080.png
  256. 256 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1920×1200.png
  257. 257 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-1920×1440.png
  258. 258 http://files.smashingmagazine.com/wallpapers/jan-17/summer-celebration/nocal/jan-17-summer-celebration-nocal-2560×1440.png
  259. 259 http://lucasdebelder.be/
  260. 260 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/jan-17-2017-the-year-of-the-rooster-full.png
  261. 261 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/jan-17-2017-the-year-of-the-rooster-preview.png
  262. 262 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-320×480.png
  263. 263 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-640×480.png
  264. 264 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-800×480.png
  265. 265 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-800×600.png
  266. 266 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1024×768.png
  267. 267 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1024×1024.png
  268. 268 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1152×864.png
  269. 269 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×720.png
  270. 270 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×800.png
  271. 271 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×960.png
  272. 272 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1280×1024.png
  273. 273 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1400×1050.png
  274. 274 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1440×900.png
  275. 275 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1600×1200.png
  276. 276 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1680×1050.png
  277. 277 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1680×1200.png
  278. 278 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1920×1080.png
  279. 279 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1920×1200.png
  280. 280 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-1920×1440.png
  281. 281 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-2560×1440.png
  282. 282 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/cal/jan-17-2017-the-year-of-the-rooster-cal-3840×2160.png
  283. 283 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-320×480.png
  284. 284 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-640×480.png
  285. 285 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-800×480.png
  286. 286 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-800×600.png
  287. 287 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1024×768.png
  288. 288 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1024×1024.png
  289. 289 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1152×864.png
  290. 290 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×720.png
  291. 291 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×800.png
  292. 292 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×960.png
  293. 293 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1280×1024.png
  294. 294 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1400×1050.png
  295. 295 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1440×900.png
  296. 296 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1600×1200.png
  297. 297 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1680×1050.png
  298. 298 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1680×1200.png
  299. 299 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1920×1080.png
  300. 300 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1920×1200.png
  301. 301 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-1920×1440.png
  302. 302 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-2560×1440.png
  303. 303 http://files.smashingmagazine.com/wallpapers/jan-17/2017-the-year-of-the-rooster/nocal/jan-17-2017-the-year-of-the-rooster-nocal-3840×2160.png
  304. 304 http://www.popwebdesign.net/index_eng.html
  305. 305 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/jan-17-new-beginnings-full.jpg
  306. 306 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/jan-17-new-beginnings-preview.jpg
  307. 307 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-320×480.jpg
  308. 308 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-640×480.jpg
  309. 309 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-800×480.jpg
  310. 310 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-800×600.jpg
  311. 311 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1024×768.jpg
  312. 312 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1152×864.jpg
  313. 313 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×720.jpg
  314. 314 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×800.jpg
  315. 315 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×960.jpg
  316. 316 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1280×1024.jpg
  317. 317 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1400×1050.jpg
  318. 318 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1440×900.jpg
  319. 319 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1600×1200.jpg
  320. 320 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1680×1050.jpg
  321. 321 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1680×1200.jpg
  322. 322 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1920×1080.jpg
  323. 323 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1920×1200.jpg
  324. 324 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-1920×1440.jpg
  325. 325 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/cal/jan-17-new-beginnings-cal-2560×1440.jpg
  326. 326 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-320×480.jpg
  327. 327 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-640×480.jpg
  328. 328 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-800×480.jpg
  329. 329 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-800×600.jpg
  330. 330 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1024×768.jpg
  331. 331 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1152×864.jpg
  332. 332 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×720.jpg
  333. 333 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×800.jpg
  334. 334 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×960.jpg
  335. 335 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1280×1024.jpg
  336. 336 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1400×1050.jpg
  337. 337 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1440×900.jpg
  338. 338 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1600×1200.jpg
  339. 339 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1680×1050.jpg
  340. 340 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1680×1200.jpg
  341. 341 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1920×1080.jpg
  342. 342 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1920×1200.jpg
  343. 343 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-1920×1440.jpg
  344. 344 http://files.smashingmagazine.com/wallpapers/jan-17/new-beginnings/nocal/jan-17-new-beginnings-nocal-2560×1440.jpg
  345. 345 http://liapantazi.com
  346. 346 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/jan-17-year-of-the-rooster-full.jpg
  347. 347 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/jan-17-year-of-the-rooster-preview.jpg
  348. 348 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-640×480.jpg
  349. 349 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-800×600.jpg
  350. 350 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1024×768.jpg
  351. 351 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1152×864.jpg
  352. 352 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1280×720.jpg
  353. 353 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1280×800.jpg
  354. 354 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1280×960.jpg
  355. 355 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1400×1050.jpg
  356. 356 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1440×900.jpg
  357. 357 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1600×1200.jpg
  358. 358 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1680×1050.jpg
  359. 359 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1920×1080.jpg
  360. 360 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1920×1200.jpg
  361. 361 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1920×1440.jpg
  362. 362 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-2560×1440.jpg
  363. 363 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/cal/jan-17-year-of-the-rooster-cal-1366×768.jpg
  364. 364 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-640×480.jpg
  365. 365 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-800×600.jpg
  366. 366 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1024×768.jpg
  367. 367 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1152×864.jpg
  368. 368 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1280×720.jpg
  369. 369 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1280×800.jpg
  370. 370 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1280×960.jpg
  371. 371 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1400×1050.jpg
  372. 372 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1440×900.jpg
  373. 373 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1600×1200.jpg
  374. 374 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1680×1050.jpg
  375. 375 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1920×1080.jpg
  376. 376 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1920×1200.jpg
  377. 377 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1920×1440.jpg
  378. 378 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-2560×1440.jpg
  379. 379 http://files.smashingmagazine.com/wallpapers/jan-17/year-of-the-rooster/nocal/jan-17-year-of-the-rooster-nocal-1366×768.jpg
  380. 380 https://www.creitive.com/
  381. 381 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/jan-17-reindeer-full.png
  382. 382 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/jan-17-reindeer-preview.png
  383. 383 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-320×480.png
  384. 384 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-640×480.png
  385. 385 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-800×480.png
  386. 386 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-800×600.png
  387. 387 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1024×768.png
  388. 388 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1024×1024.png
  389. 389 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1152×864.png
  390. 390 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1280×720.png
  391. 391 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1280×800.png
  392. 392 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1280×960.png
  393. 393 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1400×1050.png
  394. 394 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1440×900.png
  395. 395 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1600×1200.png
  396. 396 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1680×1050.png
  397. 397 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1680×1200.png
  398. 398 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1920×1080.png
  399. 399 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1920×1200.png
  400. 400 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-1920×1440.png
  401. 401 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/cal/jan-17-reindeer-cal-2560×1440.png
  402. 402 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-320×480.png
  403. 403 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-640×480.png
  404. 404 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-800×480.png
  405. 405 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-800×600.png
  406. 406 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1024×768.png
  407. 407 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1024×1024.png
  408. 408 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1152×864.png
  409. 409 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1280×720.png
  410. 410 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1280×800.png
  411. 411 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1280×960.png
  412. 412 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1400×1050.png
  413. 413 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1440×900.png
  414. 414 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1600×1200.png
  415. 415 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1680×1050.png
  416. 416 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1680×1200.png
  417. 417 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1920×1080.png
  418. 418 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1920×1200.png
  419. 419 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-1920×1440.png
  420. 420 http://files.smashingmagazine.com/wallpapers/jan-17/reindeer/nocal/jan-17-reindeer-nocal-2560×1440.png
  421. 421 http://0effortthemes.com/
  422. 422 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/jan-17-travel-explore-full.jpg
  423. 423 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/jan-17-travel-explore-preview.jpg
  424. 424 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×720.jpg
  425. 425 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×800.jpg
  426. 426 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×960.jpg
  427. 427 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1280×1024.jpg
  428. 428 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1400×1050.jpg
  429. 429 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1440×900.jpg
  430. 430 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1600×1200.jpg
  431. 431 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1680×1050.jpg
  432. 432 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1680×1200.jpg
  433. 433 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1920×1080.jpg
  434. 434 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1920×1440.jpg
  435. 435 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-2560×1440.jpg
  436. 436 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/cal/jan-17-travel-explore-cal-1366×768.jpg
  437. 437 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×720.jpg
  438. 438 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×800.jpg
  439. 439 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×960.jpg
  440. 440 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1280×1024.jpg
  441. 441 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1400×1050.jpg
  442. 442 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1440×900.jpg
  443. 443 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1600×1200.jpg
  444. 444 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1680×1050.jpg
  445. 445 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1680×1200.jpg
  446. 446 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1920×1080.jpg
  447. 447 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1920×1440.jpg
  448. 448 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-2560×1440.jpg
  449. 449 http://files.smashingmagazine.com/wallpapers/jan-17/travel-explore/nocal/jan-17-travel-explore-nocal-1366×768.jpg
  450. 450 http://melissa.bogemans.com/
  451. 451 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/jan-17-the-rooster-wishes-you-a-happy-new-year-full.png
  452. 452 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/jan-17-the-rooster-wishes-you-a-happy-new-year-preview.png
  453. 453 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-640×480.png
  454. 454 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-800×480.png
  455. 455 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-800×600.png
  456. 456 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1024×768.png
  457. 457 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1024×1024.png
  458. 458 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1152×864.png
  459. 459 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×720.png
  460. 460 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×800.png
  461. 461 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×960.png
  462. 462 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1280×1024.png
  463. 463 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1400×1050.png
  464. 464 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1440×900.png
  465. 465 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1600×1200.png
  466. 466 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1680×1050.png
  467. 467 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1680×1200.png
  468. 468 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1920×1080.png
  469. 469 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1920×1200.png
  470. 470 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-1920×1440.png
  471. 471 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/cal/jan-17-the-rooster-wishes-you-a-happy-new-year-cal-2560×1440.png
  472. 472 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-640×480.png
  473. 473 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-800×480.png
  474. 474 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-800×600.png
  475. 475 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1024×768.png
  476. 476 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1024×1024.png
  477. 477 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1152×864.png
  478. 478 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×720.png
  479. 479 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×800.png
  480. 480 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×960.png
  481. 481 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1280×1024.png
  482. 482 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1400×1050.png
  483. 483 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1440×900.png
  484. 484 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1600×1200.png
  485. 485 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1680×1050.png
  486. 486 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1680×1200.png
  487. 487 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1920×1080.png
  488. 488 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1920×1200.png
  489. 489 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-1920×1440.png
  490. 490 http://files.smashingmagazine.com/wallpapers/jan-17/the-rooster-wishes-you-a-happy-new-year/nocal/jan-17-the-rooster-wishes-you-a-happy-new-year-nocal-2560×1440.png
  491. 491 http://www.safiabegum.com
  492. 492 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/jan-17-happy-birthday-a-a-milne-full.png
  493. 493 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/jan-17-happy-birthday-a-a-milne-preview.png
  494. 494 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-320×480.png
  495. 495 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-640×480.png
  496. 496 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-800×480.png
  497. 497 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-800×600.png
  498. 498 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1024×768.png
  499. 499 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1024×1024.png
  500. 500 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×720.png
  501. 501 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×800.png
  502. 502 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×960.png
  503. 503 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1280×1024.png
  504. 504 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1400×1050.png
  505. 505 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1440×900.png
  506. 506 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1600×1200.png
  507. 507 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1680×1050.png
  508. 508 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1680×1200.png
  509. 509 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1920×1080.png
  510. 510 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1920×1200.png
  511. 511 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1920×1440.png
  512. 512 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-2560×1440.png
  513. 513 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/cal/jan-17-happy-birthday-a-a-milne-cal-1366×768.png
  514. 514 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-320×480.png
  515. 515 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-640×480.png
  516. 516 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-800×480.png
  517. 517 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-800×600.png
  518. 518 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1024×768.png
  519. 519 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1024×1024.png
  520. 520 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×720.png
  521. 521 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×800.png
  522. 522 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×960.png
  523. 523 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1280×1024.png
  524. 524 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1400×1050.png
  525. 525 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1440×900.png
  526. 526 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1600×1200.png
  527. 527 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1680×1050.png
  528. 528 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1680×1200.png
  529. 529 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1920×1080.png
  530. 530 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1920×1200.png
  531. 531 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1920×1440.png
  532. 532 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-2560×1440.png
  533. 533 http://files.smashingmagazine.com/wallpapers/jan-17/happy-birthday-a-a-milne/nocal/jan-17-happy-birthday-a-a-milne-nocal-1366×768.png
  534. 534 http://www.facebook.com/doud.design
  535. 535 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/jan-17-ice-crime-full.jpg
  536. 536 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/jan-17-ice-crime-preview.jpg
  537. 537 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1280×1024.jpg
  538. 538 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1400×1050.jpg
  539. 539 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1440×900.jpg
  540. 540 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1600×1200.jpg
  541. 541 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1680×1050.jpg
  542. 542 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1680×1200.jpg
  543. 543 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1920×1080.jpg
  544. 544 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1920×1200.jpg
  545. 545 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1920×1440.jpg
  546. 546 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-2560×1440.jpg
  547. 547 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/cal/jan-17-ice-crime-cal-1366×768.jpg
  548. 548 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1280×1024.jpg
  549. 549 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1400×1050.jpg
  550. 550 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1440×900.jpg
  551. 551 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1600×1200.jpg
  552. 552 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1680×1050.jpg
  553. 553 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1680×1200.jpg
  554. 554 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1920×1080.jpg
  555. 555 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1920×1200.jpg
  556. 556 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1920×1440.jpg
  557. 557 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-2560×1440.jpg
  558. 558 http://files.smashingmagazine.com/wallpapers/jan-17/ice-crime/nocal/jan-17-ice-crime-nocal-1366×768.jpg
  559. 559 https://www.behance.net/jamesmitchell23
  560. 560 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/jan-17-the-worried-weighing-scales-full.jpg
  561. 561 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/jan-17-the-worried-weighing-scales-preview.jpg
  562. 562 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1280×720.jpg
  563. 563 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1280×800.jpg
  564. 564 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1440×900.jpg
  565. 565 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1680×1050.jpg
  566. 566 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1920×1080.jpg
  567. 567 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1920×1200.jpg
  568. 568 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-2560×1440.jpg
  569. 569 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-1366×768.jpg
  570. 570 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/cal/jan-17-the-worried-weighing-scales-cal-2880×1800.jpg
  571. 571 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1280×720.jpg
  572. 572 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1280×800.jpg
  573. 573 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1440×900.jpg
  574. 574 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1680×1050.jpg
  575. 575 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1920×1080.jpg
  576. 576 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1920×1200.jpg
  577. 577 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-2560×1440.jpg
  578. 578 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-1366×768.jpg
  579. 579 http://files.smashingmagazine.com/wallpapers/jan-17/the-worried-weighing-scales/nocal/jan-17-the-worried-weighing-scales-nocal-2880×1800.jpg
  580. 580 http://www.code-master.be
  581. 581 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/jan-17-wake-up-it-is-time-to-study-full.jpg
  582. 582 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/jan-17-wake-up-it-is-time-to-study-preview.jpg
  583. 583 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-640×480.jpg
  584. 584 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-800×600.jpg
  585. 585 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1024×768.jpg
  586. 586 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1280×800.jpg
  587. 587 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1440×900.jpg
  588. 588 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1680×1050.jpg
  589. 589 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-1920×1200.jpg
  590. 590 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/cal/jan-17-wake-up-it-is-time-to-study-cal-2880×1800.jpg
  591. 591 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-640×480.jpg
  592. 592 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-800×600.jpg
  593. 593 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1024×768.jpg
  594. 594 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1280×800.jpg
  595. 595 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1440×900.jpg
  596. 596 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1680×1050.jpg
  597. 597 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-1920×1200.jpg
  598. 598 http://files.smashingmagazine.com/wallpapers/jan-17/wake-up-it-is-time-to-study/nocal/jan-17-wake-up-it-is-time-to-study-nocal-2880×1800.jpg
  599. 599 https://www.behance.net/gallery/46394693/zzzz?unverified=1
  600. 600 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/jan-17-angels-of-heaven-full.jpg
  601. 601 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/jan-17-angels-of-heaven-preview.jpg
  602. 602 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-320×480.jpg
  603. 603 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-800×600.jpg
  604. 604 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-1280×720.jpg
  605. 605 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-1280×1024.jpg
  606. 606 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-1920×1080.jpg
  607. 607 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/cal/jan-17-angels-of-heaven-cal-2560×1440.jpg
  608. 608 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-320×480.jpg
  609. 609 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-800×600.jpg
  610. 610 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-1280×720.jpg
  611. 611 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-1280×1024.jpg
  612. 612 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-1920×1080.jpg
  613. 613 http://files.smashingmagazine.com/wallpapers/jan-17/angels-of-heaven/nocal/jan-17-angels-of-heaven-nocal-2560×1440.jpg
  614. 614 https://www.behance.net/filipatravassos
  615. 615 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/jan-17-the-tree-full.png
  616. 616 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/jan-17-the-tree-preview.png
  617. 617 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-640×480.png
  618. 618 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-800×600.png
  619. 619 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1024×1024.png
  620. 620 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1280×720.png
  621. 621 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1280×960.png
  622. 622 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1366×768.png
  623. 623 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1440×900.png
  624. 624 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1680×1050.png
  625. 625 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-1920×1200.png
  626. 626 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/cal/jan-17-the-tree-cal-2560×1440.png
  627. 627 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-640×480.png
  628. 628 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-800×600.png
  629. 629 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1024×1024.png
  630. 630 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1280×720.png
  631. 631 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1280×960.png
  632. 632 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1366×768.png
  633. 633 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1440×900.png
  634. 634 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1680×1050.png
  635. 635 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-1920×1200.png
  636. 636 http://files.smashingmagazine.com/wallpapers/jan-17/the-tree/nocal/jan-17-the-tree-nocal-2560×1440.png
  637. 637 http://thomasdebelder.be/
  638. 638 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/jan-17-lets-do-great-things-together-full.jpg
  639. 639 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/jan-17-lets-do-great-things-together-preview.jpg
  640. 640 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1024×768.jpg
  641. 641 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1280×1024.jpg
  642. 642 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1440×900.jpg
  643. 643 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1680×1200.jpg
  644. 644 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1920×1080.jpg
  645. 645 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1920×1200.jpg
  646. 646 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-1920×1440.jpg
  647. 647 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/cal/jan-17-lets-do-great-things-together-cal-2560×1440.jpg
  648. 648 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1024×768.jpg
  649. 649 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1280×1024.jpg
  650. 650 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1440×900.jpg
  651. 651 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1680×1200.jpg
  652. 652 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1920×1080.jpg
  653. 653 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1920×1200.jpg
  654. 654 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-1920×1440.jpg
  655. 655 http://files.smashingmagazine.com/wallpapers/jan-17/lets-do-great-things-together/nocal/jan-17-lets-do-great-things-together-nocal-2560×1440.jpg
  656. 656 http://www.marijazaric.com/
  657. 657 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/jan-17-observing-cat-full.jpg
  658. 658 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/jan-17-observing-cat-preview.jpg
  659. 659 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-800×450.jpg
  660. 660 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1280×720.jpg
  661. 661 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1366×768.jpg
  662. 662 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1440×810.jpg
  663. 663 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1600×900.jpg
  664. 664 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1680×945.jpg
  665. 665 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-1920×1080.jpg
  666. 666 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/cal/jan-17-observing-cat-cal-2560×1440.jpg
  667. 667 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-800×450.jpg
  668. 668 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1280×720.jpg
  669. 669 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1366×768.jpg
  670. 670 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1440×810.jpg
  671. 671 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1600×900.jpg
  672. 672 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1680×945.jpg
  673. 673 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-1920×1080.jpg
  674. 674 http://files.smashingmagazine.com/wallpapers/jan-17/observing-cat/nocal/jan-17-observing-cat-nocal-2560×1440.jpg
  675. 675 https://www.behance.net/RodFlores
  676. 676 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/jan-17-it-shines-full.jpg
  677. 677 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/jan-17-it-shines-preview.jpg
  678. 678 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1024×768.jpg
  679. 679 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1280×720.jpg
  680. 680 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1280×800.jpg
  681. 681 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1366×768.jpg
  682. 682 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1440×900.jpg
  683. 683 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1680×1050.jpg
  684. 684 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-1920×1080.jpg
  685. 685 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/cal/jan-17-it-shines-cal-2560×1440.jpg
  686. 686 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1024×768.jpg
  687. 687 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1280×720.jpg
  688. 688 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1280×800.jpg
  689. 689 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1366×768.jpg
  690. 690 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1440×900.jpg
  691. 691 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1680×1050.jpg
  692. 692 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-1920×1080.jpg
  693. 693 http://files.smashingmagazine.com/wallpapers/jan-17/it-shines/nocal/jan-17-it-shines-nocal-2560×1440.jpg
  694. 694 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook