Web News

User interface design has changed dramatically in the last few years, as traditional computers have ceded dominance to smaller screens, including tablets, mobile phones, smartwatches and more.

As the craft has evolved, so has its toolset; and from one app to rule them all — looking at you, Photoshop! — we have gotten to a point where it seems like a new contender among UI design tools crops up every month. And I have to admit that many of the new UI design tools look pretty good and promising.

The one app that seems to tower over everything else at the moment, though, is Sketch¹. It has grown in popularity like I’ve rarely seen an app do in the recent past, and for a good reason: The developers of Sketch have figured out exactly what interface designers have been looking for and have steadily added functionality to address those needs. The pace of development of Sketch has been phenomenal, to say the least.

Yes, Sketch is Mac-only. I stayed away for a very long time simply because my entire team was using Windows. A couple years ago, I got my first Mac — a MacBook Air — and decided to give Sketch a try. I found Sketch so much better than my solution at the time (I was a proud Fireworks² aficionado!) that I decided to invest in converting every one of our eight-member design team over to Macs and Sketch. We never looked back! Sure, the options were more limited then: Figma¹¹³ was not yet on the scene, Gravit Designer⁴ was just getting started, and Adobe XD⁵ was just a fledgling experiment, which we were not ready to bank on. That is not the case today, and you should consider the options if you are in the same boat. For us, though, Sketch has proven to be a great asset — even with all of the baggage. If you want to know why, read on!

Fast Evolution Link

Sketch 3 was released in April 2014, marking one of their most substantial updates with the introduction of symbols. It was followed by a bunch of incremental updates over the next two years. These included features such as artboard presets, a consolidated file format, improvements in performance, sharing capabilities and more.

Two years later, in April 2016, version 3.7 introduced much more powerful symbols, with the ability to nest and the option to override text and images in symbols per instance. This also kicked off a much more rapid development cycle, with powerful new features being released much more quickly. Version 39 (3.9) in July 2016 saw the introduction of symbol resizing, taking the first step towards easing responsive and multi-device design in Sketch. This release — and the versioning change — coincided with Sketch’s revenue model changing from one-time purchases to annual subscription. There was some backlash from users, but by and large, designers have embraced the new model in anticipation of faster development cycles. And Bohemian Coding, the developers of Sketch, did not disappoint.

In November 2016, version 41 brought along a complete visual overhaul of the user interface, and the ability to override nested symbols per instance. Version 43, released in April 2017, seemed like a small update, barring one huge change: a completely reworked file format. Sketch moved from a proprietary format to an open one (or almost open), making it easier than ever for third-party applications to read, parse and manipulate Sketch files outside of the application. AnimaApp’s Sketch Web Viewer⁸ is a great example of what the new format enables. (Read more in “New File Format in Sketch 43⁹,” an excellent post by Ale Muñoz¹⁰, one of Sketch’s developers.)

Version 44 arrived in May 2017 with a completely reworked resizing interface for symbols, groups and artboards — heavily inspired by the UI in Figma¹¹³, probably Sketch’s closest competitor at the moment. This has rendered some functionality of the Autolayout plugin¹² redundant and was a huge step forward for responsive and scalable design in Sketch. This release also introduced some major updates to artboard management — again, geared towards scalable design and taking advantage of the new, more powerful resizing controls.

¹³

Speed at the Cost of Stability? Link

Some might say that Sketch’s breakneck pace of development has come at the cost of stability and performance. Almost every major release seems to bring with it some performance issues, which take a couple of patches¹⁴ to address. For example, Sketch Mirror had a bug that caused the system’s bandwidth usage to skyrocket — and it stayed for a good three to four major releases before being fixed.

Around version 42, an issue was introduced that caused symbols to be duplicated when the user made copies of its instances. This one lingered for a couple of major releases and, in fact, is still a problem when dealing with files that were created in older versions.

These are not deal-breakers by any stretch, but I did consider other options for a brief period, wondering whether I was sailing on a slowly sinking ship. Thankfully, the developers seem to have taken notice of the situation and are doubling down on quality with newer releases. Besides, nothing out there seems to come anywhere close to the power and flexibility of Sketch as of now. The new open file format, a thriving (and mostly free) plugin scene and steadily growing support from third-party applications pretty much ensure that Sketch is here for at least the foreseeable future.

Features Link

What sets Sketch apart from the rest is its well-rounded set of features that cater to my requirements as a UI designer. Sure, it does not have the gazillion functions and filters of Photoshop, the built-in prototyping capabilities of Adobe XD, the collaboration features and vector networks¹⁵ of Figma or the cross-platform capabilities of all of the above. Sketch simply does what I need for the most part, does it well, and has a thriving plugin ecosystem that more often than not makes up for what’s not already built in.

What follows is just a sample of Sketch’s features that make life easy for me and the team at my UX design studio day to day.

Artboards and Pages Link

For as long as I can remember, my biggest pet peeve with Photoshop was its single canvas. Creating a new file for every page on a website just didn’t make sense to me. Fireworks understood the problem¹⁶, and its pages feature was a godsend. Illustrator got around this with artboards. In today’s mobile and responsive era, though, neither of those concepts is enough. Sketch has both pages and artboards, and having used the application for a while now, I cannot imagine going back to one that doesn’t have them!

For my web and UI design projects, I use artboards for individual screens and pages for flows. For example, I’ll have a page for the onboarding flow of an app, another for the core actions, one more for settings, and so on. This makes it very easy to keep everything together and organized. You can even nest artboards, so that you can get a big-picture PDF of an entire flow, while at the same time exporting individual screens for prototyping.

¹⁷

Sketch also comes with a whole set of templates for the most common use cases (iPhone and Android apps, responsive websites, etc.), to be used as starting points for projects. These include artboards with the appropriate dimensions, named properly, and in some cases a basic set of UI elements to boot. The artboard picker was redesigned in a recent version, making it easy to quickly switch between sizes — and even to toggle vertical and horizontal orientation — on the fly. This, combined with the new resizing controls (more on that in a bit), makes designing responsive and multi-platform layouts extremely easy.

Layout Grids Link

Grids are an integral part of the modern UI design arsenal. It is surprising, then, how arcane the process of setting up grids in popular design applications is. I remember dreading the thought of setting up guidelines to precisely match a 12-column Bootstrap grid in Photoshop or Fireworks. (That’s before I hit upon a Fireworks plugin that did it.) But a grid made up of guidelines was still a hack and could be easily lost the moment you started adding more guides of your own.

Sketch addresses this problem by allowing you to set up layout grids for each artboard that are separate from guidelines and the traditional grid (both of which it still supports). You set the total width, number of columns and gutter width, and a nice red translucent grid is overlaid on your design instantly. Edit the numbers as needed and the grid adjusts accordingly. Again, these are per page, so you may have a 12-column grid for the desktop layout and switch to 8 columns for tablet and 4 columns for mobile. What’s more, you can also add rows to the grid, which can be invaluable when working with a set baseline grid¹⁹.

²⁰

Couple this with the new resizable symbols and you’re looking at a massive boost in productivity when designing responsive layouts. Add to this the continuous stream of ingenious plugins being developed by the Sketch community and… well, you get my point.

Symbols and Styles Link

Symbols are by far one of the most powerful features in Sketch. And given how much they have improved, it is hard to believe that the feature was introduced less than a year ago. What started as simply a way to reuse a certain component across a design — à la Freehand and Fireworks — today has become a powerful feature in Sketch. I can safely say that symbols have saved hundreds of hours of work for me and my team in the last few months. And things are only getting better with each release.

A symbol could be as humble as a button with a rectangle and text on it, or as complex as an entire calendar with customizable dates, states and statuses. The example below is an extreme case, and I don’t recommend you go this far, but it helps to demonstrate how flexible symbols can be.

²²

You can nest symbols within symbols, toggle them on and off at an instance level, replace or even hide text, replace images, displace elements based on the width of a text object, resize entire symbols (with full control over how each element within the symbol reacts to resizing)… the list goes on and on. Let me demonstrate some of the capabilities below with examples from our UI design projects.

²⁴

As with any good tool, I keep discovering new and exciting ways to use its feature set every day. As an example, I recently figured out that you can convert an entire artboard to a symbol. Let’s say you’re designing the workflow for an app, and certain screens appear multiple times with subtle changes. Just convert those screens to symbols, and place them wherever you need with the appropriate overrides. Later, when you need to change a color (and trust me, you will), just change it in the original artboard, and every instance will follow.

The power of symbols in Sketch is much broader than I can cover here, so here are a few places to look for more in-depth coverage:

• “Unleashing the Full Potential of Symbols in Sketch²⁵,” Javier Cuello, Smashing Magazine
• “Using Sketch to Quickly Swap Between Different OS Designs²⁶,” Stewart Curry, Prototypr
• “Sketch Workflow: Atomic Symbols²⁷,” Anthony Collurafici, Medium

The upcoming version 47 includes an update to the symbols, with the inclusion of shared libraries – individual Sketch files that act as central repositories for symbols across a team and files. It has created quite a buzz within the Sketch community as you can see in this roundup²⁸ of related coverage.

Styles are a set of properties that can be applied to multiple elements and synced throughout a document to ensure consistency. They’re not unlike the styles we have come to know and use in everything from Microsoft Word to Adobe Illustrator and InDesign. In my team, we use these mostly to define text styles for elements such as h1, h2, h3 and p. But they go much beyond, covering fonts, fills, border, shadows and more.

Mirror and Sketch Cloud Link

There was a time when design was usually handled by an individual designer (or two) who worked on individual Photoshop files that didn’t really have much to do with each other. Today, it is not uncommon to see teams of tens or even hundreds(!) of designers working together on a single product. That makes the ability to collaborate on design files extremely critical.

Sketch has enabled a designer to share a read-only view of the file open in the app for some time now. Simply share a URL, and anyone else on the same Wi-Fi network will be able to view the file you’re working on. This is very helpful when you want to share a work in progress with a fellow designer or developer sitting at the other end of the office or even in the same room, where everyone can see the files on their own screens.

²⁹

Another use case for Sketch Mirror is for testing mobile UI screens on mobile devices. Simply open the link on a mobile phone — or use one of the many apps on iOS³¹ and Android³² — to see the preview in real time. Any changes you make to the design in Sketch are immediately reflected in all previews.

Useful as it is, Mirror does have the limitation of being restricted to devices on the same network. Sketch Cloud³³ addresses that by allowing you to upload your files to the cloud and have others access them publicly or via a link that you share.

Bits and Pieces Link

Those are not the only big things that make Sketch great. For me, it is the smaller touches that make life just that tiny bit easier every day and make it difficult for me to move to another app.

Need to save an artboard to a file? Just drag and drop the thumbnail from the right panel into Finder.

Working on a slide deck? just drag and drop a group from the layers panel straight into Keynote or PowerPoint.

Found a nice photo on the web to replace an avatar? just drag and drop it from the browser onto the image thumbnail inside the image fill panel of a rectangle. Here’s what I mean:

³⁴

Smarter dimensions are another nice touch. Need to increase the width of an element by 23 pixels? Forget the mental math — append +23 to the width field, and let Sketch do the math for you. The same goes for subtraction, multiplication and division. You can even use percentage values to change dimensions proportionally to the element’s parent (which is the immediate parent group or the artboard, in that order). What’s that, you say? You want to increase the width on the left side instead of the right? Easy. Use +23r instead, and the resizing will be on the left, keeping the object anchored to the right (r) edge. Ditto for left (l), top (t) and bottom (b).

³⁶

You’ve created a bunch of objects and now need to rename them? Hit Cmd + R, change the name, press Tab to go to the immediate next object in the Layers list, and continue typing. Rinse and repeat.

Per-artboard grid toggles are great, too! I like to work with the 8-pixel grid when designing mobile apps, but having it either on or off across all pages is just plain annoying. With Sketch, I can turn the grid on or off at the artboard level.

There’s even more³⁷, but you get the idea.

The (Awesome) Plugin Ecosystem Link

One of the things that makes Sketch so powerful is the almost endless stream of plugins available for it. Bohemian Coding has made it easy for users to build on top of Sketch’s functionality and extend it in almost any way imaginable. Here are just a few stand-out plugins that prove that. There are tons more, and I would encourage you to explore them to see which ones work for you. Or, if you are up to the challenge, try building one yourself³⁸.

Craft Link

³⁹

Craft⁴⁰, from the makers of InVision⁴¹, is a powerhouse of a plugin for Sketch — an endeavor so huge that they probably have an entire team of developers chugging at it day in and day out. It would probably take an entire post by itself to talk about everything Craft does, but let’s start with a sample:

• Data
  
  We all work with dummy data — be it placeholder images, lorem ipsum text, fake names and addresses, blog post titles, the list goes on and on. Rather than hunting for these every time or copying and pasting the same set of data over and over, Craft lets you insert a whole host of placeholder content, randomized from a prebuilt set, from your own collection, or directly from the web. It even lets you import content from JSON sources! This is by far one of the biggest time-savers for me when working on new designs.

  ⁴²
  

• Duplicate
  
  OK, so you’ve created a card with placeholder content, but it is just one of a list. The duplicate feature lets you take that card and create as many duplicates as you need, all with randomized content from the same sources that you used for the first instance. No more copying and pasting and changing text — or even images — manually. Need to increase the size of the grid? Just resize the container, and Craft is clever enough to fill the space with more duplicates (with different content). Genius!

  ⁴⁴
  

• Library
  
  As projects and teams grow bigger, collaborating on source files gets trickier. The library feature in Craft tries to address that by allowing you to define and share symbols, styles and colors with your team and by allowing for quick changes that reflect across all files and team members. It is a bit tricky to set up and has its quirks, but once you’ve set it up, it can be a huge time-saver for the entire team.

  ⁴⁶
  

• Sync
  
  If you use InVision to share mockups and collaborate with colleagues and clients, this is a big step up from what used to be the Sketch-to-InVision workflow. With Sync, you can upload any or all of the artboards in a Sketch file to an InVision prototype or board.
• Prototype
  
  Here’s a great example of a plugin adding essential functionality to Sketch. This brings the often requested prototyping tools right inside Sketch. Just select an element, tap C and pick the artboard it should link to. The only limitation, really, is that your prototypes can only be previewed by syncing the screens with a project on InVision.

  ⁴⁷
  

Craft continues to add new features on a regular basis. Two new additions are Stock — a quick way to find and add stock images from Getty⁴⁹ to your designs — and Freehand — a digital whiteboard tool for collaborating on Sketch files with teams or clients.

Runner Link

⁵⁰

Spotlight is one of my most used features on the Mac. Having one search field to rule them all — to open apps, access files, search documents, heck, even check currency conversion rates — is infinitely powerful. Runner⁵¹ brings the same power to Sketch. It lets you launch any command, create and fetch symbols, navigate pages and artboard, even install and manage Sketch plugins from a single unified search field. It is the kind of tool that, once you start using it, will be impossible to imagine the app without.

⁵²

Sketch Measure Link

⁵⁴

Not long ago, we used to spend an insane amount of time creating specifications and assets for our designs, so that developers could translate them into code exactly as we intended. This involved manually adding dimensions, spacing, text properties and more for each design element, along with the appropriate overlays and rules. Sure, Fireworks extensions made things slightly easier, but it was a chore all the same.

With Sketch Measure⁵⁵, we have managed to bring that time down from a few hours to just a few minutes — and with richer and more useful data than ever. In short, the plugin lets you instantly add overlays, with pretty much any specification, for any element in your design — including width and height, spacing, text properties and more.

The most useful feature by far, though, is its ability to create HTML that shows a preview of each artboard, complete with all the specifications and assets the developer needs. Simply select an element, and a panel will appear with all of the properties of the element, including text content and CSS properties, to be simply copied and pasted into the code. For elements that have been marked for exporting, developers can download all defined versions (2x, 3x and so on, plus their Android equivalents) in one click.

⁵⁶

Other apps provide this feature — Zeplin⁵⁸, Avocode⁵⁹, even InVision via the Inspect⁶⁰ feature — but Sketch Measure is free and works directly from inside Sketch.

Icon Font Link

I was never a big fan of icon fonts. They’re nifty and all, but having to copy and paste character codes from a cheat sheet just didn’t seem like the right way to pull icons into Sketch. Then I found the Icon Font⁶¹ plugin and things changed. This plugin provides a visual grid of all icons in an icon font, letting you quickly pick the character you want to add or (even better!) search through the glyphs by context. Although it doesn’t come bundled with any icon fonts, there’s an easy tutorial for adding a few of the most popular free sets, and you can add your own as needed. No more hunting the web for an icon or messing with character codes. This one is a huge productivity booster in my workflow.

⁶²

User Flows Link

One of the pains with using artboards for screens in an app or workflow is showing links between them. Elements can only stay within a single artboard, so arrows between artboards have to be on a common layer at the page level. Besides, updating those links every time you move the screens around or add or remove any can be frustrating, to say the least. User Flows⁶³ solves that by letting you add pretty linking arrows simply by selecting a pair of an element and an artboard. It nicely adds everything on a separate locked layer and even updates them with a single command, no matter how much you have moved things around. You can customize the look and feel of the arrows to match your design, then export the whole set as a single user flow diagram to share with your colleagues and clients.

⁶⁴

Font Finder Link

How often have you had to change a primary font across an entire design, spanning multiple pages and artboards? For me, I’ve lost count. It could be a change from the client, or I see that a font just isn’t working very well as the design progresses. The bottom line is that changing a font across the board can be a daunting task. Font Finder⁶⁶ makes it that much easier by allowing you to find everything on a page that uses a particular font, and then it changes it at once, while keeping the weight selections intact (in most cases, at least).

⁶⁷

It is not the perfect solution, of course. Different fonts invariably end up breaking the layout in various places due to character size variations, but at least it saves you the effort of finding and changing the font of each text element individually.

And More Link

There are more plugins that do any number of things, including replacing text⁶⁸ and colors⁶⁹, organizing symbols⁷⁰, publishing websites⁷¹, even creating native apps⁷² directly from Sketch. There’s a good chance that, if you need it, someone has already built it. You only have to search for the plugin.

Summary Link

Sketch remains the most important tool in my design toolkit at the moment, but I’m keeping my eye on other contenders for now. Figma is probably the front-runner⁷³, given how much it has matured in the last year or so. A lot will depend on whether Sketch can build on the momentum it has picked up over the last year or so.

If you’re considering coming on board the Sketch train or have already boarded, here are a few resources geared to helping UI designers:

• “A Component-Based Workflow for Sketch⁷⁴,” Tim Van Damme, Abstract
• “Responsive Design in Sketch, Part 1⁷⁵,” Emin Inanc Unlu, Medium
• “Designing a Responsive Music Player in Sketch, Part 1⁷⁶,” Christian Krammer, Smashing Magazine
• “Sketch App Awesomeness⁷⁷,” Greg R, Medium
• “Unleashing the Full Potential of Symbols in Sketch⁷⁸,” Javier Cuello, Medium
• “Harness the Power of Symbols⁷⁹,” Andrew Couldwell, Medium
• The Sketch Handbook⁸⁰, Christian Krammer

(mb, yk, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/tag/sketch/
2. 2 https://www.smashingmagazine.com/category/fireworks/
3. 3 https://www.figma.com/
4. 4 https://www.smashingmagazine.com/2017/08/introduction-gravit-designer-designing-weather-app-part-1/
5. 5 https://www.smashingmagazine.com/2016/07/how-to-create-icons-adobe-xd/
6. 6 https://www.smashingmagazine.com/2017/04/photoshop-illustrator-sketch-ui/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/08/01-symbol-overrides-800w-opt.png
8. 8 https://animaapp.github.io/sketch-web-viewer/
9. 9 http://sketchplugins.com/d/87-new-file-format-in-sketch-43
10. 10 https://twitter.com/bomberstudios?lang=en
11. 11 https://www.figma.com/
12. 12 https://medium.com/sketch-app-sources/introducing-auto-layout-for-sketch-24e7b5d068f9
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/08/02-sketch-resizing-vs-figma-800w-opt.png
14. 14 https://twitter.com/ivomynttinen/status/895380288880226304
15. 15 https://blog.figma.com/introducing-vector-networks-3b877d2b864f
16. 16 https://www.smashingmagazine.com/2012/06/developing-a-design-workflow-in-adobe-fireworks/#creating-pages
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/08/03-nested-artboards-large-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/08/03-nested-artboards-large-opt.png
19. 19 https://www.linkedin.com/pulse/android-design-102-baseline-grid-mark-dappollone
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/08/04-layouts-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/08/04-layouts-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/08/05-calendar.gif
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/08/05-calendar.gif
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/08/06-symbol-overrides-760w-opt.gif
25. 25 https://www.smashingmagazine.com/2017/04/symbols-sketch/
26. 26 https://blog.prototypr.io/using-sketch-symbols-to-quickly-swap-between-different-os-designs-5a692cebc333
27. 27 https://medium.com/sketch-app-sources/sketch-workflow-atomic-symbols-2b3c67babf08
28. 28 http://sketchhunt.com/2017/09/05/roundup-sketch-libraries-v47-beta-articles-videos/
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/08/07-sketch-mirror-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/08/07-sketch-mirror-large-opt.png
31. 31 https://itunes.apple.com/in/app/sketch-mirror/id677296955?mt=8
32. 32 https://play.google.com/store/apps/details?id=com.smithyproductions.crystal&hl=en
33. 33 https://sketch.cloud/
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/08/08-image-fill.gif
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/08/08-image-fill.gif
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/08/09-dimensions-math-600w-opt.gif
37. 37 https://medium.com/sketch-app-sources/sketch-app-awesomeness-d6db04bf9ccb
38. 38 https://medium.com/@marianomike/the-beginners-guide-to-writing-sketch-plugins-part-1-28a5e3f01c68
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/08/10-invision-craft-800w-opt.png
40. 40 https://www.invisionapp.com/craft
41. 41 https://www.invisionapp.com/
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/08/11-craft-data-500w-opt.gif
43. 43 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/08/12-craft-duplicate-500w-opt.gif
45. 45 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/08/13-craft-library-800w-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/08/14-craft-prototype-large-opt.png
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2017/08/14-craft-prototype-large-opt.png
49. 49 http://www.gettyimages.in/
50. 50 https://www.smashingmagazine.com/wp-content/uploads/2017/08/15-sketch-runner-800w-opt.png
51. 51 http://sketchrunner.com/
52. 52 https://www.smashingmagazine.com/wp-content/uploads/2017/08/16-runner-commands-large-opt.png
53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/08/16-runner-commands-large-opt.png
54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/08/17-sketch-measure-logo-800w-opt.png
55. 55 http://utom.design/measure/
56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/08/18-sketch-measure.gif
57. 57 https://www.smashingmagazine.com/wp-content/uploads/2017/08/18-sketch-measure.gif
58. 58 https://zeplin.io
59. 59 https://avocode.com
60. 60 https://www.invisionapp.com/feature/inspect
61. 61 https://github.com/keremciu/sketch-iconfont
62. 62 https://www.smashingmagazine.com/wp-content/uploads/2017/08/19-icon-font-800w-opt.png
63. 63 https://abynim.github.io/UserFlows/
64. 64 https://www.smashingmagazine.com/wp-content/uploads/2017/08/20-User-flows-large-opt.png
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2017/08/20-User-flows-large-opt.png
66. 66 https://github.com/ukn530/FontFinder
67. 67 https://www.smashingmagazine.com/wp-content/uploads/2017/08/21-font-finder-800w-opt.png
68. 68 https://github.com/thierryc/Sketch-Find-And-Replace
69. 69 https://github.com/lewishowles/sketch-replace-colour
70. 70 https://github.com/sonburn/symbol-organizer
71. 71 https://launchpad.animaapp.com/
72. 72 https://supernova.studio/
73. 73 https://www.smashingmagazine.com/2017/03/sketch-figma-showdown/
74. 74 https://www.goabstract.com/2017/04/12/component-based-workflow-sketch.html
75. 75 https://medium.com/sketch-app-sources/exploration-of-responsive-design-in-sketch-part-1-1af4cf415a82
76. 76 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-1/
77. 77 https://medium.com/sketch-app-sources/sketch-app-awesomeness-d6db04bf9ccb
78. 78 https://medium.com/sketch-app-sources/sketch-symbols-b36f7355414a
79. 79 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
80. 80 https://www.smashingmagazine.com/sketch-handbook/

↑ Back to topTweet itShare on Facebook

If you’re stuck in a job you hate and have dreams of becoming a designer and working in a creative role that fills you with excitement daily, the road to entering this completely new industry can feel daunting. Making a major career shift late in life to follow your passion is scary. Not only is it sometimes difficult to know where to start to learn about an expansive field like design, but it can also feel risky, especially if you’re working a secure job.

Luckily, you’re not alone! According to a study by the Bureau of Labor Statistics¹, the average worker changes jobs two times every four years during their 20s and 30s, driven by a desire to follow their passion, improve work-life balance and gain a stronger sense of fulfillment in their work. Additionally, over 2 million Americans quit their jobs² every month, driven by a lack of fulfillment and recognition for their work. Thankfully, becoming a professional creative is now more accessible than ever because of the numerous educational resources available.

However, with so many resources out there for learning design, how do you choose the perfect method that fits your life? Rest assured, there is something for you. Whether you’re a high-school student getting ready to graduate or have been working in another career for 40 years and are looking for a major change, the right education exists!

Regardless of the type of design education throughout history, one of the most consistent things emphasized is the importance of learning from experts. Expert-based one-on-one learning is proven³ to be more impactful than learning by yourself and has been taught for thousands of years. Michelangelo himself, and most other painters throughout history, apprenticed⁴ with an established artist (Michelangelo apprenticed with Florentine painter Domenico Ghirlandaio). Many acclaimed modern designers did not attend traditional schools but instead learned by immersing themselves in design and finding a teacher to mentor them. For example, Stefan Sagmeister⁵ (the founder of global design agency Sagmeister and Walsh) started his design career by working on layout and typography for the design team of an Austrian magazine called Alphorn, long before receiving a formal design education.

Let’s return to the present. With so many options available just a few mouse clicks away, how do you decide which option is the best fit for you? And how do you ensure you’re getting feedback and critiques from experts that will help you quickly and efficiently build up your skills. We know that the options can feel overwhelming, so we’ve put together a list of the best ways to learn design according to your personality, budget, lifestyle and personal goals.

Before you read the rest of the article, we recommend answering the following questions first (write your answers down):

• What is your preferred learning style? Do you learn best in a classroom or working on your own?
• Do you learn best when surrounded by other students and teachers?
• What type of learner are you? Do you learn best by listening to lessons or seeing things taught visually?
• What are your restrictions on time, budget or family? How much do you want to spend on your education? How much time can you devote to it?
• Do you like to learn quickly or go at your own pace?

Once you have answered those questions, everything else should fall into place.

Do You Prefer To Learn In Person Or In A Classroom? Link

If you’re the type of learner who absorbs things best when you’re in a real classroom surrounded by teachers and other students, and assuming you have the luxury of going to a classroom full-time, you’ll want to consider an in-person design education. The two main ways to do this are via a traditional design college or an intensive bootcamp.

⁸

Traditional Design College Link

If you have the budget and time, then a formal education at an accredited design school is still one of the best ways to become a designer. Not only will you spend years learning the fundamentals and practicing with modern design tools, but you’ll also be constantly surrounded by students who are just as passionate as you and by teachers with decades of experience in several industries. Top Universities¹⁰ and Learn How to Become¹¹ both offer a list of the best design schools in the world, and Niche lists¹² the best schools in the US.

Upsides:

• You’ll spend years learning the fundamentals at a design college. This can really help to set you apart when you’re looking for a job and expanding your technical abilities.
• You will be surrounded by hundreds of people who are always trying to do their best work and by teachers who live and breathe design education.
• Many top design schools pride themselves on constantly updating their curriculum to keep up with modern design trends.
• An incredible alumni community and career services department will help you find a job upon graduation.

Downsides:

• It’s slow. If you’re hoping to become a designer as quickly as possible, then design school likely isn’t the best option for you, because most programs take at least three years to complete. Some colleges have expedited programs, but those will still take at least a year.
• It’s expensive. Most traditional design schools will set you back at least $100,000.
• The curriculum is fairly inflexible. After choosing a major, you will have more choice in which classes to take, but you’ll still be required to spend at least a year focusing on a set core curriculum at most schools.

Perfect for anyone who:

• learns best in a small classroom setting and likes to have someone to hold them accountable;
• thrives when surrounded by other people who are trying to accomplish the same things as them;
• has a high budget (design school can cost well north of $100,000 over several years);
• has the flexibility to quit their job and not work for several years (or just work part-time).

How well does this option prepare you for the job market:

• Attending design school will prepare you for a design job better than anything else, if you have the time and financial resources to invest in it.
• You’ll spend a tremendous amount of time learning both the fundamentals of design and the technical skills needed to land a job in the field. You’ll also graduate with hundreds of portfolio projects to choose from when presenting yourself to employers.
• It’s undeniable that a traditional university will give you the most well-rounded education and require the least continued education after graduation. You’ll get exposure to every aspect of the design world, from fashion design to illustration to UX design.

In-Person Bootcamp Link

If you don’t like your job and are looking to move to a more fulfilling career as quickly as possible, then an in-person bootcamp might be the best bet for you. In-person bootcamps come in many shapes and sizes, but they generally include 40+ hours of weekly classroom instruction, as well as frequent group assignments, one-on-one sessions with an assigned mentor, and great job placement opportunities once you complete the program.

¹³

Many bootcamps allow you to pay up front or take the course for free if you agree to pay them a fixed percentage of the salary from your first post-bootcamp job! Some of the best-reviewed in-person bootcamps are run by General Assembly¹⁵ and Shillington¹⁶. Course Report has a full list of in-person bootcamps¹⁷.

Upsides:

• The job placement opportunities are extensive. Bootcamps cater to people who are trying to find a job quickly. Upon graduation, most bootcamps hold job fairs, with a lot of companies in attendance (mostly from the tech world).
• You’ll be surrounded by a lot of other hyper-motivated people just like you. During most bootcamps, you’ll work on group projects with your classmates and be paired with mentors to give you feedback and critiques.
• It’s fast. Most bootcamps pack an entire design education into three months. They’re hard work, but you can bet you’ll come out the other end with more knowledge than you thought possible in such a short timeframe.
• The curriculum is built around the most modern and up-to-date design theories and tools, with a focus on preparing you for the job market.

Downsides:

• It’s still expensive. While much cheaper than a traditional school, a bootcamp can still run you $10,000 to $15,000 over three months.
• The curriculum is not flexible. Bootcamps are intended to teach you the basics and to make you proficient as quickly as possible, so they adhere to a single curriculum for everyone. If you’ve already spent several months taking online courses on the subject you’re pursuing, you might find yourself bored for the first month or two of the bootcamp.
• You’ll have to keep learning once the bootcamp finishes. Three months isn’t a lot of time, and many employers will want to see that you have not just completed a bootcamp but have also actively continued to learn and build your portfolio afterwards.

Perfect for anyone who:

• has the flexibility to quit their job and dive head first into their design education;
• prefers learning in a small classroom setting, with a lot of one-on-one interaction between teachers and students;
• is interested in entering the tech industry (most of the jobs available after a bootcamp will come from tech companies that see the value in hiring motivated newcomers, even ones who haven’t spent years in the field);
• anyone who likes to learn in an intense, fast-paced environment (a bootcamp will push you to your limit, because it usually includes 50+ hours of classroom learning per week and runs for about 13 weeks nonstop — be ready to work hard).

How much will this option prepare you for the job market?:

• Next to a design college, a bootcamp is the most effective way to quickly learn design skills while having constant access to teachers and a classroom of peers who want to help you succeed and improve. This helps bootcamps stand out from most other educational paths.
• While you’ll spend time learning the fundamentals, it’s impossible to get a full education about every aspect of design history and concepts in just a couple months. And you’ll likely produce only a few portfolio pieces that you’re truly proud of, because many bootcamps focus on a lot of small projects, which the class works on each day, and they allow time for only a few larger personalized projects that you can showcase in a portfolio.
• If you attend a bootcamp, you will need to continue your education on your own after graduating. Many employers are hesitant to hire bootcamp graduates right out of the program because they know their skills are still fresh. In order to stand out and land a job, you’ll need to continue learning afterwards (both concepts and technical skills) and build a handful of laser-focused projects that demonstrate not only that you are adept at basic design skills, but also that you have a unique style and you grasp tangential skills such as UX design and front-end development.

Apprenticeship on a Design Team Link

Finally, one of the most traditional ways to become a designer historically has been to enter into an apprenticeship on a design team at an established company. While apprenticeships can be a bit more difficult to find these days, many companies are still willing to teach young designers via hands-on experience, similar to an internship. And while apprenticeship opportunities are easier to find if you have at least a bit of experience or have done some design education on your own, if you’re able to secure a position, it can be one of the most effective ways to learn quickly. You might have more luck finding an apprenticeship (or internship, as they are more likely to be called these days) at a large company with established HR and recruiting teams. Smaller agencies and studios are likely looking for interns who can immediately contribute to projects with little to no hand-holding. There’s no better way to learn the real day-to-day skills of a designer than by working alongside professionals at the height of their careers.

¹⁸

How much will this option prepare you for the job market?:

• If you’re able to secure an apprenticeship at a company you like, then a strong performance and demonstrated willingness to learn and improve could be a direct pathway to a job offer. And even if the company doesn’t have any openings, hardly anything is more valuable to other employers than a personal reference letter from a designer at a real company who has enjoyed working with you.
• Working as an apprentice, you’ll likely learn hands-on skills that are much more readily applicable in a real office environment than what you’d learn in an online course on the same subject. Learning the short-hand of designers and seeing how design actually functions and works in a job is invaluable.

Do You Want To Learn Online? Link

Quitting your job to attend a bootcamp or a full-time program at a university isn’t a realistic option for most people. Luckily, a wide array of options cater to people who prefer to learn at their own pace and who don’t have a big budget. These alternatives still let you work through a structured curriculum built for those who are trying to build a career in the design field, and many of them even feature one-on-one components.

Online Bootcamps Link

Schools such as Bloc²⁰ and Springboard²¹ have been paving the way for online bootcamps. Their curricula largely mirror those of their in-person counterparts, the difference being that you work from a laptop instead of spending 40 hours a week in a classroom. Course Report has a full list of online bootcamps²².

Upsides:

• Like in-person bootcamps, online bootcamps offer extensive job placement opportunities.
• They’re fast. Also like in-person bootcamps, online bootcamps pack years of education into a few short months.
• They’re flexible. Online bootcamps generally let you take lessons at your own pace. Some lessons are taught live, and others are prerecorded videos, allowing you to work around the other responsibilities in your life.

Downsides:

• They’re still expensive. An online bootcamp will run you between $5,000 and $15,000 for three months of education.
• The curriculum is not flexible. While the speed at which you take lessons is a bit flexible, you’ll still need to adhere to a rigid curriculum and complete assignments by certain deadlines.
• They’re not highly personalized. While you’ll be assigned a mentor and will work with other students on projects, you’ll be missing out on one of the things that makes bootcamps so effective: being constantly surrounded by other motivated students and teachers. The benefits of an in-person education are hard to quantify, but they exist.

Perfect for anyone who:

• wants to dive headfirst into a design education but can’t necessarily spend 40+ hours per week in a classroom;
• likes to learn on their own but also thrives when working on assignments with peers;
• likes to learn in an intense, fast-paced environment (like an in-person bootcamp, an online bootcamp will push you to devote yourself to it entirely — expect to spend 40 hours a week learning, with a bit more flexibility around what time of day you’re learning).

How much will this option prepare you for the job market?:

• Similar to an in-person bootcamp, an online bootcamp is another effective way to learn the skills you’ll need in a real job environment.
• In an online environment, you’ll need to make a concerted effort to connect with the students in your class and to chat with them online every day. Because the curriculum in these programs is a bit more self-guided, you’ll need to set up recurring video chats with your classmates to get the most out of the program and to ensure you’re able to learn from each other.
• And just like an in-person bootcamp, you’ll need to focus on continuing your education afterwards and building up personalized projects that match your interests and the type of job you want.

Structured Online Courses Link

For many people, a full-time design education might be too much, for a variety of reasons. Luckily, many design schools have built lighter-weight courses that allow you to learn design at your own pace and still get the benefit of periodic one-on-one feedback from mentors.

If you want to learn with a mentor, there are a few great options that pair curriculum with periodic mentorship sessions. Skillcrush²³ is an awesome resource for anyone looking for a part-time education. It will hook you up with projects, periodic feedback sessions and frameworks to help you learn design and accomplish your goals. Thinkful²⁴ has its own part-time design program for people looking to learn at their own pace.

On the other hand, if you prefer a totally self-paced course, with no mentorship, then services such as Treehouse²⁵ have hundreds of courses covering every aspect of the design world, from design fundamentals to freelancing. These courses allow you to go through a preplanned “track” at your own pace, complete with projects, online communities of other students and great customer service. However, one-on-one mentorship is still crucial, regardless of which online platform you use. If you decide to learn via a service such as Treehouse, which doesn’t offer mentorship, then we’d suggest setting up periodic mentoring chats with outside services that let you schedule individual video chats with design mentors²⁶ whenever you need some feedback or advice.

Upsides:

• They’re affordable! These courses generally run between $20 to $300 per month.
• Work at your own pace. These courses allow you to enjoy the benefits of a structured curriculum, while moving at your own pace and spending as much time as you need to master skills.
• They’re flexible. While the basic curriculum is fixed for many of these part-time courses, you can easily supplement your education by taking as many different part-time courses as you want from other websites.

Downsides:

• Mentorship is not a focus. Some of the pricier self-paced courses let you chat with a mentor periodically, but you won’t have as much constant access to teachers as you would in a bootcamp.
• You won’t have classmates or peers to help you stay motivated and grow.
• Job placement opportunities are not built in. If you go down this route, you’ll be on your own for finding a job. Luckily, there are many great job placement services²⁷ for people trying to break into new industries.

Perfect for people who:

• don’t like a traditional classroom setting;
• prefer to move at their own pace and learn on their own;
• want to keep their current job while learning to become a designer on the side;
• don’t have tens of thousands of dollars to spend but still want a quality education!

How much will this option prepare you for the job market?:

• Following a structured online course is a great way to learn design skills on your own. Because the courses are built on a curriculum that teaches you design in a logical order, you don’t have to worry about whether you’re learning things in the right order or missing any major concepts.
• The most important thing to remember for this option is that the amount of work you do is completely up to you, which could be good or bad depending on how motivated you are! Taking a few online courses will definitely not be enough on its own to prepare you for a real job. You’ll need to create a strict schedule for yourself each day, in which you force yourself to watch the video course and then dive into projects that apply the skills you’ve learned that day in Photoshop, InDesign and Illustrator. Making the most out of your mentoring sessions (if the platform you choose offers them) is also crucial. For each project you work on, write down detailed questions whenever you’re having trouble, and be sure to ask for detailed feedback on every iteration of your projects. The only way to improve is by practicing and iterating.
• After completing a structured online course, you’ll need to continue working on projects every day. The benefit of an online course is that you’ll have more time to study specific things that interest you, whereas in a bootcamp or college you’d have a prescribed educational track. As you go through your program, note what types of design are most interesting to you. Afterwards, find similar videos and tutorials that dive into those skills, and start building up projects.
• One of the most important things in your arsenal when applying for a job is your portfolio. Whether you’re trying to land a client as a freelancer or a regular job, you’ll need to have a focused portfolio of projects that showcase your general design skills, your process and thinking and, ideally, a specialty or hook that is unique to you. For this type of design education, you’ll need to go far beyond the generic projects assigned in these courses and develop projects that are specific to you!

Other Unstructured Online Platforms Link

If you’re the type of person who has very specific goals and doesn’t want to waste any time learning unnecessary skills to achieve those goals, this could be the option for you. There are literally thousands of websites, resources and platforms online designed to empower the true self-learner, and they come in all forms. They’re also, for the most part, incredibly cheap (or free)! Note that most of the resources in this section focus on traditional lectures and videos, rather than mentor-led projects. If you go down this route, you’ll need to come up with your own projects and hold yourself accountable to keep practicing as you go!

Massive open online courses (MOOCs) such as Coursera²⁸ have paved the way for affordable education online. These services take real university courses and rebuild them in an online environment. By taking these courses, you will be receiving almost the same education as people enrolled at universities.

²⁹

Skillshare³¹ and Udemy³² are two of our favorite marketplaces for online courses. Anyone can create a course on these platforms, but their teams monitor submissions to ensure quality. You can also read reviews from thousands of students who have already taken these courses to ensure you’re making the right picks.

YouTube³³ is perhaps the most extensive repository of design resources available anywhere, and it’s free. Check out this list³⁴ for some suggestions on great design channels to follow. While YouTube has millions of videos on every aspect of the design world, it unfortunately doesn’t help you figure out which videos to watch and in what order. We’d suggest finding a great book³⁵ about the fundamentals of design, and supplementing it with YouTube videos on specific topics whenever you want more in-depth explanation of a concept.

Finally, there are thousands of other resources to teach yourself design skills, from blogs³⁶ to individual online learning websites³⁷ to podcasts³⁸. If you’re a savvy Googler, the skills you can learn are limited only by your imagination. It can be hard to know which websites are reputable and which aren’t, so be sure to check out a website’s social pages to see what sort of community it has before diving too deep into it.

Upsides:

• Because you’ll only be consuming content that relates to your specific goals, you can build any curriculum you want across any number of resources.
• Most of these services are completely free, and even the paid ones (such as Skillshare) usually max out at around $10 per month.
• They’re diverse. By leveraging resources across multiple websites, you can be sure you’ll be learning design thinking from people across a huge number of backgrounds and perspectives.

Downsides:

• There is no personalization. Having an experienced designer to talk to while learning design skills is crucial. If you decide to go this self-guided route, we’d suggest chatting with a design mentor⁴¹³⁹ periodically to get feedback and direction.
• You’ll get no job placement opportunities. But remember that there are thousands of job boards (such as AIGA’s⁴⁰) to get you started.
• You’ll be given no direction. If you decide to learn by yourself, be sure to do a lot of online research to find out what skills you’ll need to learn to achieve your goals.

Perfect for people who:

• want to learn design in a completely unstructured way and cheaply;
• thrive when holding themselves accountable;
• don’t want to quit their jobs or spend significant amounts of money to learn design.

How much will this option prepare you for the job market?:

• Among those who enroll in open online programs such as Coursera’s, up to 95% of students never finish the course! This is a shocking statistic, but it shows just how important accountability is when teaching yourself design on a totally unstructured and mentor-free platform. No one will keep you on track but yourself, so you’ll need to be extremely diligent about your education on a daily basis.
• If you go down this route, draw a list of 30 to 50 courses and videos that seem the most interesting to you, or work with a design mentor⁴¹³⁹ to build up a curriculum that fits your goals. As you work through your courses, try to engage with other students who have taken these courses, either by commenting in the discussion section of the websites or by joining online communities such as Designers Guild⁴². Try to find a few other aspiring designers at your skill level who you can chat with as you learn. Ask each other for feedback and critiques on your projects. Because these courses are entirely impersonal, finding someone to work through them with is one of the best ways to stay accountable and get ongoing feedback.
• If you create a personalized project for yourself each time you start learning a new skill, you should be able to build a solid portfolio of projects over the course of several months. Try to think of real problems you’d like to solve, whether you’re creating a brand for a fictional company in an industry that interests you or redesigning the user experience for the app of a company you’d like to work for. Remember that having a strong list of projects is crucial for landing a job, and that quality is better than quantity.

The Self-Taught Route Link

Last but certainly not least, we want to cover perhaps the simplest way to learn design: by teaching yourself! This is similar to the unstructured online platforms discussed above, but many modern designers have never even taken an online course on Coursera or a similar service. In all honesty, all you really need to do is download Adobe Creative Cloud (and Sketch if you’re an aspiring product designer) and start playing around.

For this route, YouTube will be your best friend. The beauty of the entirely self-taught route is that you can truly design an education 100% tailor-made to you. Want to land a freelance gig as a logo designer in the next two months? Great! You can create a laser-focused YouTube playlist of logo design tutorials and concepts. There are literally millions of tutorial videos online describing how to do the most specific and niche tasks in design software, so the answers to your questions have most likely already been asked and answered. In some ways, you can think of YouTube as an automated teacher, because you can get an answer to any question you have within a few seconds.

For the self-taught route, focus on connecting with other aspiring designers and finding a mentor (as we mentioned in earlier sections), because ongoing feedback is one of the best ways to ensure that you can turn basic skills into deep expertise. If you’re able to find like-minded designers and are committed to learning skills by yourself, you can go as quickly as you’d like. Being scrappy and resourceful is a skill that many employers will love, and if you’re able to show them that you went down a self-taught route because you know what you wanted to achieve and knew you could get there more efficiently by designing your own education, you’ll be in great shape!

⁴³

Conclusion Link

Having reviewed the different ways to become a designer in the modern world, you might still be wondering which option objectively gives you the best chance of landing a job in the design industry. The answer totally depends on your timeframe, budget and learning style. If budget and time are no matter, then attending a two- to four-year full-time program at a design university is an incredible way to build a deep set of design skills that will increase your chances of launching your career. Spending several years learning something every day is undeniably the most effective way to become an expert in something.

On the other hand, most people don’t have the luxury of going back to school for several years, in which case we’d recommend finding a bootcamp (either in-person or online) that fits your schedule. Spending three months fully immersed in design and being accountable to a teacher and other students for assignments and projects is the second best way to develop design skills quickly. However, after finishing the bootcamp, you’ll have to continue investing yourself in design. Employers are sometimes skeptical that a bootcamp can give aspiring designers a strong enough foundation to be an effective designer in an actual job setting, so you’ll need to prove your passion and work hard to stand above the competition once the bootcamp wraps up.

Spend several hours every day learning new skills, reading books and working on projects directly related to the kind of job and industry you want to work in. Outside of a traditional college, learning from a teacher for several months in a bootcamp and then continuing your education on your own (with the periodic help of a mentor, if possible) and never slowing down is the best way to demonstrate to employers that you’re a serious candidate who’s ready to invest everything in your new career.

So, now that you have a good idea of the types of design education at your fingertips, get out there and find the perfect one for you! If you set your mind to it and immerse yourself fully in the creative world, you’ll be able to learn the skills necessary to build a career in design, no matter which educational route you go down. And look out for an upcoming article on how to find a mentor to help you progress as a new designer, regardless of which educational route you choose.

(ah, yk, al, il)

Footnotes Link

1. 1 https://www.thebalance.com/how-often-do-people-change-jobs-2060467
2. 2 https://www.forbes.com/sites/alanhall/2013/03/11/im-outta-here-why-2-million-americans-quit-every-month-and-5-steps-to-turn-the-epidemic-around/#2625c29d6484
3. 3 http://web.mit.edu/5.95/readings/bloom-two-sigma.pdf
4. 4 https://en.wikipedia.org/wiki/Michelangelo_and_the_Medici
5. 5 http://www.aiga.org/medalist-stefan-sagmeister
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/08/sagmeister-large-opt.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/08/sagmeister-large-opt.jpg
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Parsons-large-opt.jpg
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Parsons-large-opt.jpg
10. 10 https://www.topuniversities.com/university-rankings-articles/university-subject-rankings/top-art-design-schools-2016
11. 11 http://www.learnhowtobecome.org/graphic-designer/
12. 12 https://www.niche.com/colleges/rankings/best-colleges-for-design/
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/08/generalassemblybootcamp-large-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/08/generalassemblybootcamp-large-opt.jpg
15. 15 https://generalassemb.ly/
16. 16 https://www.shillingtoneducation.com/us/graphic-design-course/
17. 17 https://www.coursereport.com/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/08/meetup-large-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/08/meetup-large-opt.jpg
20. 20 https://www.bloc.io/
21. 21 https://www.springboard.com/
22. 22 https://www.coursereport.com/
23. 23 https://skillcrush.com/blueprint/visual-designer/
24. 24 https://www.thinkful.com/courses/learn-ux-online/
25. 25 https://teamtreehouse.com/
26. 26 https://www.rookieup.com/find-a-mentor/graphic-visual-design-mentors/
27. 27 https://www.planted.com/
28. 28 https://www.coursera.org/courses?languages=en&query=design
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/08/skillshare-large-opt.jpg
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/08/skillshare-large-opt.jpg
31. 31 https://www.skillshare.com/home
32. 32 https://www.udemy.com/
33. 33 https://www.youtube.com/
34. 34 http://www.howdesign.com/resources-education/20-graphic-designers-to-watch-on-youtube/
35. 35 https://www.fastcodesign.com/3047814/35-books-every-designer-should-read
36. 36 https://www.shillingtoneducation.com/blog/50-best-design-blogs/
37. 37 http://hackdesign.org/
38. 38 http://www.creativebloq.com/design/best-podcasts-designers-12121517
39. 39 http://www.rookieup.com/
40. 40 http://designjobs.aiga.org/
41. 41 http://www.rookieup.com/
42. 42 https://www.facebook.com/groups/designguild/
43. 43 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Photoshop-large-opt.jpeg
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Photoshop-large-opt.jpeg

↑ Back to topTweet itShare on Facebook

Design doesn’t scale as cleanly as engineering. It’s not enough that each element and page is consistent with each other — the much bigger challenge lies in keeping the sum of the parts intact, too. And accomplishing that with a lot of designers involved in the same project.

If you’re working in a growing startup or a large corporation, you probably know the issues that come with this: The big-picture falls from view easily as everyone is focusing on the details they are responsible for, and conceptions about the vision of the design might be interpreted differently, too. What we need is a set of best practices to remove this friction and make the process smoother. A strategy to scale design without hurting it.

That’s exactly what our friends at UXPin thought, too, when they were creating a new design systems platform. And since they didn’t find sufficient answers, they decided to tackle these questions in a free, virtual “scaling” conference: the UX at Scale Virtual Summit 2017²¹. And, well, you’re invited to it.

What’s The Virtual Summit About? Link

Four days, 14 live webinars. That’s the UX at Scale Virtual Summit 2017²¹ which UXPin will host from October 3rd to 6th. Throughout the four days, design leaders from Atlassian, Salesforce, Airbnb, GE Digital, IDEO, Google, ADP, Linkedin, and Shopify, to name a few, will share their best practices for scaling products and UX processes.

The event will tackle the issues that weigh heavily on the minds of design teams, but that usually stay under-addressed: How can collaboration in large teams succeed? How can we keep a product consistent even with a lot of people working on it? And how can we make documentation work? These are just a few of the topics that will be discussed along the way.

Sounds good? Well, you can join the event for free from anywhere. The webinars will take place from 9:00 AM to 3:00 PM (PDT) each of the four days (see the schedule below for more details), and a virtual lobby will provide an opportunity to connect with fellow minds from across the globe — right from your office desk.

Schedule Link

Four days dedicated to getting scaling design right. If your schedule doesn’t allow you to make time for all of them, you can cherry-pick those webinars you’re most interested in, too, of course. Recordings will be sent to all registrants afterwards, so that you won’t miss out on anything. All times are PDT.

Tuesday, October 3rd 2017 Link

• 9:00–10:00 AM
  
  Creating a Structured UX Process at Salesforce, Kyle Haskins (Salesforce)
• 10:30–11:30 AM
  
  Design Systems First: Creating a Scaleable UX Process, Marcin Treder (UXPin)
• 11:45–12:15 PM
  
  UXPin Demo: Creating a Consistent Design System, Lindsey Meredith (UXPin)
• 2:00–3:00 PM
  
  Scaling a UX Team: 6 to 126 Designers in 4 Years, Alastair Simpson (Atlassian)

Wednesday, October 4th 2017 Link

• 9:00–10:00 AM
  
  The Evolution of the GE Design System, David Cronin (GE Digital)
• 10:30–11:30 AM
  
  Hiring and Leading Design Teams for Large Projects at LinkedIn, Amy Parnell (LinkedIn)
• 11:45–12:15 PM
  
  UXPin Demo: Creating an Agile UX Process, Lindsey Meredith (UXPin)
• 12:30–1:30 PM
  
  Design and Data Strategy at Google, Dr Laura Granka (Google)
• 2:00–3:00 PM
  
  Design Transformation at Autodesk, Maria Giudice (Autodesk)

Thursday, October 5th 2017 Link

• 9:00–10:00 AM
  
  Three’s a Party: How Product, Engineering, and Design Collaborate at Scale, Davis Neable (Shopify Plus)
• 10:30–11:30 AM
  
  Design Systems: Accounting for Quantity and Scalability, Courtney Clark (Forumone) & Amy Vainieri (Taoti Creative)
• 11:45–12:15 PM
  
  UXPin Demo: Improving Designer/Developer Collaboration and Handoff, Lindsey Meredith (UXPin)
• 12:30–1:30 PM
  
  Calculating UX ROI with Financial Models, Aaron Powers (Athena Health)
• 2:00–3:00 PM
  
  The 3 Cs of Design: Charters, Critique, and Culture, Russ Unger (18F)

Friday, October 6th 2017 Link

• 9:00–10:00 AM
  
  Automating Design Processes for Teams: An IDEO Case Study, Matt Cooper Wright (IDEO)
• 10:30–11:30 AM
  
  Developing UX ROI in Enterprise Land: An ADP Case Study, Jondelina Buckley (ADP)
• 11:45–12:15 PM
  
  UXPin Demo: Collaborative Lo-fi to Hi-fi Prototyping, Lindsey Meredith (UXPin)
• 2:00–3:00 PM
  
  Scaling UX at Airbnb: The 4-Step Framework, Jason Culbertson (Airbnb)

How Do You Join The Event? Link

You can register for the live event directly on the Virtual Summit site⁵. It’s free, no strings attached. Enjoy!

Footnotes Link

1. 1 https://www.uxpin.com/ux-at-scale-virtual-summit-2017/
2. 2 https://www.uxpin.com/ux-at-scale-virtual-summit-2017/
3. 3 https://www.uxpin.com/ux-at-scale-virtual-summit-2017/
4. 4 https://www.uxpin.com/ux-at-scale-virtual-summit-2017/
5. 5 https://www.uxpin.com/ux-at-scale-virtual-summit-2017/

↑ Back to topTweet itShare on Facebook

The way people consume information is constantly evolving. As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser.

When I was making my first responsive website in 2012, I quickly realized how inefficient and time-consuming the constant browser window resizing was. I had just moved from Estonia to Australia, and with a newborn, time was very much a precious resource.

I began looking for better ways to see the effects of my media queries.

I came across Matt Kersley’s Responsive Web Design Testing Tool¹ and was blown away. It cut my development time in half. Even though the app was quite basic, it quickly became indispensable, and I continued to use it for several years.

It was very much to my surprise that I never saw this brilliant concept taken any further. This, combined with the lack of features, set me on a journey to create the open-source virtual device lab XRespond⁷⁴.

⁵

Understanding The Problem Link

When it comes to developing responsive websites, the problem lies in having to constantly resize the browser window. Although this unavoidable action feels second nature to most, it also masks aspects of design we don’t often appreciate — most notably, inconsistency and time management.

With designs usually appearing in some combination of mobile, tablet and desktop context, anything in between is left in a somewhat uncertain state. And filling these gaps requires a lot of time and effort.

The problem lies in the difficulty of looking at one screen size at a time, as opposed to getting an all-in-one overview of different screen sizes. When we’re building for a variety of screen types, it doesn’t make sense to view only a single instance of a design at any given time — we’d be unable to gain the context of how the styles of elements change across breakpoints.

Current practices just don’t cater to these modern ways of developing. Fortunately, it’s not all bad news.

Simple Solution Link

XRespond⁷⁴ is a virtual device lab for designing, developing and testing responsive websites. The idea is simple: It enables you to make website comparisons side by side, as if you had different devices on the wall in front of you.

You don’t have to leave your desk, laptop or even favorite browser. And with zero setup, you can start comparing websites right away.

⁸

XRespond can help if you’re building a pattern library or a style guide, because you can focus on a single component at different screen sizes simultaneously. As you’d expect from a development tool, it works well with local servers.

Just bear in mind that, as with any emulation, XRespond can’t compete with testing on real devices, but it will get you 90% of the way there — and in a fraction of the time.

How To Use It? Link

Enter a website address, click the button, and XRespond will automatically display the website on different virtual devices — which you can choose and customize as you see fit.

XRespond works well with other development tools, notably one of my favorites: Browsersync¹⁰. Browsersync enables you to set up live reloads and synchronized scrolling — all simultaneously across virtual (and real) devices. This makes spotting problems simpler, because issues become more apparent.

¹¹

What To Do If Your Website Won’t Load? Link

Occasionally, you might run into a problem of your website failing to load. This most likely has to do with your website preventing itself from being loaded in an iframe. If you own the website, you can temporarily disable X-Frame-Options¹³ or the Content Security Policy¹⁴, depending on your setup.

Conclusion Link

I love XRespond — and not just because I love making it, but because it simplifies my life. I can spend less time and effort working, and use the spare time for something else. It’s given me an opportunity to improve the quality of my work. I hope you’ll find XRespond just as useful and will start enjoying the time it saves you.

Feel free to share, and follow me¹⁵ on Twitter for updates. Cheers!

(da, il, al)

Footnotes Link

1. 1 http://mattkersley.com/responsive/
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/08/mattkersley-large-opt.png
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/08/mattkersley-large-opt.png
4. 4 https://www.xrespond.com
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/08/xrespond-large-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/08/xrespond-large-opt.png
7. 7 https://www.xrespond.com
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/08/xrespond-banner-large-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/08/xrespond-banner-large-opt.png
10. 10 https://www.browsersync.io/
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/08/browsersync.gif
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/08/browsersync.gif
13. 13 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
14. 14 https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
15. 15 https://twitter.com/indrekpaas

↑ Back to topTweet itShare on Facebook

We should always look for opportunities to grow and improve. Retrospectives and reflections allow you to codify what you’ve learned from experience, to document mistakes and avoid future ones, and to increase your potential to grow in the future. Agile methodologies typically include time for retrospectives throughout a project. Regardless of your methodology, all teams would benefit from having a retrospective at the conclusion of a project.

Additionally, we can learn from our mistakes, identify what works well, and better understand ourselves through personal reflection. Retrospectives and reflections do not have to be time-consuming. I’ll show you a few approaches that you and your team can immediately incorporate into your practice.

I have found post-project retrospectives to be one of the most effective ways to grow as a professional. I see this in my design team colleagues as well. We’ll walk through post-project retrospectives in this first article. I have also seen evidence of the effectiveness of structured reflection for both personal and professional growth. In a second article, I will present some lessons learned and researched-backed techniques that those who wish to engage in reflection can attempt to include in their routine.

What Is A Retrospective? Link

A retrospective is a structured meeting to review the process and outcomes of a particular project. You can conduct a retrospective at any point in a project. If you practice agile principles, then you probably incorporate retrospectives after every couple of iterations (or sprints). However, everyone would benefit from a postmortem, or post-project retrospective, regardless of your specific design and development methodology.

Retrospectives do not require intense resources to plan or conduct. Some costs are associated with retrospectives, particularly with getting your team together to work on something that will pull them away from their projects. You will need to budget expenses for time if you work with contractors on your team. You will need to consider when to hold the retrospective; you don’t want to pull members away from other work at critical times or to disrupt their productivity.

The rewards of running effective retrospectives outweigh the costs. Effective retrospectives require a commitment to maintain an open mind and open communication with your team, as well as a willingness to be vulnerable. If you engage in retrospectives with these commitments, you can expect your team members to grow individually and as a group. You can expect your team and each member to better understand how to improve their process.

What Isn’t A Retrospective? Link

Project retrospectives are an important component of healthily functioning teams. In order to fully benefit from retrospectives, you should keep in mind some limitations and guidelines:

• Retrospectives do not replace communication or action taken to fix team or project issues at the time of occurrence.
• Retrospectives are not an excuse to spend an hour complaining (although it is important to let some venting happen during the session).
• Retrospectives are not an opportunity to lecture your team on what they could have done better. Ideally, you would be proactively coaching your team throughout the project.
• Retrospectives should not be a huge burden on your time and resources. I recommend 60 to 90 minutes for reflection if you have a team of 5 or 6 people. This gives everyone ample time to discuss each of the broad themes we’ll cover later. This also forces people to be wise with the time they have during the retrospective.

Why Conduct A Retrospective? Link

Your team would benefit greatly from properly planned and executed retrospectives. We learn something new about ourselves, our product and our team in every project. We also risk losing this knowledge or failing to incorporate the lessons if we don’t engage in retrospectives. You codify the lessons learned when you conduct retrospectives. You solve team issues as a team.

Researchers have identified many benefits from software design and development teams engaging in project retrospectives (see the links at the bottom for references). Some of these benefits include:

• ensuring that team members recognize and remember what they’ve learned,
• allowing team members to share their experiences with each other,
• identifying opportunities for the team to improve,
• providing an opportunity to initiate change,
• acknowledging what went well during a project.

Project retrospectives are a means to show your commitment to your team. When you engage in retrospectives, you are signalling to others that you take learning from experience seriously. You are telling the team that you understand that perfection isn’t possible; there is always something to learn from experience. You are prioritizing growth and learning over pushing out a product and moving on to the next challenge. Team morale and performance improve when you reflect these values.

Planning A Retrospective Link

Allow for sufficient time to plan your retrospective. Whoever is facilitating the session should have an idea of how the project went. They should have a few talking points for each area to be discussed, in case the conversation needs prompting.

I have participated in retrospectives facilitated by project managers, by team or project leaders and by managers. Appoint someone who has training in facilitating conversations. If you have a team member trained in agile methods, they are likely to have some training on running retrospectives. Regardless of who facilitates the session, they should have a neutral stance towards all of the information that members of the team present. They should be fair in how they run the meeting. They should not be someone in a position of power who might intimidate any team members from speaking up.

Team members should know, preferably at the beginning of the project, that a retrospective will be taking place. You can suggest to team members to keep logs or make diary-type entries in a notebook or online in order to keep track of how they feel about the project as it unfolds. It’s difficult to recall specific things that worked well or that needed improvement at the end of a project. Proactively logging one’s experience helps to avoid this.

Your team’s logs could look similar to the prompts used during a retrospective:

Most retrospectives require very few resources to be planned. At a basic level, you can conduct a retrospective with a comfortable meeting room, a whiteboard, dry-erase markers (at least three different colors), a conference-call line, and screen-sharing software or video (for remote team members to participate). Finding a time that works for all team members can be the most difficult part of planning a retrospective.

⁴

Below are some specific steps to take to plan your retrospective. Incorporate others as relevant.

Preparing as a Facilitator Link

Determine your list of participants; make sure everyone involved is invited (even remote folks!). Your retrospective is only as good as the people you include. It would be more effective if everyone who has been involved in the project is invited to attend. Perhaps one designer took over for another designer halfway through the project — invite them both. You would benefit from understanding how the transition went, from the viewpoint of both the designer who started on the project and the one who took over. You would benefit from a deeper understanding of the bumps along the road if you include people who were a part of the process in unique ways. However, including some people might not be necessary if their role was extremely limited.

Remote staff are critical to a project retrospective. These team members have a unique perspective. You’ll want to know whether they felt included and actively engaged with their on-site colleagues. You’ll also want to know whether they have suggestions to make their lives easier as remote staff. Likewise, your on-site staff should have a voice regarding what it felt like to work with remote staff and any suggestions they have to improve collaboration with remote team members. We often include video options such as WebEx or FaceTime on iPads to give our remote staff a greater presence at retrospectives.

Ask your team to review their notes and come with the following input:

• What went well
  
  For example, “Good communication between research, design and development throughout the project.”
• What didn’t go well
  
  For example, “Finalization of deliverables felt rushed throughout the project.”
• How to fix it
  
  For example, “Clearly state deadlines throughout the project; have frequent progress check-ins; build in time to review deliverables so that changes can be made.”

Have your team do this prior to the retrospective. You don’t want to put your team on the spot in the meeting. Be clear in the invitation about what the topics of discussion will be. Also, be clear that everyone attending is expected to participate in the discussion.

Reach out to see who is going to say what. You don’t want to get blindsided during the retrospective. You need to know whether something major happened that is going to lead to a longer discussion, in which case you’ll need to plan the right amount of time for that discussion. You also want to try to defuse anything that might seem personal prior to the session. Likewise, if you find that no one has anything critical to say about the project, then you might encourage them to think of some things they could mention.

Important: The point here is not to reach out to argue with team members you don’t agree with, but to have an idea of what folks are going to bring up. Take action prior to the retrospective only if absolutely necessary. You aren’t doing it right if team members feel shut down prior to the session.

Determine your assessment of the project. You should know where the project succeeded and where the project fell short, according to your expectations and performance indicators. You can use these to focus the conversation and to support any arguments made for or against certain issues in the project.

Make the retrospective a celebration of your team. Provide food and drink or some type of treats. Team members will appreciate the effort to create a positive atmosphere, and it will reduce the potential distractions of hunger and thirst.

Preparing as a Participant Link

A retrospective participant shouldn’t have to invest much time preparing. But coming to the session prepared is important. I’ve suggested keeping a log or journal noting how the project unfolded. You can use this yourself as part of your preparation for the retrospective. Come up with a list of three or four things that went well in the project, and three or four things that could have gone better.

Once you’ve refined the list, make sure you haven’t created a list of gripes and personal complaints. Those are valid, but they don’t serve to create a positive retrospective. Resolve any personal issues you’ve had with team members in a more appropriate setting than a retrospective. Convert gripes into problem statements that you can then use to identify solutions in the retrospective.

Conducting A Project Retrospective Link

Many resources are available for conducting a retrospective. Esther Derby provides a five-step approach for retrospectives⁷ in Scrumpedia. Although the focus is on two-week retrospectives, you can use the same steps for a post-project retrospective. Derby’s steps include: (1) set the stage, (2) gather data, (3) generate insights, (4) decide what to do, and (5) close the retrospective.

Elise Keith presents a three-step process on the Lucid Meetings Blog⁸: (1) review the project, (2) discuss what worked well and what didn’t, and (3) action planning: identify specific ways to improve future work.

Norman Kerth’s handbook on project retrospectives⁹ provides four questions to guide a retrospective: (1) What did we learn? (2) What should we do differently next time? (3) What did we do well? (4) What still puzzles us?

There isn’t one right way to do a retrospective. A quick search on Google yields dozens more articles on how to conduct a retrospective. Below, I discuss some key features that every retrospective needs to include.

Managing Discussion Link

Time management is critical for a successful retrospective. You run the risk of having to cut people off if you don’t schedule enough time. You run the risk of people losing interest if your meeting is too long.

Allow discussion to occur when necessary, but with a focus on the solution. You will often find that people agree in a number of areas. For example, everyone might think the project’s timeline was too tight. You can save time by asking people to indicate their agreement with something stated and not bring it up again when it’s their turn.

Be aware of the order you expect people to speak. You can determine the order at random by assigning everyone a number and drawing from a hat. You might want to use a predetermined order based on your awareness of the reality. For example, you might want to encourage junior staff to contribute their own ideas and ask them to go first to discourage them from echoing what senior staff say.

Create a Safe Atmosphere for Sharing Link

This is the most important step. Your retrospectives are worthless if people are not comfortable sharing their true thoughts and feelings. The facilitator should make it immediately clear to participants that everyone’s viewpoint needs to be respected. Ground rules should be set: no confrontational comments or personal attacks, but also no sugarcoating problems.

There will be situations in which specific aspects that need improvement are related to the attitude or skills of an individual team member. I encourage managers or team leads to find ways to have this discussion individually, outside of the retrospective.

On the other hand, if there is an issue related to an individual making decisions that didn’t work out, that’s appropriate to discuss as a group. You can approach these types of situations in a less threatening way by referring to the group rather than the individual. For example, rather than saying, “Victor dragged his feet with starting to recruit people to participate in research, so we fell behind schedule,” you could say, “We thought it would be a good idea to hold off on identifying our research participants, but this led to us falling behind schedule.” This allows the discussion to lead to the conclusion that the person in charge of recruitment should be more proactive about scheduling in the future.

Your retrospective should take place in a comfortable setting, with ample time set aside for attendees to provide feedback. You could consider holding the retrospective off site, in order to put participants at ease.

Create Ownership Link

The project team owns the result of the project. They also own the quality of the retrospective and the ideas coming from it. Challenge your team to constantly improve. You are the facilitator, but the team is tasked with solving issues that arose during the project.

Don’t excuse areas where improvement can be found. For example, if your team struggled with fitting in all the project tasks in a timely manner, don’t provide the excuse that many team members were busy on multiple projects. Instead, push for how to better provide a balance among team members’ duties and other obligations.

Document Everything, Even If Only One Person Says It Link

Ensuring that everyone has a voice is a part of the purpose of a retrospective. You don’t need to gain a consensus on every item someone brings up. You show respect for the individual experience when you acknowledge everyone’s thoughts. You gain buy-in and trust when you do this. Documenting thoughts on the white board allows everyone to see what was said and enables you to track what has been said.

Celebrate the Good Link

Everyone should have something positive to say, even if it’s just “Hey, everyone is alive!” Your team likely contains a mix of personalities. You help to create a positive vibe for the whole group when you call out people for jobs well done and congratulate those who made progress and accomplishments over the course of the project. You also increase team members’ receptiveness to criticism when you provide positive feedback in a retrospective. Did anyone get a promotion during the project? Celebrate that. Did anyone gain a new skill or tool? Celebrate that. Find things to celebrate.

Discuss What Worked Well Link

Do you want the good news first or the bad news? My preference is the good news. We often have much longer discussions about what didn’t work so well for our projects. You don’t want to run out of time and not talk about what worked. Discuss what worked before discussing what your team could have done better.

Discuss What Didn’t Work Link

You’re rarely perfect. Even in a feel-good project, you can find areas to improve. Often, you’ll identify areas around communication that could use tweaking. At one point during an otherwise smooth-running project, I called a meeting to review how we were incorporating research findings into our design concepts. My managing director said something like, “Now let’s hear what development has to say.” I had forgotten to include anyone from development in the meeting, so there was no response. Actually, I hadn’t even thought of the need to include development — we were talking about design and research, right? I had become complacent at that point in the project, forgetting to include key team members in a meeting. We discussed why this happened and the need to invite people to our retrospective throughout the duration of the project.

Identify a Specific Path to Improvement Link

Your team should engage in dialogue to identify possible remedies for the areas in need of improvement. The solutions should be as specific as possible. For example, instead of saying “Invite everyone relevant to each meeting,” say “Invite representatives from every discipline (research, design, development and engagement) to each meeting.” Instead of saying “Begin the process of recruiting research participants earlier,” say “Draft the recruitment screener and email prior to the kickoff meeting, and send the recruitment email immediately following the kickoff meeting, or earlier if possible.”

Come to a Conclusion Link

A project retrospective is meant to be all-encompassing. Cover the project from start to finish, major milestones and deliverables and all other aspects relevant to the project. Your team should feel that they’ve put everything out and had it recorded on the white board. Any issues should have solutions identified. No one should leave the retrospective feeling they didn’t have a chance to participate fully. No issue should be left unresolved, or at least not without a concrete timeline for you to come back to address it.

Post-Retrospective Link

You’ll need to go beyond the retrospective to fully realize its benefit. Document every retrospective and the outcomes your team agreed on. Include a list of who attended, the purpose of the project and any other details to explain the context of the retrospective. You will look back on these at a time when the project will not be as clear in your memory as it is immediately following the retrospective.

You don’t need to do anything time-consuming to document the session. We typically write out everything from the session on a white board. The facilitator takes pictures of the white board and later transfers the information into a document. You can use a simple chart to record what was said:

Retrospectives become wonderful data points for tracking a team’s progress. Proactively remind your team members of what was agreed upon in the retrospective, and ask them to show evidence that they’ve followed through on any solutions proposed. Track your retrospectives across time to see whether what was in the “Needs improvement” column eventually moves out or even into the “What worked well” column. If you see that the same items continue to find their way into the “Needs improvement” column, then your solutions either aren’t effective or aren’t being implemented. Create a spreadsheet with different tabs based on the projects completed. Record the results of each project’s retrospective in a separate tab. This allows you to consolidate your retrospectives in a way that makes it easy to review progress.

Save the tracking spreadsheet to a storage space that all staff can access. Another benefit of tracking retrospectives is the opportunity to implement successful improvements across projects. You won’t always have the same team members in every project. You can disseminate your findings to the broader team when you track retrospectives. If a solution to a problem in project A is successful, you could try implementing the same solution if you see the issue pop up in a retrospective for project B. You avoid having to reinvent the wheel this way. Similarly, you can avoid solutions that don’t work for problems that reappear in other projects in the future.

¹⁰

So, you’ve conducted a few retrospectives and seen growth. You can call it quits, right? No. Your team members will change over time. Your projects will change in complexity and purpose. By making project retrospectives a standard part of your practice, you reduce volatility and continue on the path of growth.

Case Study: Using Retrospectives With The Same Team Across One Year Of Projects Link

I had a unique opportunity to serve as a core member of a team that spent a year working together on various projects. I served as the lead researcher for each project. The lead designer and lead developer also remained consistent for each project. Our usual model for staffing projects does not specify that teams should stay the same, so this was an experiment.

We conducted a retrospective at the end of each project. At the end of the year, we realized that issues we identified as “What didn’t work well” in earlier projects had moved to the “What worked well” column in later projects. We used this information to create a list of best practices.

Our managing director led the retrospectives. She had played an oversight role for all of the projects, so she had a working knowledge of the topics, successes and challenges we faced. The bulk of each retrospective was spent answering the questions:

• What worked well?
• What didn’t work well?
• What specific ways can we improve our future work?

I’m going to focus on real examples of what came up during our retrospectives. For the sake of brevity, I’m going to provide only a few examples. Our actual lists for each question listed above were extensive. I’ve added highlights to track the progression of issues whose status changed over the course of multiple projects. Each highlight color corresponds to a particular issue as it was tracked across retrospectives.

Project A Link

Project A’s retrospective identified a number of things our team had done well. Specifically, we held a client working session at our studio that went very well and that helped to set up a great final presentation. We continued to look for these opportunities as a way to document their importance.

We also identified three specific issues that could have been better executed on:

• We were relying on the client to recruit research participants due to the user types we needed access to. Our client had not begun the process of recruiting participants when the project kicked off. This led to a delay in starting the research according to the initial timeline.
• We limited the involvement of the visual designer until it was absolutely necessary. This was not ideal — the visual designer didn’t have insight into the reasoning for certain design decisions, and getting everyone on the same page took longer, which led to personal frustration for the visual designer assigned to the project.
• Our technology assessment was presented separate from our research findings, which felt disjointed. This aligned with how we traditionally reported these findings. However, we felt we could challenge ourselves to evolve.

Working as a group, we came up with a list of potential ways to improve on these three areas. Our managing director documented the retrospective and preserved our takeaways in a brief report that we were able to access through our shared storage.

Project B Link

Project B’s retrospective identified that we had done a better job of identifying who would be involved from all disciplines from the start of the project. This led to a sense that the project unfolded seamlessly as we went from research to design and then development.

We also realized that we still fell short of completely resolving two of our previous issues:

• We were relying on the client to recruit research participants due to the user types we needed access to. Our client had not begun the process of recruiting participants when the project kicked off. This led to a delay in starting the research according to the initial timeline.

We had attempted to address this issue by coming to the kickoff meeting prepared with some of the critical items that we knew our clients would need in order to recruit participants.

• Technology assessment findings and user research findings were presented together, but the themes felt disconnected.

We improved on this issue between project A and project B, but we didn’t feel we had completely addressed it. The technology assessment findings were presented alongside the user research in the “Research findings” section, yet the themes remained distinct.

Working as a group, we came up with a list of potential ways to improve on these three areas. Our managing director documented the retrospective and preserved our takeaways in a brief report that we were able to access through our shared storage.

Project C Link

Project C was when our team really started to gel. This also marked six months of working together as a stable core team. We’d had time to learn how each other works and to support each other better. We were able to move both of the issues identified as “not working well” in project B to the “worked well” column in project C.

We had refined our process to the point that we were identifying the minor bumps that can arise over the course of a project as the ones we needed to focus on for improvement in future. We would not have been able to get to this point without conducting retrospectives after each project. Retrospectives enabled us to focus on what we were doing well in order to make sure we kept doing those things. We were also able to identify issues in need of improvement, with specific potential solutions to implement in the next project.

We did not achieve perfection by the end of our year-long experiment. But we did refine our process to the point that we had gotten beyond simply meeting our key performance indicators. We were actively looking for opportunities to implement better solutions; we were able to accomplish more, faster and with fewer resources; and we had developed positive healthy working relationships across the team.

Conclusion Link

You will find many potential benefits from conducting project retrospectives. You don’t need to invest a lot of time or money in them. There is no one-size-fits-all approach. I’ve given you some of the lessons I’ve learned as both a participant and a facilitator of retrospectives in digital design projects. Feel free to try what you want, and only use what works well for your team and situation.

However, we don’t always have the luxury of working in teams or having team retrospectives. I’ll focus on personal reflection in the second article of this two-part series. I’ll provide examples of written and verbal reflection that practitioners and students can apply to grow both personally and professionally.

Stay tuned!

References Link

• “Postmortem: Never Leave a Project Without It¹³,” Andreas Birk, Torgeir Dingsøyr, Tor Stålhane, Norwegian University of Science and Technology
• “Project Retrospectives¹⁴,” PM Notebook
• “Project Retrospectives: Evaluating Project Success, Failure, and Everything in Between¹⁵,” R. Ryan Nelson, MIS Quarterly Executive

(cc, vf, yk, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2017/01/becoming-better-facilitator/
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Gears-800w-opt.jpg
3. 3 https://commons.wikimedia.org/wiki/File:Reduction_Gear.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/08/tools-large-opt.jpg
5. 5 https://pixabay.com/p-593370/?no_redirect
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/08/tools-large-opt.jpg
7. 7 http://scrumpedia.com/articles/a_five-step_approach_to_retrospectives
8. 8 http://blog.lucidmeetings.com/blog/how-to-lead-a-successful-project-retrospective-meeting
9. 9 https://www.amazon.com/Project-Retrospectives-Handbook-Team-Reviews/dp/0932633447/ref=sr_1_1?ie=UTF8&qid=1327347085&sr=8-1
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Progress-large-opt.png
11. 11 https://pixabay.com/en/graphic-progress-chart-1714230/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/08/Progress-large-opt.png
13. 13 https://www.idi.ntnu.no/~dingsoyr/ieee_software2002_birk_dingsoyr_stalhane_postmortem_never_leave_a_project_without_it.pdf
14. 14 http://www.pinnacleprojects.com/index.php/project-retrospectives
15. 15 http://misqe.org/ojs2/index.php/misqe/article/view/85</ee&gt

↑ Back to topTweet itShare on Facebook

Recently, there has been a proliferation of virtual reality (VR) web browsers and VR capabilities added to traditional browsers. In this article, we’ll look at the state of browsers in VR and the state of VR on the web via the WebVR APIs.

The State Of Virtual Reality And The Web Link

The web community has experimented with VR before, with VRML, but now WebVR takes a new approach to VR, one more suited to the modern web. We’ve accelerated 3D on the web since 2011 with the release of WebGL. Now the web can handle VR thanks to new web APIs that take advantage of VR hardware using WebGL.

These APIs enable WebGL content to be displayed in 3D with a VR headset. They also provide headset and controller tracking information to give the user presence in the virtual world.

WebVR was first developed in 2014 at Mozilla. In 2016, an earlier version of the standard was available for desktop Chrome, Firefox and Samsung’s virtual reality web browser: Samsung Internet for Gear VR.

These days, the standard is incredibly well supported on phones and desktop computers for almost all major headsets.

WebVR support as of June 2017 (Source: Mozilla Blog²)

The WebVR standards are worked on in the open, and they represent a collaboration between Mozilla, Google, Samsung, Oculus, Microsoft and, recently, Apple.

This means that a single website that uses WebVR can make an immersive scene and deliver it to all major VR platforms at once, desktop and mobile!

The web’s ability to handle VR content allows one to easily share a VR experience in a URL and view it in the browser without the complicated app stores and long downloading times associated with native VR.

Additional VR-Related Web APIs In Samsung Internet Link

These APIs are not part of the WebVR API but are useful for viewing immersive content on traditional websites in an immersive web browser without needing to use WebGL.

These APIs are being developed for Samsung Internet for Gear VR. We hope they will be picked up by other browsers and standardized.

Panoramic Video Link

This involves the ability to play panoramic videos (monoscopic and stereoscopic) immersively by setting the type="dimension=360;" attribute on a video tag. These videos also get enhanced in Samsung Internet 5.0 by allowing the user to pan around within the video using their fingertips.

Possible values:

• dimension=3d-lr: side-by-side 3D video
• dimension=3d-tb: top-to-bottom 3D video
• dimension=360: 360-degree video
• dimension=360-lr: side-by-side 3D 360-degree video
• dimension=360-tb: top-to-bottom 3D 360-degree video
• dimension=180: 180-degree video
• dimension=180-lr: side-by-side 3D 180-degree video
• dimension=180-tb: top-to-bottom 3D 180-degree video

<video src="/360.webm" type="video/webm; dimension=360;"></video> 

Changing the Sky Link

Another API available in Samsung Internet for Gear VR is a JavaScript API for changing the background image of the VR web browser to one of the developer’s choosing.

Your traditional 2D website will still be visible, but the surroundings will be set to one that matches the environment of your website.

window.SamsungChangeSky({ sphere: 'http://site.com/blue-sky.jpg' }); 

What Is WebVR? Link

WebVR is a set of cross-browser JavaScript APIs that provide a variety of VR-related utilities to place the user in an immersive environment generated using WebGL.

By providing side-by-side rendered 3D images, these APIs will handle all of the complexity involved in displaying an undistorted stereoscopic 3D image to the user.

I won’t go into the details of implementing the standard here because the standard is still changing. Most users will never need to deal with them directly, because WebGL tools and libraries often handle the WebVR APIs for you.

State Of The WebVR APIs Link

The current version of the API is known internally as version 1.1. Version 2.0 will change some of the method names and remove some unused methods. It will also add some additional functionality for some hardware and use cases which were not anticipated during the first iteration of the API.

The precise details of the APIs can be read on the Mozilla Developer Network⁴, and the standards are discussed on GitHub⁵. There is interest from within the WebVR community group⁶ and the W3C to move to a W3C working group once they are ready.

Essentially, the WebVR API provides the following:

• Headset tracking allows the user to look around in the virtual environment. Frame interpolation is built in, so that it is always tracking the user’s head, even if you skip the occasional frame.

• “Six degrees of freedom” and “three degrees of freedom” controller support allows controllers like those of the HTC Vive and the Gear VR to work in virtual reality. It allows the user to use their hands to interact with the virtual environment.
• Information is given about how the headset needs the 3D information rendered, such as the field of view and how to position the render for each eye on the canvas.
• A new headset-specific requestAnimationFrame is synced to the refresh rate of the display in the headset.
• There is a method of submitting the rendered frames to the headset in the form of a WebGL-enabled canvas element.

What Does It Mean To Build A WebVR Immersive Experience? Link

Surprisingly, building a virtual reality website raises many of the same problems as building a good mobile website or progressive web app.

Starting Fast Link

One of the biggest problems being tackled on the web today is network performance, which is important because:

• user attention spans are shrinking,
• networks are getting more congested,
• websites are getting bigger than ever.

WebGL and WebVR websites are certainly no exception to size. They can get very large if one is not careful!

Right now, VR content has an edge over traditional content because it is novel and interesting enough that users will likely wait a bit longer to have a go. Still, getting your 3D experience started in under a few seconds is extremely important. Users are impatient and only getting more so.

Before your VR-capable website has loaded, it is just a 2D website and a promise of cool things to come.

My advice here is to not preload everything. Instead load just enough for the user to get started, then dynamically load and start caching the rest. This behavior should be familiar if you have read about Google’s PRPL pattern⁹.

Even just showing a blurred 360 skybox and some low-poly content, allowing the user to look around, will buy you precious seconds of engagement to bring in additional content and to bootstrap an engaging experience.

Showing something basic but fast is far better than losing the user because they’ve gotten bored waiting for a loading bar to complete.

But bear in mind, network operations can be CPU-intensive and block the main thread. This could give the user a bad experience if it happens a lot, so it is a fine line to walk.

Perhaps one or two very intensive assets need to be preloaded to avoid breaking the experience. However, if you have so many that it is taking a long time to start, then perhaps it’s worth thinking about finding a more performant alternative.

Making good use of a service worker and the Cache API¹⁰ to cache static assets for fast return visits is a great way to keep users coming back for more.

Progressive Enhancement Link

The two main platforms for VR are polar opposites: high-end desktop computers with advanced controllers, and mid- to high-level mobile phones, which might have only a single rotation-tracked controller or no controller at all!

¹¹

This presents us with two challenges:

• maintaining a consistent frame rate across platforms with wildly differing performance capabilities,
• presenting a user-friendly experience across VR devices with a wide range of inputs.

Phones have by far the largest reach due to the popularity of Gear VR and Daydream and the cheap price and high availability of the Google Cardboard headsets.

Below, I have described some typical controller configurations. You don’t need to support them all, but handling the “no controller” situation as a baseline and also supporting another controller option if applicable will allow everyone to experience something. Supporting all controller configurations would be nice, but in my opinion is not a reasonable expectation.

Some libraries, such as Universal Controls from A-Frame Extras¹³, try to make the best out of whatever is available.

¹⁴

Asymmetric Play Link

As with progressive enhancement on the web, supporting all levels of hardware does not mean you need to deliver the same experience to all.

A user with two fully tracked hands in the virtual world will have a much more engaging experience and should not be limited by being delivered the same experience as someone with no controller.

For example, a VR app in which you produce VR artwork could use tracked controllers to produce art on high-powered machines; on mobile, a user would be able to view this art in VR but be unable to edit it.

Another example would be a networked VR multiplayer game in which players use tracked controllers to play the game; a mobile viewer could watch it and use gazed-based interactions to choose different points of view.

Test as You Develop Link

Like modern web design, the key is to design mobile-first. As you build your scene, regularly test it on real mid-level smartphones with no controllers to ensure it will work for the majority of your users.

WebVR allows you to target both platforms at once. However, delivering the same content to both could result in mobile devices struggling or desktops not being used to their full potential.

There is no problem having very well-performing graphics. A stylized low-poly appearance can look fantastic and render very quickly.

To upgrade graphics, one solution is to provide options for graphical quality before the user starts using WebVR. If the user requests high quality, then start downloading the large or difficult-to-render graphics.

Something more difficult but more seamless would be to start on the lowest graphical setting and detect how well the device is performing using commands such as requestIdleCallback or measure how long the rendering takes. If the device is running well, then maybe increase the graphics settings. If frames start getting skipped, then dynamically reduce them.

When you are upgrading your scene, you might decide to do a few things:

• increase draw distance,
• download and use high-resolution models or textures,
• use more complex shaders.

This will ensure that users on mobile and desktop get the best possible experience. For most use cases, though, it is probably fine if desktop users get the mobile experience, because you can guarantee it will maintain a great frame rate on the desktop if it also does on mobile.

After all, there is more to a great scene than visual fidelity. Highly stylized games such as Team Fortress 2 still look great today, whereas “realistic” games from the same era have not aged so well.

A great scene should have a well-designed graphical style, with bold colors and strong silhouettes. This will help low-power and low-resolution devices look good, but will also still look great on desktop devices, needing only a bit of extra polish.

In VR, bear in mind that most users will have the equivalent of poor eyesight. So, minimize text or anything that will cause the user to strain to see something.

What Does the Web Bring to VR? Link

The web is trying to solve some of the problems currently facing VR.

One of the biggest issues is that the user has to make a big commitment for a one-off experience that they might not want to come back to.

In native mobile and desktop VR, one has to download the app from an app store such as the Oculus store on Gear VR or from Steam for the HTC Vive or Oculus Rift.

This app store pattern lends itself well to expensive video games, in which users have already invested some money and so are going to return again and again. But for a one-off experience such as shopping, viewing a movie or trying a new social platform, this can be a high barrier to entry.

Users tend to be put off by the idea of having apps lying around on their device, taking up space or using up a large amount of their data allowance to download — especially users whose mobile devices have limited disk space or network data caps.

On the web, once the user leaves a page, they don’t have to worry about content hanging around, because the browser will clean it up if space is needed. If space is available, the developer can cache content on the device for when the user returns, letting the developer have their cake and eat it, too.

Of course, this requires the developer to make VR websites that are not stored as a single giant bundle; otherwise, the gains the web can provide will have been lost.

By delivering VR assets dynamically and separately like those of a web page, you can take advantage of all of the smart caching that the web can provide from the CDN, all the way down to the HTTP cache and the service worker’s Cache API on the device.

Furthermore, the user can jump right into your VR experience with very little waiting.

A highly optimized WebVR website should render the first frame within a single second of the user landing on the website — totally cutting out any lengthy initial downloads or app stores, and massively increasing engagement.

An experience can be shared with nothing but a URL, which can be distributed by social media or email or even written on a wall or displayed on a TV, making it much more likely that your VR content will go viral due to its low barrier to entry.

Making the Most Out of the Quick Web Link

One feature that many WebVR websites have is that, before entering VR, the user can view and interact with the scene on their 2D display. The view will often rotate with the phone, giving the appearance of a magical window into a virtual space.

This magical window is a powerful pattern. It gives the user a preview of the VR scene without the need for a VR headset. This is great for when they don’t have their VR gear on hand or are on public transportation and don’t want to wear VR equipment in public.

Once the user has gotten a taste, they will be encouraged to bookmark your website to try it in VR at a time more suitable for them.

The Web Has High-Level Interfaces to Low-Level APIs, Bringing Advanced Technology to Any Developer Link

Many web APIs you may have heard of or used have become massively more relevant in a VR context:

• WebSockets
  
  These are used to stream text and binary data to a server in real time. For VR, they can be used to sync hundreds of users in real time to enjoy a shared experienced and to view avatars representing each other. I recently produced an open-source demo in which I did this live for over 150 users at a conference¹⁷.
• WebRTC
  
  To expand upon shared VR, one can also use WebRTC to maintain peer-to-peer connections for binary data and video and audio streaming. This can be used to allow two avatars to voice chat or to sync the position and posture of a VR avatar without going through a central server. This can be used to connect six to eight users at a time.
• WebAudio
  
  WebAudio¹⁸ is one of the most surprisingly powerful APIs. The browser contains everything you need for audio manipulation and analysis. One can even use a panner node for 3D spatial audio in VR. For producing virtual environments that have an immersive feel, WebAudio is more important than ever.
• SpeechRecognition
  
  Newer browsers contain a built-in speech recognition engine! This is useful for giving commands and entering text when a real or virtual keyboard is difficult or unwieldy. Samsung has built a great example for VR¹⁹.

What Effect Might VR Have On The Web In The Long Term? Link

VR has already had an effect on the web platform; the WebVR APIs have been implemented across multiple platforms; and there are discussions about creating a WebVR working group within the W3C.

VR is already going mainstream, and with augmented-reality and mixed-reality devices starting to enter the consumer realm, it is important that the web be ready to take advantage of the new platforms.

WebVR as we know it today relies entirely on WebGL. Optimizing for WebGL will mean that browser vendors will have to look at taking advantage of hardware optimizations to increase rendering speed towards that of a natively compiled app. Speed is important, because dropping frames in VR can have disastrous effects, even to the point of making the user ill!

WebGL 2 will soon be reaching stable browsers. Version 2 brings WebGL closer to the OpenGL ES 3.0 specification. Greater visual fidelity and faster ways to do advanced graphics will make VR truly an incredible visual experience.

WebAudio might be required to produce more accurate 3D audio transformations, known as head-related transfer functions, to better reproduce the high-quality 3D audio required by big-budget productions. Accurate 3D audio will be essential to delivering high-quality immersive video content such as 360-degree movies and immersive audio experiences.

Scripting on the web would benefit from significant performance improvements as well. A number of JavaScript APIs are in the works that can be used to increase performance on the web.

JavaScript itself can be optimized and precompiled. Another option is to compile other languages to WebAssembly (WASM). This can speed things up across the board, providing a bundle that is smaller to download and faster to parse and execute. If used wisely and modularly, WASM could be used to make the core rendering engine of a WebVR experience, which we could still interact with using JavaScript as we do today.

The browser can make use of web workers to enable calculations that do not block the main thread. This is good because the main thread is primarily used for rendering. Web workers are useful for manipulating large amounts of data with CPU-intensive calculations such as physics engines. By isolating the calculations from the main thread in this way, they are less likely to trigger frame drops.

Unfortunately, some cost is associated with sending data to and from web workers to use them in the main thread. This is alleviated partially by transferable objects. Transferable objects such as ArrayBuffers allow you to change the owner of the object, but handling the transferring of this object can be difficult and error-prone if a mistake is made. (I’ve written about using ArrayBuffers on the web²⁰.)

A new API called SharedArrayBuffer will allow multiple workers to share the same ArrayBuffer, which is useful for this case.

On the topic of workers, part of the issue is that, right now, the thread that renders the web page also needs to be used to render the WebGL scene. So, any side effects of other code that you run on the main thread, such as garbage collection or CPU-bound functions, could cause frames to be dropped.

OffscreenCanvas enables rendering to be performed in a web worker. This will help the very important and sensitive rendering loop to be isolated from the other threads.

The other important rendering use case is prerecorded 2D and 3D video. These can be used as textures in WebGL. But they lack fine-grained control. Just as we have an audio element and an AudioContext in JavaScript, we will need to add a videoContext to enable performant video manipulation to assist with playing 360-degree videos in 3D.

An area where VR currently lies at odds with the web as a whole is the rendering of documents. Displaying documents is the core functionality of the web platform, but displaying a document in WebGL is nigh impossible without some very slow, very clever rerendering.

It would be great to bring them together by having the browser expose rendered DOM content to WebGL. This would enable us to take advantage of the web’s power for 2D interfaces, but it could potentially be a security and privacy risk!

Another Path Link

WebGL-based VR doesn’t necessarily have to be the future of VR on the web. Having to perform even the simplest use case for WebVR in WebGL seems shortsighted at best and potentially fatal for VR on the web in the long run.

Part of the strength of the web is that HTML is a declarative language. Browsers can interpret the language according to the platform. You won’t see the exact same website on your desktop computer as you would on your phone or TV. VR is yet another platform in the variety of media to experience the web.

By being declarative, like HTML or CSS, VR on the web could automatically handle rendering to balance rendering speed and visual fidelity. A high-end computer could use advanced shaders and detailed models; a low-power mobile phone could automatically use simple shading and low-poly models — much like the way the picture element can download images that are of the correct resolution and then crop for the given device.

HTML could be extended to include some common VR use cases, such as playing 360-degree and 3D videos and images, displaying 3D models, and moving bits of a web page outside of the 2D viewport into 3D space.

Samsung has started to look at some of these use cases in the web browser, Samsung Internet for Gear VR.

It has built-in support for 3D video using the video element. Displaying a side-by-side 3D, 360-degree video requires just an HTML tag:

<video controls src="360video.mp4" type="video/mp4; dimension=360-lr;"> 

The Middle Path Link

Of course, these needn’t be mutually exclusive. The web can partially handle and optimize for simple VR use cases, while also providing optimizations for building immersive VR from scratch with WebGL.

The Extensible Web manifesto hinges on the idea that the web does not have to sacrifice extensibility for ease of use, that the community can use the low-level tools provided to extend the web platform using libraries.

VR is one case where this vision seems very relevant. We already have the low-level tools of WebGL and the WebVR APIs.

The A-Frame²¹ library provides custom HTML elements to build WebGL-based 3D scenes. A-Frame is usable on its own or with popular frameworks such as React and Angular.

A-Frame enables any web developer with HTML experience to describe VR-ready 3D scenes and to control them using familiar JavaScript. Even tools such as jQuery, Angular and React can be used to change a scene because, at the end of the day, it is still just HTML.

Conclusion Link

The web has the power to bring virtual reality to the world, to every consumer, to every developer.

It is still early days for VR on the web, but now is the time to get building, to see what works and what doesn’t.

The web can show that VR is for more than video games. VR can be used to enhance everything we currently do on the web and even enable new interactions only possible in an immersive medium.

As developers, we can start building VR experiences on the web today. By getting involved and giving feedback about the standards process, we can ensure that VR on the web becomes a robust standard, paving the way for future developers to build on.

Even if you don’t think VR is mature yet, with mixed-reality and augmented-reality devices around the corner, what we build today will still be relevant then. The interface patterns we build for VR apply to all immersive media. Don’t get left behind.

Together, we will build the web of tomorrow.

(rb, vf, yk, al, il)

Footnotes Link

1. 1 https://github.com/googlevr/webvr-polyfill/
2. 2 https://blog.mozilla.org/press/2017/06/mozilla-brings-virtual-reality-to-all-firefox-users/
3. 3 https://www.smashingmagazine.com/2016/09/developing-for-virtual-reality-what-we-learned/
4. 4 https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API
5. 5 https://w3c.github.io/webvr/
6. 6 https://www.w3.org/community/webvr/
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/08/image4-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/08/image4-large-opt.png
9. 9 https://developers.google.com/web/fundamentals/performance/prpl-pattern/
10. 10 https://medium.com/samsung-internet-dev/a-beginners-guide-to-service-workers-f76abf1960f6
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/08/image3-large-opt.jpg
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/08/image3-large-opt.jpg
13. 13 https://github.com/donmccurdy/aframe-extras
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/08/image1-large-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/08/image1-large-opt.png
16. 16 https://medium.com/samsung-internet-dev/the-gamepad-reloaded-5ba866770003#.8tzhs8qz2
17. 17 https://medium.com/samsung-internet-dev/wow-that-was-some-night-in-vr-ba091be38794
18. 18 https://medium.com/samsung-internet-dev/web-audio-on-different-platforms-67fc9ffc2c4e
19. 19 https://samsunginter.net/word-drop/
20. 20 https://medium.com/samsung-internet-dev/being-fast-and-light-using-binary-data-to-optimise-libraries-on-the-client-and-the-server-5709f06ef105
21. 21 https://aframe.io

↑ Back to topTweet itShare on Facebook

As designers we usually turn to different sources of inspiration, and, well, sometimes the best inspiration lies right in front of us. With that in mind, we embarked on a special creativity mission nine years ago: to provide you with inspiring and unique desktop wallpapers¹ every month. Wallpapers that are a bit more distinctive as the usual crowd and that are bound to fuel your ideas.

We are very thankful to all artists and designers who have contributed and are still diligently contributing to this mission, who challenge their artistic abilities each month anew to keep the steady stream of wallpapers flowing. This post features their artwork for September 2017. All wallpapers come in two versions — with and without a calendar — and can be downloaded for free. Time to freshen up your desktop!

Please note that:

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

Summer Ending

“As summer comes to an end, all the creatures pull back to their hiding places, searching for warmth within themselves and dreaming of neverending adventures under the tinted sky of closing dog days.” — Designed by Ana Masnikosa³ from Belgrade, Serbia.

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

Summer Is Leaving

“It is inevitable. Summer is leaving silently. Let us think of ways to make the most of what is left of the beloved season.” — Designed by Bootstrap Dashboards⁴⁶ from India.

⁴⁷

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

Talk Like A Pirate Day

“This calendar was inspired by International Talk Like a Pirate Day (September 19) — one of the many obscure and quirky days we celebrate in New Orleans. Our fair, colorfully corrupt city has entertained its share of outlaws over the years, but none as infamous as the pirate Jean Lafitte, a Frenchman who terrorized sailors and ships in the Gulf of Mexico and distributed his booty from a warehouse in New Orleans in the early 1800s. This calendar is a playful tribute to all of the misfits, outcasts and swashbucklers who call New Orleans home.” — Designed by Sonnie Sulak⁷³ from New Orleans, LA.

⁷⁴

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

Maryland Pride

“As summer comes to a close, so does the end of blue crab season in Maryland. Blue crabs have been a regional delicacy since the 1700s and have become Maryland’s most valuable fishing industry, adding millions of dollars to the Maryland economy each year. With more than 455 million blue crabs swimming in the Chesapeake Bay, these tasty critters can be prepared in a variety of ways and have become a summer staple in many homes and restaurants across the state. The blue crab has contributed so much to the state’s regional culture and economy, in 1989 it was named the State Crustacean, cementing its importance in Maryland history.” — Designed by The Hannon Group¹⁰⁸ from Washington DC.

¹⁰⁹

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

Still In Vacation Mood

“It’s officially the end of the summer and I’m still in vacation mood, dreaming about all the amazing places I’ve seen. This illustration is inspired by a small town in France, on the Atlantic coast, right by the beach.” — Designed by Miruna Sfia¹³⁵ from Romania.

¹³⁶

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

Autumn Rains

“This autumn, we expect to see a lot of rainy days and blues, so we wanted to change the paradigm and wish a warm welcome to the new season. After all, if you come to think of it: rain is not so bad if you have an umbrella and a raincoat. Come autumn, we welcome you!” — Designed by PopArt Studio¹⁷⁸ from Serbia.

¹⁷⁹

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

Funny Cats

“Cats are beautiful animals. They’re quiet, clean and warm. They’re funny and can become an endless source of love and entertainment. Here for the cats!” — Designed by UrbanUI²²³ from India.

²²⁴

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

September Explorer

“After leading a photographic tour through Northwestern Argentina and while discovering its magical ravines and rock formations, I decided to make a wallpaper inspired by the Devil’s throat formation. Use human for scale!” — Designed by Diego Waisman²⁴⁸ from the United States.

²⁴⁹

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

Geometric Autumn

“I designed this wallpaper to remind everyone that autumn is here and they are still reading the best design website, Smashing Magazine” — Designed by Advanced Web Ranking²⁷¹ from Romania.

²⁷²

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

Fall Is Here

“Since it is already September, the leaves are falling and the days are getting shorter and shorter. It is also getting colder so therefore this lovely wallpaper to warm you up.” — Designed by Melissa Bogemans²⁹⁶ from Belgium.

²⁹⁷

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

Umbrella

“Adapt to the seasons of life, change and transformation” — Designed by Pluscharts³³⁷ from India.

³³⁸

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

Sweet Time Under The Banana Tree

“I was visiting a beautiful garden, taking pictures of details within the plants. The colors of this leaf were so brilliant with the sun behind.” — Designed by Philippe Brouard³⁶² from France.

³⁶³

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

Geometric Leaf

“Autumn is coming, so I decided to try out a geometric leaf design this 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⁴⁰⁹

September Festivals In India

“India is a world in itself, with the richness of its heritage and culture. The beautiful festivals are a means of removing all the negativity in our minds and refreshing our souls from within. The festivals are filled with bright colors and uplifting music which rejuvenates our senses and ignites our soul with confluence of multiple energies drawn from several auspicious moments of the past. These festivals are a delight for the creative minds due to their vibrant concepts, energy, colors and art blended in to beautiful form. Every festival has a special significance and aura, I would like to communicate it to the world through this wallpaper.” — Designed by Shyam Pawar⁴¹⁰ from India.

⁴¹¹

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

Dreams Don’t Work Unless You Do

Designed by Metrovista⁴³⁷ from Orlando, FL.

⁴³⁸

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

The World Is Yours

“Travel and change of place adds new vigor to the mind. Take a break, forget your worries and travel. Create stories of new places and adventures to tell. Meet new people, learn new languages, taste new cuisines, experience the beauty of different culture and traditions, and lose your spirit to the soul of the universe which lies in traveling. On World Tourism Day, start a new journey of your life, rejuvenate and breathe and live happily while traveling across roads you have never taken before.” — Designed by Acodez IT Solutions⁴⁶⁴ from India.

⁴⁶⁵

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

When Music Reckons Your Soul

“A touch on guitar’s strings, soft caresses on the piano’s pins, resurrecting waves of joy, of love from the heart within. Come, let’s get immersed in the sound of music…” — Designed by IPIX Technologies⁵⁰⁷ from India.

⁵⁰⁸

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

Dry The Leaves

Designed by StarAdmin Bootstrap Admin Dashboard⁵⁵⁰ from India.

⁵⁵¹

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

Happy Birthday Roald!

“September the 13th is the birthday of legendary author, Roald Dahl. If you haven’t heard of him, where have you been? I have even included an inspirational quote from the Charlie and the Chocolate Factory book.” — 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⁵⁹⁵

Four Friends

Designed by Doud – Elise Vanoorbeek⁵⁹⁶ from Belgium.

⁵⁹⁷

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

#Spring

“Such a lovely time of the year in Melbourne!” — Designed by Tazi⁶¹⁹ 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⁶⁴³

World Alzheimer’s Day

“We remember their love when they can no longer remember.” — Designed by Color Mean Creative Studio⁶⁴⁴ from Dubai.

⁶⁴⁵

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

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

↑ Back to topTweet itShare on Facebook

Welcome back to the second part of this tutorial on Gravit Designer. In the first part¹ we took a general look at Gravit and set everything up, created the background image in the weather app and the status bar, and then started to make the initial elements of the design’s content.

Let’s continue where we left off.

Sunny With A Chance Of Rain Link

Having created the main text layers of the content area in part one² of this tutorial, let’s continue with the weather conditions for the different times of day.

Start with a simple circle of 56 pixels in diameter (remember to hold Shift), with a white 2-pixel inside border, with no fill outside of the “Status bar” group (figure 1a). Move it to “32” (X) and “368” (Y) in the “Position” fields in the Inspector.

Because we want to reuse this style for other shapes, we will create a new “Shared Style.” This allows you to sync all styling properties between various layers and to update changes with a click. To create a shared style, click on the dropdown field for “Style” in the Inspector that says “No shared style” and select “Create New Shared Style.” Now you can define which properties you want to take over — let’s keep everything checked. For the name, use “Icon outline.”

⁵

Let’s turn to the icon itself now, a sun partly covered by a cloud. It consists of various shapes combined into a single form, and a few paths (for the rays).

First, the cloud (figure 2). Draw a rectangle (R) with a size of 28 × 14 pixels, with fully rounded corners (“7” — drag the slider all the way to the right) inside the circle. Because aligning the various parts of the icon to the grid wouldn’t make sense, switch it off for now with Alt + Command + G (on Windows and Linux, Alt + Control + G). Before we continue, use the zoom function with Z to zoom into the rectangle so that it’s easier to work on the following steps. If you intend to zoom in with Command + + instead, then select the shape beforehand so that Gravit Designer takes it as a reference when zooming and zooms to its center.

Note: Before drawing the rectangle, make sure that the circle isn’t selected or else it will take over all of the properties, including the shared style. This is important for when we add new shapes later: If another element is already selected, then all of its properties will be taken over; if nothing is selected, then the new element will be drawn with a default gray fill and no border. That’s also the style you can use for the rectangle for now.

Now add an ellipse (E) above the rectangle that is 15 × 15 pixels in size, that is away 3 pixels from the left edge of the rectangle and that juts out 7 pixels at the top. Clone it with Shift + Command + D (or, on Windows and Linux, Shift + Control + D), resize it to 12 × 12 in the Inspector, and offset it 10 pixels to the right and 3 pixels to the bottom. Looks like a cloud already!

⁷

However, we want an outline instead of a solid fill, so we’ll need to bring the “Merge” function into play (also called Boolean operations in other applications, such as Sketch). Select the three shapes and click on “Merge” in the toolbar; this will combine everything into a single form and allow us to assign a border in its entirety later on (figure 3). The advantage here is that you can expand the “Compound Shape” group in the Layers panel and still move the elements individually. It’s even possible to adapt the type of merge function — for example, if you want to cut the right-most circle from the other shapes (“Subtract,” the third option). Have a look at “Boolean” in the Inspector to perform this change. The lesser used types here are “Intersect” and “Difference,” which just show the part where the shapes overlay or the exact opposite, respectively.

With the “Compound Shape” group selected, change from a fill to a white inside border with 1.5 pixel thickness. Remember that you can alter the position of the border in the “Advanced stroke settings.” Now it will become immediately apparent what the Merge function has done to the shapes.

⁹

Complete the cloud by giving it a proper name.

On to the sun now. Create another circle with a 12-pixel diameter outside of the other big circle. With the cloud still selected, this will take over the styling. This time, however, we need a centered border (you will see why later). Switch to the Line tool with L and draw a vertical one 3 pixels in length above the circle. Make sure that the circle is already selected (to take over the styling yet again), and hold Shift while drawing to constrain the movement. The line should be centered to the circle horizontally and have a gap of 4 pixels in the vertical direction.

Note: To directly transfer the styling from one element to another, proceed as follows: Select the root element, press Command + C (on Windows and Linux, Control + C), click on the layer (object) that you want to take the styling over to, and hit F4. Done! Try it — it’s a nice little time-saver!

A Ray Of Light Link

How do we do the other rays now? We need to combine two techniques here (figure 4). An integral part is the “Transform” function in the top section of the Inspector, which is quite a handy tool to apply transformations to objects. It allows you not only to move, rotate and skew objects by a certain amount, but also to resize a layer relatively with percentages.

The thing that interests us most with the Transform feature at the moment, however, is the ability to adapt the rotation point of a shape — the orange rhombus at the center of the line. It defines the point around which a shape is rotated. To continue, perform the following steps:

1. Clone the line (Mac: Shift + Command + D, Windows and Linux: Shift + Control + D) while it is selected.
2. Switch to the Transform tool with a click on the button in the Inspector.
3. Drag the rotation point (the orange rhombus) down so that it is at the center of the circle.
4. Hold Shift to trigger the rotation mode, and drag the line until the “Angle” field in the Inspector says “-45°.” You might need to release Shift again to catch this exact value.

This rotated line will be the reference for the other rays. First, select and duplicate the initial unrotated line again, but this time with Command + D (on Windows and Linux, Control + D). Then, bring this duplicate to the exact same position and rotation as the other line we just adapted with the Transform function: Drag it there, and rotate it with the “Angle” field in the Inspector. (You might also need to switch off “Snap” in the toolbar for this to work.)

Now press Command + D again until all remaining six rays appear. You might need to align them individually afterward, so that all have the same distance and alignment. Also, delete the duplicate of the second ray.

¹¹

As with the cloud, we want to combine all of the elements of the sun into a single shape so that we are able to style it as a whole. Select everything (ideally in the Layers panel), and click on “Merge” again in the toolbar. Alternatively, you can press Command + M (on Windows and Linux, Control + M). Rename this group to “Sun.”

Note: Please make sure that the lines (i.e. the rays) are above the circle in the layer hierarchy. The styling of the bottom-most layer is always applied to the other layers when you use the “Merge” function.

One final touch is left for the sun: rounded ends for the rays. Open “Advanced stroke setting” in the Inspector again, and select the second option (“Round”) in “Ends.” Looks great!

The individual parts of the icon (the sun and cloud) are ready now, so let’s bring them together somehow. Be sure to switch on the snapping again in the toolbar. First, bring the sun to the top-right corner of the cloud, then move it about 9 pixels to the top and 8 pixels to the right with the arrow keys on the keyboard.

Now, clone both weather symbols so that we have a backup for later (Mac: Shift + Command + D, Windows and Linux: Shift + Control + D). Note: When selecting two groups, you might want to press Command (on Windows and Linux, Control) instead of Shift, to have everything working correctly. While the second sun can be hidden (use the eye symbol in the Layers panel), we will need to manipulate the copy of the cloud for the further steps. (see figure 5 for all of the steps.)

Right-click on the cloud shape and select “Convert to Path,” which will create a path with individual points instead of the compound shape. We also need to do something similar for the sun, but instead of converting the shape itself, we want to transform its border to a path. This is also possible with a right-click on the shape, but with “Vectorize Border.”

Now you can combine these two elements again to create the partly covered sun: Select both, click on the arrow next to the “Merge” icon in the toolbar, and pick “Subtract.” Just make sure that the sun is behind the cloud in the layer hierarchy.

Name this new icon “Sun” again, and delete the rays that overlap with the cloud. The easiest way is to use the Lasso tool. It can be used to draw a selection of multiple vector points — which is quite different to how a Lasso tool will perform in other applications (like Photoshop, for example, where it serves to select parts of a bitmap image).

To use it for the removal of the rays, pick the “Compound Path” within the sun group, switch to the Lasso tool with O, and drag a selection around the redundant rays. Then, delete them with Backspace (on Windows and Linux, Delete).

Finally, combine this glimpse of the sun with the copy of the cloud into a group named “Cloudy,” and align it with the bigger circle. Group them again into an overarching “Icon” group.

¹³

Once we have added a description of the weather condition, we will have finished our first daytime view (figure 6). Add a text layer above the icon (press T), with the following properties in the Inspector:

• Color: white
• Size: 14 pixels
• Weight: Regular
• Line spacing: 16 px (click on the “%” label to switch to pixels)
• Content: “7:00” followed by a break, followed by “Few Clouds.”
• Alignment: center (the second icon).

After that, select the time within the text layer, and give it a “Semi-Bold” weight. Make sure that it is horizontally centered to the icon, with a vertical distance of about 12 pixels. Show the grid again with Alt + Command + G (on Windows and Linux, Alt + Control + G) so that you can align everything properly. Create one last group from the text and the “Icon” group, named “Icon left,” and we will be ready.

¹⁵

Before continuing, let’s bring some order to the Layers panel. Drag the “Status bar” group to the very top (or press Shift + Command + up arrow key on the Mac (on Windows and Linux, Shift + Control + up), followed by the three text layers, the copy of the sun and the “Icon left” group.

From Bad To Worse Link

It’s easy to get the other weather symbols from here. Duplicate the current one (“Icon left”), center it to the page and move it to a Y position of “297,” which should align everything neatly to the grid. The group’s name of this new symbol should be “Icon middle”; for the text, use “14:00 Light rain.” Be sure that everything is centered again.

Because this one will represent the current weather condition, select the circle with a Command-click (on Windows and Linux, Control-click) to change from the border to a white fill. Create a new shared style named “Icon full.”

Now go to the Layers panel, where you will select the “Cloud” group within “Icon” → “Cloudy.” Enter the color dialog and use the color-picker symbol to pick a light-blue color for the surrounding of the icon. Now employ the “Mix” area at the bottom of the dialog to change to a darker shade, so that the icon comes to the fore against the white background. Align it to the center of the surrounding circle with the alignment icons, remove the “Cloudy” group with Shift + Command + G (on Windows and Linux, Shift + Control + G), and delete the redundant “Sun” group in the layers panel. See figure 7 for the entire process.

¹⁷

The first steps for the rain symbol are accomplished, but one vital part remains: the raindrops. Just like for the sun in the other icon, we need to convert the cloud to outlines first for the subsequent steps (figure 8). Right-click and select “Vectorize border” like before (which converts to a “Compound Path” group). Now we can create a rectangle of 16 × 6 pixels at the bottom, which will act as the hole for the raindrops. It should be 5 pixels away from the left edge of the cloud and overlap its bottom line. You might want to zoom (press Z) to have a better view and switch off the grid again.

Select the rectangle together with the “Compound Path” group, and create another “Subtract” operation from “Merge” in the toolbar. For it to work correctly, make sure that the rectangle is on top. After that, drag it into the “Icon middle” → “Icon” group again, and also reset its name to “Cloud.”

¹⁹

Next task: the raindrops (figure 9). They consist of three vertical lines — two 10 pixels long and one 15. The distance from the first to the second should be 5 pixels, and from the second to the third 4 pixels. Start with the first one of 10 pixels in length: Switch to the Line tool with L and hold Shift to constrain the movement to the vertical axis. Assign a centered border with 1.5 pixel thickness and rounded ends (from “Advanced stroke settings”) and that has the same color as the cloud (either take it over with the color picker or use the “In use” area in the color dialog.)

Now follow these steps:

1. Clone the line.
2. Move it 4 pixels to the right with the arrow key.
3. Switch to the Subselect tool with D, and move the bottom point down by 5 pixels with the arrow key.
4. Select the first line again.
5. Make a second copy and move it 9 pixels to the right.
6. Now select and merge all of the lines (Mac: Command + M, Windows and Linux: Control + M), which will let you transform them all together with the Transform tool in the Inspector.
7. Enter “-30°” for “Skew” and click on “Apply.” Make sure that all other fields are set to “0” or “100%.”
8. Leave the tool with another click on “Transform,” so that you are able to align the skewed lines to the cloud, with a distance of 7 pixels to the left edge and 12 pixels to the top edge.

²¹

For the correct measurement to show up, you might need to press Command + Alt (on Windows and Linux, Control + Alt) to drill into the group. To finish the icon, rename the “Compound Shape” group to “Raindrops” and create a new “Icon inner” container with the “Cloud” group. When selecting the two groups, make sure to use Command (on Windows and Linux, Control) instead of Shift. Also, drag it into the “Icon middle” → “Icon” group and align it properly to the circle again. With this, we have finished the second weather symbol. On to the third and last one!

Still No Improvement Link

To start, zoom out to 100% (Mac: Command + 0, Windows and Linux: Control + 0) for a better view. Select the first symbol — the “Icon left” group — and clone it to an “Icon right” group. Move it to the right of the page with the fifth alignment icon (“Align Right”), and select the “Icon” group within. It should have a gap of 32 pixels from the right edge — the grid will definitely help you here. The text of this symbol should read “22:00 Cloudy.” Like before, make sure that it is centered to the icon. Because we have cloudy weather now, we don’t need the sun anymore. Select its group in the Layers panel and delete it. As well, center the cloud to the circle again in both dimensions. That’s it! We’ve just completed all of the daytimes (figure 10).

²³

Full View Link

The last element of the weather app (actually, its center part) is the enlarged display of the current weather condition at the bottom of the screen, surrounded by some elegant half circles.

Create the first half circle with a diameter of 464 pixels (figure 11) — switching off the grid might help. Proceed here as follows:

1. Switch to the Ellipse tool with E.
2. Move the cursor to the bottom center of the page until the smart guides show this spot.
3. Hold Shift to create a circle and Alt to start from the middle.
4. Move this shape down by 16 pixels (add “+16” to the “Position” → “Y” field).
5. Assign #708AB5 as the fill color.
6. Set the “Blending” to “Soft light.”
7. Rename it to “Ellipse 1.”

To set it off from the background image, assign an Inner Shadow at the bottom of the Inspector with a click on the “+” icon on the right. Use the following properties:

• X: 0
• Y: 1
• Blur: 1
• Opacity: 70%
• Color: black

As with the other styling properties, multiple shadows can be stacked on top of each other. Create another inner shadow in the same way as above: It should share all values with its sibling, except for the “Blur” — set this one to “20.” Before you continue, create a new layer in the Layers panel (in the top-right), name it “Bottom,” drag it right above the “Overlay” layers, and move this first circle in. If you’d like, you can also assign a different color to this layer so that it differs from the status bar.

²⁵

We need three more circles (figure 12). Clone the first circle with Shift + Command + D (on Windows and Linux, Shift + Control + D), and resize it to 416 pixels from the center (hold Shift + Alt and drag the bottom-right handle). Style the second circle as follows:

• Fill: #809AC6
• First inner shadow: 0/1/1/50% (X/Y/blur/opacity)
• Second inner shadow: 0/1/12/60%
• Name: “Ellipse 2”

Create a copy from this second circle, this one with the following properties:

• Size: 392 pixels in diameter
• Fill: #CCE0FF
• First inner shadow: 0/1/1/50%
• Second inner shadow: 0/1/8/100%
• Name: “Ellipse 3”

For the fourth and last circle, use these settings:

• Size: 370 pixels in diameter
• No fill
• Blending: Normal
• Just one inner shadow: 0/1/3/25%
• Name: “Ellipse with image”

The reason why this last circle has no fill is that it will contain another image of a cloudy sky, alongside some dark overlays. Grab the image²⁷ and bring it into Gravit Designer. Now move it so that it fully covers the last circle, and drag the image into it in the Layers panel, which will clip it automatically to the shape. Another way to create such a mask would be to select both — the shape and image — and pick “Mask with Shape” from the right-click menu. Just make sure that the mask (i.e. the circle) is above the to-be-masked content (the bitmap image) in the layer hierarchy.

After that, create a rectangle within this new mask group (drag it in after it has been created), which will also cover the circle, and give it a black fill with a “Soft light” blending. This will make the image darker; but we need more, so create a clone of this rectangle.

²⁸

The last element here is an enlarged version of the rain symbol above (figure 13). Proceed as follows:

1. Select it (“Icon inner” in “Icon middle” → “Icon”).
2. Duplicate it and move the icon into the “Bottom” Layer group, in the top position.
3. After that, drag it to the bottom of the page on the canvas (with the Pointer tool — V).
4. To make it visible in front of the background image, select the “Raindrops” group and change the border color to white, as well as the fill color of the “Cloud” group.
5. The final move is to enlarge the icon massively to 128 pixels in width and center it to the semi-circle. Make sure that “Keep Ratio” is switched on between the width and height fields in the Inspector and that “Autoscale Borders” is selected in the “Advanced stroke settings” of the raindrops. Otherwise, they will remain at the original border thickness.

To make the icon stand out from the background even more, we could also apply a drop shadow with the properties “-3/3/0/15%.” The same goes for the text layers, but with the values “-1/2/0/10%,” except for the temperature, which harmonizes better with “-2/3/0/5%.”

After so much work, we have finally finished the first screen of the app. Press Command + 0 (on Windows and Linux, Control + 0) to set it in its full glory.

But we want more. In a second iteration, we want to show it with some friendlier conditions.

³⁰

Finally Sunny Link

Up until now, we’ve worked exclusively in single-page mode, meaning that we’ve had only a single page on the canvas. For the iteration, we need another one (see figure 15 for the result). To enable multi-page mode, click on the toggle next to the “Pages” label (figure 14). Now you can select the current page on the canvas with a click on the title, and press Command + D (on Windows and Linux, Control + D) to duplicate it and keep working there. Rename the first one to “Light rain” with a double-click in the page list and the second to “Sunny” so that there is no ambiguity.

Pages are ideal if you want to create different versions of a screen, to try out variations or just to fiddle around and see all iterations next to each other.

The first task for the new page is to change the time in the status bar to “07:30,” to indicate that we are at another time of day now. Also, modify the day (“Saturday, Jun 16”), as well as the temperature (“28 °C”). Furthermore, we want to display other weather conditions: The left-most and middle should be “Sunny,” the right one “Cloudy.” Ensure that all text layers are centered again. Because we have sunny weather now, this should be reflected in the background image. Unlock the current one, delete it and drag in the new image³². Ensure that it is at the bottom of the layer hierarchy again.

The easiest way to move it there is to press Shift + Command + down arrow on the keyboard (on Windows and Linux, Shift + Control + down arrow). Then, bring it back to the original size with the respective button in the Inspector (“Original size”), and center it to the page in both dimensions with the fourth and seventh alignment icons from the left in the Inspector. This time, the blur should have a slightly smaller radius of “15”; be sure to lock the image again. In addition to dark overlays, we will create a third one, with the full size of the page, a black fill and a “Soft light” blending. Name it “Overlay 3,” and put it right above the image in the layer hierarchy (also locked).

We also need an updated image for the semi-circle at the bottom, within the “Bottom” → “Ellipse with image” groups. Delete the old one and drag in a new bitmap³³. It should be clipped and horizontally centered to the circle again and also be displayed at the original size. Drag it vertically until it shows a view that appeals to you. The two overlays are too dark now, so we need to adapt them. Change one to a fill color of #000560 and a “Screen” blending, and the other to #033572 with “Hard light” and an opacity of 12%.

³⁴

Fixer Of Icons Link

The only thing left to do is to fix the icons so that they match the text. You can switch to single-page mode again if you like. Because the left icon says “Sunny,” we just need the sun symbol — good that we saved it before tearing it apart earlier. Look for the hidden “Sun” group in the Layers panel and show it again. Delete the old “Cloudy” icon within “Icon left” → “Icon,” and drag the sunny pendant to its place (in the Layers panel and on the canvas). The icon could be a bit bigger, though, about 30 pixels. Continue as follows:

1. Fully zoom into the icon with “View” → “Fit Selection” from the menu bar.
2. Zoom out two steps again with Command + - (on Windows and Linux, Control + -).
3. Grab the bottom handle, hold Shift and Alt, and drag until the width in the Inspector says about 30 pixels. Make sure that “Autoscale Borders” is selected in the “Advanced stroke settings” of the icon.

We also need to give the icon a selected state, because the current time is 7:30. First, change the border color of the sun to the same as for 14:00 — the easiest way is to use the color picker in the color dialog. Now, select the outer circle and change it from the “Icon outline” shared style to “Icon full” in the Inspector. Do the same for the middle weather condition, but in reverse. You also need to replace the rainy icon (“Icon inner”) with the sun there, but with a white outline.

The third place where the sun should appear is within the half circle at the bottom, but at a much larger size. Copy the white version and paste it right above the “Ellipse with image” group. Follow the steps above to resize it to a width of 120 pixels. Finally, use the same shadow as before (-3/3/0/15%) to give it a stronger appearance against the background image.

³⁶

Export It Link

We now have two versions of the app, showing different times of day and weather conditions (figure 16). Let’s export them in the final step, which is quite a snap in Gravit Designer. Either click on the export icon to the right of the toolbar or press Shift + Command + E (on Windows and Linux, Shift + Control + E) to enter the Export dialog. There, in the “Canvas” tab, you can already see the two pages, ready for exporting.

³⁸

While the default settings should work just fine, you have many different options here to tweak the output to your liking. The “Format” should be pretty self-explanatory, but the “Size” holds a few hidden values: “2x” lets you export at double size for high-resolution displays (“3x” and “4x” work, too), and you can define a fixed width or height (append “w” or “h”) or both dimensions. Lastly, it’s also possible to set the DPI resolution for print designs.

Besides exporting entire pages, you can also get individual layers (objects) out of Gravit Designer. If you select a layer before entering the export dialog, it will show up in the “Selection” tab; “Assets” can be defined when you click on the “+” icon in “Make exportable” in the bottom-left in the main window. There, you have similar options like in the export dialog and can also define multiple types at the same time.

⁴⁰

I hope you have enjoyed this tutorial and that it has given you valuable insight into Gravit Designer. It was just a small glimpse into the application and its features, because Gravit is capable of creating many different types of designs. Go to designer.io⁴² to use it online or to download the desktop application.

If you have questions, feel free to ask in the comments below.

You can always reach out to the Gravit team on Twitter⁴³ and Facebook⁴⁴, and there is also the very friendly discussion board⁴⁵ where you can post your questions and ideas.

(mb, al)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2017/08/introduction-gravit-designer-designing-weather-app-part-1/
2. 2 https://www.smashingmagazine.com/2017/08/introduction-gravit-designer-designing-weather-app-part-1/
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig1-Gravit-Design-Tutorial-large-opt.png
4. 4 https://www.smashingmagazine.com/2017/08/introduction-gravit-designer-designing-weather-app-part-1/
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig1a-Gravit-Design-Tutorial-large-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig1a-Gravit-Design-Tutorial-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig2-Gravit-Design-Tutorial-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig2-Gravit-Design-Tutorial-large-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig3-Gravit-Design-Tutorial.gif
10. 10 https://vimeo.com/230184786
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig4-Gravit-Design-Tutorial.gif
12. 12 https://vimeo.com/230185564
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig5-Gravit-Design-Tutorial.gif
14. 14 https://vimeo.com/230186283
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig6-Gravit-Design-Tutorial-large-opt.png
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig6-Gravit-Design-Tutorial-large-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig7-Gravit-Design-Tutorial.gif
18. 18 https://vimeo.com/230449984
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig8-Gravit-Design-Tutorial.gif
20. 20 https://vimeo.com/230450376
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig9-Gravit-Design-Tutorial-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig9-Gravit-Design-Tutorial-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig10-Gravit-Design-Tutorial-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig10-Gravit-Design-Tutorial-large-opt.png
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig11-Gravit-Design-Tutorial-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig11-Gravit-Design-Tutorial-large-opt.png
27. 27 https://www.dropbox.com/s/mbppbb7xvyj1aa2/rainy2.png?dl=0
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig12-Gravit-Design-Tutorial-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig12-Gravit-Design-Tutorial-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig13-Gravit-Design-Tutorial-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig13-Gravit-Design-Tutorial-large-opt.png
32. 32 https://www.dropbox.com/s/lidtmi4a794ai01/sunny1.png?dl=0
33. 33 https://www.dropbox.com/s/bfe0nb0m5wyycn4/sunny2.PNG?dl=0
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig14-Gravit-Design-Tutorial-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig14-Gravit-Design-Tutorial-large-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig15-Gravit-Design-Tutorial-large-opt.png
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig15-Gravit-Design-Tutorial-large-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig16-Gravit-Design-Tutorial-large-opt.png
39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig16-Gravit-Design-Tutorial-large-opt.png
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig17-Gravit-Design-Tutorial-large-opt.png
41. 41 https://www.smashingmagazine.com/wp-content/uploads/2017/08/fig17-Gravit-Design-Tutorial-large-opt.png
42. 42 https://designer.io/
43. 43 https://twitter.com/gravitdesigner
44. 44 https://www.facebook.com/GravitDesigner/
45. 45 https://discuss.gravit.io

↑ Back to topTweet itShare on Facebook