It’s almost time to leave winter behind us here in the Northern Hemisphere. Most of the time, the weather can’t quite make up its mind, and so the days pass by with half of the sky sunny while the other half gray. Nature usually tends to have a strong impact on my mood, and so these days I feel like I’m literally in a gray zone — between winter and spring.

I’m not sure about you, but with springtime lurking around the corner, my need for extra inspiration is even bigger. So, I hope that this month’s set will give you just that spark you need to cheer you up and boost your creativity.

Further Inspiration on SmashingMag: Link

• Spotify Playlists To Fuel Your Coding And Design Sessions¹
• Delightful Bits Of Vintage Graphic Design Inspiration²
• Things You Didn’t Know Your Doodles Could Accomplish³
• How To Enhance Your Creativity: Taming The Wild Mind⁴
• How To Get Started With Sketchnotes⁵

SZ Magazin Link

The style and the little details such as the bottom band on his pants, his shirts and his handbag are the cherries on the cake.

⁶

The Classics Are Coming! Link

Exciting times ahead for cycling fans. This nice design however was to celebrate Chris Froome winning Le Tour for the third time. Love how the body is arched over.

⁸

The Best Things In Life Are Free Link

Illustration for Lonely Planet‘s book. A illustration style reminiscent of mid-century hand-painted billboards.

¹⁰

Mountains – Steve Wolf Link

Probably not your average color combo but it sure works.

¹²

Control 4 Link

Part of a murals series for a company that is leading the way in smart home technology. They turned out wonderful. See them all¹⁴.

¹⁵

Buy Local Link

Cool idea to visualize a campaign to ‘buy local’ this way. Creative! Also digging those grunge effects.

¹⁷

Elementi – The Rise And Fall Of British Pound Link

An editorial illustration that accompanies an article about the history of the British Pound.

¹⁹

The Handmade Soap Company Link

I have seen this technique of combining real products with simple shape paper-cut elements a couple of times already and the result is really beautiful.

²¹

Star Trek Postage Stamps Link

In order to celebrate the 50th Anniversary of the original Star Trek television series on CBS, the Philadelphian design studio ‘The Heads Of State’ created these stamps. Large view here²³.

²⁴

Umami Link

An illustration for Umami, a chain of restaurants based in Zagreb, Croatia. It was made as a part of a poster series which takes on curiosity and exploration of different tastes and flavors.

²⁶

Tsawwassen Mills Link

The hair, the skirt but especially her stockings are what makes this illustration what it is. Such class! Look at that shadow.

²⁸

Nestlé Link

These vegetables are beautiful. They have a certain edge. They are items for new packaging.

³⁰

Create Your Own Summer Adventure Link

Wonderful color choices. Love this special 2D approach where things are viewed from 2 different angles, top and front. Makes you hardly wait for summer to arrive!

³²

Smart Wardrobe Link

Artwork that shows us a beautiful way of how the illustrator’s imagination thinks and works.

³⁴

Raúl Soria – Sport Link

I need my weekly dose to keep me sane. Interesting bright colors and cool pattern details.

³⁶

Van Morrison Las Vegas Poster Link

Talk about making the most of a limited set of colors. The neon lightbulbs are so well done. Incredible piece of work. Be sure to watch the process video³⁸!

³⁹

The Minimalism Of Winter Link

Great textures and atmosphere. Just by looking at it you can almost feel the cold.

⁴¹

Tycho World Tour Link

I have been enjoying Tycho’s latest album and wanted to go see Scott live in Brussels but it’s sold out already. This is the world tour poster.

⁴³

Q & A Link

Sometimes you don’t need much to get an interesting result. Look up! In his series, Alexander Missen captured many fundamental symbols of America.

⁴⁵

Marketing Page Link

Love the illustration style. Inspiring color choices, too.

⁴⁷

Crane Capsul Link

So simple, yet so amazing! Love deconstructing this. So much to learn.

⁴⁹

Forms | Shapes Link

Great personal project by Peter Tarka. Such great details and attention to colors and backdrops in this series. There are a few more⁵¹ to check out.

⁵²

Making House Link

Very nice how the objects are placed so you are really looking inside.

⁵⁴

Connecting The Dots Link

Pictures like this make you forget the cold. Some nice light and colors shot in Ringerike, Norway.

⁵⁶

Bicycle Retro Cruise Link

A poster for a bicycle Retro Cruise in Kyiv. Original style! Patterns on the socks and jacket are simply fabulous.

⁵⁸

An Autumn Office Depression Link

Quite busy, I admit, but I admire how everything flows into each other. Well done, especially since it’s not that easy using only a limited amount of colors.

⁶⁰

Genome Magazine Link

This cover for Genome is just absolutely brilliant! So fitting, and just look at those colors. So yummy!

⁶²

Green Link

I’ve heard so many good things about Iceland and by looking at this picture they all must be true.

⁶⁴

Teddy’s Link

Big neon sign for Teddy’s Nacho Royale, a burrito joint on the campus of a large social media company. Had no clue that they could create such attractive neon signs.

⁶⁶

Voyage To The Deep Link

The vintage atmosphere is lovely. Makes me think of a Jules Verne novel.

⁶⁸

Crowd Goes Wild Link

The artist’s style is obviously inspired by 1940s comic book art in this piece, as well as the Russian avant-garde movement and printed materials from the 1950s/60s.

⁷⁰

It’s Nice That Link

The work of Christopher DeLorenzo is mostly black and white, and consists of lines with only a few filled areas.

⁷²

Eustace Tilley Link

An illustration of Eustace Tilley, the iconic dandy of New York.

⁷⁴

Retail News Link

Lovely colors and admiring the simplicity of the characters.

⁷⁶

Val Thorens – EasyJet Link

Cover illustration of ski resort Val Thorens for the EasyJet magazine Traveller.

⁷⁸

Jockey Link

The witty style of Jean-Michel Tixier is one of my top favorites. It was inspired by traditional French cartoons.

⁸⁰

Room With A View Link

The geometric style of Matthew Lyons. I first discovered his work way back in 2010⁸² thanks to Scott Hansen.

⁸³

Boat – Waves Link

A nice combination of colors, don’t you think?

⁸⁵

Great Escape Link

I always admired illustrators that are working for the fashion industry. The faces are so good! Those are difficult to get right.

⁸⁷

Great Escape II Link

A second one from Caroline. Just look at that hair! Those are some mad skills! The blush, the eyes, the lips…

⁸⁹

Sun Starburst Link

Stunning capture! It’s like a dream.

⁹¹

Bottle Logic Link

Memories from my childhood. The arcade park! Tasteful colors.

⁹³

Germany Shows Link

Wonderful to see the design system evolve with each location ISO50 visits while he’s on tour.

⁹⁵

“BREUNINGER” Christmas Link

Such a special style. Love how the ‘hair’ is done with all the hidden elements.

⁹⁷

Don’t Sweat It Link

Lovely example that shows what can be done when photographs are combined with custom lettering.

⁹⁹

TGV Magazine Link

Julien Pacaud is a French illustrator with a very particular style that you could describe as retro-futuristic.

¹⁰¹

The Guardian University Guide Link

The shape of the figures are super cute.

¹⁰³

Childhood Link

Happy from just looking at this. A lot items but still all very balanced. Illustration for Swissmiss’s Creative Morning‘s website.

¹⁰⁵

City Bridge Link

It’s quite impressive when you realize that most of this is made out of rectangles.

¹⁰⁷

Work Harder Link

A bit of motivation can’t hurt. Love the type used here and how the buildings were made.

¹⁰⁹

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/11/playlists-fuel-coding-design-sessions/
2. 2 https://www.smashingmagazine.com/2016/05/delightful-bits-of-vintage-graphic-design-inspiration/
3. 3 https://www.smashingmagazine.com/2013/10/things-you-can-accomplish-with-hand-sketching-doodling/
4. 4 https://www.smashingmagazine.com/2012/05/taming-the-wild-mind/
5. 5 https://www.smashingmagazine.com/2014/11/how-to-get-started-with-sketchnotes/
6. 6 https://agentpekka.com/artist/rami-niemi/sz-magazin-3/
7. 7 https://agentpekka.com/artist/rami-niemi/sz-magazin-3/
8. 8 http://www.studionorthandsouth.com/#/tour-de-france/
9. 9 http://www.studionorthandsouth.com/#/tour-de-france/
10. 10 https://agentpekka.com/artist/owen-gatley/the-best-things-in-life-are-free/
11. 11 https://agentpekka.com/artist/owen-gatley/the-best-things-in-life-are-free/
12. 12 https://dribbble.com/shots/3245415-Mountains
13. 13 https://dribbble.com/shots/3245415-Mountains
14. 14 http://mattsoncreative.com/work/control-4
15. 15 http://mattsoncreative.com/work/control-4
16. 16 http://mattsoncreative.com/work/control-4
17. 17 https://www.behance.net/gallery/46593031/Wave-Market-Posters
18. 18 https://www.behance.net/gallery/46593031/Wave-Market-Posters
19. 19 http://aleksandarsavic.rs/elementi-the-rise-and-fall-of-british-pound/
20. 20 http://aleksandarsavic.rs/elementi-the-rise-and-fall-of-british-pound/
21. 21 https://www.behance.net/gallery/47395933/The-Handmade-Soap-Company
22. 22 https://www.behance.net/gallery/47395933/The-Handmade-Soap-Company
23. 23 https://www.wired.com/wp-content/uploads/2016/01/startrekstamps.jpg
24. 24 http://theheadsofstate.com/work/star-trek/
25. 25 http://theheadsofstate.com/work/star-trek/
26. 26 https://www.behance.net/gallery/45727035/Various-illustrations-2-2016
27. 27 https://www.behance.net/gallery/45727035/Various-illustrations-2-2016
28. 28 http://studioposti.com/tsawwassen-mills
29. 29 http://studioposti.com/tsawwassen-mills
30. 30 http://www.maitefranchi.com/portfolio/nestle/
31. 31 http://www.maitefranchi.com/portfolio/nestle/
32. 32 https://www.behance.net/gallery/40644081/REAL-SIMPLE-Magazine-US-June-2016
33. 33 https://www.behance.net/gallery/40644081/REAL-SIMPLE-Magazine-US-June-2016
34. 34 https://www.behance.net/gallery/46789745/Looking-back-16
35. 35 https://www.behance.net/gallery/46789745/Looking-back-16
36. 36 http://www.raulsoria.de/#/sport/
37. 37 http://www.raulsoria.de/#/sport/
38. 38 https://vimeo.com/199739385
39. 39 https://dribbble.com/shots/3223287-Van-Morrison-Las-Vegas-Poster
40. 40 https://dribbble.com/shots/3223287-Van-Morrison-Las-Vegas-Poster
41. 41 https://www.behance.net/gallery/47518869/The-minimalism-of-winter
42. 42 https://www.behance.net/gallery/47518869/The-minimalism-of-winter
43. 43 http://blog.iso50.com/34914/tycho-world-tour/
44. 44 http://blog.iso50.com/34914/tycho-world-tour/
45. 45 http://www.alexandermissen.com/dhs8g4vjzhpvuimoouk95yuxameot2
46. 46 http://www.alexandermissen.com/dhs8g4vjzhpvuimoouk95yuxameot2
47. 47 https://dribbble.com/shots/3278766-Marketing-Page
48. 48 https://dribbble.com/shots/3278766-Marketing-Page
49. 49 https://dribbble.com/shots/3264058-Crane-Capsul
50. 50 https://dribbble.com/shots/3264058-Crane-Capsul
51. 51 https://www.behance.net/gallery/48173989/FORMS-SHAPES
52. 52 https://www.behance.net/gallery/48173989/FORMS-SHAPES
53. 53 https://www.behance.net/gallery/48173989/FORMS-SHAPES
54. 54 http://cenjun.com/new-gallery/0g3v4mpxrzf5fiahave5ifcyf237i5
55. 55 http://cenjun.com/new-gallery/0g3v4mpxrzf5fiahave5ifcyf237i5
56. 56 https://500px.com/photo/197721515/connecting-the-dots-by-ole-henrik-skjelstad
57. 57 https://500px.com/photo/197721515/connecting-the-dots-by-ole-henrik-skjelstad
58. 58 https://www.behance.net/gallery/40426737/Various-illustrations-Set-14
59. 59 https://www.behance.net/gallery/40426737/Various-illustrations-Set-14
60. 60 https://www.behance.net/gallery/45768275/Various-illustrations-Set-15
61. 61 https://www.behance.net/gallery/45768275/Various-illustrations-Set-15
62. 62 https://www.behance.net/gallery/47989947/Genome-Magazine-Script-Seal
63. 63 https://www.behance.net/gallery/47989947/Genome-Magazine-Script-Seal
64. 64 https://unsplash.com/?photo=Ovn1hyBge38
65. 65 https://unsplash.com/?photo=Ovn1hyBge38
66. 66 https://www.instagram.com/p/Uz7ijWsgS0/
67. 67 https://www.instagram.com/p/Uz7ijWsgS0/
68. 68 http://www.velcrosuit.com/Mingo-Lamberti-Tales-of-the-Sea
69. 69 http://www.velcrosuit.com/Mingo-Lamberti-Tales-of-the-Sea
70. 70 http://www.taviscoburn.com/portfolio.php?act=list_current&mode=page_view&p=13
71. 71 http://www.taviscoburn.com/portfolio.php?act=list_current&mode=page_view&p=13
72. 72 https://agentpekka.com/artist/christopher-delorenzo/its-nice-that-3/
73. 73 https://agentpekka.com/artist/christopher-delorenzo/its-nice-that-3/
74. 74 http://www.timboelaars.nl/the-new-yorker
75. 75 http://www.timboelaars.nl/the-new-yorker
76. 76 https://agentpekka.com/artist/robin-davey/retail-news-2/
77. 77 https://agentpekka.com/artist/robin-davey/retail-news-2/
78. 78 https://agentpekka.com/artist/pietari-posti/easyjet/
79. 79 https://agentpekka.com/artist/pietari-posti/easyjet/
80. 80 https://www.behance.net/gallery/45274435/M-le-monde-July-2016
81. 81 https://www.behance.net/gallery/45274435/M-le-monde-July-2016
82. 82 http://veerle.duoh.com/inspiration/detail/matthew_lyons
83. 83 https://twitter.com/LyonsMatthew/status/789103145343410176
84. 84 https://twitter.com/LyonsMatthew/status/789103145343410176
85. 85 http://www.andrewbannecker.com/art/
86. 86 http://www.andrewbannecker.com/art/
87. 87 http://carolineandrieu.com/filter/portrait/Nylon-US
88. 88 http://carolineandrieu.com/filter/portrait/Nylon-US
89. 89 http://carolineandrieu.com/filter/portrait/Nylon-US
90. 90 http://carolineandrieu.com/filter/portrait/Nylon-US
91. 91 https://500px.com/photo/199375651/good-morning-life-by-j%C3%B8rn-allan-pedersen
92. 92 https://500px.com/photo/199375651/good-morning-life-by-j%C3%B8rn-allan-pedersen
93. 93 https://dribbble.com/shots/3276804-Bottle-Logic-Week-of-Logic-Banner
94. 94 https://dribbble.com/shots/3276804-Bottle-Logic-Week-of-Logic-Banner
95. 95 https://twitter.com/ISO50/status/834077215012823041
96. 96 https://twitter.com/ISO50/status/834077215012823041
97. 97 http://olafhajek.com/index_illu.php?menuid=3
98. 98 http://olafhajek.com/index_illu.php?menuid=3
99. 99 http://friendsoftype.com/2016/05/dont-sweat-it/
100. 100 http://friendsoftype.com/2016/05/dont-sweat-it/
101. 101 http://www.julienpacaud.com/tgv-magazine#/id/i9135957
102. 102 http://www.julienpacaud.com/tgv-magazine#/id/i9135957
103. 103 https://www.behance.net/gallery/40427543/The-Guardian-University-Guide
104. 104 https://www.behance.net/gallery/40427543/The-Guardian-University-Guide
105. 105 https://creativemornings.com/themes/childhood
106. 106 https://creativemornings.com/themes/childhood
107. 107 http://kevindart.tumblr.com/post/154859317755/these-are-some-of-the-only-paintings-i-actually
108. 108 http://kevindart.tumblr.com/post/154859317755/these-are-some-of-the-only-paintings-i-actually
109. 109 https://dribbble.com/shots/3303992-Work-Harder

↑ Back to topTweet itShare on Facebook

As web developers, we all approach our work very differently. And even when you take a look at yourself, you’ll notice that the way you do your work does vary all the time. I, for example, have not reported a single bug to a browser vendor in the past year, despite having stumbled over a couple. I was just too lazy to write them up, report them, write a test case and care about follow-up comments.

This week, however, when integrating the Internationalization API for dates and times, I noticed a couple of inconsistencies and specification violations in several browsers, and I reported them. It took me one hour, but now browser vendors can at least fix these bugs. Today, I filed two new issues, because I’ve become more aware again of things that work in one browser but not in others. I think it’s important to change the way we work from time to time. It’s as easy as caring more about the issues we face and reporting them back.

Further Reading on SmashingMag: Link

• Getting Ready For HTTP/2: A Guide For Web Designers And Developers¹
• Front-End Performance Checklist 2017 (PDF, Apple Pages)²
• CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout³
• Help The Community! Report Browser Bugs!⁴

News Link

• Web annotations⁵ are now a web standard⁶, with a defined data model, vocabulary, and protocol. Let’s hope many of the browser vendors (Microsoft Edge) and service platforms will adopt the standard soon. For us developers it’s a huge opportunity, too, to build standardized annotations that are interoperable and to communicate with each other.

⁷

Security Link

• Let’s have a look at how Mr. Trump was hacked via DNS subdomain takeover¹⁰, a long-known technique¹¹ that most people who configure DNS entries for a domain aren’t aware of.
• Google Chrome now allows permitted site owners of a Chrome extension to override selected user settings¹². This means that a browser extension vendor who verified their domain via Google Webmaster Tools can override user settings such as homepage or the default search provider via their website. After reading this attack scenario¹³, I fear this could take the DNS subdomain attack to a new level.

Web Performance Link

• Justin Avery shares how you can configure HTTP/2 Server Push to work with WordPress¹⁴.

CSS/Sass Link

• Sometimes it’s the small things that help you a lot. Did you know that you can save time and avoid confusion in CSS by using the :not(:last-of-type) selector instead of two different selectors, for example? Timothy B. Smith explains how this little trick works¹⁵.
• Jen Simmons wrote yet another great article about the benefits of learning how to code layouts with CSS¹⁶.

Going Beyond… Link

• Vicki Boykis wrote an excellent piece called “Fix the internet by writing good stuff and being nice to people¹⁷” in which she points out one of the major issues on the internet: the fact that making money off content became worth more than the content itself.
• The free Sustainable UX conference took place two weeks ago. To get some insights into how we can achieve sustainability in tech, you can now watch the conference talks for free¹⁸.

¹⁹

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

— Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/
2. 2 https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
3. 3 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
4. 4 https://www.smashingmagazine.com/2011/09/help-the-community-report-browser-bugs/
5. 5 https://hypothes.is/blog/annotation-is-now-a-web-standard/
6. 6 https://www.w3.org/blog/news/archives/6156
7. 7 https://hypothes.is/blog/annotation-is-now-a-web-standard/
8. 8 https://hypothes.is/blog/annotation-is-now-a-web-standard/
9. 9 https://hypothes.is/blog/annotation-is-now-a-web-standard/
10. 10 http://www.networkworld.com/article/3171732/security/iraqi-hacker-took-credit-for-hijacking-subdomain-and-defacing-trump-site.html
11. 11 https://labs.detectify.com/2014/10/21/hostile-subdomain-takeover-using-herokugithubdesk-more/
12. 12 https://developer.chrome.com/extensions/settings_override
13. 13 https://labs.detectify.com/2014/10/21/hostile-subdomain-takeover-using-herokugithubdesk-more/
14. 14 https://responsivedesign.is/articles/configuring-http2-push-wordpress/
15. 15 https://theboldreport.net/2017/02/css-tip-use-not-to-save-time-and-lines-of-code/
16. 16 http://jensimmons.com/post/feb-28-2017/benefits-learning-how-code-layouts-css
17. 17 http://blog.vickiboykis.com/2016/11/20/fix-the-internet/
18. 18 https://www.youtube.com/playlist?list=PLrJVv8APJhWnHo_Gzt_cVwhLpABKtQi9R
19. 19 http://blog.vickiboykis.com/2016/11/20/fix-the-internet/
20. 20 http://blog.vickiboykis.com/2016/11/20/fix-the-internet/
21. 21 https://wdrl.info/donate
22. 22 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Douglas Crockford famously declared browsers to be “the most hostile software engineering environment imaginable,” and that wasn’t hyperbole. Ensuring that our websites work across a myriad of different devices, screen sizes and browsers our users depend on to access the web is a tall order, but it’s necessary. If our websites don’t enable users to accomplish the key tasks they come to do, we’ve failed them.

We should do everything in our power to ensure our websites function under even the harshest of scenarios, but at the same, we can’t expect our users to have the exact same experience in every browser, on every device. Yahoo realized this more than a decade ago and made it a central concept in its “Graded Browser Support¹” strategy:

Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation. Availability and accessibility of content should be our key priority.

And that was a few years before the iPhone was introduced!

Providing alternate experience pathways for our core functionality should be a no-brainer, but when it comes to implementing stuff we’d rather not think about, we often reach for the simplest drop-in solution, despite the potential negative impact it could have on our business.

Consider the EU’s “cookie law.”² If you’re unfamiliar, this somewhat contentious law³ is privacy legislation that requires websites to obtain consent from visitors before storing or retrieving information from their device. We call it the cookie law, but the legislation also applies to web storage⁴, IndexedDB⁵ and other client-side data storage and retrieval APIs.

Compliance with this law is achieved by:

1. notifying users that the website requires the ability to store and read information on their device;
2. providing a link to the website’s privacy statement, which includes information about the storage mechanisms being used and what they are being used for;
3. prompting users to confirm their acceptance of this requirement.

If you operate a website aimed at folks living in the EU and fail to do this, you could be subject to a substantial fine. You could even open yourself up to a lawsuit.

If you’ve had to deal with the EU cookie law before, you’re probably keenly aware that a ton of “solutions” are available to provide compliance. Those quotation marks are fully intentional because nearly every one I found — including the one provided by the EU⁶ itself — has been a drop-in JavaScript file that enables compliance. If we’re talking about the letter of the law, however, they don’t actually. The problem is that, as awesome and comprehensive as some of these solutions are, we can never be guaranteed that our JavaScript programs will actually run⁷. In order to truly comply with the letter of the law, we should provide a fallback version of the utility — just in case. Most people will never see it, but at least we know we’re covered if something goes wrong.

I stumbled into this morass while building the 10k Apart contest website⁸. We weren’t using cookies for much on the website — mainly analytics and vote-tracking — but we were using the Web Storage API⁹ to speed up the performance of the website and to save form data temporarily while folks were filling out the form. Because the contest was open to folks who live in the EU, we needed to abide by the cookie law. And because none of the solutions I found actually complied with the law in either spirit or reality — the notable exception being WordPress’ EU Cookie Law¹⁰ plugin, which works both with and without JavaScript, but the contest website wasn’t built in WordPress or even PHP, so I had to do something else — I opted to roll my own robust solution.

Planning It Out Link

I’m a big fan of using interface experience (IX) maps¹¹ to diagram functionality. I find their simple nature easy to understand and to tweak as I increase the fidelity of an experience. For this feature, I started with a (relatively) simple IX map that diagrammed what would happen when a user requests a page on the website.

¹²

This IX map outlines several potential experiences that vary based on the user’s choice and feature availability. I’ll walk through the ideal scenario first:

1. A user comes to the website for the first time. The server checks to see whether they have accepted the use of cookies and web storage but doesn’t find anything.
2. The server injects a banner into the HTML, containing the necessary messaging and a form that, when submitted, confirms acceptance.
3. The browser renders the page with the banner.
4. The user clicks to accept the use of cookies and web storage.
5. Client-side JavaScript sets the accepts cookie and closes the banner.
6. On subsequent page requests, the server reads the accepts cookie and does not inject the banner code. JavaScript sees the cookie and enables the cookie and web storage code.

For the vast majority of users, this is the experience they’ll get, and that’s awesome. That said, however, we can never be 100% guaranteed our client-side JavaScript code will run, so we need a backup plan. Here’s the fallback experience:

1. A user comes to the website for the first time. The server checks to see whether they have accepted the use of cookies and web storage but doesn’t find anything.
2. The server injects a banner into the HTML, containing the necessary messaging and a form that, when submitted, confirms acceptance.
3. The browser renders the page with the banner.
4. The user clicks to accept the use of cookies and web storage.
5. The click initiates a form post to the server, which responds by setting the accepts cookie before redirecting the user back to the page they were on.
6. On subsequent page requests, the server reads the accepts cookie and does not inject the banner code.
7. If JavaScript becomes available later, it will see the cookie and enable its cookie and web storage code.

Not bad. There’s an extra roundtrip to the server, but it’s a quick one, and, more importantly, it provides a foolproof fallback in the absence of our preferred JavaScript-driven option. True, it could fall victim to a networking issue, but there’s not much we can do to mitigate that without JavaScript in play.

Speaking of mitigating networking issues, the 10k Apart contest website uses a service worker¹⁴ to do some pretty aggressive caching; the service worker intercepts any page request and supplies a cached version if one exists. That could result in users getting a copy of the page with the banner still in it, even if they’ve already agreed to allow cookies. Time to update the IX map.

¹⁵

This is one of the reasons I like IX maps so much: They are really easy to generate and simple to update when you want to add features or handle more scenarios. With a few adjustments in place, I can account for the scenario in which a stale page includes the banner unnecessarily and have JavaScript remove it.

With this plan in place, it was time to implement it.

Server-Side Implementation Link

10k Apart’s back end is written in Node.js¹⁷ and uses Express¹⁸. I’m not going to get into the nitty-gritty of our installation and configuration, but I do want to talk about how I implemented this feature. First off, I opted to use Express’ cookie-parser¹⁹ middleware to let me get and set the cookie.

// enable cookie-parser for Express var cookieParser = require('cookie-parser'); app.use(cookieParser());

Once that was set up, I created my own custom Express middleware²⁰ that would intercept requests and check for the approves_cookies cookie:

var checkCookie = function(req, res, next) { res.locals.approves_cookies = ( req.cookies['approves_cookies'] === 'yes' ); res.locals.current_url = req.url || '/'; next(); };

This code establishes a middleware function named checkCookie(). All Express middleware gets access to the request (req), the response (res) and the next middleware function (next), so you’ll see those accounted for as the three arguments to that function. Then, within the function, I am modifying the response object to include two local variables (res.locals) to capture whether the cookie has already been set (res.locals.approves_cookies) and the currently requested URL (res.locals.current_url). Then, I call the next middleware function.

With that written, I can include this middleware in Express:

app.use(checkCookie);

All of the templates for the website are Mustache²¹ files, and Express automatically pipes res.locals into those templates. Knowing that, I created a Mustache partial²² to handle the banner:

{{^approves_cookies}} <div role="alert"> <form action="/cookies-ok" method="post"> <input type="hidden" name="redirect_to" value="{{current_url}}"> <p>This site uses cookies for analytics and to track voting. If you're interested, more details can be found in <a href="{{privacy_url}}#maincookiessimilartechnologiesmodule">our cookie policy</a>.</p> <button type="submit">I'm cool with that</button> </form> </div> {{/approves_cookies}}

This template uses an inverted section²³ that only renders the div when approves_cookies is false. Within that markup, you can also see the current_url getting piped into a hidden input to indicate where a user should be redirected if the form method of setting the cookie is used. You remembered: the fallback.

Speaking of the fallback, since we have one, we also need to handle that on the server side. Here’s the Node.js code for that:

var affirmCookies = function (req, res) { if ( ! req.cookies['approves_cookies'] ) { res.cookie('approves_cookies', 'yes', { secure: true, maxAge: ( 365 * 24 * 60 * 60 ) // 1 year }); } res.redirect(req.body.redirect_to); }; app.post('/cookies-ok', affirmCookies);

This ensures that if the form is submitted, Express will respond by setting the approves_cookies cookie (if it’s not already set) and then redirecting the user to the page they were on. Taken altogether, this gives us a solid baseline experience for every user.

Now, it’s worth noting that none of this code is going to be useful to you if your projects don’t involve the specific stack I was working with on this project (Node.js, Express, Mustache). That said, the logic I’ve outlined here and in the IX map is portable to pretty much any language or framework you happen to know and love.

OK, let’s switch gears and work some magic on the front end.

Front-End Implementation Link

When JavaScript is available and running properly, we’ll want to take full advantage of it, but it doesn’t make sense to run any code against the banner if it doesn’t exist, so first things first: I should check to see whether the banner is even in the page.

var $cookie_banner = document.getElementById('cookie-banner'); if ( $cookie_banner ) { // actual code will go here }

In order to streamline the application logic, I’m going to add another conditional within to check for the accepts_cookies cookie. I know from my second pass on the IX map there’s an outside chance that the banner might be served up by my service worker even if the accepts cookie exists, so checking for the cookie early lets me run only the bit of JavaScript that removes the banner. But before I jump into all of that, I’ll create a function I can call in any of my code to let me know whether the user has agreed to let me cookie them:

function cookiesApproved(){ return document.cookie.indexOf('approves_cookies') > -1; }

I need this check in multiple places throughout my JavaScript, so it makes sense to break it out into a separate function. Now, let’s revisit my banner-handling logic:

var $cookie_banner = document.getElementById('cookie-banner'); if ( $cookie_banner ) { // banner exists but cookie is set if ( cookiesApproved() ) { // hide the banner immediately! } // cookie has not been set else { // add the logic to set the cookie // and close the banner } }

Setting cookies in JavaScript is a little convoluted because you need to set it as a string, but it’s not too ghastly. I broke out the process into its own function so that I could set it as an event handler on the form:

function approveCookies( e ) { // prevent the form from submitting e.preventDefault(); var cookie, // placeholder for the cookie expires = new Date(); // start building expiry date // expire in one year expires.setFullYear( expires.getFullYear() + 1 ); // build the cookie cookie = [ 'approves_cookies=yes', 'expires=' + expires.toUTCString(), 'domain=' + window.location.hostname, window.location.protocol == 'https:' ? 'secure' : '' ]; // set it document.cookie = cookie.join('; '); // close up the banner closeCookieBanner(); // return return false; }; // find the form inside the banner var $form = $cookie_banner.getElementsByTagName('form')[0]; // hijack the submit event $form.addEventListener( 'submit', approveCookies, false );

The comments in the code should make it pretty clear, but just in case, here’s what I’m doing:

1. Hijack the form submission event (e) and cancel its default action using e.preventDefault().
2. Use the Date object to construct a date one year out.
3. Assemble the bits of the cookie, including the approves_cookies value, the expiry date, the domain the cookie is bound to, and whether the cookie should be secure (so I can test locally).
4. Set document.cookie equal to the assembled cookie string.
5. Trigger a separate method — closeCookieBanner() — to close the banner (which I will cover in a moment).

With that in place, I can define closeCookieBanner() to handle, well, closing up the banner. There are actually two instances in which I need this functionality: after setting the cookie (as we just saw) and if the service worker serves up a stale page that still has the banner in it. Even though each requires roughly the same functionality, I want to make the stale-page cleanup version a little more aggressive. Here’s the code:

function closeCookieBanner( immediate ) { // How fast to close? Animation takes .5s var close_speed = immediate ? 0 : 600; // remove window.setTimeout(function(){ $cookie_banner.parentNode.removeChild( $cookie_banner ); // remove the DOM reference $cookie_banner = null; }, close_speed); // animate closed if ( ! immediate ) { $cookie_banner.className = 'closing'; } }

This function takes a single optional argument. If true (or anything “truthy”²⁴) is passed in, the banner is immediately removed from the page (and its reference is deleted). If no argument is passed in, that doesn’t happen for 0.6 seconds, which is 0.1 seconds after the animation finishes up (we’ll get to the animation momentarily). The class change triggers that animation.

You already saw one instance of this function referenced in the previous code block. Here it is in the cached template branch of the conditional you saw earlier:

… // banner exists but cookie is set if ( cookiesApproved() ) { // close immediately closeCookieBanner( true ); } …

Adding Some Visual Sizzle Link

Because I brought up animations, I’ll discuss the CSS I’m using for the cookie banner component, too. Like most implementations of cookie notices, I opted for a visual full-width banner. On small screens, I wanted the banner to appear above the content and push it down the page. On larger screens I opted to affix it to the top of the viewport because it would not obstruct reading to nearly the same degree as it would on a small screen. Accomplishing this involved very little code:

#cookie-banner { background: #000; color: #fff; font-size: .875rem; text-align: center; } @media (min-width: 60em) { #cookie-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } }

Using the browser’s default styles, the cookie banner already displays block, so I didn’t really need to do much apart from set some basic text styles and colors. For the large screen (the “full-screen” version comes in at 60 ems), I affix it to the top of the screen using position: fixed, with a top offset of 0. Setting its left and right offsets to 0 ensures it will always take up the full width of the viewport. I also set the z-index quite high so it sits on top of everything else in the stack.

Here’s the result:

Once the basic design was there, I took another pass to spice it up a bit. I decided to have the banner animate in and out using CSS. First things first: I created two animations. Initially, I tried to run a single animation in two directions for each state (opening and closing) but ran into problems triggering the reversal — you might be better at CSS animations than I am, so feel free to give it a shot. In the end, I also decided to tweak the two animations to be slightly different, so I’m fine with having two of them:

@keyframes cookie-banner { 0% { max-height: 0; } 100% { max-height: 20em; } } @keyframes cookie-banner-reverse { 0% { max-height: 20em; } 100% { max-height: 0; display: none; } }

Not knowing how tall the banner would be (this is responsive design, after all), I needed it to animate to and from a height of auto. Thankfully, Nikita Vasilyev²⁵ published a fantastic overview of how to transition values to and from auto²⁶ a few years back. In short, animate max-height instead. The only thing to keep in mind is that the size of the non-zero max-height value you are transitioning to and from needs to be larger than your max, and it will also directly affect the speed of the animation. I found 20 ems to be more than adequate for this use case, but your project may require a different value.

It’s also worth noting that I used display: none at the conclusion of my cookie-banner-reverse animation (the closing one) to ensure the banner becomes unreachable to users of assistive technology such as screen readers. It’s probably unnecessary, but I did it as a failsafe just in case something happens and JavaScript doesn’t remove the banner from the DOM.

Wiring it up required only a few minor tweaks to the CSS:

#cookie-banner { … box-sizing: border-box; overflow: hidden; animation: cookie-banner 1s 1s linear forwards; } #cookie-banner.closing { animation: cookie-banner-reverse .5s linear forwards; }

This assigned the two animations to the two different banner states: The opening and resting state, cookie-banner, runs for one second after a one-second delay; the closing state, cookie-banner-reverse, runs for only half a second with no delay. I am using a class of closing, set via the JavaScript I showed earlier, to trigger the state change. Just for completeness, I’ll note that this code also stabilizes the dimensions of the banner with box-sizing: border-box and keeps the contents from spilling out of the banner using overflow: hidden.

One last bit of CSS tweaking and we’re done. On small screens, I’m leaving a margin between the cookie notice (#cookie-banner) and the page header (.banner). I want that to go away when the banner collapses, even if the cookie notice is not removed from the DOM. I can accomplish that with an adjacent-sibling selector:

#cookie-banner + .banner { transition: margin-top .5s; } #cookie-banner.closing + .banner { margin-top: 0; }

It’s worth noting that I am setting the top margin on every element but the first one, using Heydon Pickering’s clever “lobotomized owl²⁷” selector. So, the transition of margin-top on .banner will be from a specific value (in my case, 1.375 rem) to 0. With this code in place, the top margin will collapse over the same duration as the one used for the closing animation of the cookie banner and will be triggered by the very same class addition.

Simple, Robust, Resilient Link

What I like about this approach is that it is fairly simple. It took only about an hour or two to research and implement, and it checks all of the compliance boxes with respect to the EU law. It has minimal dependencies, offers several fallback options, cleans up after itself and is a relatively back-end-agnostic pattern.

When tasked with adding features we may not like — and, yes, I’d count a persistent nagging banner as one of those features — it’s often tempting to throw some code at it to get it done and over with. JavaScript is often a handy tool to accomplish that, especially because the logic can often be self-contained in an external script, configured and forgotten. But there’s a risk in that approach: JavaScript is never guaranteed²⁸. If the feature is “nice to have,” you might be able to get away with it, but it’s probably not a good idea to play fast and loose with a legal mandate like this. Taking a few minutes to step back and explore how the feature can be implemented with minimal effort on all fronts will pay dividends down the road. Believe me²⁹.

(rb, vf, il, al)

Front page image credit: Pexels³⁰.

Footnotes Link

1. 1 https://github.com/yui/yui3/wiki/Graded-Browser-Support
2. 2 http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=CELEX:32009L0136:EN:NOT
3. 3 https://webdevlaw.uk/category/eu-cookie-law/
4. 4 https://developer.mozilla.org/docs/Web/API/Web_Storage_API
5. 5 https://developer.mozilla.org/docs/Web/API/IndexedDB_API
6. 6 http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm#section_4
7. 7 https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/
8. 8 https://a-k-apart.com/
9. 9 https://developer.mozilla.org/docs/Web/API/Web_Storage_API
10. 10 https://wordpress.org/plugins/eu-cookie-law/
11. 11 https://www.aaron-gustafson.com/notebook/interface-experience-maps/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/01/cookie-law-large-1-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/cookie-law-large-1-opt.png
14. 14 https://developer.mozilla.org/docs/Web/API/Service_Worker_API
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/cookie-law-large-2-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/cookie-law-2-opt.png
17. 17 https://nodejs.org/
18. 18 http://expressjs.com/
19. 19 https://github.com/expressjs/cookie-parser
20. 20 http://expressjs.com/en/guide/using-middleware.html
21. 21 https://mustache.github.io/
22. 22 https://mustache.github.io/mustache.5.html#Partials
23. 23 https://mustache.github.io/mustache.5.html#Inverted-Sections
24. 24 https://developer.mozilla.org/docs/Glossary/Truthy
25. 25 https://twitter.com/ELV1S
26. 26 http://n12v.com/css-transition-to-from-auto/
27. 27 http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
28. 28 http://kryogenix.org/code/browser/everyonehasjs.html
29. 29 https://medium.com/@AaronGustafson/the-true-cost-of-progressive-enhancement-d395b6502979
30. 30 https://www.pexels.com/photo/yellow-and-black-arrow-road-signage-during-daytime-102644/

↑ Back to topTweet itShare on Facebook

Social media is one of the dominant forms of interactions on the Internet. Leading platforms such as Facebook and Twitter count hundreds of millions of users each month. In this article, I will show you how social media is a rich vein of data for user researchers. I will argue that it would be an oversight for an organization to treat social media as nothing more than an opportunity for customer service enquiries, help requests and brand advocacy.

In the commercial sector, social media is a source of data about users that often gets ignored in favor of other more controlled user research activities, such as interviews and user testing. (Though, it is often used to recruit participants for these traditional methods.) Conversely, in the academic world, social media was immediately recognized as an interesting primary source of data. But it has been typically addressed with quantitative research methods, such as visualizing information flows between network members and graphing peaks of activity, which are not so relevant in most typical user research projects.

In recent years, a range of commercially available monitoring software tools have emerged to make it relatively easy to track a range of keywords and capture a wealth of tweets, posts and mentions on topics of interest. However, these tools are also principally set up to do sentiment analysis, such as whether brand mentions are broadly positive or negative. But these high-level insights come at the expense of the nuanced details that reside in the individual tweets, posts and mentions. So, how can we do useful user research with social media?

Research Gold Link

Social media platforms enable social listening. We can tap into the recent or “in the moment” experience of real issues in context, rather than asking people, for example, to recall experiences in a face-to-face interview that takes place a week afterwards. It is particularly well suited to researching instances of mundane, everyday activities (such as smartphone habits) that would otherwise be poorly remembered and inaccessible to the researcher in the lab or to popular services that have already been launched. And when we tap in, we get data in the users’ language, not the language of the researcher. This amounts to research gold, and all we need is to get a pan and jump into the river. (There are some things to be aware of, of course, which I will describe later.)

A Case Study From Highways England Link

While working as a user researcher for Highways England, I created the user research with social media technique that I describe here. This was part of a wide-ranging user research project to make wholesale improvements to the Dart Charge service¹. This is a highly used GOV.UK‬‬‬‬‬‬‬‬‬ service that enables over 5 milion drivers to pay remotely to use a part of the UK’s M25 motorway network in outer London, called the Dartford Crossing, where the motorway crosses the River Thames. A key research challenge was to understand user needs around paying before or after using the Dartford Crossing. Many other typical user research methods were used on this project, including user testing sessions and interview studies, but the service team welcomed new ideas for gaining research insights, particularly those relating to routine activities such as driving, because it was felt these were not well captured by the other types of research being done.

The sources chosen were Facebook and Twitter on account of their popularity in the UK among the 5 million users of the Dart Charge service. Salesforce’s Radian 6 (now part of Social Studio) was chosen because it supports tracking of multiple keywords across multiple social networks. We selected the month of August 2015, mainly because it was the most recent full month and gathered around a thousand mentions. It was also felt to be the maximum amount of data the team could analyze in the time available.

Ultimately, this resulted in 39 insights, which were added to the product backlog at the time of the research. The four steps in this technique were:

• define keywords to monitor,
• choose a tool,
• gather data,
• analyze for insight.

How To Do User Research With Social Media Link

1. Define Keywords to Monitor Link

This first step is about setting up the search query, or queries, that are going to be used. These could be user accounts, hash tags and phrases. A good place to start is to gather the project’s team together and collate all of the ways they think real people might refer to the product or situation of interest.

In the case of Highways England, we identified 10 target phrases, hash tags and accounts. Notably, some of these were official terms for the service, such as Dart Charge and Dartford Crossing, and some were unofficial but widely used, such as Dartford Tunnel and Dartford Toll. Examples of the phrases, hash tags and accounts we used are in the table below:

Phrases	Hash tags	Accounts
“Dart charge,” “Dartford Tunnel,” “Dartford Toll,” “Dartford Crossing”	#dartfordcrossing, #dartcharge, #dartfordbridge	@dartcharge, @dartfordtoll, @dartfordtraffic

2. Choose a Tool Link

A variety of tools are available to gather social media data, including free tools and some very expensive one. A good place to start is with the search facilities within the social media networks themselves, because they provide the opportunity to gather data at no cost. These search tools have their drawbacks. For example, Facebook’s groups and privacy settings make it more difficult to search than Twitter, which is much more open. So, choose a social media network that your users, or prospective users, are using, and then start gathering data.

Once you are familiar with this research technique, you can come back to the decision of whether to spend money on other tools. Some, such as Hootsuite, Sprout Social, DiscoverText and IBM’s Watson Analytics, charge a monthly fee. Others, such as Salesforce’s Social Studio, Sysomos and Oracle’s Social Cloud, don’t even show the price. You have to email them for a demo and a quote. (It is a bit like being in a shop where the expensive clothes don’t have price tags on them!)

3. Gather Data Link

Once you have chosen a tool, gathering data is relatively straightforward. Let’s start with using the free search tool within Twitter. It is a process of running a search and saving the search results. But a few tips are worth bearing in mind.

First, you don’t even need a Twitter account. You can just head over to the Advanced Search tool² and enter your keywords directly. Facebook is not so easy to access.

³

Secondly, defining the date range covered by your data sample is always smart (in case you, or others, want to repeat it). You can set a date range using the “since” and “until” commands in Twitter.

Thirdly, you can save a PDF of the search results via the print menu in your browser. This is worth doing because deleted tweets will disappear from results (when the user deletes them), so you would lose them otherwise. You will also need to manually expose conversations, because these are hidden by default (and will not be shown in your PDF).

4. Analyze for Insight Link

There are many ways to analyze the qualitative data we have just gathered. In a nutshell, really, what we are doing at this stage is sense-making. We are asking, What does this piece of data really mean? More or less, it is a case of taking stock of any individual piece of data (for example, a tweet or post) and annotating it with additional words (sometimes called tags or codes) that encapsulate what is being meant. If there are items in the data sample that are hard to understand or incomplete or irrelevant, skipping over them is OK. (Likewise, skip any that appear to be from fake accounts or are the work of trolls.) Typically, only around 1 in 10 items in the data sample might actually be annotated with tags. Practically, this can be done by printing out the PDF data set and using a highlighter pen to mark up interesting pieces of data and writing the tags beside the data.

Once all of the interesting items in the data sample have been tagged, it is effective to pull out only the tagged items and group any related items together. This is a process of affinity-sorting. Again, practically, this can be done by cutting up the print-outs and spatially rearranging the affinity groups. Seeing different perspectives on the same issue helps to form a rounded insight, as we can see in these examples from our Highways England project. Some example tweets and how they were tagged are shown in the images below:

⁵

⁶

⁷

⁸

Taking stock of just these four tagged data items, we can get to the following insights about user needs and values:

• There is a user need to avoid forgetting to pay and to get a reminder.
• There is a value to users in avoiding financial penalty and associated stress.

Ideally, the best way to do this sort of analysis is to have a fellow team member involved in the tagging, affinity-sorting and insight generation. If you see different things in the same piece of data, that is good, not bad, because a richer and more nuanced interpretation emerges. (Afterwards, long-term management of the analysis can be supported by transferring the data items and their associated tags into digital tools, such as NVivo or Reframer.)

When To Use This Technique (And When Not To) Link

The technique of doing user research with social media is particularly well suited to certain project situations:

• when there is a wide focus on a particular service, such as a discovery or requirements-gathering phase;
• when there is no budget for recruitment or a venue, or no time to wait for the recruitment to be organized;
• when you need to do some design research to understand the context of use;
• when you have run out of ideas of what to do next.

It is not so well suited to other common project situations:

• when you need to test a prototype that is not publicly available;
• when there is a highly focused brief (or worse solution) that is not up for debate;
• when you are fixing something clearly broken, such as a siloed information architecture;
• when you are optimizing something that works OK for users, such as a shopping basket and checkout.

Things To Be Aware Of Link

Social media research offers many benefits to the user researcher, but there are some things to be aware of. Getting up and running is quick, and you don’t have to wait to recruit participants or need any prior hypotheses. Indeed, because the users are expressing themselves in public, they are not participants, so there are no data-protection issues to concern anyone. Nor are there any demand characteristics biases that would mean the participants are politely trying to please the researchers.

But these advantages do need to be balanced with the disadvantages. Is the data clear enough to understand? Are we interpreting the data to fit the questions we ask? Are we just sampling social media users and not everyone else? Are we getting only the most positive and negative voices (and none from the middle)? Are we seeing self-reported behavior, not real behavior? Are we prone to other cognitive biases in the data, such as researchers just seeing the things that are easiest to see (the availability bias) or participants overemphasizing the most intense or most recent aspects of their experience (the peak-end effect)? The answer is, of course, “Yes, but…!”

Ultimately, it is poor practice to rely on one research technique to answer any given question and lay yourself open to criticism of the shortcomings of that technique. It is always best to have multiple research techniques that address the same objective from different angles. This enables a team to notice the different biases at play in each research technique and to come to a rounded view of users’ needs and the best course of action in the design stage.

Conclusion Link

Social media provides a rich source of data for user researchers. It allows researchers to tap into the recent experience of people without the formality of interviewing or user testing. And while it is not without its disadvantages, it is illuminating, and you can get started for free. It helped Highways England realize the importance of the issue of forgetting to pay. So, why not add user research with social media to your toolbox and see what you find?

Additional Resources Link

• Twitter⁹
  The Advanced Search tool is a good place to start.
• Hootsuite¹⁰
  Allows monitoring streams of up to three keywords. A range of apps and integrations can be added on.
• Sprout Social¹¹
  Power up your keyword monitoring.
• DiscoverText¹²
  Throw some machine learning at your data to speed up analysis.
• IBM Watson Analytics¹³
  Throw some science at your data and see it visually.
• Radian 6¹⁴
  Now part of Social Studio. Aimed at marketers.
• Sysomos¹⁵
  Been around a long time. Aimed at marketers.
• Oracle Social Cloud¹⁶
  Offers to automatically cut out irrelevant data.

(cc, al, il)

Front page image credit: Pexels¹⁷.

Footnotes Link

1. 1 https://www.gov.uk/pay-dartford-crossing-charge
2. 2 https://twitter.com/search-advanced?lang=en
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/01/twitter-search-large-opt.png
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/01/twitter-search-large-opt.png
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Twitter_search_item_1-preview-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Twitter_search_item_2-preview-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Twitter_search_item_3-preview-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/01/Twitter_search_item_4-preview-opt.png
9. 9 https://twitter.com/search-advanced?lang=en
10. 10 https://hootsuite.com/
11. 11 http://sproutsocial.com/
12. 12 http://discovertext.com/
13. 13 https://www.ibm.com/us-en/marketplace/watson-analytics
14. 14 https://www.marketingcloud.com/products/social-media-marketing/radian6/
15. 15 https://sysomos.com/
16. 16 https://www.oracle.com/uk/applications/customer-experience/social/index.html
17. 17 https://www.pexels.com/photo/space-gray-iphone-6-showing-facebook-app-199497/

↑ Back to topTweet itShare on Facebook

Sometimes all we need is a little inspiration kick to get our creative juices flowing. Maybe your secret is to go for a short walk, have a little chat with a colleague, or scroll through your favorite eye candy resources. Whatever it might be that helps you get new ideas, we, too, have something for you that could work just as good: desktop wallpapers.

To bring you a regular dose of unique and inspiring wallpapers, we embarked on our monthly wallpapers mission¹ eight years ago. Each month, artists and designers from across the globe diligently contribute their works to it. And well, it wasn’t any different this time around. This post features their artwork for March 2017. The wallpapers all come in versions with and without a calendar. Time to freshen up your desktop!

Please note that:

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

Further Reading on SmashingMag: Link

• Wallpapers — The Very Best For Your Desktop³
• Cuddly Pet Wallpapers & Cute Animals For Your Desktop⁴
• Girls Wallpaper – Great Desktop Backgrounds From Smashing Magazine⁵

Spring Bird

Designed by Nathalie Ouederni⁶ from France.

⁷

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

Ballet

“A day, even a whole month aren’t enough to show how much a woman should be appreciated. Dear ladies, any day or month are yours if you decide so.” — Designed by Ana Masnikosa²¹ from Belgrade, Serbia.

²²

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

Wake Up!

“Early spring in March is for me the time when the snow melts, everything isn’t very colorful. This is what I wanted to show. Everything comes to life slowly, as this bear. Flowers are banal, so instead of a purple crocus we have a purple bird-harbinger.” — Designed by Marek Kedzierski⁶⁴ from Poland.

⁶⁵

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

Chinese Girl

“I like to draw and want that people see my illustration.” — Designed by Hushlenko Antonina⁸⁹ from Ukraine.

⁹⁰

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

It Just Blooms

“We’ve had several unseasonably warm days in Chicago and I’m ready for some spring blooms!” — Designed by Denise Johnson¹³⁴ from Chicago.

¹³⁵

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

Happy Birthday Dr. Seuss!

“March the 2nd marks the birthday of the most creative and extraordinary author ever, Dr. Seuss! I have included an inspirational quote about learning to encourage everyone to continue learning new things everyday.” — Designed by Safia Begum¹⁴⁹ from the United Kingdom.

¹⁵⁰

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

Spring Is Coming

“Baby lambs are a sign of spring.” — Designed by Lucas Debelder¹⁶⁸ from Belgium.

¹⁶⁹

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

Waiting For Spring

“Don’t get me wrong, I like winter and snow, but in Austria where I live there was not much of it this year. It is still cold and moody, and I think by now I’m ready for spring!” — Designed by Izabela Grzegorczyk¹⁹⁹ from Poland.

²⁰⁰

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

March Forth!

“Instead of focusing on St. Patrick’s day, I decided to feature my favorite March pun in textured handlettering. In this month – especially on the Fourth – it’s a great time time to grab life by the shamrocks and make it count. Now go march forth!” — Designed by Phil Scroggs²¹² from Seattle, WA, USA.

²¹³

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

Jingzhe

“Jīngzhé is the third of the 24 solar terms in the traditional East Asian calendars. The word 驚蟄 means ‘the awakening of hibernating insects’. 驚 is ‘to start’ and 蟄 means ‘hibernating insects’. Traditional Chinese folklore says that during Jingzhe, thunderstorms will wake up the hibernating insects, which implies that the weather is getting warmer.” — Designed by Sunny Hong²⁵⁵ from Taiwan.

²⁵⁶

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

Rain, Rain, Don’t Go Away!

“In the U.S., March is National Umbrella Month. Let this be a reminder to keep an umbrella handy with rain on the way.” — Designed by Karen Frolo²⁷⁴ from the United States.

²⁷⁵

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

The Bold And The Beautiful

“When we celebrate the achievements of women, of how far they have come, we’re actually celebrating the fact that no power on earth can rein a woman who can dream. Here’s to the women who with their lives are setting an example to the next generation of boys and girls what it means to be a woman. That femininity is not just about looking pretty but it is also about being bold, courageous and strong-willed. Happy Women’s Day.” — Designed by Acodez IT Solutions³⁰⁵ from India.

³⁰⁶

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

Freedom In March

“Freedom should always be peaceful and respectful. Present your opinion peacefully through your art and let people see it and respect it.” — Designed by Hatim M. M. Yousif Al-Sharif³⁴⁸ from the United Arab Emirates.

³⁴⁹

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

Pizza Time!

“Who needs an excuse to look at pizza all month?” — Designed by James Mitchell³⁹¹ from the United Kingdom.

³⁹²

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

Lucky Day

Designed by Dan Di⁴¹² from Italy.

⁴¹³

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

Best Friend

“The year is passing fast and so it is time to get back to our resolutions and find a new best friend.” — Designed by Maria Keller⁴⁵⁹ from Mexico.

⁴⁶⁰

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

KaTgirl

“Just two weeks ago the world lost a wonderful artist and my beloved brother/sister, Ken/Kat – also known as ‘Psychedelic Rainbow KaTgirl Superstar DJ’. This wallpaper was created inspired by her designs – and for all those who miss her – that may she live on.” — Designed by Katherine Appleby⁵¹² from Australia.

⁵¹³

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

Supremacy

Designed by Elise Vanoorbeek⁵⁵⁵ from Belgium.

⁵⁵⁶

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

Digital Spring

“We must enjoy life and its many wonders whenever the opportunity presents itself and then accept whatever consequences may come with an equal amount of vigor and enthusiasm.” — Designed by Roxi Nastase⁵⁸⁴ from Romania.

⁵⁸⁵

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

Life On Mars

“Since the month March is derivated from the planet Mars, I decided to make a wallpaper with the planet Mars in the universe. And when I heard that they discovered several new planets in our galaxy where there could be life, I chose to put a green marsian on the planet. Maybe one day we will all live on another planet.” — Designed by Melissa Bogemans⁶²⁷ from Belgium.

⁶²⁸

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

Colorful

“In some parts of the world there is the beauty of nature. This is one of the best beaches in the world: Ponta Negra in the North East of Brazil” — Designed by Elisa de Castro Guerra⁶⁶⁸ from France.

⁶⁶⁹

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

Hello Autumn

“It’s autumn in the southern hemisphere!” — Designed by Tazi Design⁷¹³ from Australia.

⁷¹⁴

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

Angel Of Creativity

Designed by Rucha Shreyas Gosavi from Dubai.

⁷³⁸

• preview⁷³⁹
• with calendar: 360×480⁷⁴⁰, 640×480⁷⁴¹, 800×600⁷⁴², 1024×1024⁷⁴³, 1280×960⁷⁴⁴, 1440×900⁷⁴⁵, 1440×1050⁷⁴⁶, 1680×1050⁷⁴⁷
• without calendar: 360×480⁷⁴⁸, 640×480⁷⁴⁹, 800×600⁷⁵⁰, 1024×1024⁷⁵¹, 1280×960⁷⁵², 1440×900⁷⁵³, 1440×1050⁷⁵⁴, 1680×1050⁷⁵⁵

Join In Next Month! Link

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

A big thank you to all designers for their participation. Join in next month⁷⁵⁶!

What’s Your Favorite? Link

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

Footnotes Link

1. 1 https://www.smashingmagazine.com/tag/wallpapers/
2. 2 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/
3. 3 https://www.smashingmagazine.com/wallpapers/
4. 4 https://www.smashingmagazine.com/pet-wallpapers/
5. 5 https://www.smashingmagazine.com/girls-wallpaper/
6. 6 http://www.nathalieouederni.com
7. 7 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/mar-17-spring-bird-full.jpg
8. 8 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/mar-17-spring-bird-preview.jpg
9. 9 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/cal/mar-17-spring-bird-cal-1024×768.jpg
10. 10 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/cal/mar-17-spring-bird-cal-1280×1024.jpg
11. 11 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/cal/mar-17-spring-bird-cal-1440×900.jpg
12. 12 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/cal/mar-17-spring-bird-cal-1680×1200.jpg
13. 13 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/cal/mar-17-spring-bird-cal-1920×1200.jpg
14. 14 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/cal/mar-17-spring-bird-cal-2560×1440.jpg
15. 15 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1024×768.jpg
16. 16 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1280×1024.jpg
17. 17 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1440×900.jpg
18. 18 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1680×1200.jpg
19. 19 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-1920×1200.jpg
20. 20 http://files.smashingmagazine.com/wallpapers/mar-17/spring-bird/nocal/mar-17-spring-bird-nocal-2560×1440.jpg
21. 21 https://www.creitive.com/
22. 22 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/mar-17-ballet-full.png
23. 23 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/mar-17-ballet-preview.png
24. 24 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-320×480.png
25. 25 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-640×480.png
26. 26 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-800×480.png
27. 27 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-800×600.png
28. 28 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1024×768.png
29. 29 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1024×1024.png
30. 30 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1152×864.png
31. 31 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1280×720.png
32. 32 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1280×800.png
33. 33 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1280×960.png
34. 34 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1280×1040.png
35. 35 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1400×1050.png
36. 36 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1440×900.png
37. 37 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1600×1200.png
38. 38 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1680×1050.png
39. 39 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1680×1200.png
40. 40 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1920×1080.png
41. 41 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1920×1200.png
42. 42 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-1920×1440.png
43. 43 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/cal/mar-17-ballet-cal-2560×1440.png
44. 44 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-320×480.png
45. 45 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-640×480.png
46. 46 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-800×480.png
47. 47 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-800×600.png
48. 48 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1024×768.png
49. 49 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1024×1024.png
50. 50 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1152×864.png
51. 51 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280×720.png
52. 52 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280×800.png
53. 53 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280×960.png
54. 54 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1280×1040.png
55. 55 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1400×1050.png
56. 56 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1440×900.png
57. 57 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1600×1200.png
58. 58 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1680×1050.png
59. 59 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1680×1200.png
60. 60 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920×1080.png
61. 61 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920×1200.png
62. 62 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-1920×1440.png
63. 63 http://files.smashingmagazine.com/wallpapers/mar-17/ballet/nocal/mar-17-ballet-nocal-2560×1440.png
64. 64 https://www.behance.net/rustbeard
65. 65 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/mar-17-wake-up-full.png
66. 66 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/mar-17-wake-up-preview.png
67. 67 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-320×480.png
68. 68 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1024×768.png
69. 69 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1280×720.png
70. 70 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1280×800.png
71. 71 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1280×960.png
72. 72 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1400×1050.png
73. 73 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1600×1200.png
74. 74 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1680×1050.png
75. 75 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1920×1080.png
76. 76 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-1920×1200.png
77. 77 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/cal/mar-17-wake-up-cal-2560×1440.png
78. 78 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-320×480.png
79. 79 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1024×768.png
80. 80 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1280×720.png
81. 81 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1280×800.png
82. 82 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1280×960.png
83. 83 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1400×1050.png
84. 84 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1600×1200.png
85. 85 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1680×1050.png
86. 86 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1920×1080.png
87. 87 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-1920×1200.png
88. 88 http://files.smashingmagazine.com/wallpapers/mar-17/wake-up/nocal/mar-17-wake-up-nocal-2560×1440.png
89. 89 https://www.behance.net/antonina_h95b4
90. 90 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/mar-17-chinese-girl-full.png
91. 91 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/mar-17-chinese-girl-preview.png
92. 92 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-320×480.png
93. 93 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-640×480.png
94. 94 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-800×480.png
95. 95 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-800×600.png
96. 96 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1024×768.png
97. 97 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1024×1024.png
98. 98 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1152×864.png
99. 99 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1280×720.png
100. 100 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1280×800.png
101. 101 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1280×960.png
102. 102 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1280×1024.png
103. 103 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1366×768.png
104. 104 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1400×1050.png
105. 105 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1440×900.png
106. 106 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1600×1200.png
107. 107 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1680×1050.png
108. 108 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1680×1200.png
109. 109 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1920×1080.png
110. 110 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1920×1200.png
111. 111 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-1920×1440.png
112. 112 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/cal/mar-17-chinese-girl-cal-2560×1440.png
113. 113 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-320×480.png
114. 114 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-640×480.png
115. 115 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-800×480.png
116. 116 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-800×600.png
117. 117 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1024×768.png
118. 118 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1024×1024.png
119. 119 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1152×864.png
120. 120 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1280×720.png
121. 121 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1280×800.png
122. 122 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1280×960.png
123. 123 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1280×1024.png
124. 124 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1366×768.png
125. 125 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1400×1050.png
126. 126 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1440×900.png
127. 127 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1600×1200.png
128. 128 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1680×1050.png
129. 129 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1680×1200.png
130. 130 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1920×1080.png
131. 131 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1920×1200.png
132. 132 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-1920×1440.png
133. 133 http://files.smashingmagazine.com/wallpapers/mar-17/chinese-girl/nocal/mar-17-chinese-girl-nocal-2560×1440.png
134. 134 http://ladybirddee.net/
135. 135 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/mar-17-it-just-blooms-full.jpg
136. 136 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/mar-17-it-just-blooms-preview.jpg
137. 137 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/cal/mar-17-it-just-blooms-cal-1024×768.jpg
138. 138 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/cal/mar-17-it-just-blooms-cal-1280×800.jpg
139. 139 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/cal/mar-17-it-just-blooms-cal-1280×1024.jpg
140. 140 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/cal/mar-17-it-just-blooms-cal-1440×900.jpg
141. 141 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/cal/mar-17-it-just-blooms-cal-1600×1200.jpg
142. 142 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/cal/mar-17-it-just-blooms-cal-1920×1200.jpg
143. 143 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/nocal/mar-17-it-just-blooms-nocal-1024×768.jpg
144. 144 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/nocal/mar-17-it-just-blooms-nocal-1280×800.jpg
145. 145 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/nocal/mar-17-it-just-blooms-nocal-1280×1024.jpg
146. 146 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/nocal/mar-17-it-just-blooms-nocal-1440×900.jpg
147. 147 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/nocal/mar-17-it-just-blooms-nocal-1600×1200.jpg
148. 148 http://files.smashingmagazine.com/wallpapers/mar-17/it-just-blooms/nocal/mar-17-it-just-blooms-nocal-1920×1200.jpg
149. 149 https://www.safiabegum.com/
150. 150 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/mar-17-happy-birthday-dr-seuss-full.png
151. 151 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/mar-17-happy-birthday-dr-seuss-preview.png
152. 152 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-800×450.png
153. 153 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-1280×720.png
154. 154 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-1366×768.png
155. 155 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-1440×810.png
156. 156 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-1600×900.png
157. 157 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-1680×945.png
158. 158 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-1920×1080.png
159. 159 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/cal/mar-17-happy-birthday-dr-seuss-cal-2560×1440.png
160. 160 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-800×450.png
161. 161 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1280×720.png
162. 162 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1366×768.png
163. 163 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1440×810.png
164. 164 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1600×900.png
165. 165 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1680×945.png
166. 166 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-1920×1080.png
167. 167 http://files.smashingmagazine.com/wallpapers/mar-17/happy-birthday-dr-seuss/nocal/mar-17-happy-birthday-dr-seuss-nocal-2560×1440.png
168. 168 http://lucasdebelder.be/
169. 169 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/mar-17-spring-is-coming-full.jpg
170. 170 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/mar-17-spring-is-coming-preview.jpg
171. 171 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-800×600.jpg
172. 172 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1024×1024.jpg
173. 173 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1280×720.jpg
174. 174 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1280×960.jpg
175. 175 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1280×1024.jpg
176. 176 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1400×1050.jpg
177. 177 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1440×900.jpg
178. 178 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1600×1200.jpg
179. 179 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1680×1050.jpg
180. 180 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1680×1200.jpg
181. 181 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1920×1080.jpg
182. 182 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1920×1200.jpg
183. 183 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-1920×1440.jpg
184. 184 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/cal/mar-17-spring-is-coming-cal-2560×1440.jpg
185. 185 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-800×600.jpg
186. 186 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1024×1024.jpg
187. 187 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1280×720.jpg
188. 188 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1280×960.jpg
189. 189 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1280×1024.jpg
190. 190 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1400×1050.jpg
191. 191 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1440×900.jpg
192. 192 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1600×1200.jpg
193. 193 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1680×1050.jpg
194. 194 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1680×1200.jpg
195. 195 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1920×1080.jpg
196. 196 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1920×1200.jpg
197. 197 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-1920×1440.jpg
198. 198 http://files.smashingmagazine.com/wallpapers/mar-17/spring-is-coming/nocal/mar-17-spring-is-coming-nocal-2560×1440.jpg
199. 199 https://izagrzegorczyk.tumblr.com/
200. 200 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/mar-17-waiting-for-spring-full.jpg
201. 201 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/mar-17-waiting-for-spring-preview.jpg
202. 202 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/cal/mar-17-waiting-for-spring-cal-1366×768.jpg
203. 203 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/cal/mar-17-waiting-for-spring-cal-1600×1200.jpg
204. 204 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/cal/mar-17-waiting-for-spring-cal-1680×1050.jpg
205. 205 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/cal/mar-17-waiting-for-spring-cal-1920×1200.jpg
206. 206 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/cal/mar-17-waiting-for-spring-cal-2560×1440.jpg
207. 207 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/nocal/mar-17-waiting-for-spring-nocal-1366×768.jpg
208. 208 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/nocal/mar-17-waiting-for-spring-nocal-1600×1200.jpg
209. 209 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/nocal/mar-17-waiting-for-spring-nocal-1680×1050.jpg
210. 210 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/nocal/mar-17-waiting-for-spring-nocal-1920×1200.jpg
211. 211 http://files.smashingmagazine.com/wallpapers/mar-17/waiting-for-spring/nocal/mar-17-waiting-for-spring-nocal-2560×1440.jpg
212. 212 http://phillustrations.com
213. 213 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/mar-17-march-forth-full.png
214. 214 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/mar-17-march-forth-preview.png
215. 215 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-320×480.png
216. 216 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-640×480.png
217. 217 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-800×480.png
218. 218 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-800×600.png
219. 219 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1024×768.png
220. 220 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1024×1024.png
221. 221 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1152×864.png
222. 222 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1280×720.png
223. 223 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1280×800.png
224. 224 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1280×960.png
225. 225 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1280×1024.png
226. 226 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1400×1050.png
227. 227 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1440×900.png
228. 228 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1600×1200.png
229. 229 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1680×1050.png
230. 230 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1680×1200.png
231. 231 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1920×1080.png
232. 232 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1920×1200.png
233. 233 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-1920×1440.png
234. 234 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/cal/mar-17-march-forth-cal-2560×1440.png
235. 235 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-320×480.png
236. 236 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-640×480.png
237. 237 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-800×480.png
238. 238 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-800×600.png
239. 239 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1024×768.png
240. 240 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1024×1024.png
241. 241 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1152×864.png
242. 242 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1280×720.png
243. 243 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1280×800.png
244. 244 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1280×960.png
245. 245 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1280×1024.png
246. 246 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1400×1050.png
247. 247 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1440×900.png
248. 248 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1600×1200.png
249. 249 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1680×1050.png
250. 250 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1680×1200.png
251. 251 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1920×1080.png
252. 252 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1920×1200.png
253. 253 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-1920×1440.png
254. 254 http://files.smashingmagazine.com/wallpapers/mar-17/march-forth/nocal/mar-17-march-forth-nocal-2560×1440.png
255. 255 http://www.pixiv.net/member.php?id=8059765
256. 256 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/mar-17-jingzhe-full.png
257. 257 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/mar-17-jingzhe-preview.png
258. 258 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-800×600.png
259. 259 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-1280×720.png
260. 260 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-1280×1024.png
261. 261 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-1366×768.png
262. 262 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-1400×1050.png
263. 263 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-1680×1200.png
264. 264 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-1920×1080.png
265. 265 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/cal/mar-17-jingzhe-cal-2560×1440.png
266. 266 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-800×600.png
267. 267 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1280×720.png
268. 268 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1280×1024.png
269. 269 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1366×768.png
270. 270 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1400×1050.png
271. 271 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1680×1200.png
272. 272 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-1920×1080.png
273. 273 http://files.smashingmagazine.com/wallpapers/mar-17/jingzhe/nocal/mar-17-jingzhe-nocal-2560×1440.png
274. 274 https://www.codesign.cc/
275. 275 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/mar-17-rain-rain-dont-go-away-full.jpg
276. 276 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/mar-17-rain-rain-dont-go-away-preview.jpg
277. 277 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1024×768.jpg
278. 278 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1024×1024.jpg
279. 279 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1280×800.jpg
280. 280 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1280×960.jpg
281. 281 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1280×1024.jpg
282. 282 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1366×768.jpg
283. 283 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1440×900.jpg
284. 284 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1600×1200.jpg
285. 285 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1680×1050.jpg
286. 286 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1680×1200.jpg
287. 287 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1920×1080.jpg
288. 288 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1920×1200.jpg
289. 289 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-1920×1440.jpg
290. 290 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/cal/mar-17-rain-rain-dont-go-away-cal-2560×1440.jpg
291. 291 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1024×768.jpg
292. 292 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1024×1024.jpg
293. 293 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1280×800.jpg
294. 294 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1280×960.jpg
295. 295 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1280×1024.jpg
296. 296 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1366×768.jpg
297. 297 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1440×900.jpg
298. 298 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1600×1200.jpg
299. 299 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1680×1050.jpg
300. 300 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1680×1200.jpg
301. 301 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1920×1080.jpg
302. 302 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1920×1200.jpg
303. 303 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-1920×1440.jpg
304. 304 http://files.smashingmagazine.com/wallpapers/mar-17/rain-rain-dont-go-away/nocal/mar-17-rain-rain-dont-go-away-nocal-2560×1440.jpg
305. 305 http://acodez.in/
306. 306 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/mar-17-the-bold-and-the-beautiful-full.png
307. 307 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/mar-17-the-bold-and-the-beautiful-preview.png
308. 308 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-320×480.png
309. 309 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-800×480.png
310. 310 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-800×600.png
311. 311 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1024×768.png
312. 312 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1024×1024.png
313. 313 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1152×864.png
314. 314 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1280×720.png
315. 315 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1280×960.png
316. 316 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1280×1024.png
317. 317 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1366×768.png
318. 318 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1400×1050.png
319. 319 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1440×900.png
320. 320 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1600×900.png
321. 321 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1600×1200.png
322. 322 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1680×1050.png
323. 323 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1680×1200.png
324. 324 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1920×1080.png
325. 325 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1920×1200.png
326. 326 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-1920×1440.png
327. 327 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/cal/mar-17-the-bold-and-the-beautiful-cal-2560×1440.png
328. 328 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-320×480.png
329. 329 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-800×480.png
330. 330 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-800×600.png
331. 331 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1024×768.png
332. 332 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1024×1024.png
333. 333 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1152×864.png
334. 334 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1280×720.png
335. 335 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1280×960.png
336. 336 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1280×1024.png
337. 337 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1366×768.png
338. 338 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1400×1050.png
339. 339 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1440×900.png
340. 340 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1600×900.png
341. 341 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1600×1200.png
342. 342 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1680×1050.png
343. 343 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1680×1200.png
344. 344 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1920×1080.png
345. 345 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1920×1200.png
346. 346 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-1920×1440.png
347. 347 http://files.smashingmagazine.com/wallpapers/mar-17/the-bold-and-the-beautiful/nocal/mar-17-the-bold-and-the-beautiful-nocal-2560×1440.png
348. 348 https://www.behance.net/hatimjam
349. 349 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/mar-17-freedom-in-march-full.png
350. 350 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/mar-17-freedom-in-march-preview.png
351. 351 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-320×480.png
352. 352 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-640×480.png
353. 353 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-800×480.png
354. 354 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-800×600.png
355. 355 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1024×768.png
356. 356 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1152×864.png
357. 357 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1280×720.png
358. 358 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1280×800.png
359. 359 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1280×960.png
360. 360 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1280×1024.png
361. 361 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1366×768.png
362. 362 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1400×1050.png
363. 363 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1440×900.png
364. 364 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1600×1200.png
365. 365 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1680×1050.png
366. 366 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1680×1200.png
367. 367 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1920×1080.png
368. 368 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1920×1200.png
369. 369 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-1920×1440.png
370. 370 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/cal/mar-17-freedom-in-march-cal-2560×1440.png
371. 371 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-320×480.png
372. 372 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-640×480.png
373. 373 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-800×480.png
374. 374 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-800×600.png
375. 375 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1024×768.png
376. 376 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1152×864.png
377. 377 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1280×720.png
378. 378 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1280×800.png
379. 379 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1280×960.png
380. 380 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1280×1024.png
381. 381 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1366×768.png
382. 382 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1400×1050.png
383. 383 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1440×900.png
384. 384 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1600×1200.png
385. 385 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1680×1050.png
386. 386 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1680×1200.png
387. 387 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1920×1080.png
388. 388 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1920×1200.png
389. 389 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-1920×1440.png
390. 390 http://files.smashingmagazine.com/wallpapers/mar-17/freedom-in-march/nocal/mar-17-freedom-in-march-nocal-2560×1440.png
391. 391 https://www.behance.net/jamesmitchell23
392. 392 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/mar-17-pizza-time-full.png
393. 393 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/mar-17-pizza-time-preview.png
394. 394 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1280×720.png
395. 395 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1280×800.png
396. 396 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1366×768.png
397. 397 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1440×900.png
398. 398 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1680×1050.png
399. 399 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1920×1080.png
400. 400 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-1920×1200.png
401. 401 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-2560×1440.png
402. 402 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/cal/mar-17-pizza-time-cal-2880×1800.png
403. 403 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1280×720.png
404. 404 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1280×800.png
405. 405 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1366×768.png
406. 406 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1440×900.png
407. 407 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1680×1050.png
408. 408 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1920×1080.png
409. 409 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-1920×1200.png
410. 410 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-2560×1440.png
411. 411 http://files.smashingmagazine.com/wallpapers/mar-17/pizza-time/nocal/mar-17-pizza-time-nocal-2880×1800.png
412. 412 https://www.behance.net/diuno07
413. 413 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/mar-17-lucky-day-full.png
414. 414 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/mar-17-lucky-day-preview.png
415. 415 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-320×480.jpg
416. 416 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-640×480.jpg
417. 417 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-800×480.jpg
418. 418 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-800×600.jpg
419. 419 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1024×768.jpg
420. 420 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1024×1024.jpg
421. 421 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1152×864.jpg
422. 422 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1280×720.jpg
423. 423 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1280×800.jpg
424. 424 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1280×960.jpg
425. 425 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1280×1024.jpg
426. 426 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1366×768.jpg
427. 427 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1400×1050.jpg
428. 428 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1440×900.jpg
429. 429 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1600×900.jpg
430. 430 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1600×1200.jpg
431. 431 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1680×1050.jpg
432. 432 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1680×1200.jpg
433. 433 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1920×1080.jpg
434. 434 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1920×1200.jpg
435. 435 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-1920×1440.jpg
436. 436 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/cal/mar-17-lucky-day-cal-2560×1440.jpg
437. 437 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-320×480.jpg
438. 438 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-640×480.jpg
439. 439 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-800×480.jpg
440. 440 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-800×600.jpg
441. 441 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1024×768.jpg
442. 442 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1024×1024.jpg
443. 443 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1152×864.jpg
444. 444 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1280×720.jpg
445. 445 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1280×800.jpg
446. 446 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1280×960.jpg
447. 447 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1280×1024.jpg
448. 448 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1366×768.jpg
449. 449 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1400×1050.jpg
450. 450 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1440×900.jpg
451. 451 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1600×900.jpg
452. 452 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1600×1200.jpg
453. 453 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1680×1050.jpg
454. 454 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1680×1200.jpg
455. 455 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1920×1080.jpg
456. 456 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1920×1200.jpg
457. 457 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-1920×1440.jpg
458. 458 http://files.smashingmagazine.com/wallpapers/mar-17/lucky-day/nocal/mar-17-lucky-day-nocal-2560×1440.jpg
459. 459 http://www.mariakellerac.com
460. 460 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/mar-17-best-friend-full.png
461. 461 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/mar-17-best-friend-preview.png
462. 462 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-320×480.png
463. 463 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-640×480.png
464. 464 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-640×1136.png
465. 465 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-750×1334.png
466. 466 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-800×480.png
467. 467 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-800×600.png
468. 468 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1024×768.png
469. 469 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1024×1024.png
470. 470 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1152×864.png
471. 471 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1242×2208.png
472. 472 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1280×720.png
473. 473 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1280×800.png
474. 474 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1280×960.png
475. 475 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1280×1024.png
476. 476 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1366×768.png
477. 477 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1400×1050.png
478. 478 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1440×900.png
479. 479 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1600×1200.png
480. 480 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1680×1050.png
481. 481 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1680×1200.png
482. 482 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1920×1080.png
483. 483 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1920×1200.png
484. 484 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-1920×1440.png
485. 485 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-2560×1440.png
486. 486 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/cal/mar-17-best-friend-cal-2880×1800.png
487. 487 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-320×480.png
488. 488 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-640×480.png
489. 489 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-640×1136.png
490. 490 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-750×1334.png
491. 491 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-800×480.png
492. 492 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-800×600.png
493. 493 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1024×768.png
494. 494 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1024×1024.png
495. 495 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1152×864.png
496. 496 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1242×2208.png
497. 497 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1280×720.png
498. 498 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1280×800.png
499. 499 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1280×960.png
500. 500 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1280×1024.png
501. 501 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1366×768.png
502. 502 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1400×1050.png
503. 503 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1440×900.png
504. 504 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1600×1200.png
505. 505 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1680×1050.png
506. 506 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1680×1200.png
507. 507 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1920×1080.png
508. 508 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1920×1200.png
509. 509 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-1920×1440.png
510. 510 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-2560×1440.png
511. 511 http://files.smashingmagazine.com/wallpapers/mar-17/best-friend/nocal/mar-17-best-friend-nocal-2880×1800.png
512. 512 http://www.katherine-appleby.com
513. 513 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/mar-17-katgirl-full.png
514. 514 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/mar-17-katgirl-preview.png
515. 515 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-320×480.png
516. 516 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-640×480.png
517. 517 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-800×480.png
518. 518 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-800×600.png
519. 519 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1024×768.png
520. 520 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1024×1024.png
521. 521 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1152×864.png
522. 522 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1280×720.png
523. 523 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1280×800.png
524. 524 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1280×960.png
525. 525 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1280×1024.png
526. 526 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1400×1050.png
527. 527 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1440×900.png
528. 528 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1600×1200.png
529. 529 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1680×1050.png
530. 530 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1680×1200.png
531. 531 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1920×1080.png
532. 532 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1920×1200.png
533. 533 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-1920×1440.png
534. 534 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/cal/mar-17-katgirl-cal-2560×1440.png
535. 535 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-320×480.png
536. 536 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-640×480.png
537. 537 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-800×480.png
538. 538 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-800×600.png
539. 539 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1024×768.png
540. 540 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1024×1024.png
541. 541 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1152×864.png
542. 542 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1280×720.png
543. 543 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1280×800.png
544. 544 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1280×960.png
545. 545 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1280×1024.png
546. 546 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1400×1050.png
547. 547 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1440×900.png
548. 548 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1600×1200.png
549. 549 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1680×1050.png
550. 550 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1680×1200.png
551. 551 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1920×1080.png
552. 552 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1920×1200.png
553. 553 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-1920×1440.png
554. 554 http://files.smashingmagazine.com/wallpapers/mar-17/katgirl/nocal/mar-17-katgirl-nocal-2560×1440.png
555. 555 http://www.facebook.com/doud.design
556. 556 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/mar-17-supremacy-full.jpg
557. 557 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/mar-17-supremacy-preview.jpg
558. 558 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1280×720.jpg
559. 559 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1280×800.jpg
560. 560 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1280×960.jpg
561. 561 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1280×1024.jpg
562. 562 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1366×768.jpg
563. 563 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1400×1050.jpg
564. 564 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1440×900.jpg
565. 565 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1600×1200.jpg
566. 566 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1680×1050.jpg
567. 567 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1680×1200.jpg
568. 568 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1920×1080.jpg
569. 569 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1920×1200.jpg
570. 570 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/cal/mar-17-supremacy-cal-1920×1440.jpg
571. 571 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1280×720.jpg
572. 572 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1280×800.jpg
573. 573 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1280×960.jpg
574. 574 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1280×1024.jpg
575. 575 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1366×768.jpg
576. 576 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1400×1050.jpg
577. 577 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1440×900.jpg
578. 578 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1600×1200.jpg
579. 579 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1680×1050.jpg
580. 580 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1680×1200.jpg
581. 581 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1920×1080.jpg
582. 582 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1920×1200.jpg
583. 583 http://files.smashingmagazine.com/wallpapers/mar-17/supremacy/nocal/mar-17-supremacy-nocal-1920×1440.jpg
584. 584 https://www.shutterstock.com/g/roxananastase
585. 585 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/mar-17-digital-spring-full.jpg
586. 586 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/mar-17-digital-spring-preview.jpg
587. 587 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-640×480.jpg
588. 588 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-800×480.jpg
589. 589 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-800×600.jpg
590. 590 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1024×768.jpg
591. 591 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1024×1024.jpg
592. 592 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1152×864.jpg
593. 593 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1280×720.jpg
594. 594 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1280×800.jpg
595. 595 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1280×960.jpg
596. 596 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1280×1024.jpg
597. 597 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1366×768.jpg
598. 598 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1400×1050.jpg
599. 599 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1440×900.jpg
600. 600 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1600×1200.jpg
601. 601 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1680×1050.jpg
602. 602 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1680×1200.jpg
603. 603 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1920×1080.jpg
604. 604 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1920×1200.jpg
605. 605 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-1920×1440.jpg
606. 606 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/cal/mar-17-digital-spring-cal-2560×1440.jpg
607. 607 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-640×480.jpg
608. 608 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-800×480.jpg
609. 609 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-800×600.jpg
610. 610 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1024×768.jpg
611. 611 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1024×1024.jpg
612. 612 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1152×864.jpg
613. 613 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1280×720.jpg
614. 614 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1280×800.jpg
615. 615 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1280×960.jpg
616. 616 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1280×1024.jpg
617. 617 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1366×768.jpg
618. 618 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1400×1050.jpg
619. 619 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1440×900.jpg
620. 620 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1600×1200.jpg
621. 621 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1680×1050.jpg
622. 622 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1680×1200.jpg
623. 623 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1920×1080.jpg
624. 624 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1920×1200.jpg
625. 625 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-1920×1440.jpg
626. 626 http://files.smashingmagazine.com/wallpapers/mar-17/digital-spring/nocal/mar-17-digital-spring-nocal-2560×1440.jpg
627. 627 http://melissa.bogemans.com
628. 628 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/mar-17-life-on-mars-full.png
629. 629 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/mar-17-life-on-mars-preview.png
630. 630 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-640×480.png
631. 631 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-800×480.png
632. 632 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-800×600.png
633. 633 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1024×768.png
634. 634 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1024×1024.png
635. 635 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1152×864.png
636. 636 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1280×720.png
637. 637 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1280×800.png
638. 638 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1280×960.png
639. 639 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1280×1024.png
640. 640 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1400×1050.png
641. 641 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1440×900.png
642. 642 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1600×1200.png
643. 643 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1680×1050.png
644. 644 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1680×1200.png
645. 645 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1920×1080.png
646. 646 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1920×1200.png
647. 647 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-1920×1440.png
648. 648 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/cal/mar-17-life-on-mars-cal-2560×1440.png
649. 649 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-640×480.png
650. 650 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-800×480.png
651. 651 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-800×600.png
652. 652 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1024×768.png
653. 653 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1024×1024.png
654. 654 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1152×864.png
655. 655 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1280×720.png
656. 656 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1280×800.png
657. 657 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1280×960.png
658. 658 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1280×1024.png
659. 659 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1400×1050.png
660. 660 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1440×900.png
661. 661 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1600×1200.png
662. 662 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1680×1050.png
663. 663 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1680×1200.png
664. 664 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1920×1080.png
665. 665 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1920×1200.png
666. 666 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-1920×1440.png
667. 667 http://files.smashingmagazine.com/wallpapers/mar-17/life-on-mars/nocal/mar-17-life-on-mars-nocal-2560×1440.png
668. 668 http://yemanjalisa.net/
669. 669 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/mar-17-colorful-full.png
670. 670 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/mar-17-colorful-preview.png
671. 671 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-320×480.png
672. 672 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-640×480.png
673. 673 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-800×480.png
674. 674 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-800×600.png
675. 675 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1024×768.png
676. 676 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1024×1024.png
677. 677 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1152×864.png
678. 678 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1280×720.png
679. 679 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1280×800.png
680. 680 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1280×960.png
681. 681 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1280×1024.png
682. 682 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1366×768.png
683. 683 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1400×1050.png
684. 684 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1440×900.png
685. 685 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1600×1200.png
686. 686 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1680×1050.png
687. 687 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1680×1200.png
688. 688 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1920×1080.png
689. 689 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1920×1200.png
690. 690 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-1920×1440.png
691. 691 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/cal/mar-17-colorful-cal-2560×1440.png
692. 692 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-320×480.png
693. 693 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-640×480.png
694. 694 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-800×480.png
695. 695 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-800×600.png
696. 696 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1024×768.png
697. 697 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1024×1024.png
698. 698 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1152×864.png
699. 699 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1280×720.png
700. 700 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1280×800.png
701. 701 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1280×960.png
702. 702 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1280×1024.png
703. 703 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1366×768.png
704. 704 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1400×1050.png
705. 705 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1440×900.png
706. 706 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1600×1200.png
707. 707 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1680×1050.png
708. 708 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1680×1200.png
709. 709 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1920×1080.png
710. 710 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1920×1200.png
711. 711 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-1920×1440.png
712. 712 http://files.smashingmagazine.com/wallpapers/mar-17/colorful/nocal/mar-17-colorful-nocal-2560×1440.png
713. 713 http://www.tazi.com.au
714. 714 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/mar-17-hello-autumn-full.png
715. 715 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/mar-17-hello-autumn-preview.png
716. 716 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-320×480.png
717. 717 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-640×480.png
718. 718 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-800×600.png
719. 719 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1024×768.png
720. 720 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1152×864.png
721. 721 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1280×720.png
722. 722 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1280×960.png
723. 723 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1600×1200.png
724. 724 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1920×1080.png
725. 725 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-1920×1440.png
726. 726 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/cal/mar-17-hello-autumn-cal-2560×1440.png
727. 727 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-320×480.png
728. 728 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-640×480.png
729. 729 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-800×600.png
730. 730 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1024×768.png
731. 731 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1152×864.png
732. 732 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1280×720.png
733. 733 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1280×960.png
734. 734 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1600×1200.png
735. 735 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1920×1080.png
736. 736 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-1920×1440.png
737. 737 http://files.smashingmagazine.com/wallpapers/mar-17/hello-autumn/nocal/mar-17-hello-autumn-nocal-2560×1440.png
738. 738 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/mar-17-angel-of-creativity-full.jpg
739. 739 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/mar-17-angel-of-creativity-preview.jpg
740. 740 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-360×480.jpg
741. 741 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-640×480.jpg
742. 742 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-800×600.jpg
743. 743 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-1024×1024.jpg
744. 744 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-1280×960.jpg
745. 745 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-1440×900.jpg
746. 746 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-1440×1050.jpg
747. 747 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/cal/mar-17-angel-of-creativity-cal-1680×1050.jpg
748. 748 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-360×480.jpg
749. 749 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-640×480.jpg
750. 750 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-800×600.jpg
751. 751 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-1024×1024.jpg
752. 752 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-1280×960.jpg
753. 753 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-1440×900.jpg
754. 754 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-1440×1050.jpg
755. 755 http://files.smashingmagazine.com/wallpapers/mar-17/angel-of-creativity/nocal/mar-17-angel-of-creativity-nocal-1680×1050.jpg
756. 756 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook

Typography is a primary element of composition. Being a designer, I pay a lot of attention to its quality. Operating Photoshop is easy for me; however, to level up my skills, I am always learning to work with letters, using my hands, without any computer programs.

The first time I took a calligraphy course was about a year ago, and the decision was quite hard. I was sure that it would be painstaking and that I would need excellent handwriting to learn this art. How mistaken I was!

Type is saying things to us all the time. Typefaces express a mood, an atmosphere. They give words a certain coloring.

– Rick Poynor (“Helvetica”, 2007)

Typefaces are always telling us something. We receive information through typography. Type influences us, adds coloring to words, sets a mood and atmosphere, assists, teaches, scares us, brings us joy and inspires us.

Typography is, foremost, an information medium. At the same time, it fulfils social functions and acts as an indicator of the age it belongs to. The contemporary world has its own rhythm, aesthetic and philosophy; while we are changing, everything is changing around us. In studying historical lettering in calligraphy, we can understand the character and potential of a writing instrument, and, as a result, we can manage its expressive means.

Further Reading on SmashingMag: Link

• Understanding The Difference Between Type And Lettering¹
• Writing Systems And Calligraphy Of The World²
• Taking A Closer Look At Arabic Calligraphy³
• Beautiful Handwriting, Lettering and Calligraphy⁴
• The Art Of Hand Lettering⁵

My Introduction To Calligraphy Link

When I joined the calligraphy course, I heard students talking amongst themselves: “I’ll never manage to do it this way!” “I can’t write in such a beautiful way!”

To tell the truth, I felt the same way. But that was nonsense! And I say that as a master of Photoshop who couldn’t handwrite plain lines only a year ago.

Type is a visual language, which connects the writer and the reader.

– Erik Spiekermann

Our first lesson was to write simple strokes, the basis of all letters, with a flat paintbrush.

⁶

⁸

Tip: A lot of useful resources and online courses are on the Internet. However, I recommend starting by learning from professionals (in workshops, at calligraphy schools). A professional will help you to develop proper technique, answer your questions and prompt you in the nuances of the craft. Even something as seemingly simple as one’s posture and pen-holding technique will substantially influence the result.

Studying in a course had a positive outcome. Writing with different instruments and trying different techniques, I could figure out which instrument suits me best.

¹⁰

¹²

I learned the history of calligraphy, I learned how to customize my workplace, and I learned how to choose an instrument. I practiced Cyrillic ornamental script, textura quadrata, italic, English roundhand, modern calligraphy, brush pen lettering and chalk lettering. I also learned how to make my own calligraphy instruments.

Calligraphy is the most intimate, personal, spontaneous form of expression. Like a fingerprint or a voice, it is unique for each person.

– Hermann Zapf

¹⁴

¹⁶

¹⁸

Tip: I recommend devoting your initial lessons to writing with a flat paintbrush. Get accustomed to the instrument, and study the “skeleton” of letters (graphemes). Soon after that, practice Cyrillic ornamental script, textura quadrata and italic.

²⁰

²²

²⁴

Write the alphabet, then start with words and continue on to sentences. Next, you could proceed to study the pointed nib and the typefaces that rely on it: English roundhand, modern calligraphy script, flourishing, Spencerian and other Copperplate styles.

²⁶

²⁸

³⁰

³²

With the development of an international exchange of information, there is a need for universal fonts. Today, Texture and other Gothic fonts are only used as a reminder of a bygone era, in particular, in newspaper logos.

– Erik Spiekermann

Each lesson was a meditation. Soon after a lesson, I felt relaxed, energetic and inspired. And I got a good result on paper! The craft is a remedy and exercise for the mind and soul.

³⁴

³⁶

My Own Project: “Hello From…” Link

Having fallen in love with calligraphy, I came to prefer a sketchbook to a camera while on vacation. At a conference in St. Petersburg this spring, I got inspired by various graphic designers’ presentations and by the talk by renowned calligrapher Pokras Lampas³⁸. I wanted to put everything aside and write something. In such an inspired state, I signed a card to say hello to my friends from that wonderful city. Thus, a simple card began my project “Hello From.” The idea was to show the essence of a place through lettering; I would take a photo of the card with the city in the background.

³⁹

⁴¹

Other photos from the project can be found below. You can stay up to date on my Instagram account⁴³! There will be many interesting countries and medieval-aged cities soon!

Benefits: What Is The Use Of Calligraphy Lessons? Link

• New skill
  
  Calligraphy would be a great addition to any designer’s skill set. Postcards, posters, invitation cards, website banners, prints for t-shirts and many other design products would look more authentic and interesting in calligraphy and lettering.

  ⁴⁴
  

• Pleasure
  
  You will derive great pleasure from working with your hands.
• Patience
  
  Calligraphy is meditative. Diving into the world of letters and waltzing through the soft lines will make you more calm and serene.
• Age not a factor
  
  Banish the thought that you can’t start learning because of your age. At any age, learning has a positive effect on the brain and expands one’s worldview. It is also good to teach children calligraphy, which will improve their brain activity and develop their fine motor skills.
• Quick progress
  
  Your very first letter might be clunky, but I am sure that by the end of the first line it will get better. And I assure you that by the end of the first or second sheet of paper, the improvement will be noticeable!

  ⁴⁶
  

• A sketchbook, not a camera, for vacation
  
  I guarantee that you will see quick and steady progress and that you will want to take your sketchbook and pens with you wherever you go, to be able to write whenever you get inspired.
• Attention to surroundings
  
  You will become observant. You will find inspiration for new work everywhere, from building faces on the street to old books on the shelf.
• Selfmade postcards
  
  You will be able to easily decorate postcards, giftwrapping, invitation cards and holiday cards for family and friends. It is always heartwarming getting a postcard made with love and attention to detail.

  ⁴⁸
  

• Unique corporate identity
  
  More and more companies are using calligraphy and lettering in their trademark style. It lends uniqueness and instills trust in the customer.
• Manual dexterity
  
  The skill has an influence on one’s thinking, memory, imagination, powers of observation, coordination and agility.
• Inexpensive
  
  Most of the tools can be found at an affordable price. And craft paper can be done with the help of coffee, paint, etc.
• Monetization
  
  Nowadays, calligraphy is especially popular for wedding invitations, holiday cards, logos and many other design elements.

Possible Challenges Link

• Damage of tools
  
  Without sufficient knowledge, one might find it difficult to write with a nib. This could lead to tool damage, catching paper with the nib and, as a result, torn paper. A beginner might even give up because of such bad results.
• Silence helps
  
  Some people (though not everybody) might have a problem working when a lot of people are distracting their attention. I recommend training in silence, relaxed and concentrated.
• Bad mood = bad result
  
  You will not be able to draw soft, delicate lines in a state of anger. If you are in a bad mood, put the work aside.

As in sports and music, in calligraphy it is important to train every day, to be patient and to feel inspired.

Achieving Good Results Link

Here are some tips based on my experience:

• Learn every day.
  
  Attend master classes and courses, study online, and participate in competitions.
• Practice, practice, practice.
  
  If you train every day, you won’t have to wait long for progress. Focus on sharpening your skill, don’t be afraid to experiment, and devote time to writing regularly.

  ⁵⁰
  

• Practice by copying.
  
  Choose projects you like and copy them to understand how the composition and contrast work.
• Warm up.
  
  Start with some warmup exercises before getting down to work. Clench and release your fingers, rub and move your hands in circles to warm them up. While writing, do eye exercises from time to time.
• Start with basic strokes.
  
  Once you master this skill, it will be easier to move to letters and words.

  ⁵²
  

• Collect different styles of handwritings.
  
  You can find these in postcards and old letters. Analyze them. These will help you to come up with new and interesting combinations of typefaces.
• Try new things.
  
  Write with different tools and on different kinds of paper. Conventional designs are only one benefit! I write on wallpapers, bookshelf stands and old notebooks. It’s enough to begin writing with ordinary tools everybody has at home (pencils, brushes, markers). If none are at your disposal, then you can get creative and even try writing with a carrot, for example.
• Take care of your tools.
  
  Wash and wipe dry your tools after each exercise. When I was a beginner, I rusted and damaged several nibs irrevocably because of untimely cleaning.
• Show your work to professionals.
  
  An objective review will help you to find and correct mistakes. Don’t be offended by criticism; treat it as a compliment.
• Don’t worry about other people’s opinion.
  
  Don’t give up, even if your progress is not as fast as you would like. Good results will come.
• Mind your sitting posture.
  
  This rule is key to beautiful handwriting. If you follow it, you will be able to work at the table for a long time without discomfort or hand pain.
• Collect references.
  
  A box of ideas is very helpful. When I’m not feeling inspired and need a creative punch, I close my eyes and take out two magazine cuttings; I’ll analyze them and try to combine their styles and play around with them.

Sources Of Inspiration Link

Inspiration. From real life. I open my eyes and I travel and I look. And I read everything.

– Erik Spiekermann

It is hard to create something without experience. Therefore, I recommend collecting ideas. However, at the beginning, after looking through hundreds of beautiful pictures, I sometimes lose confidence and think, “I can’t do that!” Calm down. Before you panic, do the following:

• Look around.
  
  Perhaps you are sitting in a comfortable armchair near a bookcase. You might find diverse typefaces and cover designs in those books.

  ⁵⁴
  

• Open the cabinet.
  
  If you have a box of old postcards and magazines, look through them. Cut out worthwhile elements and put them in an ideas box (your personal, offline Pinterest).
• Wander the city with a camera.
  
  You will find a lot of bars and cafes with interesting logo designs, window designs and branding. These visuals will give you ideas for interesting compositions.
• Hit the market.
  
  Buy a couple of cheap vintage books and postcards from your local book market. Analyze the typefaces, text designs and color schemes.
• Go on a field trip.
  
  Nothing inspires me more than a new city, exploring its architecture, wayfinding marks, sign plates on houses, bookstores and markets. So cute! (Yes, I am hard to travel with. I often make stops to take photos.)

  ⁵⁶
  

• Photograph building faces.
  
  The diverse ornaments you’ll find will give you plenty of ideas for exquisite and vintage logos.

  ⁵⁸
  

• Meet new people and share your experience.
  
  Together, you can create new projects and get valuable feedback. Showing your work to others will enable you to find and correct mistakes more quickly. Collaborate with photographers and other creative people.
• Follow trends.
  
  Analyze what is in fashion now and what will be in fashion for the next couple of years. Constantly move forward.
• Check in on Instagram, Pinterest or Google.
  
  Here, you will find plenty of beautiful design work. However, be cautious, and don’t be overwhelmed. The less you look at readymade solutions on the Internet, the better. You want to give yourself the chance to create something completely unique.

Interested In Calligraphy Yet? Link

Then let’s start! Let’s look at the tools you will need for the first lesson.

⁶¹

Sure, you don’t have to buy everything in this photo! Consider your abilities and preferences. Below is a detailed list to give you a general idea of the tools you’ll need for different styles of writing:

• paper for handwriting,
• printed handwriting worksheets,
• examples of alphabets,
• ruler,
• pencil,
• pair of compasses,
• pigma micron permanent pens,
• rubber and kneaded rubber,
• calligraphy ink,
• flat paintbrushes,
• straight pen holder,
• oblique pen holder,
• nibs (square cut and pointed),
• Pilot Parallel pen and cartridges,
• brush pens,
• water brush.

Details About Tools Link

Paper Link

⁶³

In the beginning, ordinary notebooks, copy books, office paper and even old wallpaper will be enough for practice. Try to get paper with a smooth surface and a higher density than office paper; otherwise, the ink will not flow and the nib will not catch the paper. Rhobia and Fabriano paper are quite good, but try different variants to find the best one for you.

Unused wallpaper and draft work is perfectly suited to writing with brushes and brush pens. At a more advanced level, you could use texture paper and handmade paper, which is great for making postcards and wedding invitations.

Printed Handwriting Worksheets and Alphabets Link

⁶⁵

This is mandatory: It is impossible to write letters at a proper height or write a line of text without positioning and marking the sheet of paper. The most handy solution would be to put a printed handwriting worksheet under the sheet of paper you’re writing on. The worksheet will show through the paper, guiding you on the height and incline of elements. A ruler and pencil might also help, but lining would take time.

You can download handwriting worksheets⁶⁷ or make the required adjustments yourself⁶⁸ (second link in Russian).

Samples of alphabets will show you how to draw letters correctly. Print them out and put them under your sheet of paper as a guideline. Examples can be found and downloaded on Pinterest⁶⁹.

I recommend writing each letter on a separate sheet of paper, to better remember the motion of letters and to train your hand. This will surely take more time, but after you’ve written a lot of drafts, your hand will move confidently without trembling, and you will remember how letters are drawn by heart. Let’s start!

⁷⁰

Calligraphy Ink, Ink and Paint Link

Stores offer a great selection of calligraphy ink. Choose whatever you want — experiment! For an entry level, ordinary watercolor paint is quite enough.

⁷²

Chinese ink is perfect for this work. But pay attention to the expiry date. Buy fresh ink, otherwise you risk getting clods, which will impede the flow of ink from the nib.

Dr. Ph. Martin’s ink is one of my favorites. The selection of colors and variants is quite extensive, but it is quite expensive.

Pearl ink looks beautiful on dark and high-contrast surfaces. I like Finetec’s dry golden palettes. Work done with it looks exquisite.

⁷⁴

Flat Paint Brushes and Brush Pens Link

⁷⁶

As mentioned, I first learned to write with a flat synthetic paintbrush. It’s a great choice for learning letter graphemes, and it is the most economical choice.

Brush pens are a good tool to learn brush calligraphy and lettering. They come with and without cartridges. Brushes have different quality levels, densities, sizes and shapes. Find one you are comfortable writing with.

Water brushes are handy because you can fill them with ink or watercolor yourself. The disadvantage is that if, used improperly, they can get dry or dirty. I prefer to put my water brushes in ink or paint but not to fill them in. This way, they last longer.

Pen Holders Link

⁷⁸

Pen holders can be straight and oblique. A straight pen holder is good for square-cut pens and for writing different typefaces (for example, rustic capitals, square capitals, uncials and artificial uncials, textura quadrata, italics, etc.).

At the same time, an oblique pen holder with a pointed pen better suits cursive writing. Due to its initial incline, you will not have to bend your hand so much. It can be adjusted for different pens or just one particular pen.

Oblique pen holders have a flange at the end of the handle — the metal part of the holder where the pen is put in. This helps to regulate the angle of incline.

⁸⁰

I also have a straight holder that looks like a feather. It is more decorative and adds some atmosphere as I’m working, but it is not as comfortable as other holders. I use it mainly for photos.

Nibs Link

⁸²

Nibs are square cut or pointed. As suggested earlier, you’d better learn typefaces with a square-cut nib. These nibs are quite rough, which makes the work easier and which will train you for a pointed nib.

Tip: If you are left-handed, you just need to find a nib that bends from right to left.

Pointed nibs are specially designed for cursive. They come in different sizes and can be used for different line thicknesses and different writing styles. After trying several of them, you will find a favorite.

Tip: Take care of your writing tools. Wash and wipe dry your tools after each exercise.

Pilot Parallel Pen Link

⁸⁴

These are wonderful pens with a square-cut nib! They are very firm and comfortable to use. Though they work with the original cartridges (which are quite expensive), the empty ones can be refilled with a syringe.

Literature Link

⁸⁶

Mmm, books! You will find a lot of useful information and tips in books. I recommend beginning with these wonderful ones:

• The Art of Calligraphy⁸⁸
• The Calligrapher’s Bible⁸⁹
• The Complete Calligrapher⁹⁰
• Modern Calligraphy and Hand Lettering⁹¹
• Calligraphy: A Book of Contemporary Inspiration⁹²
• Step-by-Step: Calligraphy⁹³
• The Complete Book of Chalk Lettering: Create and Develop Your Own Style⁹⁴

In these books, you will learn the history of calligraphy, find descriptions of diverse alphabets (written using the elements of handwriting worksheets), learn about tools, read tips on how to adjust your workspace, tutorials and more.

Other tools Link

• Pencils
  
  Many books recommend starting calligraphy by writing with two pencils (firmly bound together), training yourself to build letters this way. In any case, a pencil will be useful for sketches and draft text writing, which you can use as a basis for writing in ink.
• A pair of compasses
  
  For lining round objects in composition.
• Pigma micron permanent pens
  
  These pens are perfect for preliminary sketches and drawing out letters.
• Writing desk
  
  A wooden sketchboard can be adjusted at different angles against the table, and the sheet of paper would then be fixed on the surface.
• A rubber and a kneaded rubber
  
  I mostly use a kneaded rubber, because it doesn’t leave waste after cleaning.
• Rulers
  
  They are needed to mark up the sheet of paper and to set the height of letters. You could use a printed handwriting worksheet and put it under the sheet of paper instead.

Other Photos From My Project “Hello From…” Link

⁹⁵

⁹⁷

⁹⁹

¹⁰¹

¹⁰³

¹⁰⁵

¹⁰⁷

Conclusion Link

Nowadays calligraphy is in fashion, which only makes me happier. In comparison to digital text, handwriting is a distinct art form, and its uniqueness is being valued more and more highly.

The art of beautiful handwriting shouldn’t be forgotten, and I thank everybody who supports and promotes it today.

I hope that I’ve managed to convince you that anyone can learn the art of calligraphy! All you need is daily practice, inspiration and belief in yourself. And I believe in you. Good luck!

Let’s Practice! Link

To consolidate your knowledge, I suggest you draw a birthday card. Grab a brush, ink or paint and some cartridge paper. Line the paper, and write your text in the middle of the paper with a pencil. Feel free to add some decorative elements around the lettering according to your taste (balloons, flowers, confetti, etc.).

Make sure that the final composition is aligned and symmetrical. Now you can trace around the letters in ink. Not that difficult, right?

Attach your result in the comments. Can’t wait to see them!

Here is mine:

¹⁰⁹

If you have any questions, please feel free to contact me via Twitter¹¹¹, email¹¹² or Instagram¹¹³.

Sources Link

• The Calligrapher’s Bible: 100 Complete Alphabets and How to Draw Them, David Harris
• The Art of Calligraphy: A Practical Guide to the Skills and Techniques, David Harris
• Stop Stealing Sheep and Find Out How Type Works, Erik Spiekermann
• Helvetica¹¹⁴ (documentary film)
• The Postman’s Knock¹¹⁵

(vf, il, al)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2013/01/understanding-difference-between-type-and-lettering/
2. 2 https://www.smashingmagazine.com/2010/05/the-beauty-of-typography-writing-systems-and-calligraphy-of-the-world/
3. 3 https://www.smashingmagazine.com/2014/03/taking-a-closer-look-at-arabic-calligraphy/
4. 4 https://www.smashingmagazine.com/2008/04/beautiful-handwriting-lettering-and-calligraphy/
5. 5 https://www.smashingmagazine.com/2016/09/the-art-of-hand-lettering/
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/11/elements-in-calligraphy-large-opt.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/11/elements-in-calligraphy-large-opt.jpg
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/assignment-with-flat-paint-brush-large-opt.jpg
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/assignment-with-flat-paint-brush-large-opt.jpg
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/11/square-cut-nib-large-opt.jpg
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/11/square-cut-nib-large-opt.jpg
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/assignment-with-square-cut-nib-large-opt.jpg
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/11/assignment-with-square-cut-nib-large-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brush-pen-lettering-large-opt.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brush-pen-lettering-large-opt.jpg
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/chalk-lettering-large-opt.jpg
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/11/chalk-lettering-large-opt.jpg
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/chalk-lettering-example-2-large-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/12/chalk-lettering-example-2-large-opt.jpg
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cyrillic-ornamental-script-large-opt.jpg
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cyrillic-ornamental-script-large-opt.jpg
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/textura-quadrata-large-opt.jpg
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/textura-quadrata-large-opt.jpg
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/italic-large-opt.jpg
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/italic-large-opt.jpg
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/english-roundhand-large-opt.jpg
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/11/english-roundhand-large-opt.jpg
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/11/modern-calligraphy-script-large-opt.jpg
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/11/modern-calligraphy-script-large-opt.jpg
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Flourishing-large-opt.jpg
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Flourishing-large-opt.jpg
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/11/First-lesson-on-textura-quadrata-large-opt.jpg
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/11/First-lesson-on-textura-quadrata-large-opt.jpg
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Copperplate-large-opt.jpg
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Copperplate-large-opt.jpg
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pointed-nib-large-opt.jpg
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pointed-nib-large-opt.jpg
38. 38 https://www.behance.net/pokras
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-St-Petersburg-large-opt.jpg
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-St-Petersburg-large-opt.jpg
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Lviv-large-opt.jpg
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Lviv-large-opt.jpg
43. 43 https://www.instagram.com/explore/tags/cherrycalligraphy/
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphic-cards-large-opt.jpg
45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphic-cards-large-opt.jpg
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphy-sample-large-opt.jpg
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphy-sample-large-opt.jpg
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Simple-wedding-calligraphy-large-opt.jpg
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Simple-wedding-calligraphy-large-opt.jpg
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/11/beauty-of-calligraphy-large-opt.jpg
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/11/beauty-of-calligraphy-large-opt.jpg
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphy-elements-large-opt.png
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphy-elements-large-opt.png
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/11/magic-calligraphy-large-opt.jpg
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/11/magic-calligraphy-large-opt.jpg
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Logos-in-the-streets-of-Vilnius-and-Moscow-large-opt.jpg
57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Logos-in-the-streets-of-Vilnius-and-Moscow-large-opt.jpg
58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo-and-picture-of-architectural-carvings-large-opt.jpg
59. 59 https://www.pinterest.com/pin/568157309224741945/
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo-and-picture-of-architectural-carvings-large-opt.jpg
61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/11/set-for-calligraphy-large-opt.jpg
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/11/set-for-calligraphy-large-opt.jpg
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/11/paper-large-opt.jpg
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2016/11/paper-large-opt.jpg
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/11/gothique-textura-large-opt.jpg
66. 66 https://www.smashingmagazine.com/wp-content/uploads/2016/11/gothique-textura-large-opt.jpg
67. 67 https://www.printablepaper.net/category/calligraphy
68. 68 http://studycalligraphy.com/worksheet/
69. 69 https://www.pinterest.com/
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphy-lines-large-opt.jpg
71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/11/calligraphy-lines-large-opt.jpg
72. 72 https://www.smashingmagazine.com/wp-content/uploads/2016/11/inks-and-paints-large-opt.jpg
73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/11/inks-and-paints-large-opt.jpg
74. 74 https://www.smashingmagazine.com/wp-content/uploads/2016/11/A-quote-from-a-book-Shantaram-large-opt.jpg
75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/11/A-quote-from-a-book-Shantaram-large-opt.jpg
76. 76 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brushes-large-opt.jpg
77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/11/brushes-large-opt.jpg
78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pen-holders-large-opt.jpg
79. 79 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pen-holders-large-opt.jpg
80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Metal-flange-large-opt.jpg
81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Metal-flange-large-opt.jpg
82. 82 https://www.smashingmagazine.com/wp-content/uploads/2016/11/nibs-large-opt.jpg
83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/11/nibs-large-opt.jpg
84. 84 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pilot-parallel-pen-large-opt.jpg
85. 85 https://www.smashingmagazine.com/wp-content/uploads/2016/11/pilot-parallel-pen-large-opt.jpg
86. 86 https://www.smashingmagazine.com/wp-content/uploads/2016/11/books-on-calligraphy-large-opt.jpg
87. 87 https://www.smashingmagazine.com/wp-content/uploads/2016/11/books-on-calligraphy-large-opt.jpg
88. 88 https://www.amazon.com/Art-Calligraphy-Practical-Skills-Techniques/dp/1564588491/
89. 89 https://www.amazon.com/Calligraphers-Bible-Complete-Alphabets-Draw/dp/0764156152/
90. 90 https://www.amazon.com/Complete-Calligrapher-Maryanne-Grebenstein/dp/1408133989/
91. 91 https://www.amazon.com/Modern-Calligraphy-Hand-Lettering-Mark-Making/dp/1592536441/
92. 92 https://www.amazon.com/Calligraphy-Contemporary-Inspiration-Denise-Lach/dp/0500291217/
93. 93 https://www.amazon.com/Step—Step-Calligraphy-Complete-Creative/dp/0806939877/
94. 94 https://www.amazon.co.uk/Complete-Chalk-Lettering-Valerie-McKeehan/dp/0761186115/
95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Minsk-large-opt.jpg
96. 96 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Minsk-large-opt.jpg
97. 97 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Moscow-large-opt.jpg
98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Moscow-large-opt.jpg
99. 99 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Vilnius-large-opt.jpg
100. 100 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Vilnius-large-opt.jpg
101. 101 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-London-large-opt.jpg
102. 102 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-London-large-opt.jpg
103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Manchester-large-opt.jpg
104. 104 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Manchester-large-opt.jpg
105. 105 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Edinburgh-large-opt.jpg
106. 106 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Hello-from-Edinburgh-large-opt.jpg
107. 107 https://www.smashingmagazine.com/wp-content/uploads/2016/11/hello-from-Maidstone-large-opt.jpg
108. 108 https://www.smashingmagazine.com/wp-content/uploads/2016/11/hello-from-Maidstone-650-opt.jpg
109. 109 https://www.smashingmagazine.com/wp-content/uploads/2016/12/practicing-calligraphy-example-large-opt.jpg
110. 110 https://www.smashingmagazine.com/wp-content/uploads/2016/12/practicing-calligraphy-example-large-opt.jpg
111. 111 https://twitter.com/FunnyCherry
112. 112 mailto:4misscherry@gmail.com
113. 113 https://www.instagram.com/cherrycalligraphy/
114. 114 http://www.imdb.com/title/tt0847817/
115. 115 https://thepostmansknock.com/

↑ Back to topTweet itShare on Facebook

This content is sponsored via Syndicate Ads

Phew, what a week! Due to an HTML-parsing bug, Cloudflare experienced a major data leak, and the first practical collision for SHA-1 was revealed as well. We should take these events as an occasion to reconsider if a centralized front-end load balancer that modifies your traffic is a good idea after all. And it’s definitely time to upgrade your TLS-certificate if you still serve SHA-1, too. Here’s what else happened this week.

Further Reading on SmashingMag: Link

• Next Generation Server Compression With Brotli¹
• Making Accessibility Simpler, With Ally.js²
• Team Collaboration And Closing Efficiency Gaps In Responsive Design³
• A Simple Workflow From Development To Deployment⁴

News Link

• Cloudflare experienced a memory leak caused by its document parser⁵. Here is the incident report by Cloudflare⁶.
• The fresh Safari Technology Preview 24⁷ added support for PerformanceObserver and added <link preload> as an experimental feature. Furthermore, they implemented the dynamic JavaScript import operator and suspended SVG animations on hidden pages.
• It was just a matter of time until browsers would stop accepting SHA-1 certificates. But this week, things took a sudden turn as Google researchers revealed the first practical collision for SHA-1, affirming the insecurity of the algorithm. As a result of this, starting from today, Mozilla will remote-update Firefox to not accept SHA-1 in certificates anymore⁸.

General Link

• How does your team review code? Ana Balica shares a useful checklist for reviewing your and your teammates code⁹.

Tools & Workflows Link

• Joseph Zimmerman introduces us to Webpack¹⁰. What I really like about this article is that it’s not another article sharing pre-built sets of configurations but that it explains every detail step-by-step.
• Oh shit, git!¹¹ Don’t be afraid of git anymore thanks to this emergency guide that helps you solve the most common problems with the versioning system.

¹²

Security Link

• Mitigating Cross-Site Request Forgery attacks has never been easy. Luckily, it seems that we now got a proper solution for it: Same-Site Cookies¹⁴. The only thing you need to do to make it work is adding SameSite to your existing Set-Cookie header. Of course, you should know how same-site cookies differ from “normal” cookies, but for most sites this should be easy to implement.
• A joint-venture of five journalists researched how the private security industry works and what price we as citizens pay for our security¹⁵.

Privacy Link

• It’s not your computer that is the most vulnerable device, it’s your smartphone. In fact, for a small amount of money, everyone can easily buy spyware¹⁶ that works on most Android phones. For iOS, things look a bit better unless the device is jailbroken. But this doesn’t necessarily mean that spyware doesn’t exist for that system as well.

Web Performance Link

• Thadee Trompetter shares insights into how Brotli can improve your site’s performance¹⁷ and why he relies on pre-compressing rather than doing it on the fly on the server.

¹⁸

JavaScript Link

• Manuel Matuzovic explains how to write JavaScript with accessibility in mind²⁰.

Going Beyond… Link

• A team at the MIT Media Lab invented a device that captures air pollution and turns the pollution into safe, high-quality ink for art²¹.
• The Institute For Energy Efficiency’s computing solutions group has a couple of interesting projects and data to share. For example, they try to figure out solutions to selectively shut down unnecessary components while retaining access to critical data. This is only one of their ambitious projects and shows how much potential there is when it comes to improving energy efficiency in our networks²².

²³

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

— Anselm

Footnotes Link

1. 1 https://www.smashingmagazine.com/2016/10/next-generation-server-compression-with-brotli/
2. 2 https://www.smashingmagazine.com/2015/12/making-accessibility-simpler/
3. 3 https://www.smashingmagazine.com/2014/05/team-collaboration-closing-efficiency-gaps-responsive-design/
4. 4 https://www.smashingmagazine.com/2015/07/development-to-deployment-workflow/
5. 5 https://bugs.chromium.org/p/project-zero/issues/detail?id=1139
6. 6 https://blog.cloudflare.com/incident-report-on-memory-leak-caused-by-cloudflare-parser-bug/
7. 7 https://webkit.org/blog/7423/release-notes-for-safari-technology-preview-24/
8. 8 https://blog.mozilla.org/security/2017/02/23/the-end-of-sha-1-on-the-public-web/
9. 9 https://ana-balica.github.io/2017/02/21/code-review-checklist/
10. 10 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
11. 11 http://ohshitgit.com/
12. 12 http://ohshitgit.com/
13. 13 http://ohshitgit.com/
14. 14 https://scotthelme.co.uk/csrf-is-dead/
15. 15 https://thecorrespondent.com/10221/security-for-sale-the-price-we-pay-to-protect-europeans
16. 16 https://motherboard.vice.com/en_us/article/i-tracked-myself-with-dollar170-smartphone-spyware-that-anyone-can-buy
17. 17 https://www.voorhoede.nl/en/blog/static-site-implosion-with-brotli-and-gzip/
18. 18 https://www.voorhoede.nl/en/blog/static-site-implosion-with-brotli-and-gzip/
19. 19 https://www.voorhoede.nl/en/blog/static-site-implosion-with-brotli-and-gzip/
20. 20 https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9
21. 21 https://www.kickstarter.com/projects/1295587226/air-ink-the-worlds-first-ink-made-out-of-air-pollu
22. 22 http://transit.iee.ucsb.edu/research/computing/projects
23. 23 https://www.kickstarter.com/projects/1295587226/air-ink-the-worlds-first-ink-made-out-of-air-pollu
24. 24 https://www.kickstarter.com/projects/1295587226/air-ink-the-worlds-first-ink-made-out-of-air-pollu
25. 25 https://wdrl.info/donate
26. 26 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Besides the user’s needs, what’s another vital aspect of an app? Your first thought might be its design. That’s important, correct, but before you can even think about the design, you need to get something else right: the data. Data should be the cornerstone of everything you create. Not only does it help you to make more informed decisions, but it also makes it easier to account for edge cases, or things you might not have thought of otherwise.

The easiest way to work with real data in Sketch is the with Craft plugin from InVision. It provides a wealth of predefined content, such as names, dates, and addresses, lets you scour a website for the required information, and enables you to feed in a JSON file and work with the provided data. That’s exactly what we will do with our made-up Movie Finder app. You can use it to search for movies based on different terms, such as name, director and year. This data will be provided by a JSON file, an open-standard format that allows data to be stored with key-value pairs, such as "category": "Dramas".

¹

Heads Up Link

Before we can start to pull in some data, we need to take care of the layout of the app. If you are just interested in the “content” part (i.e. how to populate the design with real data), you can download the Sketch file of the template³ and continue reading from the “From One to Many⁴” section onwards. Otherwise, follow along and let me show you how to create the entire app from A to Z. I won’t explain every bit in detail; you’ll need some basic knowledge of Sketch⁵. The finished design, filled with movie data, can be found on Dropbox⁶. In either case, you will need the free font Clear Sans⁸⁷ from Intel.

I wanted to keep the app as universal as possible, without tying it to a certain platform, so I chose an artboard size of 360 × 640 pixels, and I renamed it to “Movie Finder.” This is a common Android size, but you can easily go to iPhone sizes from there. Select the checkbox “Background Color” in the Inspector panel to give it a white background. Now, press R (to select the Rectangle tool) and create a rectangle at the top for the header; it should be the full width of the artboard. Be sure to remove the default border by pressing B on the keyboard, and save this style for future shapes with “Edit” → “Set Style as Default” from the menu bar. The height of the rectangle doesn’t matter at the moment, but the layer name does, so please set it to “BG.” To simplify the process of laying out elements and deciding on their sizes, set up an 8-pixel grid from “View” → “Canvas” → “Grid Settings” in the menu bar. For the “Grid block size,” enter “8px”; for “Thick lines every,” use “0.” Everything else can be left alone.

The first time we will use this grid is for the height of the header. Drag the rectangle we just created to be 32 pixels high. Choose a color of your liking that has enough contrast with white text; I went for #D06002, which I also saved to the “Document Colors” in the color dialog with a click on the “+” button, for later reference. For the title, “Movie Finder,” create a new text layer (press T) with a size of 16 pixels and the color white, and center it in both dimensions to the background. My font of choice is Clear Sans⁸⁷ by Intel due to its clean look, but also the good selection of weights. Choose the “Regular” weight for the title. Complete the header by moving all of the current elements into a “Header” group.

⁹

Search And Find Link

The next task is the search field. Add another rectangle with dimensions of 344 × 32 pixels, and assign it rounded corners of “3,” a white background and a gray border (#B4B4B4). Rename it to “Field.” Move it 1 grid unit away from the header, and center it to the artboard (using the fourth icon at the top of the Inspector, or a right-click and then “Align Horizontally”). The placeholder consists of an icon and some text. For the former, I have used the plugin Icon Font¹¹, which enables you to easily pull in different icons. It requires you to install the font bundle¹², a package of the most popular fonts. In case you need some assistance with this multi-step process, have a look at the screencast¹³. Now, go to “Plugins” → “Icon Font” → “Grid Insert” → “Ionicons” in the menu bar and enter “search.” Click on the first icon to add it to the artboard, but change its font size to 16 pixels. Drag it over to the search field.

For the placeholder text, add a new text layer with T, set to the same font size, a “Regular” weight and the content “Movie name, director, year.” Also, make sure the “Clear Sans” font is used. Move it 3 pixels away from the icon, select both elements, and center them vertically with a right-click and “Align Vertically.” Set the color of both to #4A4A4A. Because this will be our default text color from now on, add it to the “Document Colors.” Create a new group from these elements (named “Placeholder”), which you can tone down to 50% opacity with 5 on the keyboard. Move it a little up afterwards with the arrow key for correct optical alignment. Select this new group together with the field itself, and center them in both dimensions (right-click → “Align Horizontally” and “Align Vertically”), and create a “Search field” group. In the layers list, it should be below the header group; move it there with Cmd + Alt + Ctrl + down arrow.

¹⁴

Now, duplicate the placeholder text for the search term below with Cmd + D, but move it down until its text box has a spacing of about 3 pixels from the border of the input field. This new layer doesn’t need to sit on a grid line (you can break this rule — not everything has to align perfectly). Use ‘You have searched for “ridley scott”‘ as the content. Also, drag it out of the groups in the layers list, below the “Search field” group, and center it to the artboard.

Right below the text layer, add a line to clearly distinguish the search results. This can be created with either a thin rectangle (1-pixel high) or a line (1-pixel thick). I prefer the former because it’s a tad easier to handle. Create it with the same width and spacing as the search field, and name it “Line.” Set the fill to #D4D4D4, and align it on top of a grid line (which should give it a spacing of about 7 pixels from the text layer above). Move it to the bottom of the layers list, together with the text layer.

¹⁶

Show Me The Results Link

Now we can finally turn to the search results. Each result consists of the poster of the movie, the name, the director, a short description, the year of release and the running time. It also shows the user rating at a glance. But instead of adding all of the information by hand, we will just create placeholders that will be filled with the actual content later!

¹⁸

Let’s start with the poster. Add a rectangle of 72 × 104 pixels at the left edge, with a spacing of 2 grid units from the artboard’s edge and the line above. Name it “Poster.” A black shadow with the properties “0/4/6/0” (X/Y/blur/spread) and 30% opacity will give it a slightly raised appearance.

²⁰

Right next to it, with another horizontal spacing of 2 grid units, add a text layer for the “Title” (use exactly that as the content). The font size should already be at 16 pixels. For the color, choose the same as the header’s background (get it from the “Document Colors” in the color dialog). Make it bold with Cmd + B, and move it so that the top of the text (not the text box) is at the same height as that of the poster. Use the arrow keys to fine-tune this position. Duplicate it for the “Director” (as above, use this as the content), move it down and align its baseline to a grid line. Once you have lowered the font size to 14 pixels, this should give it a spacing of about 2 pixels from the previous text layer. For the weight, use “Regular” again, and for the color, the black color we saved to the “Document Colors” earlier.

More Text Link

Continue with the description in the same fashion: Duplicate the previous text layer with Cmd + D, and move it down so that there’s spacing of about 2 grid units in between, after you have aligned its baseline to the grid. You just need to make sure that the filler text has two lines: Use the well-known placeholder “Lorem ipsum dolor sit amet, consectetuer adipiscing elit” as the content for now, but set the width of the text layer to 230 pixels in the Inspector panel. This will create a fixed text layer that automatically breaks at the right, creating two lines of text. Tighten the line spacing to 16 pixels in the Inspector panel, which will align both lines to the grid.

²²

Because these will be just the first two lines of the description, we will add a so-called “disclosure triangle” that indicates more text. Create a triangle (from “Insert” → “Shape” → “Triangle” in the toolbar) with dimensions of 8 × 6 pixels, and flip it vertically with a right-click and “Transform” → “Flip Vertical.” In case you have difficulty getting these measurements, switch off the grid temporarily with Ctrl + G and zoom in a bit with Cmd + +. Assign this triangle the same color as the text, and center it to the second line of the description (you can switch on the grid again now). To make it independent of the text length, move it to the right edge of the artboard, with a spacing of 2 grid units. Finally, rename it to “Disclosure,” and make sure that it is above the adjacent text layer in the layers list.

Time And Time Again Link

For the remaining two text layers — the year and running time — we can take the text layer of the “Director” as the base again. Duplicate it, move it down, so that there is another spacing of about 2 grid units from the description, but change the content to something like “2000” (so that we have a good indication of how long a typical year will be). As before, its baseline should align to the grid. Hold Alt, drag it to the right with the mouse to create another copy, and change this one to “|” to separate it from the year. You may also want to press Shift while dragging to keep it on the same line. Add the last layer in the same fashion, with “Running time” as the content. These text layers should have a horizontal spacing of about 4 pixels from each other.

²⁴

The only thing we have to do before we can start pulling in some real content is the rating. First, it contains a circle with a diameter of 28 pixels (switch off the grid again) and the same fill color as the title of the movie. The second element is a white text layer (“9.9,” for example), with a font size of 14 pixels, a bold weight and center alignment (press Cmd + |). Changing the character spacing to “–0.8” will give it a tighter feel. Align these two layers to each other, but trust your own eyes for the optical alignment instead of Sketch’s functionality, because that will produce a better result.

After you have combined these into a “Rating” group, move it to the bottom right of the poster so that it sticks out about 10 pixels horizontally and 4 pixels vertically. Make sure that it is above the poster in the layer hierarchy. One last step: Duplicate the line from above so that it acts as a separator between the other search results we are going to create. Move it down until it has a spacing of 2 grid units from the poster and sits on top of a grid line.

²⁵

From One to Many Link

The design is ready. There are numerous ways in which we can fill it with real content (with the help of some plugins), but the best and easiest is Craft²⁷. Apart from pulling in data, it also enables us to duplicate elements and vary their contents automatically. After you have installed the plugin, a handy panel next to the Inspector panel will appear (if not, open it with “Craft” → “Toggle Panel” from the menu bar), which will provide more functionality in Sketch. For us, the “data” section (third icon from the top) is of most interest and, in particular, the “JSON” tab.

²⁸

We will pull our data from the Netflix Roulette³⁰ website, which provides an application programming interface (or an API, which is a way to access different parts of a service) for all shows on Netflix. Because we would like to get all movies from director Ridley Scott, we will use the “director” keyword with his name, which leads to the URL http://netflixroulette.net/api/api.php?director=Ridley%20Scott. Click on it to see the JSON file. The file might seem like a mess at first, but it’s just an unordered collection of the key-value pairs — i.e. the properties — of the movies, such as show_title, category and runtime. We will bring some order to this list shortly.

Take this exact URL and paste it in the input field of the “JSON” tab in the Craft panel that says “Type URL…”. Clicking on “Import” will bring up a list of (currently) seven entries, which you can extend with the arrow on the left.

³¹

Start at 0, which should be the one for the movie Gladiator; a look at show_title confirms that. With a simple click on the key, you can assign its value (or any other from the JSON file) to layers on your artboard (for example, after selecting the “Title” text layer). Do the same for the “Director” text layer and the director key, as well as “Description” and summary. Unfortunately, the content from Netflix Roulette is much longer than what we have arranged for the text layer. Fix that by dragging the height of the text layer back to 34 pixels again (using the Inspector panel won’t work here).

³³

Now, continue with the remaining text layers. Select “2000” on the artboard, and assign the value from release_year, as well as “Running time” on the canvas and runtime from Craft. For the rating in the orange circle, use (you guessed it!) the rating field. Instead of using a URL for the JSON file, you can employ your own data: Delete the current source with the “x” icon next to the input field, and drag your JSON data to the appropriate field below (or simply click there and select it from the computer).

Note: A list with numerous JSON files for you to play with can be found on GitHub³⁴.

A Picture Paints A Thousand Words Link

You can use Craft to fill not only text layers but also image layers. Unfortunately, selecting the “Poster” layer and clicking on the poster field in Craft won’t give us the desired result: it seems that the image path isn’t valid, so nothing more than the three dots (which usually act as a loading indicator) will be shown. Luckily, Craft can do even more: You can use the “Web” tab — which is basically just a browser — to navigate to a website and grab the poster from, say, IMBd. On the page for Gladiator³⁵, scroll down and click on the movie poster, which will assign the correct image to the placeholder on the artboard (make sure that it is selected first). In case you want to follow a link, you need to hold Cmd before clicking.

³⁶

Now we have a search result that is fully filled with content about the Gladiator movie, without having typed a single value by hand. Magic!

But it doesn’t stop there. Getting to the other search results, all based on the same JSON file, is just a matter of a few clicks. As preparation, combine all of the layers of the search result into an “Item” group (including the line), and move it to the bottom of the layers list (you can use Ctrl + Alt + Cmd + down arrow). Now, click on “Duplicate content” in the Craft panel, which will bring you to the “Duplicate” section. This will let you lay out an element in both directions, with a certain count and spacing in between. We want “4” items in total, with a gutter of “10,” aligned vertically. Press “Duplicate Content” and watch the magic unfold.

³⁷

We’ve gotten three new search results, all filled with more movie data. Craft was clever to use the other entries from the JSON file here. Alongside these additional entries, another new layer was created in the layers list: “Duplicate control.” This one’s really powerful: In case the new entries don’t align to the grid, you can use it to change the spacing on the fly. Just select the “Duplicate control” layer in the layers list, and drag the slider below the “Gutter” field in the Craft panel.

But it does even more. If you need more (or fewer) entries later on, you can resize the “Duplicate control” layer on the canvas, and the plugin will automatically adapt the number of search results! Just mind that plugins sometimes break with each new version of Sketch, so if something doesn’t work as expected, a fix might already be on the way.

The only thing that doesn’t perfectly work are the posters. They seem to be broken in general, so we need to use the “Web” tab again. Navigate to the respective detail pages on IMDb, and select the appropriate poster images. But that’s a small price to pay.

In For A Penny, In For A Pound Link

Basically, we are done now, but I want to show you one last trick. Though we have four similar elements, they aren’t tied to each other in any way. Changing one of the entries won’t affect the others. A symbol would help here.

Start by deleting all of the item groups except the first; remove the outer “Group” that Craft created with Shift + Cmd + G, as well as the “Duplicate control” layer, and select the remaining item. Now, click on “Create Symbol” in the toolbar, but don’t send it to the Symbols page. This will place the symbol next to the artboard, which will make modifications easier later because you can instantly see how all instances will be affected.

In contrast, if you select “Send Symbol to ‘Symbols’ Page,” the symbol will be created on a separate page³⁸. While this is better for organization, it becomes much harder to see the direct correlation between the master symbol and its instances when you change it.

For the rest of the items, you can proceed in the same way as before. Select the first item, the instance of the symbol we just changed (not the master symbol next to the artboard), go to the “Duplicate” panel in Craft (the last icon), enter “4” for the count and “10” for the gutter, and you are done. Because all entries are tied to the same symbol now, you can try to change the size of the title, for example, and see how it adapts in every search result.

³⁹

The poster problem needs a slightly different approach, however. Selecting the poster of each search result isn’t possible anymore when using a symbol. Instead, click on the small thumbnail next to the “Choose Image” button in the “Overrides” section of the Inspector panel. Navigate to the appropriate IMDb page from the “Web” tab in the Craft panel again, and drag the poster to this thumbnail. This will apply it to the respective instance of the symbol. Goal achieved!

⁴¹

Conclusion Link

I hope you’ve enjoyed this tutorial, in which I’ve shown how you can stop worrying about dummy content and start using real data with the help of the Craft plugin⁴³. This could not only speed up your design process but also make you think more about edge cases, or how certain parts of a design can interact with each other.

Please feel free to post your questions or point out a different approach to a certain part of the tutorial. You can also contact me on Twitter (@SketchTips⁴⁴) or visit my little side project (SketchTips⁴⁵), where I provide more tips about Sketch. For the full package, have a look at The Sketch Handbook⁴⁶ from Smashing Magazine, which will tell you everything you ever wanted to know about designing with Sketch.

(mb, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/02/1-designing-real-data-sketch-craft-plugin-large-opt.png
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/02/1-designing-real-data-sketch-craft-plugin-large-opt.png
3. 3 https://db.tt/nhXKiVTy
4. 4 #from-one-to-many
5. 5 https://www.smashingmagazine.com/tag/sketch/
6. 6 https://db.tt/nhXKiVTy
7. 7 https://www.fontsquirrel.com/fonts/clear-sans
8. 8 https://www.fontsquirrel.com/fonts/clear-sans
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/2-designing-real-data-sketch-craft-plugin-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/02/2-designing-real-data-sketch-craft-plugin-large-opt.png
11. 11 https://github.com/keremciu/sketch-iconfont
12. 12 https://github.com/keremciu/font-bundles
13. 13 https://github.com/keremciu/font-bundles
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/02/3-designing-real-data-sketch-craft-plugin-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/02/3-designing-real-data-sketch-craft-plugin-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-designing-real-data-sketch-craft-plugin-large-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-designing-real-data-sketch-craft-plugin-large-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-designing-real-data-sketch-craft-plugin-large-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-designing-real-data-sketch-craft-plugin-large-opt.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5a-designing-real-data-sketch-craft-plugin-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5a-designing-real-data-sketch-craft-plugin-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/02/6-designing-real-data-sketch-craft-plugin-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/02/6-designing-real-data-sketch-craft-plugin-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot7.gif
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/02/8-designing-real-data-sketch-craft-plugin-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/02/8-designing-real-data-sketch-craft-plugin-large-opt.png
27. 27 https://www.invisionapp.com/craft
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9-designing-real-data-sketch-craft-plugin-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9-designing-real-data-sketch-craft-plugin-large-opt.png
30. 30 http://netflixroulette.net/
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/02/10a-designing-real-data-sketch-craft-plugin-large-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/02/10a-designing-real-data-sketch-craft-plugin-large-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot10.gif
34. 34 https://github.com/toddmotto/public-apis
35. 35 http://www.imdb.com/title/tt0172495/?ref_=fn_al_tt_1
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/02/13-creating-a-movie-finder-app-in-sketch.gif
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/02/screenshot12.gif
38. 38 https://www.sketchapp.com/learn/documentation/grouping/pages/
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/02/13-designing-real-data-sketch-craft-plugin-large-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/02/13-designing-real-data-sketch-craft-plugin-large-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/02/14-designing-real-data-sketch-craft-plugin-large-opt.png
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/02/14-designing-real-data-sketch-craft-plugin-large-opt.png
43. 43 https://www.invisionapp.com/craft
44. 44 https://twitter.com/SketchTips
45. 45 http://sketchtips.info
46. 46 http://www.sketch-handbook.com

↑ Back to topTweet itShare on Facebook

This content is sponsored via Syndicate Ads

JavaScript module bundling has been around for a while. RequireJS had its first commits in 2009, then Browserify made its debut, and since then several other bundlers have spawned across the Internet. Among that group, webpack has jumped out as one of the best. If you’re not familiar with it, I hope this article will get you started with this powerful tool.

What’s A Module Bundler? Link

In most programming languages (including ECMAScript 2015+, which is one of the most recent versions of the standard for JavaScript, but isn’t fully supported across all browsers yet), you can separate your code into multiple files and import those files into your application to use the functionality contained in them. This wasn’t built into browsers, so module bundlers were built to bring this capability in a couple forms: by asynchronously loading modules and running them when they have finished loading, or by combining all of the necessary files into a single JavaScript file that would be loaded via a <script> tag in the HTML.

Without the module loaders and bundlers, you could always combine your files manually or load your HTML with countless <script> tags, but that has several disadvantages:

• You need to keep track of the proper order in which the files should load, including which files depend on which other files and making sure not to include any files you don’t need.
• Multiple <script> tags means multiple calls to the server to load all of your code, which is worse for performance.
• Obviously, this entails a lot of manual work, instead of letting the computer do it for you.

Most module bundlers also integrate directly with npm or Bower to easily allow you to add third-party dependencies to your application. Just install them and throw in a line of code to import them into your application. Then, run your module bundler, and you’ll have your third-party code combined with your application code, or, if you configure it correctly, you can have all of your third-party code in a separate file, so that when you update the application code, users don’t need to download the vendor code when they need to update their cache of your application code.

Why Webpack? Link

Now that you have basic knowledge of the purpose of webpack, why should you choose webpack over the competition? There are a few reasons:

• Its relative newness gives it a leg up because it is able to work around or avoid the shortcomings and problems that have popped up in its predecessors.
• Getting started is simple. If you’re just looking to bundle a bunch of JavaScript files together without any other fancy stuff, you won’t even need a configuration file.
• Its plugin system enables it to do so much more, making it quite powerful. So, it might be the only build tool you need.

I’ve seen only a few other module bundlers and build tools that can say the same thing, but webpack seems to have one thing over those: a large community that can help when you get stuck. Browserify’s community is probably just as big, if not larger, but it lacks a few of the potentially essential features that come with webpack. With all the praise I’ve given webpack, I’m sure you’re just waiting for me to move on and show some code, right? Let’s do that, then.

Setting Up Webpack Link

Before we can use webpack, we need to install it. To do that, we’re going to need Node.js and npm, both of which I’m just going to assume you have. If you don’t have them installed, then the Node.js website¹ is a great place to start.

Now, there are two ways to install webpack (or any other CLI package, for that matter): globally or locally. If you install it globally, you can use it no matter what directory you’re in, but then it won’t be included as a dependency for your project, and you can’t switch between versions of webpack for different projects (some projects might need more work to upgrade to a later version, so they might have to wait). So, I prefer to install CLI packages locally and either use relative paths or npm scripts² to run the package. If you’re not used to installing CLI packages locally, you can read about it in a post I wrote about getting rid of global npm packages³.

We’re going to be using npm scripts for our examples anyway, so let’s just forge ahead with installing it locally. First things first: Create a directory for the project where we can experiment and learn about webpack. I have a repository on GitHub⁴ that you can clone and whose branches you can switch between to follow along, or you can start a new project from scratch and maybe use my GitHub repository for comparison.

Once you’re inside the project directory via your console of choice, you’ll want to initialize the project with npm init. The information you provide really isn’t that important, though, unless you plan on publishing this project on npm.

Now that you have a package.json file all set up (npm init created it), you can save your dependencies in there. So, let’s use npm to install webpack as a dependency with npm install webpack -D. (-D saves it in package.json as a development dependency; you could also use --save-dev.)

Before we can use webpack, we should have a simple application to use it on. When I say simple, I mean it. First, let’s install Lodash⁵ just so that we have a dependency to load into our simple app: npm install lodash -S (-S is the same as --save). Then, we’ll create a directory named src, and in there we’ll create a file named main.js with the following contents:

var map = require('lodash/map'); function square(n) { return n*n; } console.log(map([1,2,3,4,5,6], square));

Pretty simple, right? We’re just creating a small array with the integers 1 through 6, then using Lodash’s map to create a new array by squaring the numbers from the original array. Finally, we’re outputting the new array to the console. This file can even be run by Node.js, which you can see by running node src/main.js, which should show this output: [ 1, 4, 9, 16, 25, 36 ].

But we want to bundle up this tiny script with the Lodash code that we need and make it ready for browsers, which is where webpack comes in? How do we do that?

Using Webpack Command Line Link

The easiest way to get started with using webpack without wasting time on a configuration file is just to run it from the command line. The simplest version of the command for webpack without using a configuration file takes an input file path and an output file path. Webpack will read from that input file, tracing through its dependency tree, combining all of the files together into a single file and outputting the file at the location you’ve specified as the output path. For this example, our input path is src/main.js, and we want to output the bundled file to dist/bundle.js. So, let’s create an npm script to do that (we don’t have webpack installed globally, so we can’t run it directly from the command line). In package.json, edit the "scripts" section to look like the following:

… "scripts": { "build": "webpack src/main.js dist/bundle.js", } …

Now, if you run npm run build, webpack should get to work. When it’s done, which shouldn’t take long, there should be a new dist/bundle.js file. Now you can run that file with Node.js (node dist/bundle.js) or run it in the browser with a simple HTML page and see the same result in the console.

Before exploring webpack some more, let’s make our build scripts a little more professional by deleting the dist directory and its contents before rebuilding, and also adding some scripts to execute our bundle. The first thing we need to do is install del-cli so that we can delete directories without upsetting the people who don’t use the same operating system as us (don’t hate me because I use Windows); npm install del-cli -D should do the trick. Then, we’ll update our npm scripts to the following:

… "scripts": { "prebuild": "del-cli dist -f", "build": "webpack src/main.js dist/bundle.js", "execute": "node dist/bundle.js", "start": "npm run build -s && npm run execute -s" } …

We kept "build" the same as before, but now we have "prebuild" to do some cleanup, which will run prior to "build" every time "build" is told to run. We also have "execute", which uses Node.js to execute the bundled script, and we can use "start" to do it all with one command (the -s bit just makes it so that the npm scripts don’t output as much useless stuff to the console). Go ahead and run npm start. You should see webpack’s output, quickly followed by our squared array, show up in your console. Congratulations! You’ve just finished everything in the example1 branch of the repository I mentioned earlier.

Using A Configuration File Link

As fun as it is to use the webpack command line to get started, once you start using more of webpack’s features, you’re going to want to move away from passing in all of your options via the command line and instead use a configuration file, which will have more capability but which will also be more readable because it’s written in JavaScript.

So, let’s create that configuration file. Create a new file named webpack.config.js in your project’s root directory. This is the file name that webpack will look for by default, but you can pass the --config [filename] option to webpack if you want to name your configuration file something else or to put it in a different directory.

For this tutorial, we’ll just use the standard file name, and for now we’ll try to get it working the same way that we had it working with just the command line. To do that, we need to add the following code to the config file:

module.exports = { entry: './src/main.js', output: { path: './dist', filename: 'bundle.js' } };

We’re specifying the input file and the output file, just like we did with the command line before. This is a JavaScript file, not a JSON file, so we need to export the configuration object — hence, the module.exports. It doesn’t exactly look nicer than specifying these options through the command line yet, but by the end of the article, you’ll be glad to have it all in here.

Now we can remove those options that we were passing to webpack from the scripts in our package.json file. Your scripts should look like this now:

… "scripts": { "prebuild": "del-cli dist -f", "build": "webpack", "execute": "node dist/bundle.js", "start": "npm run build -s && npm run execute -s" } …

You can npm start like you did before, and it should look very familiar! That’s all we needed for the example2 branch.

Using Loaders Link

We have two primary ways to add to webpack’s capabilities: loaders and plugins. We’ll discuss plugins later. Right now we’ll focus on loaders, which are used to apply transformations or perform operations on files of a given type. You can chain multiple loaders together to handle a single file type. For example, you can specify that files with the .js extension will all be run through ESLint⁶ and then will be compiled from ES2015 down to ES5 by Babel⁷. If ESLint comes across a warning, it’ll be outputted to the console, and if it encounters any errors, it’ll prevent webpack from continuing.

For our little application, we won’t be setting up any linting, but we will be setting up Babel to compile our code down to ES5. Of course, we should have some ES2015 code first, right? Let’s convert the code from our main.js file to the following:

import { map } from 'lodash'; console.log(map([1,2,3,4,5,6], n => n*n));

This code is doing essentially the same exact thing, but (1) we’re using an arrow function instead of the named square function, and (2) we’re loading map from 'lodash' using ES2015’s import. This will actually load a larger Lodash file into our bundle because we’re asking for all of Lodash, instead of just asking for the code associated with map by requesting 'lodash/map'. You can change that first line to import map from 'lodash/map' if you prefer, but I switched it to this for a few reasons:

• In a large application, you’ll likely be using a pretty large chunk of the Lodash library, so you might as well load all of it.
• If you’re using Backbone.js, getting all of the functions you need loaded individually will be very difficult simply because there is no documentation specifying how much of it is needed.
• In the next major version of webpack, the developers plan to include something called tree-shaking, which eliminates unused portions of modules. So, this would work the same either way.
• I’d like to use it as an example to teach you the bullet points I just mentioned.

(Note: These two ways of loading work with Lodash because the developers have explicitly created it to work that way. Not all libraries are set up to work this way.)

Anyway, now that we have some ES2015, we need to compile it down to ES5 so that we can use it in decrepit browsers (ES2015 support⁸ is actually looking pretty good in the latest browsers!). For this, we’ll need Babel and all of the pieces it needs to run with webpack. At a minimum, we’ll need babel-core⁹ (Babel’s core functionality, which does most of the work), babel-loader¹⁰ (the webpack loader that interfaces with babel-core) and babel-preset-es2015¹¹ (which contains the rules that tell Babel to compile from ES2015 to ES5). We’ll also get babel-plugin-transform-runtime¹² and babel-polyfill¹³, both of which change the way Babel adds polyfills and helper functions to your code base, although each does it a bit differently, so they’re suited to different kinds of projects. Using both of them wouldn’t make much sense, and you might not want to use either of them, but I’m adding both of them here so that no matter which you choose, you’ll see how to do it. If you want to know more about them, you can read the documentation pages for the polyfill¹⁴ and runtime transform¹⁵.

Anyway, let’s install all of that: npm i -D babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime babel-polyfill. And now let’s configure webpack to use it. First, we’ll need a section to add loaders. So, update webpack.config.js to this:

module.exports = { entry: './src/main.js', output: { path: './dist', filename: 'bundle.js' }, module: { rules: [ … ] } };

We’ve added a property named module, and within that is the rules property, which is an array that holds the configuration for each loader you use. This is where we’ll be adding babel-loader. For each loader, we need to set a minimum of these two options: test and loader. test is usually a regular expression that is tested against the absolute path of each file. These regular expressions usually just test for the file’s extension; for example, /.js$/ tests whether the file name ends with .js. For ours, we’ll be setting this to /.jsx?$/, which will match .js and .jsx, just in case you want to use React in your app. Now we’ll need to specify loader, which specifies which loaders to use on files that pass the test.

This can be specified by passing in a string with the loaders’ names, separated by an exclamation mark, such as 'babel-loader!eslint-loader'. webpack reads these from right to left, so eslint-loader will be run before babel-loader. If a loader has specific options that you want to specify, you can use query string syntax. For example, to set the fakeoption option to true for Babel, we’d change that previous example to 'babel-loader?fakeoption=true!eslint-loader. You can also use the use option instead of the loader option which allows you to pass in an array of loaders if you think that’d be easier to read and maintain. For example, the last examples would be changed to use: ['babel-loader?fakeoption=true', 'eslint-loader'], which can always be changed to multiple lines if you think it would be more readable.

Because Babel is the only loader we’ll be using, this is what our loader configuration looks like so far:

… rules: [ { test: /.jsx?$/, loader: 'babel-loader' } ] …

If you’re using only one loader, as we are, then there is an alternative way to specify options for the loader, rather than using the query strings: by using the options object, which will just be a map of key-value pairs. So, for the fakeoption example, our config would look like this:

… rules: [ { test: /.jsx?$/, loader: 'babel-loader', options: { fakeoption: true } } ] …

We will be using this syntax to set a few options for Babel:

… rules: [ { test: /.jsx?$/, loader: 'babel-loader', options: { plugins: ['transform-runtime'], presets: ['es2015'] } } ] …

We need to set the presets so that all of the ES2015 features will be transformed into ES5, and we’re also setting it up to use the transform-runtime plugin that we installed. As mentioned, this plugin isn’t necessary, but it’s there to show you how to do it. An alternative would be to use the .babelrc file to set these options, but then I wouldn’t be able to show you how to do it in webpack. In general, I would recommend using .babelrc, but we’ll keep the configuration in here for this project.

There’s just one more thing we need to add for this loader. We need to tell Babel not to process files in the node_modules folder, which should speed up the bundling process. We can do this by adding the exclude property to the loader to specify not to do anything to files in that folder. The value for exclude should be a regular expression, so we’ll set it to /node_modules/.

… rules: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { plugins: ['transform-runtime'], presets: ['es2015'] } } ] …

Alternatively, we could have used the include property and specified that we should only use the src directory, but I think we’ll leave it as it is. With that, you should be able to run npm start again and get working ES5 code for the browser as a result. If you decide that you’d rather use the polyfill instead of the transform-runtime plugin, then you’ll have a change or two to make. First, you can delete the line that contains plugins: ['transform-runtime], (you can also uninstall the plugin via npm if you’re not going to use it). Then, you need to edit the entry section of the webpack configuration so that it looks like this:

entry: [ 'babel-polyfill', './src/main.js' ],

Instead of using a string to specify a single entry point, we use an array to specify multiple entry files, the new one being the polyfill. We specify the polyfill first so that it’ll show up in the bundled file first, which is necessary to ensure that the polyfills exist before we try to use them in our code.

Instead of using webpack’s configuration, we could have added a line at the top of src/main.js, import 'babel-polyfill;, which would accomplish the exact same thing in this case. We used the webpack entry configuration instead because we’ll need it to be there for our last example, and because it’s a good example to show how to combine multiple entries into a single bundle. Anyway, that’s it for the example3 branch of the repository. Once again, you can run npm start to verify that it’s working.

Using The Handlebars Loader Link

Let’s add another loader in there: Handlebars. The Handlebars loader will compile a Handlebars template into a function, which is what will be imported into the JavaScript when you import a Handlebars file. This is the sort of thing that I love about loaders: you can import non-JavaScript files, and when it’s all bundled, what is imported will be something useable by JavaScript. Another example would be to use a loader that allows you to import an image file and that transforms the image into a base64-encoded URL string that can be used in the JavaScript to add an image inline to the page. If you chain multiple loaders, one of the loaders might even optimize the image to be a smaller file size.

As usual, the first thing we need to do is install the loader with npm install -D handlebars-loader. If you try to use it, though, you’ll find that it also needs Handlebars itself: npm install -D handlebars. This is so that you have control over which version of Handlebars to use without needing to sync your version with the loader version. They can evolve independently.

Now that we have both of these installed, we have a Handlebars template to use. Create a file named numberlist.hbs in the src directory with the following contents:

<ul> {{#each numbers as |number i|}} <li>{{number}}</li> {{/each}} </ul>

This template expects an array (of numbers judging by the variable names, but it should work even if they aren’t numbers) and creates an unordered list with the contents.

Now, let’s adjust our JavaScript file to use that template to output a list created from the template, rather than just logging out the array itself. Your main.js file should now look like this:

import { map } from 'lodash'; import template from './numberlist.hbs'; let numbers = map([1,2,3,4,5,6], n => n*n); console.log(template({numbers}));

Sadly, this won’t work right now because webpack doesn’t know how to import numberlist.hbs, because it’s not JavaScript. If we want to, we could add a bit to the import statement that informs webpack to use the Handlebars loader:

import { map } from 'lodash'; import template from 'handlebars-loader!./numberlist.hbs'; let numbers = map([1,2,3,4,5,6], n => n*n); console.log(template({numbers}));

By prefixing the path with the name of a loader and separating the loader’s name from the file path with an exclamation point, we tell webpack to use that loader for that file. With this, we don’t have to add anything to the configuration file. However, in a large project, you’ll likely be loading in several templates, so it would make more sense to tell webpack in the configuration file that we should use Handlebars so that we don’t need to add handlebars! to the path for every single import of a template. Let’s update the configuration:

… rules: [ {/* babel loader config… */}, { test: /.hbs$/, loader: 'handlebars-loader' } ] …

This one was simple. All we needed to do was specify that we wanted handlebars-loader to handle all files with the .hbs extension. That’s it! We’re done with Handlebars and the example4 branch of the repository. Now when you run npm start, you’ll see the webpack bundling output, as well as this:

<ul> <li>1</li> <li>4</li> <li>9</li> <li>16</li> <li>25</li> <li>36</li> </ul>

Using Plugins Link

Plugins are the way, other than loaders, to install custom functionality into webpack. You have much more freedom to add them to the webpack workflow because they aren’t limited to being used only while loading specific file types; they can be injected practically anywhere and are, therefore, able to do much more. It’s hard to give an impression of how much plugins can do, so I’ll just send you to the list of npm packages that have “webpack-plugin”¹⁶ in the name, which should be a pretty good representation.

We’ll only be touching on two plugins for this tutorial (one of which we’ll see later). We’ve already gone quite long with this post, so why be excessive with even more plugin examples, right? The first plugin we’ll use is HTML Webpack Plugin¹⁷, which simply generates an HTML file for us — we can finally start using the web!

Before using the plugin, let’s update our scripts so that we can run a simple web server to test our application. First, we need to install a server: npm i -D http-server. Then, we’ll change our execute script to the server script and update the start script accordingly:

… "scripts": { "prebuild": "del-cli dist -f", "build": "webpack", "server": "http-server ./dist", "start": "npm run build -s && npm run server -s" }, …

After the webpack build is done, npm start will also start up a web server, and you can navigate to localhost:8080 to view your page. Of course, we still need to create that page with the plugin, so let’s move on to that. First, we need to install the plugin: npm i -D html-webpack-plugin.

When that’s done, we need to hop into webpack.config.js and make it look like this:

var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: [ 'babel-polyfill', './src/main.js' ], output: { path: './dist', filename: 'bundle.js' }, module: { rules: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { plugins: ['transform-runtime'], presets: ['es2015'] } }, { test: /.hbs$/, loader: 'handlebars-loader' } ] }, plugins: [ new HtmlwebpackPlugin() ] };

The two changes we made were to import the newly installed plugin at the top of the file and then add a plugins section at the end of the configuration object, where we passed in a new instance of our plugin.

At this point, we aren’t passing in any options to the plugin, so it’s using its standard template, which doesn’t include much, but it does include our bundled script. If you run npm start and then visit the URL in the browser, you’ll see a blank page, but you should see that HTML being outputted to the console if you open your developer’s tools.

We should probably have our own template and get that HTML to be spitted out onto the page rather than into the console, so that a “normal” person could actually get something from this page. First, let’s make our template by creating an index.html file in the src directory. By default, it’ll use EJS for the templating, however, you can configure the plugin to use any template language¹⁸ available to webpack. We’ll use the default EJS because it doesn’t make much difference. Here are the contents of that file:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <h2>This is my Index.html Template</h2> <div></div> </body> </html>

You’ll notice a few things:

• We’re using an option passed to the plugin to define the title (just because we can).
• There’s nothing to specify where the scripts should be added. This is because the plugin will add the scripts to the end of the body tag by default.
• There’s a random div with an id in there. We’ll be using this now.

We now have the template we want; so, at the very least, we won’t have a blank page. Let’s update main.js so that it appends that HTML to that div, instead of putting it into the console. To do this, just update the last line of main.js to document.getElementById("app-container").innerHTML = template({numbers});.

We also need to update our webpack configuration to pass in a couple options to the plugin. Your config file should now look like this:

var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: [ 'babel-polyfill', './src/main.js' ], output: { path: './dist', filename: 'bundle.js' }, module: { rules: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { plugins: ['transform-runtime'], presets: ['es2015'] } }, { test: /.hbs$/, loader: 'handlebars-loader' } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Intro to webpack', template: 'src/index.html' }) ] };

The template option specifies where to find our template, and the title option is passed into the template. Now, if you run npm start, you should see the following in your browser:

¹⁹

That brings us to the end of the example5 branch of the repository, in case you’re following along in there. Each plugin will likely have very different options and configurations of their own, because there are so many of them and they can do a wide variety of things, but in the end, they’re practically all added to the plugins array in webpack.config.js. There are also many other ways to handle how the HTML page is generated and populated with file names, which can be handy once you start adding cache-busting hashes to the end of the bundle file names.

If you look at the example project’s repository, you’ll see an example6²⁰ branch where I added JavaScript minification via a plugin, but that isn’t necessary unless you want to make some changes to the configuration of UglifyJS. If you don’t like the default settings of UglifyJS, check out the repository (you should only need to look at webpack.config.js) to figure out how to use the plugin and configure it. But if you’re good with the default settings, then all you need to do is pass the -p argument when you run webpack on the command line. That argument is the “production” shortcut, which is equivalent to using --optimize-minimize and --optimize-occurence-order arguments, the first of which minifies the JavaScript and the second of which optimizes the order in which the modules are included in the bundled script, making for a slightly smaller file size and slightly faster execution. The repository has been done for a while, and I learned about the -p option later, so I decided to keep the plugin example for UglifyJS in there, while informing you of an easier way. Another shortcut you can use is -d, which will show more debugging information from the webpack output, and which will generate source maps without any extra configuration. You can use plenty more command line shortcuts²¹ if that’s easier for you.

Lazy-Loading Chunks Link

One thing that I really enjoyed with RequireJS and couldn’t quite get to work with Browserify (though it may be possible) is lazy-loading modules. One massive JavaScript file will help by limiting the number of HTTP requests required, but it practically guarantees that code will be downloaded that won’t necessarily be used by the visitor in that session.

Webpack has a way of splitting a bundle into chunks that can be lazy-loaded, and it doesn’t even require any configuration. All you need to do is write your code in one of two ways, and webpack will handle the rest. Webpack gives you two methods to do this, one based on CommonJS and the other based on AMD. To lazy-load a module using CommonJS, you’d write something like this:

require.ensure(["module-a", "module-b"], function(require) { var a = require("module-a"); var b = require("module-b"); // … });

Use require.ensure, which will make sure the module is available (but not execute it) and pass in an array of module names and then a callback. To actually use the module within that callback, you’ll need to require it explicitly in there using the argument passed to your callback.

Personally, this feels verbose to me, so let’s look at the AMD version:

require(["module-a", "module-b"], function(a, b) { // … });

With AMD, you use require, pass in an array of module dependencies, then pass a callback. The arguments for the callback are references to each of the dependencies in the same order that they appear in the array.

Webpack 2 also supports System.import, which uses promises rather than callbacks. I think this will be a useful improvement, although wrapping this in a promise shouldn’t be hard if you really want them now. Note, however, that System.import is already deprecated in favor of the newer specification for import(). The caveat here, though, is that Babel (and TypeScript) will throw syntax errors if you use it. You can use babel-plugin-dynamic-import-webpack²², but that will convert it to require.ensure rather than just helping Babel see the new import function as legal and leave it alone so webpack can handle it. I don’t see AMD or require.ensure going away any time soon, and System.import will be supported until version 3, which should be decently far in the future, so just use whichever one you fancy the best.

Let’s augment our code to wait for a couple seconds, then lazy-load in the Handlebars template and output the list to the screen. To do that, we’ll remove the import of the template near the top and wrap the last line in a setTimeout and an AMD version of require for the template:

import { map } from 'lodash'; let numbers = map([1,2,3,4,5,6], n => n*n); setTimeout( () => { require(['./numberlist.hbs'], template => { document.getElementById("app-container").innerHTML = template({numbers}); }) }, 2000);

Now, if you run npm start, you’ll see that another asset is generated, which should be named 1.bundle.js. If you open up the page in your browser and open your development tools to watch the network traffic, you’ll see that after a 2-second delay, the new file is finally loaded and executed. This, my friend, isn’t all that difficult to implement but it can be huge for saving on file size and can make the user’s experience so much better.

Note that these sub-bundles, or chunks, contain all of their dependencies, except for the ones that are included in each of their parent chunks. (You can have multiple entries that each lazy-load this chunk and that, therefore, have different dependencies loaded into each parent.)

Creating A Vendor Chunk Link

Let’s talk about one more optimization that can be made: vendor chunks. You can define a separate bundle to be built that will store “common” or third-party code that is unlikely to change. This allows visitors to cache your libraries in a separate file from your application code, so that the libraries won’t need to be downloaded again when you update the application.

To do this, we’ll use a plugin that comes with webpack, called CommonsChunkPlugin. Because it’s included, we don’t need to install anything; all we need to do is make some edits to webpack.config.js:

var HtmlwebpackPlugin = require('html-webpack-plugin'); var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); module.exports = { entry: { vendor: ['babel-polyfill', 'lodash'], main: './src/main.js' }, output: { path: './dist', filename: 'bundle.js' }, module: { rules: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { plugins: ['transform-runtime'], presets: ['es2015'] } }, { test: /.hbs$/, loader: 'handlebars-loader' } ] }, plugins: [ new HtmlwebpackPlugin({ title: 'Intro to webpack', template: 'src/index.html' }), new UglifyJsPlugin({ beautify: false, mangle: { screw_ie8 : true }, compress: { screw_ie8: true, warnings: false }, comments: false }), new CommonsChunkPlugin({ name: "vendor", filename: "vendor.bundle.js" }) ] };

Line 3 is where we import the plugin. Then, in the entry section, we use a different setup, an object literal, to specify multiple entry points. The vendor entry marks what will be included in the vendor chunk — which includes the polyfill as well as Lodash — and we put our main entry file into the main entry. Then, we simply need to add the CommonsChunkPlugin to the plugins section, specifying the “vendor” chunk as the chunk to base it on and specifying that the vendor code will be stored in a file named vendor.bundle.js.

By specifying the “vendor” chunk, this plugin will pull all of the dependencies specified by that chunk out of the other entry files and only place them in this vendor chunk. If you do not specify a chunk name here, it’ll create a separate file based on the dependencies that are shared between the entries.

When you run webpack, you should see three JavaScript files now: bundle.js, 1.bundle.js and vendor.bundle.js. You can run npm start and view the result in the browser if you’d like. It seems that webpack will even put the majority of its own code for handling the loading of different modules into the vendor chunk, which is definitely useful.

And that concludes the example8 branch, as well as the tutorial. I have touched on quite a bit, but it only gives you a tiny taste of what is possible with webpack. Webpack enables easy CSS modules²³, cache-busting hashes, image optimization and much much more — so much that even if I wrote a massive book on the subject, I couldn’t show you everything, and by the time I finished writing that book, most (if not all) of it would be outdated! So, give webpack a try today, and let me know if it improves your workflow. God bless and happy coding!

Front page image credit: webpack²⁴ (official site)

(rb, al, il)

Footnotes Link

1. 1 https://nodejs.org/
2. 2 https://docs.npmjs.com/misc/scripts
3. 3 https://www.joezimjs.com/javascript/no-more-global-npm-packages/
4. 4 https://github.com/joezimjs/webpack-Introduction-Tutorial
5. 5 http://www.lodash.com/
6. 6 http://eslint.org/
7. 7 https://babeljs.io/
8. 8 http://kangax.github.io/compat-table/es6/
9. 9 https://www.npmjs.com/package/babel-core
10. 10 https://www.npmjs.com/package/babel-loader
11. 11 https://www.npmjs.com/package/babel-preset-es2015
12. 12 https://www.npmjs.com/package/babel-plugin-transform-runtime
13. 13 https://www.npmjs.com/package/babel-polyfill
14. 14 http://babeljs.io/docs/usage/polyfill/
15. 15 http://babeljs.io/docs/plugins/transform-runtime/
16. 16 https://www.npmjs.com/search?q=webpack-plugin
17. 17 https://github.com/ampedandwired/html-webpack-plugin
18. 18 https://github.com/ampedandwired/html-webpack-plugin/blob/master/docs/template-option.md
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/02/index-html-template-opt.png
20. 20 https://github.com/joezimjs/webpack-Introduction-Tutorial/tree/example6
21. 21 http://webpack.github.io/docs/cli.html
22. 22 https://www.npmjs.com/package/babel-plugin-dynamic-import-webpack
23. 23 http://glenmaddern.com/articles/css-modules
24. 24 https://webpack.js.org/

↑ Back to topTweet itShare on Facebook