BlogmyQuery – BMQ

Productivity is a crucial asset of professional Web designers and developers. We regularly look for new resources, tools and services to make the search of these ever-growing techniques easier. Once we have a reasonable number of useful resources, we prepare them in a handy overview for your convenience. In this post we present some of the useful resources and tools for designers and Web developers.

Please don’t hesitate to comment to this post and let us know how exactly you use these tools in your workflow. Please do avoid link dropping and share your insights and your experience instead. A big thank you to all designers and developers out there for releasing and producing useful, valuable resources for all of us to use. We sincerely appreciate it.

Useful Resources and Websites

Method & Craft
Describing itself as “the DVD extras of design,� this site offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers.

DesignersMX
This site is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Just sign up, log in and share your own compilation of fresh beats and bright tunes.

Little Big Details
This site features tiny details that help improve the user experience of websites and mobile apps. You can also share your favorite little things on the website. The collection is very useful — with more design examples submitted regularly.

Shady Characters
This blog, owned by Keith Houston, aims to shed light on the history of both well-known and outlandish marks of punctuation. It’s an interesting study in the stories behind the punctuation we use every day.

An Illustrated Guide
This project reviews some of the notable picture books. Guide’s authors, Catherine and Matthew Buchanan, have collected many of them from the last decade. The books are categorized according to cover art styles and reading level.

CV PARADE
This website celebrates the art of the résumé — a great collection of different and unique CVs that might be useful for you if you are about to polish your own CV.

Comic Sans Criminal
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to this site which lays out the reasons why Comic Sans is misused and offers some helpful alternatives.

Where Do You Want To Work Today?
A simple way for freelancers, contractors and other nomadic workers to check out some great places where they can work in a different environment for a change.

Node Cloud
NodeCloud is a resource directory gathering sites related to Node.js and ordering them by their Alexa traffic, allowing to evaluate relative popularity of a project.

WeekendHacker
This site provides a mailing list you can issue a cry for help for one of those tiny projects that cross your path — whether you’re a designer, developer, or both.

The Phraseology Project
Here you can submit a letter, word or phrase which is then turned into a beautiful design by the website’s founder, Drew Melton, or his colleagues.

Designers & Books
This projects presents short reviews of books that esteemed members of the design community identify as personally important, meaningful, and formative. Designers introduce one or more books that have influenced their ideas and values. You’ll also find members who have created must-read lists for different disciplines in design.

Quotevadis
Quotevadis is a Tumblog that offers quotes from creative and intelligent individuals from both past and present. An excellent replacement for the dusty old “about:blank” page in your browser.

Let’s Swap
In case you’ve had a particular artistic piece hanging around for a while, you could try swapping it with other artists for prints, books, zines, original artwork, tshirts, sculptures, or any other objects.

ideeeas
This project collects brainwaves from people who have brilliant, fancy ideas on any topic. There are posts with popular or useful social ideas that could make the world just a little better.

A Working Library
A great book cover definitely makes for a graceful entrance, but the thought of it disappears as you start reading the book. This website aims to explore the ways we read — without being overtly conscious of the cover design.

The Godfounder
A blog which showcases details that make Web apps successful, in particuliar little details that show designer’s attention to users’ needs.

FPO: For Print Only
A blog dedicated to both visual stimulus and detailing of the development and production of printed matter such as annual reports, books, business cards, stationery suites, collateral materials, posters, packaging and anything else where ink meets substrate.

What Software and Hardware Do Professionals Use?
A useful resource for people who love to keep discovering new tools. Browse these nerdy interviews and guaranteed, you will come across some new wonders, especially because every interviewee explains why they have chosen a particular tool.

Browser Details for Tech Support
When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser and sent directly to you via email or will be saved. The free service uses Flash but can also complete its task without it.

The UX Bookmark
A resource for HCI and human factors professionals, usability engineers, interaction designers as well as information architects. You can submit a link if you feel that it would benefit the UX Design Community.

Web Font Hosting Services Reviewed
A good overview of web font hosting services you can always look up when in doubt:

Android Patterns
Design patterns, which are basically reusable solutions for recurring problems, can be found in many design niches. Recently, they’ve also turned up in user interface designs for Android apps. Android Patterns publishes a comprehensive set of interaction patterns that can help you design Android apps.

Useful Tools, Libraries, Plugins

Rapid Prototyping with flickrBomb
flickrBomb is a jQuery plugin that helps you quickly fill your prototypes with relevant content, and not just dull gray placeholder images when making a website.

Unix Terminal/Console/Curses Tools
A nice list of 28 tools for the UNIX Terminal and Console. Some are little-known, some are just too useful to miss, some are pure obscure. You can use your operating system’s package manager to install most of them.

.htaccess tester
A very simple tool that lets you test your .htaccess rewrite rules. Simply fill in the URL that you’re applying the rules to, place the contents of your .htaccess on the larger input area and analyze if the rules are doing what they are supposed to do.

CSS Lint
CSS Lint is a useful tool to help you detect problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

Log.io
Here is a way how to perform real-time log monitoring in your browser. Harvesters watch log files for changes, send new log messages to the server, which broadcasts to Web clients. You can then create stream and history screens to view and search log messages.

Popuload for Adobe Photoshop
Rather than idly waiting for each processing task in Adobe Photoshop to finish, you can spend that time browsing the latest news feeds. Popuload has been programmed to detect when any Photoshop loading bar appears; it then appends to that loading bar window throughout the duration of the processing time.

Asciiflow: ASCII Flow Diagram Tool
A simple Web based ASCII flow diagram drawing tool which allows you to draw boxes, lines, arrows and type and then export it straight to text or HTML.

Microjs: Micro-Frameworks and Micro-Libraries
Microjs helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

Showoff
Demonstrating your ongoing projects could be a huge pain. In general, your best option is to upload the files to a server somewhere. You could prepare a video or send over a huge package of files or just .zip it somewhere on project collaboration website. But what if you just want to quickly show someone a project you’re working on without sending over the large files? This tool aims to solve this problem. If you’re looking for an alternative, you might want to consider LocalTunnel.

Meld
A visual diff and merge tool that lets you compare two or three files and edit them in place (diffs update dynamically). You can also compare two or three folders and launch file comparisons.

Convert Unix Time
A Unix timestamp (or epoch time) is the number of seconds that have elapsed since January 1, 1970 00:00 UTC. The mission of this site is to convert your timestamp into a human readable format and vice versa. You also might want to check out Epoch Converter.

Drush
This Drupal tool lets you install, download and uninstall modules and much more without even opening a Web browser.

Bones
A WordPress development theme that was created after years of editing and reusing the same template to develop custom sites. A nice, well organized boilerplate for developers of WordPress themes or designers using WordPress in their projects.

Fructose
Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks. Eventually, most of the Ruby standard library will be available to Fructose programs via libfructose.

loads.in
By simply entering the URL here, you can test how fast a webpage loads in a real browser from over 50 locations worldwide.

WriteMaps
WriteMaps is a Web application that allows you to create, edit, and share your sitemaps online.

Wirify
Wirify is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet also helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks.

Lorempixum
Hand-selecting and inserting placeholder images in a layout can be a hassle. This tool takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the “Placeholder Generator,” which lets you specify the size, category and color settings of the placeholder image.

f.lux
This tool makes your display adapt to the lighting of the room you are in, all the time. During sunset, your screen mimics room light, and in the morning the tint resembles sunrise and its natural light. Configuring f.lux is easy: simply tell the control panel what kind of lighting your office has and where you live. The rest is taken care of automatically. The free tool is available for Windows, Mac and Linux.

Solarized
Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones� and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles.

Useful Services

PayPal Fee Calculator
A PayPal ‘percentage fee’ is determined by which country you are registered in and how much you receive every month via PayPal. The PayPal ‘fixed fee’ is determined by which currency the payment is sent in. This calculator helps you keep an overview of fees as well as currency conversions.

courteous.ly
A helpful way of letting people know your real time email load and when sending mails works best for you.

ifttt (if this, then that)
This tool allows you to create simple “if then” actions based on common activities, and lets ifttt automate them. By triggering an email when the weather forecast predicts rain, this can help remind you to take your umbrella with you. The service is currently in private beta, but you can request an invite.

Unsubscribe.com
A fast way of unsubscribing from any mailing list by simply clicking on the emails you no longer wish to receive.

minutes.io: Take Notes Quickly and Easily
minutes.io lets you take notes in your browser even when you’re offline and waits until you’re online again so you can send and share with others right away.

Doodle: Easy Scheduling
A great way to mutually agree when to meet by simply creating a poll, inviting participants and cofirming the date and time. Free of charge and without registration.

Focus Booster
A simple and elegant application designed to help you eliminate the anxiety of time and enhance your focus and concentration.

Typography Insight iPad App
Typography Insight is an iPad application that introduces new methods for learning and teaching typefaces. The project stemmed from my love for typography and evolving mobile platforms

FontDeals
This service is like Groupon, but for fonts. Various font deals from various type foundries are offered at lower prices.

Last Click

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

Keyboard Shortcut Skins for Macs
For all of you out there who are shortcut lovers, here are some amazing custom-fitted color-coded keyboard skins that will help you fly through Photoshop, Aperture, Final Cut Pro, and many more.

Ro.me: Three Dreams of Black
“3 Dreams of Black” is an interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. This is why we &heart; the Web.

(vf) (il)

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: tools, Web Design

Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things.

Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

HTML and CSS Tools

HTML Email Boilerplate
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Initializr
This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator as well.

Layer Styles
A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.

Mobile Boilerplate
A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Kotatsu
A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker.

Zen Coding
Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code.

Vogue
This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.

LiveReload
LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.

css-x-fire
This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.

Ffffallback
A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.

LESS.app for Mac OS X
LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.

Less-Boilerplate
Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.

Needle v0.1a1
Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

inuit.css
A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.

Spritemapper
This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

CSSsitemap System
David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.

CSS Stress Testing and Performance Profiling
Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers.

Normalize.css
Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.

Holmes
The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.

CSS Crush
A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.

CSSPrefixer
CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.

iOS Media Query Previewer
A very simple tool to preview how a particular website looks on an iPhone as well as iPad.

CSS Pivot
Here you can add CSS styles to any website and share the result with a short, handy link.

PCSS
A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.

JavaScript Tools

Modernizr 2
Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk AteÅŸ and Alex Sexton.

yepnope.js
A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.

FitText
FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.

jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Plugin Boilerplate
This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.

ligature-js
This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.

Placeholder jQuery Plugin/Polyfill
This jQuery plugin provides support for the new placeholder="" HTML5 form attribute in browsers that don’t natively support it (IE et al).

StronglyTyped
A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.

Kaffeine
A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.

Crossroads.js
A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.

Doctor JS
Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:

HEAD.js
A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely.

Hivelogic
Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom.

JavaScript Garden
A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.

Syntaclet
By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.

Bookmarkleter
This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).

Bookmarklet Crunchinator
This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.

Grids

The JavaScript Grid
A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

Grid Calculator
A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.

GridCalc
This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.

Modular Grid Pattern
This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.

Susy
A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.

Griddle.it
A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Last Click

ASCII Pronunciation Rules for Programmers
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

From Me To You
No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On his photography blog, Jamir collects scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.

Related Articles

You might want to take a look at our previous related articles:

• Powerful New CSS Techniques and Tools (April 2011)
• Useful JavaScript and jQuery Tools, Libraries, Plugins (April 2011)
• CSS: Innovative Techniques and Practical Solutions (February 2011)
• Time-Saving and Educational Resources for Web Designers (January 2011)

(vf) (il)

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, HTML, JavaScript, libraries

In this post we are glad to present to you yet another freebie: a responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.

Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

• live demo
• large preview (.png, 1.5 Mb)
• download the package (2.2Mb, .zip)
• release on the developer’s site (with documentation in English and in German)
• Documentation PDF file (in English)
• Installation Video Tutorials

Features

The theme requires WordPress 3.1+ to run. It has following features:

• Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
• HTML5 (with fallback for IE < 9) and CSS3
• Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js by Scott Jehl or CSS3-Mediaqueries-js by Wouter van der Graaf to make it work in older versions of IE.)
• WordPress post formats (aside, gallery, image, video, link and quote)
• Theme options page, custom background, custom header image
• Optional sub menu
• A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
• Full-width page template
• Google Web fonts in use (Droid Sans and Droid Serif)
• Threaded comments with Gravatar support
• Shortcodes for multiple columns, info boxes in three colors and highlighted text
• Currently available in English, German and French.

Screenshots

Three-Column-Layout.

Two-Column-Layout.

One-Column-Layout.

Comments area.

Custom Header.

Post Format Gallery.

Theme Options.

Behind the Design

As always, here are some insights from the designers:

“Since the mobile Web is getting more and more popular every day, we think that it’s also time for WordPress themes to become more flexible and adapt to different devices and screen sizes. While designing the Yoko theme, our goal was to create a minimalistic design with focus on content and good readability on various devices. Also we wanted the theme to be easy to use and customizable for everybody, so we kept the theme options simple while still including the most important options to add a personal style to the theme.

The main problem to solve during the design and development process was to make sure that all the different contents and plugins that people will use still work in the responsive layout. Of course the responsive design approach is still in development but we think it’s a lot of fun to explore new possibilities and as doing so make Web design and WordPress themes more powerful and flexible to use.”

Thank you, Ellen and Manuel! We sincerely appreciate your work and your good intentions!

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Freebies, HTML5, WordPress

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.

We continue to nourish you with a monthly spoon of inspiration. This post features 30 free desktop wallpapers created by artists across the globe for June 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,
• 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?

Winding Ribbons

"What goes around comes around." Designed by Corporate 3 Design from USA.

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

Colourful Summer

"”Have a joyful summer filled with colours of fun.” An unique circle patterns of bright vivid colours to represent the fun of summer time,joyful holidays and happiness." Designed by Divya from United Kingdom.

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

Fancy Schmancy

Designed by Pietje Precies from The Netherlands.

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

June Gloom

"June Gloom on a California day." Designed by Brandi Kenney from USA.

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

In Love For Violet

Designed by Stylova.com from Poland.

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

Paradise Lost Island

"Paradise Lost Island With Vintage Texture ! Every desktop resolutions listed by smashing mag (from 640×480 to 2560Ч1600)." Designed by Benoit Chartron from France.

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

Abstract Bird

"Abstract art of parrot ready for welcome to rain." Designed by Chandrakant Bagade, Banglore. from India.

• preview
• with calendar: 320×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1400×1050
• without calendar: 320×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1400×1050

Monsoon

"June brings monsoon in India. Here people are very exited & wait for monsoon. So I decided to bring into attention, the joy of monsoon in Indian Subcontinent. The term was first used in English in British India (now India, Bangladesh and Pakistan) and neighbouring countries to refer to the big seasonal winds blowing from the Bay of Bengal and Arabian Sea in the southwest bringing heavy rainfall to the area." Designed by Jitendra Kushwaha from India.

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

Prevail

"The devastation in Japan as a result of the tsunami’s been enormous. As a tribute, I thought I’d create this piece." Designed by Umer Tahir from Canada.

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

Serenity

"I don’t know about you, but silence is truly a privilege for me. With so much activity, day in and day out, I really needed something to help keep my sanity on track. Looking at that glorious green grass just takes me away into the calm, and I hope this will do wonders for you too!" Designed by Daily Overview from Malaysia.

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

Poppy Summer

"Poppy flowers all around are announcing the upcoming Summer. A walk in a field of wheat call to mind smells and colors from the past." Designed by Ester Liquori from Italy.

• preview
• with calendar: 800×600, 1024×768, 1024×1024, 1280×720, 1280×960, 1280×1024, 1440×1080, 1600×1200
• without calendar: 800×600, 1024×768, 1024×1024, 1280×720, 1280×960, 1280×1024, 1440×1080, 1600×1200

Flowers

"Simple fresh calendar with flower design." Designed by Patrik Bartas from Slovakia.

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

Hirundo Tailcoat

"How did the swallow got its split tail? Estonians say that it laughed itself hard to split the tail." Designed by Olivia Osik from Estonia.

• preview
• with calendar: 1024×768, 1280×1024, 1440×900, 1600×1200, 1920×1200, 1920×1440
• without calendar: 1024×768, 1280×1024, 1440×900, 1600×1200, 1920×1200, 1920×1440

Dearest Daddykins

"Dads have always been pillars of support at home and working hard outside, all just to provide comfort to their families. Here is a tribute to my dad, who always waits up for me no matter how late I return home, and always making sure that the apple of his eye has more than enough in every way. Happy Daddykins’ Day." Designed by Melissa Chew from Singapore.

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

Ella Eh? Eh? Eh?

"Umbrellas & Rain, Grey Background, with June Calendar." Designed by Cary Apel from USA.

• preview
• with calendar: 320×480, 1280×800, 1280×1024, 1680×1050, 2560×1440
• without calendar: 320×480, 1280×800, 1280×1024, 1680×1050, 2560×1440

Be The Best Of Whatever You Are

"A wonderful poem about being the best at whatever you do. I hope you enjoy the inspirational words of wisdom that this poetry (Douglas Malloch) has to offer. Happy june from Italy." Designed by Maurizio Malagoli from Italy.

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

Old No.7

Designed by Vinteum from Brazil.

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

Colorful June

"Summer is coming and we are surrounded by vivid colors." Designed by Simona Gosu from Romania.

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

Summer Solstice In Stonehenge

"Every June 21st, people gather in Stonehenge to celebrate to Summer Solstice and the longest day of the year. So, if you’re in the area, go and celebrate, and if not, just download the wallpaper and enjoy the coming summer." Designed by Ron Gilad from Israel.

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

Fishing Pirate

"Summer it’s good time for fishing." Designed by Cheloveche.ru from Russia.

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

Free Sheeping

"I’ve got this idea when i was shopping on eBay and i decided to sketch first and then illustrate it." Designed by Almog Shemesh from Israel.

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

Butterfly

Designed by Marc Thiele from Germany.

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

Sunrising

Designed by Marián Čepa from Slovakia.

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

Evening Beach

"Photo taken at a beach in Lithuania." Designed by Jasmina B. from Estonia.

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

Hello_world

"Funny Alien Illustration created by Nickolay Stanev." Designed by Nickolay_stanev from Bulgaria.

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

Apple June

Designed by Anatoly Moskaltsov from Russia.

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

Join In Next Month!

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

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

What’s Your Favourite?

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

(il) (vf)

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

Today, we are glad to present a new freebie: a beautiful theme, designed by Vlad and Elena Scanteie which was developed exclusively for Smashing Magazine and its readers. As usual, the theme is free to use in both private and commercial projects. The theme is based upon the Twenty Ten WordPress theme and requires WordPress 3.0 to run.

Visit the demo or a large view.

The upper area contains a slider where you can place extra emphasis on your most important pages. The main area can include the content of your latest blog posts. On the right side you’ll find an overview of latest blog entries as well as the latest tweets.

The upper area of the sidebar features five latest comments. You can place any widget under it as it is defined as a dynamic sidebar. Also, right above the footer you’ll find a Flickr gallery in case you wish to showcase your latest shots. The footer itself is designed in a pronounced blue, giving it a nice contrast to the rest of the design. There you you can place your≈ widgets such as Pages, Categories, Archives, and others. A soft upper area, a useful middle area, and a strong footer are the essence of this theme.

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

• live demo
• large preview (.png, 0,23 Mb)
• download Splendio (Theme + Plugins) (zip, 0.8 Mb)
• download Splendio (Theme + Plugins + PSD Sources) (zip, 6.4 Mb)
• download mirror (zip, 6.4 Mb)
• release on the developer’s site

Screenshots

The footer area.

Main content area.

The comments area.

Behind the Design

As always, here are some insights from the designer:

“Releasing a theme on Smashing Magazine is always a challenge for us at DesignDisease. A challenge we look forward to. ‘Splendio’ is a theme where we try to solve the empty space that exists around most themes with a joyful rhythm of lines and squares, complimented with a light color palette. The specialized header images complete the package, as it can be used both in a static or randomized manner.”

Thank you, Vlad and Elena! We sincerely appreciate your work and your good intentions.

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Freebies, themes, WordPress