BlogmyQuery – BMQ

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one — desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over two years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

We continue to nourish you with a monthly spoon of inspiration. This post features free desktop wallpapers created by artists across the globe for March 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

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 Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Keep Running Up That Hill

"Keep working towards that new years resolution! Be it getting a promotion, learning a skill or getting fit, whatever it is – keep running!" Designed by Andy Patrick from Canada.

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

I Love My Software

"Since it is my birthday this month, I decided to pay a little tribute to 3 softwares that pay my bills and have had made my a job a pleasure to be at :)." Designed by Rihards Gromuls from Latvia.

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

Lucky Month

"A lucky Irish saying to make you go through St. Patrick’s month." Designed by Agathe Altwegg from France.

• preview
• with calendar: 1024×768, 1024×1024, 1440×900, 1680×1200
• without calendar: 1024×1024, 1440×900, 1680×1200

Canoe By The Lake

Designed by Virginia Saint from USA.

• preview
• with calendar: 1280×800, 1280×1024, 1440×900, 1920×1200, 2560×1440
• without calendar: 1280×800, 1280×1024, 1440×900, 1920×1200, 2560×1440

The Smiley Collector

Designed by George Kasapis from Cyprus.

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

The Golden Eyed Cat

Designed by Omer Faruk Ayranci from Turkey.

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

Ides Of March

"This is inspired by the play “Julius Caesar” by William Shakespeare, that I read a few years ago in school." Designed by Mohammed Aaqib from India.

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

Waiting For Spring

"As days are getting longer again and the first few flowers start to bloom, we are all waiting for Spring to finally arrive. First day of Spring is marked in the calendar for you to remember :)." Designed by Naioo from Germany.

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

Good Morning

"Good morning!" Designed by Maja Bencic from Croatia.

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

Cookie Fun

Designed by Pietje Precies from The Netherlands.

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

March Fusion

Designed by Rio Creativo from Poland.

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

Spring Creek

"A boy and a cat playing near the creek." Designed by Cheloveche.ru from Russia.

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

Letter From Spring

"My calendar represents a dropped letter from spring who is leting us know that she is arriving and soon enogh. I chose the colors red and white because in Romania are some traditions related to this colors for the month of March." Designed by Miclaus Andreea from Romania.

• preview
• with calendar: 1024×768, 1024×1024, 1440×900, 1920×1080, 2560×1440
• without calendar: 1024×768, 1024×1024, 1440×900, 1920×1080, 2560×1440

Hello Spring

Designed by Forsaken from France.

• preview
• with calendar: 1440×900, 1680×1050, 1680×1080, 1920×1080, 1920×1200
• without calendar: 1440×900, 1680×1050, 1680×1080, 1920×1080, 1920×1200

The Spring

"Springtime!" Designed by Kris Koubaddy from USA.

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

8vo Gas

Designed by Octavo Designs from USA.

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

Cyrkiel

Designed by Michal Michno from Poland.

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

Spring And Owl

Designed by Katerina Bobkova from Ukraine.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080

Shock The Monkey

"Shock the monkey to spring." Designed by Riccardo Salucco from Italy.

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

Marching Martians

"Mars, Martians and marching, all joined together in this wallpaper." Designed by Ron Gilad from Israel.

• preview
• with calendar: 320×480, 640×480, 640×960, 1280×800, 1280×960, 1280×1024, 1440×900, 1440×1152, 1680×1050, 1920×1200, 2560×1600, 2560×2048
• without calendar: 320×480, 640×480, 640×960, 1280×800, 1280×960, 1280×1024, 1440×900, 1440×1152, 1680×1050, 1920×1200, 2560×1600, 2560×2048

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.

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

What’s Your Favourite?

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

Stay creative and keep on smashing!

(il) (vf)

---

© Smashing Editorial Team for Smashing Magazine, 2012.

Life and nature are one big transition. The sun slowly rises to mark a new day and then slowly sets to mark the end of the day and the beginning of night. We are created in the womb and from small cells we grow, are born and gradually age until we die. Perhaps these natural transitions in life are what make artificial transitions feel… well, right. Sometimes, though, when something jumps from one state to another, it feels OK but doesn’t quite feel right.

A transition that has been designed to be slow can feel awful. When designing an application, an interface or any type of structured content, we must ensure that users understand where they have come from as they arrive at the new page or state. The transition from one screen or group of content to another should feel natural and should be tested on devices of varying power and speed to get a wider view of how the transition feels. Too fast, and it may appear broken or jumpy; too slow, and it will be frustrating to use.

When discussing design, the word “transition� usually conjures up thoughts of overblown PowerPoint presentations or home-made movies made with cheap video-editing software. But there is more to transitions than meets the eye.

Transitions take us from one state to another all the time, many times a day in fact. Most of the time, these transitions feel completely invisible (as they should), and until they are taken away we don’t really know they are there. This article discusses transitions and how well-designed transitions can enhance the user’s experience by imparting a sense of control and easy navigation. We will also discuss how poor transitions can impair the user interface.

What Is A Transition?

By definition, a transition is “a change from one form or type to another, or the process by which this happens.� As mentioned, we make transitions all the time without really knowing it, and they certainly extend beyond our computer interfaces. A well-designed transition takes the user from point A to point B very quickly while conveying the path they have taken.

Transitions are common in interface design, as we know, but are also used in movies and product design. In product design, transitions are triggered by touch, movement or physical handling of the product; in interface design, however, transitions are triggered by navigating through the interface of the application or Web content. A transition should be designed to give the user a sense of their virtual position or location within the interface.

Examples Of Transitions

Cinematic

In a scene near the beginning of the 1971 movie Willy Wonka & the Chocolate Factory, winners of the golden ticket gather outside the gates of the mysterious factory to see the elusive Willy Wonka emerge.

Frames from Willy Wonka & the Chocolate Factory (1971).

As the scene unfolds, the viewer watches from behind the crowd, through the gates, towards the factory; the next camera angle takes us from behind the crowd to just inside the factory gates; and then we’re beside Wonka as he limps along the red carpet; and then we jump to watching him from behind. Although there is no visible “tweening� throughout these transitions in camera angle, we the audience still perfectly understand where we are.

We are watching the movie from our comfy chairs and yet we are made to feel as though we are physically present near the factory. This is an emotional transition.

Interface

If you have an iPad or iPhone, pick it up and go into the settings. Tap around between the menu options to see how the screen slides from right to left and left to right. Scroll to the bottom of any screen to see the soft bounce that indicates you have reached the end of the content. These simple quick transitions were carefully designed to give the user a sense of location within the operating system. Only when you slow these transitions down do you notice the detail that has gone into these in-between bits.

The iOS transition effect in slow motion, by Lim Chee Aun. (Watch this on Vimeo.)

Although we are not viewing a physical location, as in a movie, the OS still gives the user a sense of location by letting them know through the transition where they are navigating to and where they have come from. When you tap on a menu button, the screen shifts to the right to show the next step, and to the left to show the previous step.

Google Chrome on Windows shows us another simple transition, as seen in the video below. When opening a new tab, you see it open with a brief animation from the left. Closing the tab animates it back to the left before disappearing.

The Path app, which is available on both Android and iPhone, is packed full of interesting transitions between states. It’s worth downloading to see how it handles jumping between features.

When the app opens, you go from the splash screen to the actual content with a quick page turn. Clicking on the main menu will spring open the menu options, which spring back once you close the menu. This detail shows the user where those menu items come from, and while we may not consciously think about it, it’s an important detail in the overall user interface.

The Scorekeeper app has what appears to be a very simple interface. Solid colors and a lot of straight edges give the impression that the app is easy to use — and perhaps even that little thought has gone into the visual design. But look again. The transitions in this app are beautiful. When a player is awarded points in a game, the app updates their ranking in the list, using excellent transitions to move the player from their original position to their new one.

Product Design

I’m afraid I have to use Apple again for this example. If you’ve ever bought an iPhone, you would have noticed the design of the packaging. The compact box with matte laminate finish has been thought through to the last detail. The vacuum effect that you get when lifting the lid means that you’re not just breaking a seal and cracking open a box; rather, the lid slowly slides open (similar to the experience of the OS), taking a good second or two to reveal the shiny new device. This unboxing could be described as a physical transition.

Though not an obvious transition, the MacBook’s power light gently pulses when the device is sleeping. The transition is interesting because its fading in and out mimics the natural breathing rhythm of a sleeping person. This can be considered a transition because it’s a visual indication of the state of a device that is neither on nor off, but in between the two states.

Automotive

Modern cars are packed full of excellent transitions that guide the driver through various states. For example, the cabin light comes on when you unlock the door, and then it gradually fades as you buckle the seat belt and start the engine. The subtle lighting takes the user from pedestrian to driver in one smooth transition.

(Image credit: eduard_orbitron)

Nature

As I sit in my chair typing this article, I can turn my head from left to right. By doing so, my field of vision shifts. If I want to look at something to my left, I turn my head — in the process catching everything that crosses my line of sight — until my eyes arrive at the object of attention. My eyes and body have made a transition, and it’s important that we be conscious of our actions as human beings to discover more about natural transitions. Watch the video below to see how the human body transitions from one state to another.

Why Are Transitions Important?

As designers, we do our best to make content easy to find, easy to read and aesthetically beautiful. But as processors become more powerful and technology advances, the devices and systems people use to access this content will hurtle forward, and we’ll discover new ways to deliver this content. We’ve quickly adopted touch methods, and now gestures are becoming important, too. With this in mind, we need to give users a sense of location in our applications, and transitions will play an important part in this.

Most Web content now is organized as “pagesâ€�: clicking or tapping a link simply show the page behind that link (provided the connection is fast enough). There is rarely any form of transition from one page to the next, and we have become used to this method of displaying Web content. But we can introduce useful and beautiful transitions into Web content — such as by using jQuery ScrollTo — but these transitions can be clunky for a number of reasons, including slow connections, excessive processor requirements and the transition speeds defined in JavaScript.

Best Practices For Transitions

There are plenty of ways to incorporate transitions into a design. Here are some general suggestions:

• Avoid any pause at the point of clicking, touching or swiping.
  Hardware speed will always be a factor, but it’s safe to say that chips, processors and memory are getting faster by the second, so test your code and loading times to make sure there is no lag.
• Test in the real world.
  There is no better way to test transitions that by running them in the real world — especially if you are designing for mobile, because people on the go devote less time and attention to navigation. Load a prototype of your design in a supermarket or on the train, and test it to see how it performs under pressure.
• Don’t reinvent the wheel.
  In general, follow the conventions of the operating system you are designing for, because transition styles that diverge greatly from what people are used to will likely cause confusion and frustration. Of course, don’t hold back on designing new transitions; just keep the standards in mind.
• Mind the future.
  These days, we interact with apps by clicking, touching, swiping and speaking. However, gestures will likely become a new way of controlling content, so start considering them now. If people will be able to use their bodies (rather than their fingers or mice) in various ways to manipulate the screen, we will have to give thought to timing, pace and physics — that is, the speed at which a body performs a gesture to move content will have to be matched to the speed at which the content moves. Imagine the frustration of throwing a tennis ball as hard as you can, only for it to travel a few feet on release. Our users will feel this same frustration if the timings of our transitions are poorly designed.

Conclusion

A good transition should be almost invisible to the user. It should help the user understand where they are navigating to and where they have come from, but it should also be smooth and quick. A stall or stutter impairs the overall user experience and tells the user that something is wrong. There is such a thing as UI motion sickness, where the user gets so used to the fluidity of moving between screens that when a screen freezes for a second or two, the user feels like they’ve come to a sudden stop. It is these sensations we should avoid.

For help and inspiration on using transitions in your designs right now, check out the following resources:

• Mark Coleran’s showreel
  An excellent showreel showing faux interfaces and interactions designed for movies and TV shows.
• “CSS Easing Animation Tool,â€� Matthew Lein
  A useful online tool to test CSS animations and transitions.
• “Touch-Optimized Web Framework for Smartphones and Tablets,â€� The jQuery Project
  A unified HTML5-based UI system for all popular mobile platforms, built on the rock-solid jQuery and jQuery UI foundation.
• “How to Use jQuery to Make Slick Page Transitions,â€� Dave Gamache
  Adding the final touches to a website can mean the difference between a polished and beautiful product and one that leaves no impression on visitors.

(al)(fi)

---

© Mark Cossey for Smashing Magazine, 2012.

The future is flexible, and we’re bending with it. From responsive web design to futurefriend.ly thinking, we’re moving quickly toward a web that’s more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional web page to flow as needed through varied displays and contexts. Most conversations about structured content dive headfirst into the technical bits: XML, DITA, microdata, RDF. But structure isn’t just about metadata and markup; it’s what that metadata and markup mean. Sara Wachter-Boettcher shares a framework for making smart decisions about our content's structure.

Every website needs an audience. And every audience needs a goal. Advocating for end-user needs is the very foundation of the user experience disciplines. We make websites for real people. Those real people are able to do real things. But how do we get to really know our audience and find out what these mystery users really want from our sites and applications? Learn to ensure that every piece of content on your site relates back to a specific, desired outcome — one that achieves business goals by serving the end user. Corey Vilhauer explains the threads that bind UX research to content strategy and project deliverables that deliver.

Depending on who you follow and what you read, you may have noticed the concept of “responsive textâ€� being discussed in design circles recently. It’s not what you might imagine — resizing and altering the typography to make it easier to read on a range of devices — but rather delivering varying amounts of content to devices based on screen size.

One example of this is an experiment by designer Frankie Roberto. Another is the navigation menu on the website for Sifter App. Roberto and Sifter are using media queries to actually hide and display text based on screen size (i.e. not rewriting or delivering different content based on context — as one would do with mobile-focused copy, for example).

Having looked at how this technique works, I wouldn’t endorse it yet, because its practical value is not clear. Also, describing this as “responsive� could legitimize what is possibly a less than optimal coding technique. Below are screenshots of how it works on the Sifter website:

Altering the tabbed content in the navigation menu at Sifter. Large view.

How Is This Accomplished?

In this example (and in Roberto’s demo), you’ll notice a couple of things. The screenshots show two versions of the Sifter website at different screen sizes to demonstrate what is happening at two breakpoints.

When you view the website on a large device, the second-last menu tab will show the full label of “Pricing & Plans.� On smaller devices (anything up to the size of a tablet), the label changes to just “Pricing.� This particular example might not be a big deal, but my main concern is that this is being regarded as “responsive text.� It’s not. It’s simply hiding bloated content, and if the content is not important enough to show on smaller screens, then it’s probably not vital at any size.

Does the change in wording mean that information on Sifter’s plans is offered only to users on large devices, or is the “Plansâ€� part redundant? We can assume not, because the tab at all screen sizes links to the …/plans page. This is potentially confusing for users on small devices: they clicked on “Pricingâ€� but are sent to a page that outlines the plans first.

To show and hide the “Plans &� part of the tab, Sifter’s designer has wrapped the element in a span. For a single menu item, this isn’t the end of the world, but good luck going down the path that Frankie Roberto demonstrates with his paragraphs. I can’t imagine what a nightmare it would be to maintain multiple versions of actual page content and then tie them into breakpoints! (Not to mention our earlier question about whether text that is hidden at certain sizes is redundant in the first place.)

Hopefully, we all know to avoid hiding content with display: none !important;. Responsive design is many things; its many little tricks and techniques constitute a wonderful approach to making websites flexible. But hiding elements on a screen in this way should not be one of them.

It’s Just a Demo, Though, Right?

Frankie Roberto’s demo is just that: a demo. He’s clear about that, and he offers a suggestion for a use case. I applaud the effort — everyone should experiment with the Web. The Sifter website is a live website, though — not a demo or proof of concept — and what it has done is being described as “responsive text.â€�

I’m a huge fan of the concept of “one Web.� If you find you have to hide parts of your content on smaller devices, then you might need to refocus your efforts and write less bloated copy or reconsider your wording of page elements.

One of the joys of working “mobile-first� is having to maintain a sharp and critical eye in order to cut bloat (a capacity we should always exercise, of course). Responsive text seems to be the polar opposite of this approach. You are practically admitting from the outset that too much text is on the page. You are making the dangerous assumption that someone on a small device wouldn’t want to read the hidden text.

Maintenance Problems Will Come Hard And Fast

Frankie Roberto achieves a clever effect in his demo. On a large screen, you see all of the copy. And as the screen shrinks, so does the amount of content (and vice versa, of course).

Roberto’s full content, on a desktop screen.

On a smaller screen, the content is reduced.

Achieving this in the demo is easy. A CSS class is applied to the excess paragraphs to hide them.

Some Potential Problems to Consider

• The copy will have to be highly structured in order for it to be readable when parts of it are hidden on small devices. For example, if a content block has 10 lines, then it should still flow when lines 2, 5, 9 and 10 are hidden on a tablet and lines 2, 4, 5, 9 and 10 are hidden on a phone.
• The writer would need some mechanism in the CMS for flagging the breakpoints in the content. The method for updating content would end up being rather technical as a result.

If the message you are communicating on a small screen is sound, then there is nothing you could really “enhance� it with. Anything you add would simply be bloat.

Are There Any Potential Uses For Responsive Text?

I don’t think there are. But I realize this is just my opinion, and I encourage readers and the wider Web community to evaluate it for themselves and disprove me with solid examples.

When discussing this on Twitter the other day, I got interesting responses from a number of fellow designers. Many agreed that whatever you display on a small screen should be your content everywhere, because that is the distillation of your message.

Roberto (@frankieroberto) suggests a potential use case for adaptive news content; for example, showing a summary, a mid-length version or the full article depending on the device. This does sound like a useful way to digest news, but in such a fast-moving environment, I can’t imagine copyeditors would thank you for assigning them to write content that adapts so extensively and still makes sense in these different contexts. But it’s something to think about.

Stephanie Rieger points out that producing bloat-free content on a big website can be incredibly time-consuming:

@welcomebrand @froots101 Discussions with stakeholders reveal last round of copywriting took 6 mths End result, hide text on ‘lesser’ screen

No argument there. I’m working on rebuilding a large website, too, and am encountering the same issues. But I’m not sure that hiding content based purely on screen size is wise. If it’s not relevant or worth displaying, don’t simply hide it: delete or unpublish it.

In Conclusion

My interpretation of the Sifter website and what its designer is trying to achieve may be wrong (this is an opinion piece, remember!). Feel free to tell me as much in the comments below. But from my quick look at the design, code and copy, I won’t be embracing responsive text anytime soon, despite it being an interesting experiment and endorsed by some very clever folks.

I struggle to think of a use case that withstands the basic scrutiny that I apply to content for my clients, which is that if all of the content is not good enough to show on all devices, then the amount of content is not optimal. I recognize that this is a harsh stance, so do check out the code and experiments covered here so that you can make up your own mind.

Remember, just because something is “responsive,� it might not be best for your project.

(al)

---

© James Young for Smashing Magazine, 2012.