It has been a month since we launched our first online workshop and, to be honest, we really didn’t know whether people would enjoy them — or if we would enjoy running them. It was an experiment, but one we are so glad we jumped into!

I spoke about the experience of taking my workshop online on a recent episode of the Smashing podcast. As a speaker, I had expected it to feel very much like I was presenting into the empty air, with no immediate feedback and expressions to work from. It turned out, however, that in some ways I felt more connected to the group by sharing my knowledge with a bunch of folks who were exactly in the same situation as me — at home trying to make the best of things!

I spoke to Vitaly about how he felt about leading a workshop online, and he also felt that everyone felt more equal, rather than having a teacher up on a podium. He also noted that we were able to see how global our audience is. Online workshops are more accessible to people who can’t travel even in normal times, and seeing everyone at home in their own environment really brought to life that we were working with folks from all around the world.

As a participant, there are definite advantages in attending a workshop from home. You have your own desk and usual setup, and space to spread out. And, given the workshop seating I’ve encountered in the past, most of you probably have a more comfortable chair. You can also rewatch the recording if you want to listen to an explanation again.

All The Details

As we have now formalized our workshop process, I thought I’d share a little more about how these events run. Unlike in-person workshops where we keep you in a room for an eight hour day, we realized than many of you have a lot of other commitments right now. Perhaps you are also homeschooling your children, trying to keep up with work from home, and it’s hard to be sat in front of a screen working all day. So all of our workshops are split over multiple shorter sessions, so check each workshop description for the full details of days and times. We’ve had great feedback from attendees and speakers about this approach.

In addition to the presenter, there is always at least one other member of the team online, to help with any connectivity or other issues that you might have.

With so many conferences around the world being cancelled, I’m grateful to have virtually attended a very informative @smashingconf workshop for the past couple days. Even from home, the learning never stops. pic.twitter.com/K3pbJBNpof

— Gabriel Tan-Chen (@gabrieltanchen) April 15, 2020

Zoom

We’ve chosen Zoom because they turned out to be the best compromise in terms of quality, reliability, and accessibility. You can customize your Zoom setup that works best for you. You can resize the windows of the shared screen and the speaker. You can pop out the chat. Whatever works best for you!

We record each of the sessions for attendees, so if you do miss a session you can catch up later. Or you can go back to check out a detail you want to confirm.

Chat and connect

You can also join us in Slack, to chat during or after the workshop with fellow attendees.

We have also been using collaborative Google docs during the workshops for attendees to write down their own thoughts, resources, tips, and questions. It’s interesting to see people helping each other in those docs as well as posting questions for the Q&A.

A surprising thing for me about the online workshops was that I answered more questions than I do when I teach in-person. Each session has dedicated time for Q&A, and I did not expect to be able to fill 30 minutes, but could have easily been answering questions for longer.

Blown away by all the knowledge I’ve soaked in from @rachelandrew‘s online CSS layout masterclass. Incredible how much you can learn about a thing you thought you already knew just by hearing it explained again. Thanks for organising this @smashingconf #smashingconf ?

— waz.css (@camila_waz) April 15, 2020

Upcoming workshops

We have an amazing line-up of folk coming to share their wisdom in this online format. There really is something for everyone. Many of the previous workshops sold out, and we have a hard limit on each one, so if you want to be there, please grab a ticket now.

• May 7-22, Thu & Fri, 9–11:30 AM PDT
  Resilient Web Systems with CSS & Sass with Miriam Suzanne.

  Join Miriam for a deep-dive into the heart of CSS: how it works, what makes it special, and how we can harness it for resilient and maintainable design systems that scale. This workshop is spread over six days, 2h each day, with a huge amount to learn and take away.

• May 12–26, Thu & Fri, 9–11:30 AM PDT
  Smart Interface Design Patterns with Vitaly Friedman.

  You’ll study 100s of hand-picked interface design examples in this one. We’ll be designing interfaces together, starting from accordions, to mega-drop-downs, sliders, feature comparisons, car configurators — all the way to timelines and onboarding. This workshop is spread over five days, 2.5h each day, with a huge amount to learn and take away.

• May 28–12, Thu & Fri, 9–11:30 AM PDT
  Web Performance Masterclass with Harry Roberts.

  Over the course of several sessions, we’ll take a journey from the back-end to the front, auditing the performance of real websites. We’ll be plotting data and findings, making it compelling to clients and non-technical stakeholders; drawing up backlogs and hit-lists; hacking on fixes, improvements, and experiments; and learning a whole lot of obscure performance details on the way.

• June 11-12, Thu & Fri, 10 AM – 12:30 PM CEST
  CSS Layout Masterclass with Rachel Andrew.

  Over two days learn the key skills you need to learn CSS Layout and put it into practice in your work. A mix of theory and pragmatic advice in terms of how to deal with browser support. This workshop is at an earlier Europe and Asia friendly time, so folk in those places don’t need to concentrate on Grid late at night.

• Jun 16-30, Tue & Wed, 9–11:30 AM PDT
  Front-End Accessibility Masterclass with Marcy Sutton.

  By adopting an accessibility mindset and making improvements throughout the design and development process, we can truly make an impact in people’s lives. This workshop will cover how to approach accessibility with HTML, CSS, and JavaScript using modern tools and techniques to eliminate barriers to access in web projects.

• Jun 18-26, Thu & Fri, 9–11:30 AM PDT
  Building Modern HTML Emails with Rémi Parmentier.

  Coding HTML emails is a beast of its own with lots of differences from coding web pages. This workshop will make you reconsider everything you know about coding HTML emails and hopefully make you love the craft.

Join Us!

We hope you’ll join us at one of the workshops. We’d also love to know which other workshop topics and speakers you would like to see online. about the workshops and sign up here.

(ra, il)

Mirage JS is helping simplify modern front-end development by providing the ability for front-end engineers to craft applications without relying on an actual back-end service. In this article, I’ll be taking a framework-agnostic approach to show you Mirage JS models and associations. If you haven’t heard of Mirage JS, you can read my previous article in which I introduce it and also integrate it with the progressive framework Vue.js.

Note: These deep-dive series are framework agnostic, meaning that we would be looking at Mirage JS itself and not the integration into any front-end framework.

Models

Mirage JS borrowed some terms and concepts which are very much familiar to back-end developers, however, since the library would be used mostly by front-end teams, it’s appropriate to learn what these terms and concepts are. Let’s get started with what models are.

What Are Models?

Models are classes that define the properties of a particular data to be stored in a database. For example, if we have a user model, we would define the properties of a user for our application such as name, email, and so on. So each time we want to create a new user, we use the user model we’ve defined.

Creating models In Mirage JS

Though Mirage JS would allow you mockup data manually, using the Mirage Model class would give you a whole lot of awesome development experience because you’d have at your fingertips, data persistence.

Models wrap your database and allow you to create relationships that are really useful for returning different collections of data to your app.

Mirage uses an in-memory database to store entries you make using its model. Also without models, you won’t have access to associations which we would look at in a bit.

So, in order to create a model in Mirage JS first of, you have to import the Model class from Mirage JS like so:

import { Server, Model } from ‘miragejs'

Then, in our ‘Server’ options we use it as the following:

let server = new Server({
  models: {
    user: Model,
  }

Note: If you don’t know what Mirage JS server is, it’s how Mirage JS intercepts network requests. I explained it in detail in my previous article.

From the above, you could see we are creating a user model instance. Doing so allows us to persist entries for the said model.

Creating Entries

To create new entries for our user model, you need to use the schema class like so:

let user = schema.users.create({name: “Harry Potter”})

Note: Mirage JS automatically pluralize your models to form the schema. You could also see we are not explicitly describing before-hand, the properties the user model instance would have. This approach makes for the rapid creation of entries and flexibility in adding fields for the said entries.

You’d most likely be creating instances of your model in the seeds() method of your server instance, so in that scenario you’d create a new user instance using the create() method of the server object like so:

let server = new Server({
  models: {
    user: Model
  },

  seeds(server) {
    server.create("user", { name: "Harry Potter" });
});

In the above code, I redundantly added the snippet for both the server and model creation as to establish some context.

To see a full working Mirage JS server see my previous article on the same subject or check this repo.

Accessing Properties And Relationships

You could access the properties or fields of a model instance using dot notation. So if we want to create a new user instance for the user model, then use this:

let user = schema.users.create({name: “Hermione Granger”})

We can also access the name of the user simply by using the following:

user.name
// Hermione Granger

Furthermore, if the instance created has a relationship called ‘posts’ for example, we can access that by using:

user.posts
// Returns all posts belonging to the user 

Finding An Instance

Let’s say you’ve created three instances of the user model and you want to find the first one you could simply use the schema on that model like so:

let firstUser = schema.users.find(1)
// Returns the first user

More Model Instance Properties

Mirage exposes a couple of useful properties on model instances. Let’s take a closer look at them.

associations

You could get the associations of a particular instance by using the associations property.

let harry = schema.users.create({name: “Harry Potter”})
user.associations
// would return associations of this instance if any

According to the Mirage JS docs, the above would return a hash of relationships belonging to that instance.

attrs

We can also get all the fields or attributes of a particular instance by using the attrs property of a model instance like so:

harry.attrs
// { name: “Harry Potter” }

Methods

destroy()

This method removes the instances it is called on from Mirage JS database.

harry.destroy()

isNew()

This method returns true if the model has not been persisted yet to the database. Using the create method of the schema would always save an instance to Mirage JS database so isNew() would always return false. However, if you use the new method to create a new instance and you haven’t called save() on it, isNew() would return true.

Here’s an example:

let ron = schema.users.new({name: “Ronald Weasley”})

ron.isNew()

// true

ron.save()

ron.isNew()

// false

isSaved()

This is quite the opposite of the isNew() method. You could use it to check if an instance has been saved into the database. It returns true if the instance has been saved or false if it hasn’t been saved.

reload()

This method reloads an instance from Mirage Js database. Note it works only if that instance has been saved in the database. It’s useful to get the actual attributes in the database and their values if you have previously changed any. For example:

let headmaster = schema.users.create({name: “Albus Dumbledore”})

headmaster.attrs
// {id: 1, name: “Albus Dumbledore”}

headmaster.name = “Severus Snape”

headmaster.name
// Severus Snape

headmaster.reload()

headmaster.name

// Albus Dumbledore

save()

This method does what it says which is, it saves or creates a new record in the database. You’d only need to use it if you created an instance without using the create() method. Let’s see it in action.

let headmaster = schema.users.new({name: “Albus Dumbledore”})

headmaster.id
// null

headmaster.save()

headmaster.name = “Severus Snape”
// Database has not yet been updated to reflect the new name

headmaster.save()
// database has been updated

headmaster.name

// Severus Snape

toString()

This method returns a simple string representation of the model and id of that particular instance. Using our above headmaster instance of the user model, when we call:

headmaster.toString()

We get:

// “model:user:1”

update()

This method updates a particular instance in the database. An example would be:

let headmaster = schema.users.find(1)
headmaster.update(“name”, “Rubeus Harris”)

Note: The update() takes two arguments. The first is the key which is a string and the second argument is the new value you want to update it as.

Associations

Since we’ve now been well acquainted with Models and how we use them in Mirage JS, let’s look at it’s counterpart — associations.

Associations are simply relationships between your models. The relationship could be one-to-one or one-to-many.

Associations are very common in backend development they are powerful for getting a model and its related models, for example, let’s say we want a user and all his posts, associations are utilized in such scenarios. Let’s see how we set that up in Mirage JS.

Once you’ve defined your models, you can create relationships between them using Mirage JS association helpers

Mirage has the following associations helpers

• hasMany()
  use for defining to-many relationships
• belongsTo()
  use for defining to-one relationships

When you use either of the above helpers, Mirage JS injects some useful properties and methods in the model instance. Let’s look at a typical scenario of posts, authors, and comments. It could be inferred that a particular author can have more than one blog post also, a particular post can have comments associated with it. So let’s see how we can mock out these relationships with Mirage JS association helpers:

belongsTo()

Import Helpers

First import the belongsTo

import { Server, Model, belongsTo } from 'miragejs'

Next we create our models and use the extend method to add our relationships like so

new Server({
  models: {
    post: Model.extend({
      author: belongsTo(),
    }),

    author: Model,
  },
})

The above defines a to-one relationship from the post model to an author model. Doing so, the belongsTo helper adds several properties and methods to the affected models. Hence we can now do the following:

post.authorId // returns the author id of the post
post.author // Author instance
post.author = anotherAuthor
post.newAuthor(attrs) // creates a new author without saving to database
post.createAuthor(attrs) // creates a new author and save to database

hasMany()

This helper like its belongsTo counterpart needs to be imported from Mirage JS before use, so:

import { Server, Model, hasMany } from 'miragejs'

Then we can go on creating our to-many relationships:

  models: {
    post: Model.extend({
      comments: hasMany(),
    }),

    comment: Model,
  },
})

Like belongsTo(), hasMany() helper also adds several properties and method automatically to the affected models:

post.commentIds // [1, 2, 3]
post.commentIds = [2, 3] // updates the relationship
post.comments // array of related comments
post.comments = [comment1, comment2] // updates the relationship
post.newComment(attrs) // new unsaved comment
post.createComment(attrs) // new saved comment (comment.postId is set)

The above snippet is adapted from the well written Mirage JS documentation

Conclusion

Mirage JS is set out to make mocking our back-end a breeze in modern front-end development. In this first part of the series, we looked at models and associations/relationships and how to utilize them in Mirage JS. Stay tuned for the next parts!

May is here! And even though the current situation makes this a different kind of May, with a new routine and different things on our minds as in the years before, luckily some things never change. Like the fact that we start into the new month with some fresh inspiration.

Since more than nine years already, we challenge you, the design community, to get creative and produce wallpaper designs for our monthly posts. No matter if you’re into lettering, illustration, or photography, the wallpapers are an opportunity to create a small artwork and share it with people across the globe — to inspire them, to make them smile, or just to cater for some beautiful eye candy.

In this collection, you’ll find their wallpapers for May 2020. They come in versions with and without a calendar and can be downloaded for free. As a bonus goodie, we also added some favorites from our archives at the end of the post — because, well, some things are just too good to be forgotten. A big thank-you to everyone who participated this time around! Enjoy!

• All images can be clicked on and lead to the preview of the wallpaper,
• 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 through 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.

Today, Yesterday, Or Tomorrow

“During the last few months we have experienced significant and profound changes in our lifestyle and work habits due to the pandemic. One of the most signifcant changes is how we relate to time. Our day to day blurs as we try to make the best of this situation while hoping for a better tomorrow. While working on my daily lettering practice, I lost track of time and thought what day is it today? From there, I wondered if it was today, yesterday, or tomorrow. The rest followed as I kept thinking how time and routine or the new routine of being home blurs the days for each of us.” — Designed by Alma Hoffmann from the United States.

• preview
• with calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Spring Is In The Air

“Spring is the most inspiring time of the year, so I’ve decided to create this wallpaper to celebrate this beautiful season.” — Designed by Hristina Hristova from Bulgaria.

• preview
• with calendar: 640×480, 800×600, 1024×768, 1280×720, 1280×800, 1366×768, 1400×1050, 1600×1200, 1680×1050, 1920×1080, 2560×1440
• without calendar: 640×480, 800×600, 1024×768, 1280×720, 1280×800, 1366×768, 1400×1050, 1600×1200, 1680×1050, 1920×1080, 2560×1440

Fly Into Spring

“Spring is the season of new beginnings. I wanted to create something that represents what spring is to me. Right now the sky is full of birds flying and singing. I used that as inspiration for my wallpaper design.” — Designed by Raeanne Seliga from the United States.

• 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×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×1200, 1920×1440, 2560×1440

Hope Shakes The Branches

“The promise of the return of spring feels normal in our new strange and abnormal world.” — Designed by Jeffrey Berg from the United States.

• preview
• with calendar: 320×480, 800×480, 1024×768, 1024×1024, 1152×864, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 800×480, 1024×768, 1024×1024, 1152×864, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 2560×1440

Under The Night Sky

Designed by Ricardo Gimenes from Sweden.

• 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

Stay Safe And Don’t Hoard!

“Let’s try to make the best of this situation and have a laugh every now and then!” — Designed by Westie Vibes from Portugal.

• preview
• with calendar: 320×480, 800×600, 1024×1024, 1280×720, 1680×1200, 1920×1080, 2560×1440
• without calendar: 320×480, 800×600, 1024×1024, 1280×720, 1680×1200, 1920×1080, 2560×1440

Social Distancing

“Unfortunately, this sunny May, we have to think about some things that keep us from enjoying the sun-bathed spring with our loved ones. That is why the theme of this month’s wallpaper is the social distancing that will help us save our Castle Earth from the ferocious dragon that is Coronavirus. Stay safe and healthy and enjoy spring responsibly.” — Designed by LibraFire 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

National Nurses Day

“There’s never been a more important time to recognize and pay thanks to the incredible job that nurses do day in and day out. They are at the frontline of keeping us all safe. We pay thanks and solute you heroes!” — Designed by Ever Increasing Circles from the United Kingdom.

• 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

Love Yourself

“As the world is facing time self-quarantining, everyone is facing changes. Your body is taking care of you, as it always has and always will. Sometimes, I need to remind myself to love my body. But it’s important, now and always to love yourself. I designed this wallpaper as a reminder to continue loving yourself and spread the message about body positivity.” — Designed by Autumn Bohner from the United States.

• 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

Green

“Green is the color of hope and hope is what we need in these troubling times. I’m a Belgian mobile game designer and this design comes from my latest mobile puzzle game.” — Designed by Bart Bonte 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, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 3840×2160
• 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, 3840×2160

Oldies But Goodies

Some things are just too good to gather dust somewhere down in the archives. So may we present: a selection of May favorites from past years. Maybe you’ll spot one of your almost-forgotten favorites in there, too? (Please note that these designs don’t come with a calendar.)

Make A Wish

Designed by Julia Versinina from Chicago, USA.

• preview
• 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, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Spring Gracefulness

“We don’t usually count the breaths we take, but observing nature in May, we can’t count our breaths being taken away.” — Designed by Ana Masnikosa from Belgrade, Serbia.

• preview
• 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

Lake Deck

“I wanted to make a big painterly vista with some mountains and a deck and such.” — Designed by Mike Healy from Australia.

• preview
• without calendar: 1280×960, 1440×900, 1680×1050, 1920×1080, 2560×1440, 2560×1600, 2880×1800

Enjoy May!

“Springtime, especially Maytime is my favorite time of the year. And I like popsicles — so it’s obvious isn’t it?” — Designed by Steffen Weiß from Germany.

• preview
• 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

Sweet Lily Of The Valley

“The ‘lily of the valley’ came earlier this year. In France, we celebrate the month of May with this plant.” — Designed by Philippe Brouard from France.

• preview
• without calendar: 800×480, 1024×768, 1024×1024, 1280×720, 1280×1024, 1440×900, 1920×1080, 1920×1440, 2560×1440

Birds Of May

“A little-known ‘holiday’ on May 4th known as ‘Bird Day’. It is the first holiday in the United States celebrating birds. Hurray for birds!” — Designed by Clarity Creative Group from Orlando, FL.

• preview
• without calendar: 320×480, 640×480, 640×960, 640×1136, 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

Geo

Designed by Amanda Focht from the United States.

• preview
• without calendar: 320×480, 640×480, 800×480, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1680×1200, 1920×1080, 1920×1440, 2560×1440

Welcome May With An Ice Cream!

“May is the last month of spring, the weather is getting hotter every day and it starts to feel almost like summer… So, the best thing to cool ourselves and bring summer closer is to… welcome May with an ice cream!” — Designed by WebOlution from Greece.

• preview
• without calendar: 320×480, 640×480, 640×960, 800×480, 800×600, 1024×1024, 1152×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440, 2560×1600

Understand Yourself

“Sunsets in May are the best way to understand who you are and where you are heading. Let’s think more!” — Designed by Igor Izhik from Canada.

• preview
• without calendar: 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

Poppies Paradise

Designed by Nathalie Ouederni from France.

• preview
• without calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1680×1200, 1920×1200, 2560×1440

May The Force Be With You

“Yoda is my favorite Star Wars character and ‘may’ has funny double meaning.” — Designed by Antun Hirsman from Croatia.

• preview
• without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1440, 2560×1440

Rainy Days

“Winter is nearly here in my part of the world and I think rainy days should be spent at home with a good book!” — Designed by Tazi Design from Australia.

• preview
• without calendar: 320×480, 640×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×960, 1600×1200, 1920×1080, 1920×1440, 2560×1440

Add Color To Your Life!

“This month is dedicated to flowers, to join us and brighten our days giving a little more color to our daily life.” — Designed by Verónica Valenzuela from Spain.

• preview
• without calendar: 800×480, 1024×768, 1152×864, 1280×800, 1280×960, 1440×900, 1680×1200, 1920×1080, 2560×1440

MonkGolfier

“We recently changed our workplace and now we’re in a windy place, so we like the idea of flying in the air, somehow.” — Designed by Monk Software from Italy.

• preview
• without calendar: 320×480, 960×640, 1024×768, 1280×800, 1280×1024, 1920×1080, 2560×1440

April Showers Bring Magnolia Flowers

“April and May are usually when everything starts to bloom, especially the magnolia trees. I live in an area where there are many and when the wind blows, the petals make it look like snow is falling.” — Designed by Sarah Masucci from the United States.

• preview
• 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

Power

Designed by Elise Vanoorbeek from Belgium.

• preview
• without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1440

Winter Is Over

Designed by Uxue Goikoetxea from Spain.

• preview
• without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Cool As An Octopus

“A fear I need to conquer inspired this wallpaper design. I never really liked the ocean because of how much we don’t know about it or anything that lives in it. However, I have decided to try and focus on the beautiful parts of this great unknown by choosing an octopus.” — Designed by Alexandra Covaleski from the United States.

• preview
• without calendar: 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!

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.

Thank you to all designers for their participation. Join in next month!

Smashing Newsletter

Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.

Your (smashing) email



Subscribe ?

Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.