I like to take inspiration from things right in front of me or around me and wallpapers tend to give me that. The wallpapers I use tend to match the weather a lot, I’m sure a lot of us do that. With autumn coming up which I find the most inspiring season of them all I picked at least 7 dark themes wallpapers. A few colored ones for those who rather have a cheerful desktop and a few simplistic ones.

You will notice many of these links contain more versions of the wallpapers, or entire different wallpapers design. Some of the designers also provide resolution for the iPhone or other mobile phones. I fitted both my phones with wallpapers and even my LCD TV when I switch it to my computer. This will guarantee creativeness all around.

A side note; Doesn’t the wallpaper ‘Love of Black Sands’ totally remind you of the beach scene in ‘Inception’?

Hand-Crafted Wood Texture

Desktop

Ultraviolet

Aurora Burst

Inkblot

Upside Down

Blue Paper Robot

My Bokeh

Mushrooms

Gnome

Love of Black Sand

Ugmonk Splash

Ugmonk Lowercase

One Cloud in the Sky

Wheathump

Designs of the Week

It’s interesting how even the background is a strong black and white graphic.

Lots of other trends here: folded ribbons, subtle noise texture, and centered logo. Note how the social buttons and feed subscriber count come before the navigation; guess that’s what’s more important on this site!

Just as simple and minimal as the color palette.

Love the hanger icon on the current navigation item, and the feather in the drop-down menu.

Yellow as accent for black and white designs start here. And are you for or against sidebars?

Screenshots and product shots are getting bigger and bigger. I vaguely remember them occupying one-third of the page but now it’s half.

I like how light and playful this looks, including the irregular pattern in the background, and the recurring circles.

Great breathing space between everything.

It’s so clever how when you hover over the a navigation item at the top, it also affects the navigation at the bottom (not pictured). Also note how the browser frame in the portfolio carousel is abstracted and black.

The amount of gradients here is a little strong but I think it works. Perhaps it’s just the text in the lower half that could be improved.

A little bit of alignment issue but as usual I love the whitespace.

Still not a big fan of the noise texture trend but it’s slowly warming up to me. Here it looks warm and fuzzy!

The post navigation here is a wonderful idea, but the arrows could be a little more obvious and closer to the center post.

What a nice idea to put the slideshow on the top right across vertical navigation, and place your name big front and center. Memorable branding.

I love how the nut on the logo repeats on the ticket icon.

The video area doesn’t really work for me but everything else looks nice.

More and more I’m seeing a layout divided in halves instead of in thirds.

The design is compelling although as a website design, not so much. I would have loved to see more.

The mix of patterns and the interactions feels nice, but I don’t understand why you have to hover twice to navigation: first to make the designer name appear, then to make the menu appear.

Big, bold, but still clean and easy to read.

Social Media Weekly

Accessibility How do we save longdesc?
“The longdesc attribute, although potentially useful, was removed from the HTML5 specification, despite recommendations to retain it from the HTML Accessibility Task Force.”

Usability – DarkPatterns.org
“This pattern library is dedicated to Dark Patterns: user interfaces that have been designed to trick users into doing things they wouldn’t otherwise have done.”

Usability You’re a failure: Deal with it
“Every website has points of failure. It is inevitable. The question is do you know what they are and are you doing something about them?”

CSS – CSS3 Playground by Mike Plate
WYSIWYG CSS3 code generator.

JavaScript – PaintbrushJS
“A lightweight browser-based image processing library”

For a change I decided to look around what other plug-ins there are out there that are almost never mentioned and I came across more than two that I will be using on my own WordPress install. Especially wp Time Machine and Simple SEO are plug-ins I can’t believe I didn’t know about.

Check out these 10 plug-ins for different purposes.

postMash – custom post order

Organize the order of your posts using a handy AJAX drag and drop admin interface. Handy if you use WordPress more like a CMS then for content publishing only.

Pretty Link

Your own URL shorten-er with your domain address. Easily hide affiliate links and keep track of amounts of clicks, where users click from and other details. There is also a pro version.

wp Time Machine

Create a back-up of your WordPress:

• Your data (from your WordPress MySQL database)
• Your files (and Uploads) — everything in wp-content
• Your .htaccess file
• Instructions for a smooth recovery
• A shell script that can help automate recovery — though this is still a “work in progress”

and store them on your DropBox account, Amazon AWS S3 or on another server using FTP. You need to have PHP5 to use Amazon and DropBox. A cheaper alternative then VaultPress if you can’t afford the latter.

Shortcode Exec PHP

An admin interface to create and manage your shortcodes.

SEO Data Transporter

Transfer your plug-ins and SEO data from theme to theme and plug-in to plug-in.

Supported Themes

• Builder
• Frugal
• Genesis
• Headway
• Hybrid
• Thesis
• WooFramework

Supported Plug-ins

• All in One SEO
• Headspace2
• Platinum SEO

MailChimp Archives

Display your past MailChimp newsletters on your site using a shortcode.

Facebook Likes it!

A simple plug-in to add Facebook like button, fully customizable. It’s a modified version of Like plug-in by Bottomless.

Breadcrumb NavXT

Custom location breadcrumbs.

Easy Verification

Verify your website with Google, Bing and Yahoo! without going through the hassle of FTP and file editing. Just fill out your verification code and the plug-in will generate the correct meta tags.

Simple SEO

Add a custom page and menu title to your pages for usability or SEO purposes. This plug-in is perfect if you don’t need the whole SEO she bang or use WordPress as CMS for a low key website.

Designs of the Week

Great grungy attitude all over, even the shiny buttons have a bit of smudge on them. Nice little detail: I like how the carousel’s right arrow changes into a square block to indicate there are no images left to view.

Love the easy feel from the pastels, gradients, rounded corners, and happy illustrations. The “add your company building” feature is also a great concept for the purpose of this website.

Bold and high contrast. Even the borders and background patterns are rugged and chunky.

The animated stack of books is really clever, and clicking loads a page where the books is opened.

Love the non-rectangular frame for the carousel—I’m seeing more of these lately. Body text is a little to small though.

The open, airy header area looks great. This is also a rare gem of a liquid layout.

Interesting fisheye (a.k.a. OS X dock) hover effect on the navigation, though I can see not-so-seamless texture tiling!

I like how all the clickables are so big yet still look minimal and refined. It’s all in the type and colors, right?

Great treatment on the contact form and the image frames. Textures all over!

I seem to have a lot of grungy designs this week, and I’m not complaining! Love the way the sections are divided, with blocky headers and thick borders of stars.

Spacing needs a little work in the featured images area, but the header navigation animations are adorable. This site is so warm and friendly.

Good idea to use the neightborhood skyline as a divider for the different sections in this one-page site. Although I think the black background is a big disconnect from the light blue one at the top.

Not a fan of the lens flare, and the featured image could have been a slideshow/carousel instead.

Lovely animations, and I like the way the skyline is in a corner instead occupying the whole width of the screen.

I wish the quirkiness of the header illustration and logo carried over to the rest of the design.

Beautiful, beautiful illustrations of the Moscow skyline. The scrollbar navigation for the image works well too. I wish they were a little more interactive though, with tooltips or links. And hooray for another liquid layout.

The header canopy is a nifty touch to the header design. Love the mix of patterns too.

Social Media Weekly

Design – Perception and the design of forms – Part 4: Figure/ground
“In this article we are going to explain the principle of figure/ground, which is surprisingly central to how forms work. More often than not this principle is—unintentionally—applied well. But we’ll also show you a few examples of when it isn’t.”

Programming – Semantics and sensibility
“For a while now, sensible naming conventions and semantics have been confused.”

Mobile – HOW TO: Make Your Mobile Websites Act More Like Native Apps
“Fortunately, a number of different frameworks are making it easier and easier for developers to create mobile web applications that look and feel more like native apps. Here are six examples.”

When used with the right effects, think lightening, gradient, etc., photoshop brushes are a very
easy way to enhance your design. If you are not a ‘rock star’ designer Photoshop attributes like brushes and vectors can help you come a long way with your design.

Brushes like watercolors and splatters give a lot of freedom in your design. See wonderful websites done with watercolor effects. How you implement brushes in your design can make or break the design.

I selected 20 different brushes ranging from watercolors to splatters, ornaments, grunge, bokeh to hand drawn. Hopefully these will get you inspired and help you to create wonderful designs.

Glow Brushes

Watercolor II

Watercolor Brushes Vol. 1

Baroque Ornaments

Fresh Foliage

Splatter Paint Brushes

Splatter Brush

Vector-Grunge Brushes

Descent Brush

Worn Lines

Revnart Smoke Brushes

12 High Resolution Grunge Brushes

Grunge 30

Halftone Three

Halftone

Bokeh Brushes

High Resolution Moldy Paper Brushes

6 Bokeh Brushes

21 Hand Drawn Brushes

High Resolution Clouds Brushes

Designs of the Week

When doing vines on a sky background, it doesn’t make much sense to have drop shadows, does it?

The gradient on the tabs are a little severe but the translucent ones look great. I kind of want more blue in the background though, feels too white.

The use of fixed-width type is curious, but I like the mixed textures. The actual photo of a basket for a shopping cart icon is priceless.

The Quick Search box looks a little cramped; the Map Search could be more accessible.

Some nice watercolor textures here although again the shadows get to me. A little bit of a split layout going on below.

The subtly moving leaves (and the squirrel’s tail) look great—they barely call attention to themselves so when you do notice them, they’re a nice treat. Attention to detail everywhere.

I like how the leaves are behind the large sign up button.

Something more ornate and abstract. I feel a disconnect between the gray-black top and the brown bottom, though.

Another disconnect here. The header is awesome—there’s a bear! carrying a sign!—but the bottom is just too light and doesn’t even carry any hint of nature in it.

Beautiful design. Not sure what a music player is doing on a dentist site, but perhaps they thought it would be a fun little touch.

The flowers look so pretty I they weren’t just in the background. The turquoise is a nice contrast to the floral hues of pink and peach.

I like how the leaves are used as frames for the circular icons here.

Love the purple and fuchsia, it even matches the club photo on the front page. Centered logo alert!

Make sure your eyes are well-rested before you view this site; every color of the rainbow seems to be on here. The content area could have used at least a translucent background to make the text more readable, which is already so small.

Social Media Weekly

UX – Designing with Paper Prototyping
“The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Evaluators record and analyze the results from these sessions, which are then used to create another prototype.”

Accessibility – Misguided accessibility: access keys
“These days, accessibility experts recommend strongly against the use of access keys, instead putting focus on accessibility enhancers such as “skip-to” links and clear navigation and layout, fully tested with assistive technologies like screen-readers.”

Accessibility – What should be the minimum / maximum length of alternate text?
“Putting undue length restrictions on alternate text can undermine the quality of alternate text, limit the amount of information conveyed to readers, and can affect the style of writing in a way that inhibits comprehension.”

Usability – Shlock and Awe: Little Things on Your Website that Drive People Nuts
“No website will ever be perfect (unfortunately), but we’ve compiled a list of little tweaks and changes you can check on your website to make sure you’re not irritating your visitors.”

JavaScript – Commonly Confused Bits Of jQuery
“jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.”

Shortcodes are handy for features you want to use in your posts but not in all of them. Plug-ins usually are standard applied on all your posts. With shortcodes you get to be selective and it saves some typing.

I listed 7 plus shortcodes that comes in handy in your daily or not so daily posting routine. The last shortcode, StumbleUpon, is provided by me. A very simple shortcode that can be easily modified for use with other social media links.

Display Google Ad Sense anywhere in your posts

Replace the Javascript with your own Google Ad Sense Javascript.

Source

Show Members Only Content

Visitors

Members

Source

Add private notes to your WordPress blog posts

Notes will be displayed in

making it easier to style them in your stylesheet. Off course you can change the HTML in function sc_note to your own liking.

Source

Protect an email address from spam

*Not 100% foolproof

Mail is shown as email@email.com
in the source.

Source

Display a Flickr badge in your posts

*Requieres PHP5

Source

Display your own Flickrbadge

Change the parameters in the Javascript; count=6&display=latest&size=s&layout=h&source=user&user=xxxxxx or use the Flickr Badge generator and choose HTML badge.

Dynamic permalinks

The advantage of using a ‘dynamic’ permalink is that you are not using a relative link to other page or posts. This way of you change the title of a post or page later on the links will still work as they are dependent on the id not on the slug.

Source

Add Stumble or other social media buttons

Using this shortcode example of StumbleUpon you can create your own buttons for different social media such as Reddit, Facebook, Delicious, etc.

This is very handy if you do not want to use a social media plugin that automatically adds buttons to all your posts. If you rather be selective with promoting your content using different social media per post then this shortcode is the solution.

Designs of the Week

Sometimes your product doesn't have to be presented in a MacBook, Cinema Display, iPhone, or Safari screen. You can just nudge it to the side of your layout and it will still make quite the impact. The bright shades of blue also help, and bonus points if that's actually a jab at that "41 shades of blue" incident at Google.

I like everything going on this page. I find it interesting that there are at least four different typefaces used in this design, but blends in nicely. Also check out how the contents of the sidebar change by page.

I enjoy the generous serving of whitespace and the very subtle watermarks slash section dividers.

Great treatment on the video thumbnails and makes me wonder why not more people are doing it. Big chunky text, arrows, and buttons for a forceful first impression.

I love how simple this looks, something atypical of technology-focused sites. Brilliant icons, strong grid.

Pretty generic looking, but I like two things here: first, the actual use of tweed; second, the tooltip action on the photographic background.

The photo wall is neat, and so is the folded motif sprinkled around the site. The green "sidebar" behaves like a deconstructed box---get it?

Using cyan and magenta together is like asking for trouble, but I don't mind it here. This site is trying to be as eyecatching as possible, and it's using bold fonts, bold hues. I like that you can see swatches of the site's color scheme spill over to the hand-drawn illustrations in each section.

Social Media Weekly

User Experience - Pagination, a thing of the past?

JavaScript - Showing Off bit.ly Clicks of Your Posts With jQuery

Programming - Will the Real Browser Stats Please Stand Up?

The use of canvas still needs to take off, right now it is still in a 'trial' stage due to browsers limitation and lack of wide resource of code and tutorials. Canvas is in its childhood but growing up fast.

If you like animation, games and a good coding challenge check out these canvas demos and experiments to get some inspiration and learn how to code your own.

Asteroids - HTML 5 Canvas and JavaScript demo

A highly addicting game now in your browser without Flash. In my case there was no loading time or lag whatsoever. I had to make myself stop playing to keep working on this list.

Molecule Rotation

If you are interested in science, medication and molecules this is one cool canvas animation. The work that must have gone into this, not only the coding but the actual data.

3D landscape on HTML5 Canvas

Remembers me of the matrix, the colors and flow.

HTML5 Canvas and Audio Expression

Try viewing it with your browser on full screen mode.

Blob

Right click changes the blob and colors, a nice experiment.

Colorful Tracking and Circles

According to the maker this one started as a tracking experiment, this gives you an idea of what all is possible.

HTML5 Kaleidoscope Experiment

The title says it all. A full screen version with auto play would be wonderful.

Visualization

This one totally reminded me of when Winamp was popular, I loved the visualizations that came with it.

Browser Ball

The most simple and inventive yet, bounce the ball in between browser windows.

Mesmerizer

Reacts on mouse gestures and keyboard input.

These examples can be very intimidating but they show the full potential of canvas. Four your own website or web app canvas can be useful for a progress indication, a content loading spinner, etc. Like I said before the resources(books, code, tutorials) are still slim but growing fast.

Designs of the Week

Love all the patterns and pastels.

Nice torn effect on the navigation and echoed throughout the rest of the site. I also like the subtle adjectives in the background.

There's some weird layering going on when you scroll up and down, but I like the impact of this look.

The text length in the inner pages is too wide, and the script feels a bit much. Still, I like the textures and the old style illustrations.

I like the curved header navigation coupled with an ornate background pattern. The boxes of text are nicely framed, and the buttons are equally elegant.

Interesting idea to put all the beer labels as a collage for the header. There's also a bit of a split design going on, and the use of curly braces as arrows.

Not-too-distracting animations above the logo in the footer, and not-too-overwhelming use of wood including menu items and buttons.

I find the "featuring" slideshow highly effective. The use of red, on the other hand, may need more tints and shades. What I really like is the glowing hover effect especially in the three boxes below the slideshow---simple idea but it works.

Two things that grab me: seamlessly elegant carousel of featured pianos, and the use of piano strings in the background as a stylized sunburst effect.

I wish for a little more polish on the RSS and collapse/expand buttons, but I like the openness of this layout.

It's great that the wood texture isn't your typical bright brown but one that actually fits the theme of the site. The form elements in the booking box is excellent.

I really love the stylized buttons in the header navigation, and I wish it were applied to every other button on the site. Old style illustrations also used here, but what's great with this site is that it explains (in a collapsible area) what the they symbolize.

I think the wood could be a little lighter to distinguish the red on the logo, but overall this site has an excellent design from typography to illustrations to form elements.

Using a wave pattern as divider is both whimsical and smart. I love the splashy sea photograph background in the footer navigation.

Subtly textured, clean, yet feels perky.

Nice gradient on the main blurb, which breaks the blockiness of the text and gives an ethereal effect. The floating folded paper background on the video, which is an echo from the logo, is a nice touch too.

Social Media Weekly

Accessibility - Ten Common Accessibility Problems
"This document outlines ten common accessibility issues I have encountered which could result in a site’s failure to fully comply with WCAG 2.0. The document includes links to some of the WCAG 2 advisory Sufficient Techniques provided by the W3C for addressing each issue."

Design - Create Stunning 3D Text Free With SketchUp
"Today I’ll teach you how to create some awesome 3D text using only Photoshop and a free app from Google."

Design - Tips for Designing for Colorblind Users
"We’ll take a look at what colorblindness really means and how you can tweak your designs based on a few simple principles."

CSS - Start Experimenting With CSS3 Keyframe Animations
"For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in."

Programming -

Once FireFox and Internet Explorer have finally catch up with WebKit developers and designers will finally have more options to serve data and graphics. Here there are 10 exceptional animations and graphics done with CSS3 mainly and some with jQuery added. All of them are best viewed in Chrome and Safari, only the Star Wars animation is Safari 5 only.

My favorite one is the Dribble infographic, which really shows how CSS3 can best be used for data display supported with CSS3 graphics. Of course the use of image files is not totally ruled out but the largest parts are code based.

While this is all great in showing the power of CSS3 I can imagine it takes a lot of hours to create something like this, while just using Photoshop is a lot faster. But take advantage of these pioneers who take hours to create great things from CSS3 and learn from their code. It will only help us all to improve and create better websites.

Opera Logo

Creating a logo from CSS3 only makes scaling possible, plus point for usability.

Dribble Infographic

Infographics are popular, like them or not they are the best way to show data without boring your readers.

Space

Add a few planets and it will make a great educational website.

Pure CSS Coke Can

Loads much faster then a Flash animation.

Pure CSS 3D Meninas

jQuery DJ Hero

A Colorful Clock with CSS & jQuery

Star Wars a New Beginning

Matrix

AT-AT Walker

Designs of the Week

Let's start with the poster child of this week's collection. A little too busy for me, perhaps the other columns that aren't at the center of the page can be faded out? I do like the vertical approach here though, as the header becomes the leftmost sidebar.

For a design like this, you always need to pay attention to what you're publishing. Here everything blends in nicely and looks like a happy quilt!

Love the horizontal and vertical scrolling, which makes total sense for a grid-based design like this. The experience feels great and makes you want to browse more stuff.

Disappointingly unusable site---it uses one big image map---but I like the concept.

Looking at this site quickly, it looks okay, but eventually you'll have to wonder why the boxes aren't lined up properly. I know that it's a trend to let the floating behavior determine where they'll land, but in some ways it feels lazy as well.

Better example. The stark black and white plus the bold titles make for a striking look, no doubt.

I like this fairly colorful look as well as the controls for filtering the content, although I'm not happy with the "myster meat" collection of boxes beside it. Of course the footer provides a more useful version of that.

Interface imitation is a growing trend, and here it's still pretty subtle but memorable (click on the "slant" box, you get a marching ants effect, then of course the blinking cursor). Love the navigation effect.

One of the most peculiar implementations I've seen; the images appear only on hover, using pretty dated JavaScript techniques.

I like the use of primary (and secondary) colors for a "designy" feel. But this one doesn't know how to use semantic HTML either.

I like the boxes and circles used all over, although I wish the sidebars were a little less distracting from the main content area.

I had a pleasant time browsing this site; it looks warmly welcoming and elegant.

Very nifty concept!

Boxy designs don't just mean you have to put content in boxes, follow the grid rhythm, be done with it. See how this site played with its logo and the placement of its text and photos.

Love the use of the browser's full width and height.

Really elegant looking, and I admire the fact that even the menus are typed out in HTML even when they could have just used a full image.

Social Media Weekly

JavaScript - JavaScript Minification Part II
"This article emphasizes what you should do to take advantage of YUI Compressor’s best feature for minification: local variable name replacement."

JavaScript - Say No to noscript
"Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content."

CSS - Bulletproof CSS3 media queries
"I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers."