Author Archive

Dear Web Design Community, Where Have You Gone?

Advertisement in Dear Web Design Community, Where Have You Gone?
 in Dear Web Design Community, Where Have You Gone?  in Dear Web Design Community, Where Have You Gone?  in Dear Web Design Community, Where Have You Gone?

As Web craftsmen, we are living in exciting times today. The frenetic pace of evolution in our industry has created remarkable opportunities for our work. Our established set of design and coding practices is more comprehensive than it has ever been before. Our designs are becoming more usable, our code more scalable, our layouts more responsive. In fact, just by comparing our design processes to those from a decade ago, it’s remarkable to observe how quickly we’ve developed and honed our craft over all these years.

However, the maturity of our industry is far from being complete. While producing a myriad of technological advancements, we have outpaced other developments along the way. These developments aren’t related to the lack of cross-browser standards support or technical downsides of the tools we are using. No, they have a different nature. They have emerged within our design community — a community which is now so fertile and diverse that it is becoming increasingly difficult to ensure its professional maturity.

In fact, there are many issues that require a thorough, profound discussion within our industry, yet they are not properly discussed for one reason or the other. This article is based on my recent, often unrelated, observations of our community. It features my personal opinion on the problems we need to tackle and conversations we need to start to ensure its healthy evolution.

Where Did The Community Spirit Go?

I was very lucky to have experienced the development of the Web design community from its early days on. As a passionate newcomer to the industry, I was captivated by the sense of enthusiasm that seemed to be flourishing everywhere and spurring everyone. It was a strong and genuine feeling that was sparkled among dozens of sites and magazines and fueled by the motivation of experienced and non-experienced designers. The community was reasonably small and therefore very welcoming and supportive, so everybody was perfectly fine with asking lengthy questions and providing detailed answers.

I clearly remember in-depth discussions with hundreds of meaningful, engaged comments, in which designers would thoroughly analyze the techniques presented and suggest improvements or alternatives. I remember having experienced print and digital designers writing articles and teaching inexperienced designers the obscure details of and practical tips about the new craft. I remember vivid debates spreading from one site to another, connecting designers and building professional relationships in the community.

These discussions still take place today. There are many more designers and developers out there encouraging these discussions. The remarkable work of people like Paul Boag, Dan Mall, Jeffrey Zeldman, Francisco Inchauste, Chris Coyier, Simon Collison, Andy Clarke, Paul Irish, Chris Heilmann, Jeffrey Way, Trent Walton and many others is a vivid manifestation of the tremendous care and dedication of designers and developers to our industry. There are literally thousands of talented folks out there who are writing articles and releasing wonderful new tools and resources for all of us to use. That’s great. That’s great because all of these contributions bring our community much further.

However, every now and again I can’t help but realize that the number of active contributors with knowledge and experience hasn’t increased proportionally to the overall magnitude of our growing community. Way too often I find it extremely difficult to find meaningful debates spanning over the whole community — debates that would create a strong echo and prompt us all to revise, extend or adjust our practices and hence become better professionals.

Hashbang-community in Dear Web Design Community, Where Have You Gone?
The recent hashbang debate is an excellent example of community-wide discussions that our community could use.

Way too often do I come to the conclusion that this remarkable, inspiring enthusiasm we once had is now gone. What remained are stranded cliques of passionate designers who lead design discussions privately and separately, often unnoticed by the vast majority of the community.

The tragic irony is that although we are probably one of the most connected professional communities out there, it seems that we are increasingly not connecting. It’s not that we’ve become just a bit too comfortable with the processes we’ve developed over the years nor that we don’t care about improving our design and coding skills. In dialogue with our readers and colleagues at conferences or even online, I’ve become confident that this development has entirely different roots.

Finding Time to Contribute

Since there is so much going on the Web these days, it seems only reasonable that many of us might experience difficulties finding time to actively engage in professional discussions. Personally, I am just as guilty as the next guy, as I find it extremely difficult to read more than 5–7 design pieces a day — not to mention commenting on any of them. I’m trying to challenge myself to be more responsive and engaging. Sometimes it works, sometimes it doesn’t, but I have firmly committed to this change and maybe — just maybe — so could you.

I believe that the lack of time is one of the reasons for our changed behavior online. Our emails have become shorter, and so are our blog posts and comments. Our interest has become much more difficult to enrapture, and so we’ve become more passive and less critical. We way too easily consume and accept ideas, designs, concepts out there, sometimes without even questioning their validity and correctness. Instead of debating, we agree; instead of criticizing, we accept — or simply click away and ignore the discussion altogether. And this is the reason why many conversations in the community do not get a critical mass of interest.

Design-pet-peeves-community in Dear Web Design Community, Where Have You Gone?
Web design discussions on Quora and StackExchange sites are wonderful examples of websites that we have already started using to exchange ideas, ask questions and conduct valuable design discussions.

The worrying part is that the number of the less experienced active contributors has increased exponentially. Due to that, I am afraid that the community is not led in the right direction. The true leaders — professional, knowledgeable designers and coders — are busy. Busy with their work or perhaps they feel that it’s no longer worthwhile for them to spend much time contributing. I hope this attitude can change. We need more professionals to find time to contribute and help to teach others. After all, so many of us are self-taught. And where would we be today without the contributions of others?

We need more meaningful and helpful discussions within our community. Finding time is difficult, but we don’t have to jump into writing or commenting with both feet. An occasional comment, tweet, reply or short blog post about whatever it is we’ve learned or thought would already help; it might just as well invoke thought-provoking discussions by other members of the community. As artisans of the Web, we love to discuss things that are important to us — be it design, coding, writing or anything else. We might have no time for profound writing, but we certainly have enough time to suggest an idea and encourage our friends to join in the discussions. Taking just a couple of minutes every day to think about the craft we love will bring us further and accumulate the wisdom within our community.

Francisco Inchauste summarized this point nicely in one of our recent conversations: “Everyone has a perspective and experience to share. Without more perspectives, we’ll become limited in our growth. The community is only as strong as our weakest people. To improve, we need to lift others up by helping to educate and guide.”

We Need to Curate Valuable, Meaningful Resources

Probably the easiest way to jump into design discussions would be by observing and replying to the tweets marked with the hashtag #design. Well, that’s what I thought before adding the #design column on my Tweetdeck a couple of weeks ago. After a couple of days of occasional scanning of tweets in that stream, I did find a couple of interesting discussions; however, more often than not I stumbled upon loud, inaccurate and promotional tweets which led to tutorials, freebies or inspirational websites.

Don’t get me wrong: I have nothing against these resources per se, but I don’t quite understand why we, multi-talented, versatile craftsmen of the Web, are restricting the use of such a powerful medium as Twitter primarily to these resources. Why don’t we use it for meaningful discussions as well? Have we somehow become blindfolded by pure eye-candy or tremendous technological opportunities we have now with jQuery, CSS3 and HTML5? We are experimenting with visual and interactive enhancements in our tutorials and our designs, yet we tend to forget about the fundamentals of our work — our design principles, the quality of our processes and the integrity of our creations. We could all benefit from writing and talking about the ways we work, the decisions we make and the solutions we come up with.

Just compare finding a jQuery slideshow plugin against finding a practical resource on UX design patterns. Or finding a social media icon set against finding detailed case-studies written by experienced designers. Valuable, useful resources are becoming rarities and unfortunately many of them just do not get the attention they well deserve.

We need to support and curate the creators of thought-provoking and valuable resources and help them maintain and support these resources. We need to support them because they are the ones that raise questions and seek for answers; they are the ones that support the maturity of our profession; they are the ones that are not afraid to question status quo and encourage experimentation, sharing and innovation — the so needed attributes of our exploding industry.

Html5-boilerplate-community in Dear Web Design Community, Where Have You Gone?
HTML5 Boilerplate is a remarkable example of a cooperation of dozens of Web designers who share their thoughts and insights to create something useful for all of us to use. Unfortunately, many useful projects on Github do not manage to get such strong community-wide support.

We can use our communication channels wisely and invite our colleagues and friends to join in the discussions, sharing opinions and spreading the word about those of us who truly dedicate their time and effort to produce useful, valuable resources. I am certain that by doing so, we’ll be able to unleash the remarkable potential for a strong and supportive exchange of ideas and expertise.

The emerging conferences like Fronteers, Brooklyn Beta and New Adventures in Web Design show very well which benefits a strong community has: it is inspiring, helpful, forward-thinking, challenging. I will never forget the moment when I was sitting among the attendees during one of the conference’s talks and my neighbor turned to her colleague and whispered, almost mindlessly: “I feel that these talks are going to change my views of design forever”. I’d love to experience this feeling in our online discussions, too.

Community-Wide Discussions and Polls

There is so much content out there so that our focus is distributed among dozens of resources and discussions every day; it’s not easy to see how exactly we could lead large community-wide discussions. A blog’s audience is usually limited by its RSS-subscribers, random visitors and social reach of the blog owner. Spreading the word in social circles outside this audience might work to some extent, but it usually won’t help reach the vast majority of the community, especially if the blog is relatively small or obscure.

We need to have some sort of a mechanism that would connect like-minded designers and developers which are not already connected via other media. Twitter’s hashtags are a good example of ways how we are already trying to solidify exchange of ideas and thoughts. But we can make it better.

So what if we had a consistent standard in place? We could strengthen these exchanges through hashtags by developing and having the community adapt some common tags to use en mass. For instance, #design_type, #design_layout, #design_js and others. We could even conduct community-wide polls (#design_poll) that could be easily recognized and retweeted by users with smaller as well as larger followship, thus spreading the word and strengthening the active participation within the community. We could have a website tracking these hashtags, presenting the most popular discussions and filtering spam and other malicious activities.

The same mechanism could be used for supporting valuable design resources and their creators as well as passionate designers who write insightful articles or produce useful resources. When elaborated properly, this approach will make it easier for us to connect and participate in large, community-wide discussions. These discussions might even spread beyond the limits of our community, providing a different perspective on our conversations by professionals from other industries.

So What Exactly Should We Be Discussing?

As Web designers, we’ve come a long way. We’ve shaped a new, strong industry and developed professional design processes. We also have learned a lot on our journey — be it some bits of psychology, copywriting, marketing or other related disciplines. If you think about it, that’s already a massive achievement, and so we have a damn good reason to be proud of what we have contributed to all these years altogether.

However, like in any other industry, we need to permanently revise our practices, innovate and improve our design processes. In fact, there are a number of things that might need to be extended and reconsidered. Let’s cover the not-so-obvious ones.

Our Professional Vocabulary

As mentioned above, when it comes to Web design, there are always so many different disciplines and professions involved, that it is becoming increasingly difficult to make sure that everybody involved is on the same page in terms of vocabulary used in our discussions.

Misunderstandings between designers, developers and stakeholders are the running joke in our community. And there is a reason behind it: the vocabulary we are using has dramatically evolved over years — it was primarily expanded, sometimes with abbreviations and concept titles which are counter-intuitive or misleading. We have applied terms from print design to Web design; we have coined new terms for new concepts and methodologies; we have introduced terms that might have become outdated today (think of the outdated floppy disk symbol for the “Save” icon). The result is a quite sloppy and inconsistent vocabulary — we often have various terms describing one concept, or one term describing various concepts.

Unsuckit-community in Dear Web Design Community, Where Have You Gone?
Unsuck It explains terrible business jargon in plain words. Hopefully, we won’t need something like this for the design community as well.

For instance, there are design attributes that we call ‘responsive’, ‘adaptive’ or ‘flexible’, but what exactly do we mean when we apply them? Different designers might even have a different idea on what they mean with the word “design”; is it visual design, design as a concept or maybe UX design? And what is UX exactly anyway? The same problem occurs when we discuss terms such as “HTML5″, “page”, “fold”, “navigation” and others. Just imagine how devastating the results would be if any other professional industry, e.g. medicine, wouldn’t have a common vocabulary for its technical terms?

At the New Adventures in Web Design Conference last month, Dan Rubin talked about this very issue, saying that the industry as a whole needs a common grammar and vocabulary. He asserts that the ones we have now, were perhaps somewhat hastily chosen. And that with some careful thought and planning, we can design a much more accurate vocabulary to help avoid the confusion which can stem from the existing one.

We could use more precise and intuitive terms which would be based on certain concepts that are familiar to us and other professionals. As Dan noticed, “responsive design”, coined by Ethan Marcotte, is an excellent example of such a term. It derived from the concept of “responsive architecture” which explores how physical spaces can respond to the presence of people passing through them. So instead of creating unchanging spaces that define a particular experience, they create spaces in which inhabitants and structure can — and should — mutually influence each other.

Applied to Web design, it means that we could treat our designs (very much like these spaces) as facets of the same experience. The concept can be easily explained and understood. It’s not too technical, it’s not too abstract and it’s not chosen randomly. It is rational, visual and memorable which are all excellent qualities for a term describing a new design approach.

Perhaps we could create a standardized design language which would accumulate our vocabulary and provide us and our stakeholders with a consistent and unambiguous terminology for our discussions. Finding a common vocabulary is a challenging task and it’s an ongoing process that would need permanent revisions and updates.

Our Design and Coding Practices

Actually, we need to refine more than our design vocabulary: our design and coding practices require regular revisions as well. Faced with new design requirements in our regular work, we keep conquering design problems and exploring appropriate solutions for them. These activities are the driving force behind learning; they heavily influence the decisions we make once we approach similar design problems in the future. This is what makes us experienced professionals.

Method-and-craft-2-community in Dear Web Design Community, Where Have You Gone?
Method and Craft is an excellent website where professional designers and developers are sharing tips about their workflow and design processes. This is a goldmine for newcomers to the industry.

We learn something new every single day. We discover a new CSS trick or a new UX tweak. An obscure Photoshop technique or a beautiful font pairing. Our convenient coding techniques are gradually dating as browsers become more capable and so we discover that certain browser hacks are no longer necessary. We find new ways of how certain common conventions could or should be adjusted. All these small things we discover in our daily routine help us improve our skills and workflow. Actively exchanging thoughts and methodologies with your colleagues will mutually benefit and improve the overall design and coding practices.

We shouldn’t be afraid of asking challenging questions or posing bold statements. If you feel that we should all stop using CAPTCHAs, then say so and explain your rationale behind the argument. If you think that there is a way to reinvent scrollbar, say so and explain how exactly you imagine this technique to work and why it’s better. And if you are struggling with a personal problem and would like to hear how the community members managed to solve it, say it, too — it’s very likely that other members of the community have had similar problems and will be glad to join the discussion and help out.

Our Professional Ethics

Saying “no” can be extremely difficult sometimes, especially when personal or financial incentives are at play. However, as professionals, we owe it to ourselves and to our projects to not get enticed by offers and suggestions that do not wholeheartedly coincide with our intentions and objectives. The former can bring temporary benefits, but if applied consistently, the latter will bring long-term benefits.

We need to become more aware of the ethics that we should be following while designing, coding, writing, editing and publishing on the Web. The times when soulless copy-pasted press releases were used “as-is” across online publications are long gone, so let’s stop doing that. Cheap generic stock photos neither visualize nor support the article, so let’s stop using them, too. Professional publications often use “nofollow” attribute to block link-droppers from gaining Google’s link juice; and most users will not click on links titled “Milestone Professional Web Design Agency”, so let’s stop doing it as well. There are many similar examples which we can use to adapt, and optimize our online behavior accordingly.

Ethics-community in Dear Web Design Community, Where Have You Gone?
The website Ethics and Web Design is a valuable resource which covers the fundamentals of professional ethics in our industry.

As content creators, we often depend on advertising, and that’s sometimes the necessary evil that we need to accept to be able to monetize our dedicated writing efforts. And there is nothing wrong about it. However, we need to set clear limits to how the advertising can and how it cannot be presented on our websites. For example, text link advertising and sponsored posts should always be clearly marked as such. We should have a strict separation between content and advertising. Each of us could design a set of personal principles for his or her websites (publishing policy), publish these rules online and stick to them no matter what. This way the readers will respect you and appreciate the simple fact that you are strongly committed to quality work.

We could benefit from being more critical about our content and the way we present it online. It means paying more attention to copy, consistency of our writing style, quality of images and image captions, design of code snippets etc. These details give our writing a different tone; they empower our thoughts and make the content more trustworthy and reliable. Why don’t we make our work more challenging by trying to make every article we publish at least a tiny bit better than the previous one? We could try not to just “put stuff out there”, but curate our delicate ramblings, making sure that every published article has the highest level of quality that we can afford for it. A style guide can be helpful in this case, especially for larger websites.

Photoshop-community in Dear Web Design Community, Where Have You Gone?
Photoshop Etiquette Manifesto is a website listing helpful and subtle suggestions to organize your Photoshop documents — making the transfer of them less painful.

In Web design it means to stop using anti-patterns — design patterns which are created specifically to trick our users. Instead, we should respect and advocate for our audience and protect their interests. Think about building loyal, honest, authentic user base for your own project or your client’s brand and think about the quality of relationships you create with each user.

Not only should our designs be usable for our visitors, but also our code should be maintainable for developers. Just like with content, you could come up with your set of standards which you’d like to follow in your work, make it public and stick to it. Make it your final checklist item before you hit that “Publish” or “Commit” button. That’s what will make people look up to you and respect your work.

Bottom line: we should strive for responsible Web design that not only embraces best design and coding practices, but also respects our publishing policies, protects the interests of our users and supports the professional work of our colleagues.

Our View of Web Design Trends

As professionals who care about producing beautiful, top-notch products for the Web, we love to explore innovative design and coding techniques. We love to take them apart and put them together again, learning about their potential during the process. We love to discuss them with our colleagues and keep them in mind for upcoming projects. The more other designers use these techniques, the more important they become to us. Among ourselves, we start to respectfully call them trends.

Nevertheless, trends can be dangerous and misleading beasts. They give us an exciting feeling of having a valuable insight that most of our colleagues don’t have yet. We feel fortunate to have discovered one early enough to use it effectively before it becomes common practice. Trends are precursors of the “next big thing,� and so we pay attention to them.

I can’t help but think that trends seem to be spectacularly overrated in our industry. Often they are regarded as bulletproof solutions, respected and universally accepted for the simple reason that they are innovative and widely used (think of drop shadows or text shadows, for example). I believe that we tend to adopt trends too quickly, often getting carried away by their originality rather than understanding their purpose. This should not be the case. Trends are not a panacea for all of the problems we encounter, and often they don’t even provide an optimal solution for the situation in which they were used in the first place.

Not to say that trends are unimportant, though. They are important, especially when they foster innovation and make us reconsider our design decisions. They can challenge us to be more effective and more thoughtful in our designs. Yet they inevitably fail in one particular regard.

103-russian-web-design in Dear Web Design Community, Where Have You Gone?
We can learn a lot simply by examining obscure websites out there, such as Mospromstroy, the website of an industrial construction company in Moscow. The code is far from optimal, but the website itself reveals some interesting design decisions.

One thing I’ve learned to love over the last year is thoroughly examining unfamiliar foreign websites; Russian and Korean websites, to be specific. I feel inspired and empowered just going through them, creating wireframes from them, exploring their interaction patterns and analyzing the source code. I love wondering about the decisions that the designers must have made and the rationales behind those decisions. However, I can only speculate about them; ultimately, I cannot know the context in which these decisions were made.

This lack of context is the main reason why design trends should be approached cautiously. If we don’t know why a certain technique was used, then we need to properly test and validate it before applying it into our own designs. This is the part of the process that I find is often missing in discussions about trends.

We should observe and analyze trends but not consider them as finished “off the shelf� solutions. Instead of following them, we should be confronting them, improving on them and replacing them with our own. Adding elements to our designs merely for the sake of visual or functional interest is counter-productive. We should rather aim for designs that serve their purpose independent of volatile trends. Why not focus on approaching trends responsibly; building on them when they add meaning to a design and ignoring them when they do not fit the contextual scope of the design problem. This would make our websites original, well-formed and timeless.

Learning From The Past

While trends tell us what designers are doing now, we could expand our skills by drawing on our heritage, too. As designers, we are essentially problem-solvers. We analyze existing problems, learn the given objectives and requirements and then start searching for meaningful solutions. However, initially, it is not a clever visual nor technical approach that we are looking for. We are looking for an idea.

At this stage, what helps us most is our experience and creative thinking. And this is exactly where our rich history of visual communication is particularly useful. By studying lessons from the past, we can better understand how ideas and techniques have emerged and evolved over time. We can learn what approaches other professionals have taken to solve the problems facing them — problems that we still might be struggling with today or will in the near future.

Designishistory-community in Dear Web Design Community, Where Have You Gone?
Websites like Design Is History, Smart History and Graphics Atlas are all excellent resources on the history of graphic design, visual communication and the evolution of design processes. We can learn a lot about our craft by exploring them thoroughly.

Andy Clarke’s talk at the New Adventures in Web Design conference was intriguing and pointed out the need for designers to learn about the importance of storytelling in Web design. Andy shared a unique perspective in his presentation, saying that we can shape how users not only interact with content, but consume it in general. He drew a comparison to comic books and Western movies from the 1960s, which used various techniques to dictate the pace of how their information was consumed — be it through a stretch of silence in a movie or the shapes of panels in comic strips.

We could use this technique in our designs to keep readers in the grip of our content just a little longer. Instead of letting users not have to think, we could do the opposite and engage as well as intrigue them (a good example would be of the Ben the Bodyguard website).

Ben-body-community in Dear Web Design Community, Where Have You Gone?
Ben The Bodyguard keeps you on the site longer than you expect.

We shouldn’t hesitate to apply concepts from other time periods or other media into our designs. The concepts actually don’t even have to be design-related. Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.

Next time you’re looking for an idea, pick up that book you’ve always enjoyed reading and read it with a different perspective. Then, search for any unusual points of view that might be worth bringing to the forefront in your next project. Once you’ve found one, grasp this moment, as this is the very second when a unique, innovative design is born.

In Conclusion

As our industry matures, so will our practices and the quality of our work. We may have successfully solved many important problems in our short history, yet there is still much to be done. Writing and talking about the ways we work, the decisions we make and the solutions we come up with will benefit each of us. We could explore the connections between our discipline and other established industries as well as revise and reinforce our professional vocabulary and our ethics.

Perhaps we could all dedicate 10 to 15 minutes of our time to the community every day. We could (and should) make this a firm personal commitment and encourage each other to take part. Find some time to leave a meaningful comment, support a valuable resource, write a short article about what you’ve learned. All of these contributions matter and will prompt meaningful and inspiring discussions. For starters, we could start raising awareness of our commitments by using the hash tag #wdcommunity.

I strongly believe that if we keep doing this every single day, we’ll wake up one day marvelling at how remarkable our community has become. I, for one, am eagerly looking forward to this day.

Huge thanks to Francisco Inchauste, Chris Shiflett, Nishant Kothary, Paul Scrivens, Andy Clarke, Dan Rubin and others for their valuable contributions and suggestions for this article.


© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , , ,


CSS: Innovative Techniques and Practical Solutions

Advertisement in CSS: Innovative Techniques and Practical Solutions
 in CSS: Innovative Techniques and Practical Solutions  in CSS: Innovative Techniques and Practical Solutions  in CSS: Innovative Techniques and Practical Solutions

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

Css-187 in CSS: Innovative Techniques and Practical Solutions

CSS Box Shadow & Text Shadow Experiments
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

Triangle in CSS: Innovative Techniques and Practical Solutions

CSS3 Depth of Field
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

New-css-techniques-119 in CSS: Innovative Techniques and Practical Solutions

Art Deco Selectable Text
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

Art-deco in CSS: Innovative Techniques and Practical Solutions

CSS3 :toggle-button without JavaScript
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

Css-268 in CSS: Innovative Techniques and Practical Solutions

About War and Bananas
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

Css-150 in CSS: Innovative Techniques and Practical Solutions

WebKit Clock
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Css-146 in CSS: Innovative Techniques and Practical Solutions

Pure CSS Slideshow
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

New-css-techniques-102 in CSS: Innovative Techniques and Practical Solutions

CSS Dock
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

New-css-techniques-108 in CSS: Innovative Techniques and Practical Solutions

Andrew Hoyer
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

New-css-techniques-197 in CSS: Innovative Techniques and Practical Solutions

Type study: An all CSS button
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

New-css-techniques-103 in CSS: Innovative Techniques and Practical Solutions

3D Text
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

3d-text in CSS: Innovative Techniques and Practical Solutions

Spin those Icons with CSS3
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

Css-111 in CSS: Innovative Techniques and Practical Solutions

The Shapes of CSS
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

Css-272 in CSS: Innovative Techniques and Practical Solutions

CSS background image hacks
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Background-image-hacks in CSS: Innovative Techniques and Practical Solutions

Making Better Select Elements with CSS3 and jQuery
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

Css-190 in CSS: Innovative Techniques and Practical Solutions

CSS-Only 3D Slideshow
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “betterâ€� than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

New-css-techniques-157 in CSS: Innovative Techniques and Practical Solutions

Have Fun with Borders
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

New-css-techniques-223 in CSS: Innovative Techniques and Practical Solutions

Animated CSS3 Owl
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

Owl in CSS: Innovative Techniques and Practical Solutions

CSS Social Sign-in Buttons
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Css-258 in CSS: Innovative Techniques and Practical Solutions

Rotating color cube box with CSS3 animation, transforms and gradients
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

Css-260 in CSS: Innovative Techniques and Practical Solutions

CSS3 Demo: 3D Interactive Galaxy
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Galaxy in CSS: Innovative Techniques and Practical Solutions

Getting Hardboiled with CSS3 2D Transforms
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

Css-261 in CSS: Innovative Techniques and Practical Solutions

How to create Microsoft Office Minibar with jQuery and CSS3
Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

New-css-techniques-171 in CSS: Innovative Techniques and Practical Solutions

Angled Content Mask with CSS
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Bicycle in CSS: Innovative Techniques and Practical Solutions

Rotating Feature Boxes
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Feature-boxes in CSS: Innovative Techniques and Practical Solutions

Pure CSS3 box-shadow page curl effect
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Curl in CSS: Innovative Techniques and Practical Solutions

Pure CSS Folded-Corner Effect
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Fold in CSS: Innovative Techniques and Practical Solutions

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Smooth in CSS: Innovative Techniques and Practical Solutions

Fade Image Into Another
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

Web-services-030 in CSS: Innovative Techniques and Practical Solutions

New @Font-Face Syntax: Simpler, Easier
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

New-css-techniques-174 in CSS: Innovative Techniques and Practical Solutions

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

New-css-techniques-168 in CSS: Innovative Techniques and Practical Solutions

Quick Tip: Mimic a Click Event with CSS
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Css-200 in CSS: Innovative Techniques and Practical Solutions

Responsive Images: Experimenting with Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

New-css-techniques-121 in CSS: Innovative Techniques and Practical Solutions

CSS powered ribbons the clean way
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

New-css-techniques-123 in CSS: Innovative Techniques and Practical Solutions

Create a centred horizontal navigation
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

New-css-techniques-198 in CSS: Innovative Techniques and Practical Solutions

Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape.

Tag-name in CSS: Innovative Techniques and Practical Solutions

Styling children based on their number, with CSS3
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

New-css-techniques-115 in CSS: Innovative Techniques and Practical Solutions

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

New-css-techniques-165 in CSS: Innovative Techniques and Practical Solutions

Pure CSS(3) accordion
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Css-114 in CSS: Innovative Techniques and Practical Solutions

Target iPhone and iPad with CSS3 Media Queries
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

New-css-techniques-193 in CSS: Innovative Techniques and Practical Solutions

Inline Boxes with Bottom Alignment
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

Css-168 in CSS: Innovative Techniques and Practical Solutions

Transparent CSS Sprites
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out� transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Css-170 in CSS: Innovative Techniques and Practical Solutions

Mimic Equal Columns with CSS3 Gradients
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

New-css-techniques-207 in CSS: Innovative Techniques and Practical Solutions

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recastingâ€� elements.

Center in CSS: Innovative Techniques and Practical Solutions

Clearing Floats with Overflow
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

Overflow in CSS: Innovative Techniques and Practical Solutions

Different Transitions for Hover On / Hover Off
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Layout in CSS: Innovative Techniques and Practical Solutions

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

New-css-techniques-186 in CSS: Innovative Techniques and Practical Solutions

Fluid Width Equal Height Columns
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

New-css-techniques-204 in CSS: Innovative Techniques and Practical Solutions

CSS Box-Shadow:Inset
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

Inset in CSS: Innovative Techniques and Practical Solutions

Flexible Navigation
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

Deaxon in CSS: Innovative Techniques and Practical Solutions

Circle Zoom
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

Circle in CSS: Innovative Techniques and Practical Solutions

Last Click

CSS3 Memory
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

New-css-techniques-199 in CSS: Innovative Techniques and Practical Solutions

CSS 3D Scrolling @ BeerCamp at SXSW 2011
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

New-css-techniques-175 in CSS: Innovative Techniques and Practical Solutions

50 New Useful CSS Techniques, Tutorials and Tools
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

Css-237 in CSS: Innovative Techniques and Practical Solutions


© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:


Desktop Wallpaper Calendar: January 2011

Advertisement in Desktop Wallpaper Calendar: January 2011
 in Desktop Wallpaper Calendar: January 2011  in Desktop Wallpaper Calendar: January 2011  in Desktop Wallpaper Calendar: January 2011

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 almost two years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

As the new year begins, we will continue to nourish you with a monthly spoon of inspiration for the next 12 months. This post features 65 free desktop wallpapers created by artists across the globe for January 2011. 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 and
  • 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?

Update: you may be interested in Smashing Magazine January 2011 Windows 7 Theme (calendar) and Smashing Magazine January 2011 Windows 7 Theme (no calendar).

So what wallpapers have we received for January 2011?

Creative Chocolate

"January is a very cold month and it’s a perfect season to drink an hot chocolate. Even better if it’s a Creative Chocolate!" Designed by Fabrizio Venanzi from Italy.

Creatchoco 79 in Desktop Wallpaper Calendar: January 2011

One/2011

"And the winner is: January 2011! All the best for the new year!" Designed by Marco Palma from Italy/Germany.

One 2011 41 in Desktop Wallpaper Calendar: January 2011

A Handy New Year

"Being Designers we tend to use our hands a lot, in order to portray our most basic feelings onto a Calendar we substitute the numbers with our hands." Designed by siewhui from Singapore.

A Handy Year 13 in Desktop Wallpaper Calendar: January 2011

On the ground

Designed by Nathalie Ouederni from the Netherlands.

On The Ground 65 in Desktop Wallpaper Calendar: January 2011

Frozen World

"When it is too cold outside you feel like the whole world is frozen…" Designed by Rumena Zlatkova from Bulgaria.

Frozen World 89 in Desktop Wallpaper Calendar: January 2011

Treelight

Designed by Nathalie Ouederni from the Netherlands.

Treelight 38 in Desktop Wallpaper Calendar: January 2011

Resolution Bottle

Designed by Tim Fritz from USA.

Resolution Bottle 3 in Desktop Wallpaper Calendar: January 2011

Icy Tree Smashing

Designed by Vlad Gerasimov from Russia.

Icy Tree Smashing 8 in Desktop Wallpaper Calendar: January 2011

Drupal 7 is coming

"More beautiful than ever!" Designed by Jaro Mlkvy from Slovakia.

Drupal 7 Is Coming 62 in Desktop Wallpaper Calendar: January 2011

Silver Winter

Designed by Violeta Dabija from Moldova.

Silver Winter 52 in Desktop Wallpaper Calendar: January 2011

Quiet Please

Designed by Diana Samoila from Romania.

Quiet Please 20 in Desktop Wallpaper Calendar: January 2011

Creepy Forest

"The cold, rainy winter carries with it a surreal, gloomy and threatening ambience…" Designed by Ron Gilad from Israel.

Creepy Forest 19 in Desktop Wallpaper Calendar: January 2011

Little Gizmo

"Little Gizmo would like to wish you a happy and prosperous New Year." Designed by Mad Sprocket from USA.

Little Gizmo 25 in Desktop Wallpaper Calendar: January 2011

Winter Fun

"Winter is the greatest time to walk, ski, play snowballs and have fun with friends." Designed by cheloveche.ru from Russia.

Winter Fun 11 in Desktop Wallpaper Calendar: January 2011

Winter Light

Designed by Patr’cia Segade from Portugal.

Winter Light 56 in Desktop Wallpaper Calendar: January 2011

Snowman

"I wanted to convey something wintery, but still joyful, to keep me upbeat when I start up my laptop every chilly morning." Designed by Steph Struthers from USA.

Snowman 8 in Desktop Wallpaper Calendar: January 2011

Winter’s Warmth

"Although England’s winter has been very, very cold – it’s also been bright and colourful. I can’t remember seeing so many outrageously “warm” sunsets. Definitely not going to complain. This was actually taken on Christmas Day. Woohoo! Happy 2011 to you all. :)" Designed by Sasha Bell from England, UK.

Winters Warmth 34 in Desktop Wallpaper Calendar: January 2011

Lost in Winter’s Fog

"One of the most beautiful things about winter is the thick, dense fog we so often get. Sometimes it’s so bad you can’t see 100 yards in front of you. It’s maddening but beautiful at the same time. Happy 2011!" Designed by Olivia Bell from England, UK.

Lost In Winters Fog 40 in Desktop Wallpaper Calendar: January 2011

Winter Forest

"Happy New Year!" Designed by Oxana Kostromina from Poland/Russia.

Winter Forest 33 in Desktop Wallpaper Calendar: January 2011

Hazy dawn

"I’ve always created wallpapers for my own use. This time I share one of them with you!" Designed by Agnese Ločmele from Latvia.

Hazy Dawn 4 in Desktop Wallpaper Calendar: January 2011

Love out of Focus

Designed by Sara Duan.

Love Out Of Focus 13 in Desktop Wallpaper Calendar: January 2011

Snow Goggles

"Perfect Powder day at Zwšlferhorn (St. Gilgen, Austria)" Designed by Maroni Gschwandtner from Austria.

Snow Goggles 93 in Desktop Wallpaper Calendar: January 2011

In the Snow

"Hidden beauty in the snow." Designed by Rumena Zlatkova from Bulgaria.

In The Snow 86 in Desktop Wallpaper Calendar: January 2011

Flowers

"”Be careful – You won’t know which kind of people you will meet. There are good, evil, intrigue, etc. Open your eyes big while seeing the big and awesome world.” – Juanita OMFª" Designed by Juanita Ooi from London, UK (Originally Malaysia).

Be Careful 62 in Desktop Wallpaper Calendar: January 2011

Going Home

"Peaceful scenery around my hometown in winter." Designed by Alexander Franzelin from Italy.

Going Home 51 in Desktop Wallpaper Calendar: January 2011

Frost Bitten

"A collaboration between two sisters. One’s a photographer and the other is a designer." Designed by Denise Johnson and Sharleen Heist from USA.

Frost Bitten 48 in Desktop Wallpaper Calendar: January 2011

New Decade

"It’s time to welcome New Year’s 2011 – and say a fond goodbye to 2010.New Year is expected to bring good luck and charm for people and this is the reason why everybody love to celebrate it with fun and enjoyment.I designed this wallpaper to welcome the new year and show the Transition between the two years." Designed by Neelam Asrani from India.

New Decade 62 in Desktop Wallpaper Calendar: January 2011

Twisted Winter

"A cold, vacant, and erie scene of tangled branches. Enjoy!" Designed by Colin Oakes from Canada.

Twisted Winter 68 in Desktop Wallpaper Calendar: January 2011

Hello 2011

"An old rotary phone breaking out of 2 old polaroid photos." Designed by Kristen Cook from USA.

Hello 2011 61 in Desktop Wallpaper Calendar: January 2011

Smashing January

"My journey of 2011 starts with Smashing Magazine" Designed by Marina Aftab from Pakistan.

Smashing January 52 in Desktop Wallpaper Calendar: January 2011

New Year, New Goals

"A New Year means a New Start! Get out and do something this year that impresses yourself." Designed by WaltWinchel from USA.

New Year New Goals 23 in Desktop Wallpaper Calendar: January 2011

Yeti weekends

"The winter sports season has arrived, beware with the deadly Yeti." Designed by joaomalveiro from Portugal.

Yeti Weekends 45 in Desktop Wallpaper Calendar: January 2011

Lost Wiseman

"I Decided to make a little joke with the 3 wiseman, so I made them lost,so insted they’re in the desert they’re in a snow region." Designed by Rui Madeira from Portugal.

Lost Wiseman 90 in Desktop Wallpaper Calendar: January 2011

Flowers

"”Put your ear down close to your soul and listen hard – I am who I am. I am myself. I don’t want to be anyone else. I am unique.” – Juanita OMFª" Designed by Juanita Ooi from London, UK (Originally Malaysia).

Unique 29 in Desktop Wallpaper Calendar: January 2011

A Door to a New Year

Designed by Christine Bradway from USA.

A Door To A New Year 26 in Desktop Wallpaper Calendar: January 2011

Dear Diary

Designed by Maggi Giovanni from Italy.

Dear Diary 70 in Desktop Wallpaper Calendar: January 2011

Bull fight, the ancient sport of heroes

"Bull fighting, called as Jallikattu is an ancient traditional sport in which young Indian men wrestle bulls with their bare hands. This hand drawn picture depicts the spirit of the gutsy game." Designed by Narendar . N from India.

Bull Fight The Ancient Sport Of Heroes 99 in Desktop Wallpaper Calendar: January 2011

Winter Light

"I wish you all a very happy and healthy new year!" Designed by Nathalie Ouederni from the Netherlands.

Winter Light 48 in Desktop Wallpaper Calendar: January 2011

CMYK 2011

"CMYK and Prinitng elements" Designed by Sherif Saleh from Egypt/France.

Cmyk 2011 85 in Desktop Wallpaper Calendar: January 2011

Smashing 2011

"A smashing 2011!" Designed by Minhaj Mohamed from Sri Lanka.

Smashing 2011 22 in Desktop Wallpaper Calendar: January 2011

2010 memories

"2010 Memories : As the year 2010 approaches its last few days, it’s time to look back on the previous 12 months. All 2010 photos." Designed by Sahra Tamo from Syria.

2010 Memories 72 in Desktop Wallpaper Calendar: January 2011

Global Greetings

Designed by Sarah Hufkens from Belgium.

Global Greetings 78 in Desktop Wallpaper Calendar: January 2011

New life

"Forget all bad memories,welcome something new in our lives…" Designed by Nishith from India.

New 76 in Desktop Wallpaper Calendar: January 2011

Purple Dze

"The fog that clouds our thoughts on those rainy winter days." Designed by Nicole Dominguez from United States.

Purple Daze 50 in Desktop Wallpaper Calendar: January 2011

New Life

"I wish you an Happy New Year! After 12 months of events, emotions, moments, it’s time to restart and continue from the end. Hope everyone has the opportunity to grant his dreams!" Designed by Davide Reppucci from Italy.

New Life 33 in Desktop Wallpaper Calendar: January 2011

Nike

"Happy New Year :)" Designed by Marta Miazek from Poland.

Nike 26 in Desktop Wallpaper Calendar: January 2011

Snow Walk

"My dog enjoying the first snowfall at the terrace. After the first walk, she tried to eat the snow." Designed by Luis Herrero Jimenez from Spain.

Snow Walk 23 in Desktop Wallpaper Calendar: January 2011

Tea and Tiles

Designed by Pietje Precies from The Netherlands.

Tea And Tiles 42 in Desktop Wallpaper Calendar: January 2011

New Year Celebration

Designed by Maggiey from India.

New Year 88 in Desktop Wallpaper Calendar: January 2011

Silent Love

Designed by Han Htut Zaw from Myanmar.

Silent Love 81 in Desktop Wallpaper Calendar: January 2011

Tsuru

"An ancient Japanese legend promises that anyone who folds a thousand origami cranes will be granted a wish by a crane, such as long life or recovery from illness or injury." Designed by Pedro Nobre from Portugal.

Tsuru 17 in Desktop Wallpaper Calendar: January 2011

Smashing Magazine 2011

"Celebrate a new year with a smash!" Designed by knsqnt interactive from Germany.

Smashing Magazine 2011 36 in Desktop Wallpaper Calendar: January 2011

Get started with drupal 7

"Drupal 7: the best version of Drupal yet!" Designed by Jaro Mlkvy from Slovakia.

Get Started With Drupal 7 30 in Desktop Wallpaper Calendar: January 2011

Symbol of Love

"Let the coming new year be a start for One love of the world. Humans across all the countries love each other without any difference. With an open heart stop the wars and welcome peace and love between individuals. The Taj mahal which stands as a symbol of eternal love be taken as an inspiration and join the peace for human." Designed by Mohamed rafi from India.

Symbol Of Love 17 in Desktop Wallpaper Calendar: January 2011

Communion Cups & Someone’s Coat

Designed by Brad Cerasani from Canada.

Communion Cups 038 Someone S Coat 40 in Desktop Wallpaper Calendar: January 2011

Lumanti

"Lumanti is nepali word which means remembrance. Rememberence of year 2010, every small to big things, sadness to happiness, and our every moment of 2010." Designed by Moksha Design Studio from Nepal.

Lumanti 41 in Desktop Wallpaper Calendar: January 2011

International 2011

"We love typography and we’ll love the year 2011." Designed by LOTUM from Germany.

Lotum 40 in Desktop Wallpaper Calendar: January 2011

Another Chance

"Hope for the coming year." Designed by Kellie Gave from USA.

Another Chance 72 in Desktop Wallpaper Calendar: January 2011

Wonderful Winter

"A great new year with these lovely deer!" Designed by Agnes Swart from The Netherlands.

Wonderful Winter 61 in Desktop Wallpaper Calendar: January 2011

Flowers

"”Hold me tight. Smile to me. You are special. You are not like any of them out there. I feel comfortable with you. So please, hold me tight and never let go. Will you?” – Juanita OMFª" Designed by Juanita Ooi from London, UK (Originally Malaysia).

Never Let Go 19 in Desktop Wallpaper Calendar: January 2011

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 favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below! Wishing you a smashing Two-Thousand Eleven, guys!

(ik) (vf)


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


25 New Free High-Quality Fonts

Advertisement in 25 New Free High-Quality Fonts
 in 25 New Free High-Quality Fonts  in 25 New Free High-Quality Fonts  in 25 New Free High-Quality Fonts

Every now and then we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to.

In this selection, we’re pleased to present Pompadour Numeral Set, Lato, Crimson Text, Espinosa Nova, Musa Ornata, Spatha Sans, ColorLines, Roke1984, Neuton, Avro, Baurete and other fonts. Please note that some are for personal use only and are clearly marked as such. Please read the license agreements carefully before using the fonts; they may change from time to time.

New High-Quality Free Fonts

Pompadour Numeral Set (.eps, released under Creative Commons)
A beautiful numeral font released by Andy Mangold under a Creative Commons license. The font can be useful in various settings, for instance for packaging design or logo deign. The .EPS file is available for free download. The font is free to use as long as the credit is given.

Andy1 in 25 New Free High-Quality Fonts

Andy2 in 25 New Free High-Quality Fonts

Lato (open-source sans serif)
Lato is a san-serif typeface family. The semi-rounded details of the letters give Lato a warm feel, while the strong structure provides stability and seriousness. Lato consists of five weights (plus corresponding italics), including a beautiful hairline style. The first release includes only the Western character set. Designed by Lukasz Dziedzic.

Lato in 25 New Free High-Quality Fonts

Crimson Text
“Crimson Text is a font family for book production in the tradition of beautiful old-style typefaces. There are a lot of great free fonts around, but one kind is missing: those Garamond-inspired types with all the little niceties such as old-style figures, small caps, fleurons, math characters and the like. In fact, a lot of time is spent developing free knock-offs of ugly ‘standards’ like Times and Helvetica. Crimson Text is inspired by the fantastic work of people like Jan Tschichold, Robert Slimbach and Jonathan Hoefler. We hope that the free type community will one day be able to enjoy Crimson Text as a beautiful workhorse.�

Fonts-01 in 25 New Free High-Quality Fonts

Espinosa Nova: Regular (registration is required)
Espinosa Nova is a revival of the types used by Antonio de Espinosa, the most important Mexican printer of the 16th century and quite probably the first punch cutter anywhere on the American continent (1551). All of the fonts intended for setting text include small caps, five sets of figures (old-style and lining, both proportional and tabular, plus tabular small caps), many “f� and long “s� ligatures and a capital sharp “S� (U+1E9E). Designed by Cristóbal Henestrosa.

Espinosa in 25 New Free High-Quality Fonts

Letter-a in 25 New Free High-Quality Fonts

Color Lines
This decorative font can be used for a variety of products, such as posters, packaging and label design. Original and unique. Designed by Anton Gridz, and available in AI format.

Love in 25 New Free High-Quality Fonts

Love2 in 25 New Free High-Quality Fonts

Love3 in 25 New Free High-Quality Fonts

Baurete (free download)
A playful, intriguing typeface that could work for designs without rigid alignment or symmetrically positioned elements. Baurete is free to use for personal and commercial projects. If you want to use it, please contact the designers at [we {at} welab {dot} info]. You can download it for free.

Baurete1 in 25 New Free High-Quality Fonts

Baurete2 in 25 New Free High-Quality Fonts

Neuton Font
Neuton is a clean Times-Roman–like typeface by Brian Zick. In structure, it is a transitional type with Dutch inspiration. The x-height is high and the color dark, and it is economical in ascenders, descenders and width. Also available in the Google Font Directory.

Neutr1 in 25 New Free High-Quality Fonts

Neutr2 in 25 New Free High-Quality Fonts

Melbourne (personal use only)
Melbourne is a sans-serif with a strong modern presence. The designer’s intention was to create a calm space-saving typeface. The glyphs have rounded corners and relatively large tracking, which makes it a good fit for dictionaries, indexes, catalogues and so on. When used at a large size, Melbourne can be used as a display or headline font. The typeface is released as a draft, and suggestions for improvements are appreciated. Designed by Marco Müller.

Melbourne in 25 New Free High-Quality Fonts

Melb2 in 25 New Free High-Quality Fonts

ROKE1984
A free display font based on geometric forms and mathematical symbols, this one includes accents and numerals. An interesting option for technical designs that call for a distinctive yet slightly challenging appearance. Designed by Wete. Available in OpenType format.

Font in 25 New Free High-Quality Fonts

Geom1 in 25 New Free High-Quality Fonts

Geom2 in 25 New Free High-Quality Fonts

Classic Round: medium and italic (registration required)
This typeface was designed for text and display use. In small text sizes, the typeface looks clean, inviting and legible. When used in big display sizes, it looks playful and interesting. Designed by Ben Blom.

Fonts-a0 in 25 New Free High-Quality Fonts

Free Font FR Hopper: regular and italic (registration required)
FR Hopper is a sans based on geometric forms but still retaining a friendly personality. It is intended for mid-length texts, captions, titles and almost any other occasional use: posters, flyers and even websites. The typeface comes with 7 weights, 12 styles with 836 glyphs, and many advanced OT features such as small caps, discretionary ligatures, alternate characters, fractions, arrows and ornaments.

Hopper in 25 New Free High-Quality Fonts

Darth Vador Free Font
An original geometric font for the Darth Vador theme, designed by Juart Little from France.

Darth in 25 New Free High-Quality Fonts

Vador in 25 New Free High-Quality Fonts

League Script #1
“League Script #1 is a modern coquettish script font that sits somewhere between your high-school girlfriend’s love notes and handwritten letters from the ’20s. It includes ligatures and will serve as the framework for future script designs.” Designed by Haley Fiege and available in OpenType format.

League in 25 New Free High-Quality Fonts

Four Free Type
Free original and playful OpenType fonts available in two font weights, regular and italic. Supported languages are English and Russian only. Designed by Alexey Frolov.

Russian0 in 25 New Free High-Quality Fonts

Russian in 25 New Free High-Quality Fonts

Musa Ornata
This typeface, with its cheerful characters, could be a good fit for event announcements, grocery stores and public transport signage. To activate the alternative case, check the “Character Palette� in the OpenType options toolbar in your application. The download link is available at the bottom of the release post (above link). Designed by Carvente Dice.

Musa in 25 New Free High-Quality Fonts

Skyhook Mono: regular
This family is a carefully handcrafted monospaced typeface family that is modern, sturdy and minimalist, yet distinctive enough for refined and classy uses. The regular weight is available as a free download. The free weight may not be used in political or religious works.

Mono in 25 New Free High-Quality Fonts

Phoenica Std (personal use only, registration is required)
Phoenica offers an alternative to contemporary humanist sans serifs. It is a flexible family suitable for editorials and corporate branding. Phoenica comes in a big variety of weights, each available in both roman and italic. The regular width is available as a free download and for personal projects.

Phoenica in 25 New Free High-Quality Fonts

Indento: bold (registration required)
“Indento is a multi-purpose modern geometric slab serif for headlines, posters and branding, but legible enough to be used for longer text. The straight and rounded corners, combined with the deep cuts and asymmetric serifs, give it a distinctive look while still keeping its legibility.� The bold weight is available as a free download in OpenType format. Designed by Mugur Mihai.

Indento in 25 New Free High-Quality Fonts

Free Font Adec
This typeface was inspired by Art Deco and Constructivism. It would fit posters, magazines and logos. The distinguishing feature of this font is the combination of decorative elements, such as textures and frames. Designed by Serge Shi.

Adec-01 in 25 New Free High-Quality Fonts

Adec-02 in 25 New Free High-Quality Fonts

Jean-Luc (Godard) (via I Love Typography)
“Atelier Carvalho Bernau Design released Jean-Luc, a typeface inspired by the title cards of films like ‘Deux ou trois choses que je sais d’elle,’ to celebrate Jean-Luc Godard’s birthday. The style of lettering is so interesting to us because it is such a clear renunciation of the ‘pretty’ classical title screens that were common in that time’s more conservative films. It has a more vernacular and brutishly low-brow character; this lettering comes from the street.� To embed the font using @font-face, a copyright code must be appended as a comment in the source code.

Movies in 25 New Free High-Quality Fonts

Arvo Font Family
This slab-serif typeface was created by Anton Koovit especially for the Google Font directory. It is optimized for Web use. The typeface is “monolinear-ish� but has a touch of contrast. For Windows users, the smaller 9, 12, 14 and 16 point sizes are hinted in Truetype format.

Arvo in 25 New Free High-Quality Fonts

Thunderball
This heavy sans font with 178 characters could be useful for posters, postcards and similar designs. Released under a Creative Commons license.

Fontstruct in 25 New Free High-Quality Fonts

Spatha Sans
A sans-serif font with organic playful shapes that set a friendly tone and are easy to read. The font could be a good fit for titles and maybe short text. Designed by Carvente Dice.

Spatha-02 in 25 New Free High-Quality Fonts

Spatha Serif
As a counterpart to the above-mentioned Spatha Sans, the glyphs in Spatha Serif have classic proportions and short serifs, which retain the playful and organic design. The font can also be embedded using @font-face, but a credit link is required. Designed by Carvente Dice.

Serif in 25 New Free High-Quality Fonts

My Fair Cody
An interesting playful typeface that makes a an impression with its personality and warmth. The tone is inviting and informal, and as such might not be the best fit for a corporate context. Designed by Darim Kim, and available in OpenType format. You may use the font in your private and commercial projects; but if you embed it using @font-face, then a credit link is required.

Cody in 25 New Free High-Quality Fonts

Matchbook
Matchbook is a simple and functional set of two typefaces, designed in serif and sans-serif versions. Each set includes all accented characters and works beautifully in larger sizes.

Match1 in 25 New Free High-Quality Fonts

Match2 in 25 New Free High-Quality Fonts

Mota Pixel
Mota Pixel is a simple pixel font with simple roots. The regular weight was created as a custom design for TypeShow and is now available for free to the public. Optimized for use in 20-pixel increments, it is a larger than normal pixel design. Still, the regular is rather thin and delicate, expressing some tendencies of an upright italic.

Further Resources

  • Soma FontFriend
    FontFriend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.
  • Cure for the Common Webfont: Alternatives to Georgia
    For nearly fifteen years, if you wanted to set a paragraph of web text in a serif typeface, the only truly readable option was Georgia. But now we’re starting to see some valid alternatives for the king of screen serifs. What follows is a list of serif typefaces that have been tuned for the screen.
  • How to Detect Font-Smoothing Using JavaScript
    Some fonts look bad on computer monitors without font-smoothing enabled in the operating system. The author of this article initially thought there wasn’t a way, but after seeing a promising but incomplete method of detecting font-smoothing, he spent a few days devising a way to do it.
  • When Free Fonts Aren’t Free
    To ensure that you’re using “free” fonts as their creators intended, here are four things to look for when you’re scanning a EULA.
  • iOS Fonts
    An overview of font families available on iOS devices such as iPhone and iPad.
  • Free Typography
    A blog dedicated to free fonts.
  • Caligraffiti
    A Brazilian blog that features freely available fonts.

Also, you may want to take a look at…

Last Click

Adfont Calendar 2010
Here is Fontdeck’s typographic Advent calendar. Open the current day’s door and behind it you’ll find details of a great typeface, with a Web font offer available free for that day only. To use the offer, click “Purchase font licenses� in your Fontdeck settings before the day is over. Free subscription applies to websites with < 1 million page views per month.

Tanger2 in 25 New Free High-Quality Fonts

(al)


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,


Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Advertisement in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!
 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!  in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!  in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

The year has come to an end, and it has been a pretty eventful one. In particular, we’ve received so many more wallpapers than ever before: in total around 2,000 submissions. Only a few of them made it past our final selection to be published on Smashing Magazine. We express our sincere gratitude to all of the designers who took the time to design and submit their work for the contest. We truly appreciate and respect the hard work you guys have put into your art!

To encourage you, our dear readers, to submit your artwork next year as well (here are the details), we have decided to present you with some of the best desktop wallpapers from 2010. You can vote for your favorites, and we will award the top five with some useful, interesting design books. The winners will be determined by the number of “likes� they receive. And please feel free to visit the websites of the designers featured in this post!

(Update 20.12.2010: Congratulations to our Top Five: The Colours of October, Haiku on Hanami, Pink Morning, Splatter and Little April!)

The Colours of October

"Colourful autumn leaves." Designed by Anna-Lena Lewerenz from Germany.

October-10-autumn Leaves-nocal-1680x12001 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

1st place!

Haiku on Hanami

"And the wind says swish, swish…" Designed by April Joy E. Jasmin from the Philippines.

March-10-haiku-on-hanami-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

2nd place!

Pink Morning

"Some watercolor, inspiration and good mood!" Designed by Oxana Kostromina from Poland/Russia.

November-10-pink Morning 45-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

3rd place!

Splatter

"Inspired by an area of my painting studio." Designed by Stephanie Crisalli from USA.

April-10-splatter-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

4th place!

Little April

"In the spring I have a lot on my mind and no rest day." Designed by Anna Skibinska from Poland.

April-10-little-april-nocal-1600x1200 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

5th place!

New Year Inspiration

"Essential tools for the new year! Have a great year!" Designed by Phidev Inc. from USA.

January-10-new-year-inspiration-nocal-1920x1200 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Paper flower

"Colorful design made in illustrator and retouched in photoshop." Designed by Guillermo Mantilla from Mexico.

January-10-paper-flower-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Pizza and Wings

"Football season is coming to an end and March Madness is about to begin, carb up." Designed by Ashleigh Liggett from the United States.

February-10-pizza-and-wings-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Sairá

"This is a bird (Tangara desmaresti) from my contry, with the colour from ours symbols and flames." Designed by Romy Campos from Brazil.

Saira in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Valentine

"Happy Valentine’s Day." Designed by Dragos M from Romania.

February-10-valentine2-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Super Mario bros 1985

"My 25th anniversary tribute to Super Mario bros." Designed by Davide Vicariotto from Italy.

March-10-super-mario-bros-1985-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Unknown Beauty

"I’m a 21 year old student from the Netherlands. My school project was to make a wallpaper for this contest ^^So i did..Why the girl? this was my first vector and i wanted to show you all. Greetz, Jeroen van den Brand." Designed by Jeroen van den Brand from the Netherlands.

April-10-unknownbeauty-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Design Sleep Design

Designed by Krystian Kubicki from Poland.

April-10-design-sleep-design-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Spring Flower

"Shot with a 50mm lens. I love bokehs. And this flower was so springy I had to shoot it. Enjoy and Happy Easter!" Designed by Anca Varsandan from Romania.

April-10-spring-flower-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

The End of Explorer Calendar

"For friends of MSIE, here is “The End Of Explorer” may 2010 desktop wallaper calendar, in a Variety of resolutions from 320×480 (iPhone) to 2560×1600! Hope you’ll find some size here to fit with your desktop ;-)" Designed by Benoit Chartron from France.

May-10-end-of-explorer-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

May Happen, May Be

"”May Happen, May Be” is all about possibilities… we can all get out of our cages, maybe in may!" Designed by Thais Trizoli from Brazil.

May-10-may-happen-may-be-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Focus on Work

"This wallpaper design is supposed not to distract your attention, but to make you focus on work. This might work if you keep your desktop clean enough ;)" Designed by Andrei Verner from Russia.

May-10-focus-on-work-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Rapunzel

"A grunge take on Rapunzel!" Designed by Cindy Zhang from USA.

May-10-rapunzel-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Hockey

"With the Stanley Cup Finals this month, I thought it fitting to roll out a Hanson bros. wallpaper. If you haven’t seen Slapshot, see it. One of the greatest sports movies of all time." Designed by Dan Sweet from USA.

June-10-hockey-nocal-1920x1200 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

It wasn’t me

"Actually there no special meaning behind that wallpaper. :) I just had this idea of a cute monkey character and this is what came out of it. ;)" Designed by Nicole Bauer from Germany.

June-10-monkey-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

SummerTime

“Summertime and the livin’ is easy…” Designed by Osiris Magro from Spain.

July-10-summertime-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

Ribbons

“Just folding ribbons and watching their paths…” Designed by Thais Trizoli from Brazil.

July-10-ribbons-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

  • preview
  • without calendar: 320×480, 1280×800, 1440×900, 1680×1050, 1900×1200
  • Ducks Muffin Summer

    “Inspired on a story of two people who met on-line. A duck and a muffin.” Designed by Irene from Spain.

    July-10-ducks-muffin-summer-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

  • preview
  • without calendar: 1024×640, 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1200
  • Aves Lacuna

    Designed by Kyle Wheaton from Buffalo, NY, USA.

    August-10-aves-lacuna-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Superstar

    “Has “the man” got you down? Feel like nobody sees what a superstar you are? Well keep on shining all day long with this retro-tastic wallpaper!” Designed by Brennan Gilbert from USA.

    August-10-superstar-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Viktoria

    “A little wallpaper for all the Germany supporters during the World Cup.” Designed by Ricky Linn from USA.

    August-10-sports-viktoria-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Tension9

    "I made a 9 on the fence with nails and woolen to express the tension. It has come to the ninth month of 2010. Still working hardly and stressfully? Take it easy!" Designed by Ssu-Hua Chen from Australia.

    September-10-tension9-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Autumn Skyview

    "Laying on field watching the sky above, leaves are falling, autumn is coming." Designed by Jaro Mlkvy from Slovakia.

    September-10-autumn-skyview-nocal-1680x10501 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Autumn Paper

    "Autumn is the season that’s most calming to me. Perfect weather, an array of colors, and a great source of inspiration to designers." Designed by Bogdan Lazar from Romania.

    September-10-autumn-paper-nocal-1680x10501 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Love Birds

    "Celebrate love and be free. Happy September to everyone!" Designed by Martina Skender from Croatia/Israel.

    September-10-love Birds-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Liquifly

    Designed by Nicolle Marie from USA.

    October-10-liquifly-nocal-1680x10501 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Any Browser

    "I just wanna spread the message, “Use any browser, it doesn’t matter. But use the latest version!”." Designed by Minhaj Mohamed from Sri Lanka.

    Anybrowser in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    October 2010 Wallpaper

    "For October 2010, still with the summer in the head, I wanted to imagine a magic place where I can go sometimes far from work, far from the Earth." Designed by Benoit Chartron from France.

    October-10-wallpaper 99-nocal-1680x10501 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Symbian World

    "Scene from Symbian World." Designed by Anna Alfut from the UK.

    October-10-symbian World 61-nocal-1680x10501 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    The Words I’ve Never Said To You

    Designed by Matteo Palazzani – Palastar Photography from Italy.

    October-10-the-words-ive-never-said-nocal-1680x10501 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Rose Petal

    "Don’t underestimate the true beauty of a single dried rose petal…." Designed by Thuy Truong.

    November-10-rose Petal 44-nocal-1600x1200 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Flying

    "I’d like to fly away to warm countries for winter." Designed by Marta Miazek from Poland.

    November-10-flying 90-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    UX cake

    Designed by WitFlow from Poland.

    November-10-ux Cake 69-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    December 2010 Wallpaper

    “For December 2010, illustration of myself Wishing” Designed by Benoit Chartron from France.

    December-10-wallpaper 31-calendar-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Christmas Stuff

    “Some of the things that come to my mind when thinking of christmas..” Designed by Jaro Mlkvy from Slovakia.

    December-10-christmas Stuff 70-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Starleaves

    Designed by Fabio Toscani from Italy.

    December-10-starleaves 39-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Spider Web

    Designed by Mohd. Aaqib from India.

    December-10-spider Web 91-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Fun in the Snow

    “A girl and her friend, The Snowman, being silly in the first snow :) I love December. Happy Holidays, everyone!” Designed by Anca Varsandan from Romania.

    December-10-fun In The Snow 19-nocal-1680x1050 in Desktop Wallpaper Calendar 2010: Vote For Your Favorites!

    Thank you for your efforts and time everyone! We’re definitely looking forward to your wallpaper submissions in 2011! Happy Holidays and a Happy New Year!

    (vf) (ik)


    © Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
    Post tags: , ,


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress