For best results, set the texture layer to Soft Light, Overlay, Multiply or Screen, depending on the look you want to get. You might also want mask some parts of the texture where you don’t want it to take effect. You can also use these textures as backgrounds for your design work, or to add a unique texture to your design or typography. 

The pack contains 25 .jpg textures at 5000 by 5000px saved at 300ppi. The textures are compatible with all photo editors that support layers (Photoshop, Photoshop Elements, GIMP, Pixelmator etc.), both PC and Mac.

These textures are for both personal and commercial use. See the full preview after the jump… Enjoy!

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive exclusive deals from MightyDeals.com and monthly/weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented.

The Ultimate Mobile Design Resource Bundle – only $29!

Substantially fewer sites are hosting on WordPress.com — Automattic’s free, hosted solution for WordPress blogs — but it’s still a very dominant player.

Whilst the codebase behind WordPress.com is updated everyday, with bug fixes, performance enhancements and feature tweaks, the appearance of the dashboard has, until now, remained largely unchanged for some time.

The redesign of WordPress.com’s dashboard that was announced in April and previewed this week is a superb revision. There are a number of significant changes, and all of them are an improvement on the old version.

The biggest change is that the new WordPress.com dashboard is flat-design; not an extremist flat-design — there are a few drop shadows and pseudo-drop shadows here and there — the new dashboard is an evolved version of flat-design, a grown up version.

The change in color scheme from the dull all over grey of the previous version is the most notable change, and it works really well to create a greater sense of hierarchy. I particularly like the orange notifications that leap out at you.

The new design isn’t yet responsive, but that will be added in the coming months to allow blog owners easier access on the go. (If you’d like to trial the responsive dashboard you can enable it by ticking “Enable experimental responsive design” in your personal settings.)

As well as completely redrawn icons, the new dashboard has a change of typeface: Open Sans, designed by Steve Matteson, is available free via Google Fonts if you like the way it looks.

The new dashboard design is a fantastic revision, the increased contrast, improved hierarchy and cleaner type make the site more usable, all while retaining a familiarity for users of WordPress.com. I only hope a similar update is pushed to WordPress.org users as soon as possible.

What do you think of the new WordPress.com dashboard? Was the grey on black type a mistake? Let us know in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

Realtime web technologies make it really easy to add live content to previously static web pages. Live content can bring a page alive, retain users and remove the need for them to refresh the page periodically. Realtime updates are generally achieved by connecting to a source of data, subscribing to the data you want to add to the page and then updating the page as the data arrives. But why can’t this be achieved through simply marking up a page to identify what data should be shown and where? Well, maybe it can!

jQuery’s tagline is write less, do more. The tagline for the jQuery Realtime plugin that we’re going to build in this tutorial will be write less, do realtime.

In this tutorial we’ll create a jQuery plugin that makes it really easy to add realtime content to a page by simply adding some markup. First, we’ll cover how to use a service called Pusher to subscribe to realtime data. Then we’ll define a way of marking up an HTML5 document with ‘data-*’ attributes in a way which can then be queried by our realtime jQuery plugin and converted to realtime data subscriptions. Finally, we’ll create the jQuery plugin which will use the attributes to subscribe to data and instantly display updates within the page.

If you just want to dive straight in you can view a demo in action or you can download the code and start hacking.

Pusher basics

Pusher is a hosted service that makes it easy to add realtime content and interactive experiences to web and mobile apps. Here we’re going to simply connect, subscribe to some data and then update a page when the data comes in.

To demonstrate this create a file called ‘example.html’ and include the Pusher JavaScript library from the Pusher CDN. We know we’re going to use jQuery 2.0.0 so we should also include that now:<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>Creating a realtime jQuery plugin | Webdesigner Depot</title>
</head>
<body>
<script src="http://js.pusher.com/2.0/pusher.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>

Connect

Once the Pusher JavaScript library has been included we can connect to Pusher by creating a new ‘Pusher’ instance and passing in an application key. Create an additional ‘<script>’ tag beneath the jQuery include as follows:

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Creating a realtime jQuery plugin | Webdesigner Depot</title>
 </head>
 <body>
 <script src="http://js.pusher.com/2.0/pusher.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script>
 ( function( $ ) {
 
 var pusher = new Pusher( '7b9f9ade2135118a915b' );
 
 } )( jQuery );
 </script>
 </body>
 </html>

Note: For the tutorial we’ll use an application key that I’ve provided but for your own applications you’ll need to sign up to Pusher to get your own.

You can check that you’re connected in three different ways. You can do it manually by checking the Pusher Debug Console, if you load the page with the Pusher Debug Console open you’ll see the connection logged. The Pusher JavaScript library provides a log property that you can assign a function to and then you can manually check to make sure a connection has been established by inspecting the browser’s JavaScript console. Or you can check the connection programmatically by monitoring the connection state of the Pusher instance.

The Pusher Debug console

Whatever you choose to do, you’ll now be connected.

Subscribe

Pusher uses the Publish & Subscribe pattern, so to receive data from Pusher you first need to subscribe to it. Pusher uses the term channels when it comes to subscriptions, so let’s subscribe to a channel called ‘test-channel’.

<script> ( function( $ ) {
 var pusher = new Pusher( '7b9f9ade2135118a915b' );
 var channel = pusher.subscribe( 'test-channel' );
} )( jQuery );
</script>

As with connection state, you can check the status of a subscription in a few ways; using the Pusher Debug Console, by checking the output from ‘Pusher.log’ or by binding to the ‘pusher:subscription_succeeded’ event.

Using Pusher.log to log pusher-js library information

Bind to events

Those of you who use jQuery will probably be familiar with the idea of binding to events. jQuery does provide shortcuts for some events (e.g. ‘.onclick( <function> )’) but you can also bind to events using ‘.bind(<type>, <function>)’. Pusher follows this convention and you can bind to events to be informed when something updates; when the connection state changes, when a subscription succeeds or when new application data is received. For this example, and with the realtime plugin, we’re interested primarily in the latter.

Let’s bind to a ‘test-event’ on the channel:

<script>
 ( function( $ ) {
 
 var pusher = new Pusher( '7b9f9ade2135118a915b' );
 var channel = pusher.subscribe( 'test-channel' );
 channel.bind( 'test-event', handleEvent );
 
 function handleEvent( data ) {
 console.log( 'in handleEvent:' );
 console.log( data );
 }
 
 } )( jQuery );
 </script>

When binding to an event you simply identify the event by name and pass in a reference to a function that will be called when that event occurs (is triggered) on the channel.

If you have a Pusher account you can test that the ‘handleEvent’ function is called by using the Pusher Event Creator; enter ‘test-channel’ as the channel name, ‘test-event’ as the event name and some data (‘{ “some” : “data” }’) into the event data text area and click the submit button. You’ll then see the debug information, along with the data you entered, logged to the JavaScript console.

Triggering an event from the Pusher Event Creator and logging it in the JavaScript console

Since the realtime jQuery plugin that we’re building doesn’t publish (trigger) data (it just consumes it) we won’t cover that here. But if you’re interested in finding out more checkout the Pusher server docs.

Displaying realtime updates

The next thing to consider is displaying the realtime data updates to the user.

For this we’ll need an idea for a simple application; having worked in finance for a few years I’m generally keen to avoid any type of financial example, but Bitcoin has made it interesting and relevant. So, let’s create a very simple display for showing Bitcoin prices.

Note: We’re going to use some fake data. Let’s make sure this doesn’t result in more Bitcoin panic selling!

First, let’s create some HTML where we’ll display the realtime prices. We can pre-populate the display with prices known at the time the page was loaded:

<h1>Bitcoin Fake Prices</h1>
<table id="bitcoin_prices">
<thead>
<tr>
<th>
</th>
<th>Last</th>
<th>Low</th>
<th>High</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>BTC/USD</td>
<td>61.157 USD</td>
<td>51 USD</td>
<td>95.713 USD</td>
<td>66271 BTC / 4734629 USD</td>
</tr>
</tbody>
</table>

Let’s update the JavaScript to subscribe to a more appropriately named channel called ‘btc-usd’ and bind to a ‘new-price’ event:

<script>
( function( $ ) {
var pusher = new Pusher( '7b9f9ade2135118a915b' );
var channel = pusher.subscribe( 'btc-usd' );
channel.bind( 'new-price', handleEvent );
function handleEvent( data ) {
}
} )( jQuery );
</script>

The ‘data’ sent to the ‘handleEvent’ function should also be in a more appropriate format – here’s the JSON:

{
"last": "last value",
"low": "low value",
"high": "high value",
"volume": "volume value"
}

Now that we know this we can change the ‘handleEvent’ function to update the appropriate cell in the table:

function handleEvent( data ) {
var cells = $( '#bitcoin_prices tbody tr td' );
cells.eq( 1 ).text( data.last );
cells.eq( 2 ).text( data.low );
cells.eq( 3 ).text( data.high );
cells.eq( 4 ).text( data.volume ); 
}

If you now trigger a ‘new-price’ event on the ‘btc-usd’ channel, using the JSON we defined, the page will update to show the new values.

There are ways of both making this code nicer and, as the page grows to show more data, optimise things. But, we’re going to make it so that realtime data will be added to the page simply by applying markup.

Before we progress, let’s first add a bit of styling to the example. In the ‘<head>’ add the following CSS:

<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#bitcoin_prices {
border-spacing: 0;
}
#bitcoin_prices thead {
background-color: gray;
}
#bitcoin_prices tbody tr:nth-child(odd) {
background-color: #fff;
}
#bitcoin_prices tbody tr:nth-child(even) {
background-color: #ccc;
}
#bitcoin_prices tbody tr td:nth-child(1) {
background-color: yellow;
}
#bitcoin_prices td {
padding: 4px 10px;
}
</style>

As you can undoubtedly tell, I’m no designer. So please feel free to improve on this.

The “styled” Bitcoin Fake Prices application

Finally, restructure things so we’re set up for building the plugin.

1. Create an ‘examples’ directory and within it a ‘bitcoin’ directory.
2. Move the ‘example.html’ file to ‘examples/bitcoin’, rename it ‘index.html’.
3. Create a ‘src’ directory at the top-level of the project.

The directory structure should now look as follows:

/
examples/
bitcoin/
index.html
src/

We’re now ready to define our realtime markup and build the realtime jQuery plugin.

Realtime markup

The first thing to highlight is that this isn’t a new idea — I worked for a company called Caplin Systems and in 2001 they had a technology known as RTML that let you markup a page so that realtime updates could be applied. The purpose here is to use jQuery to parse the page and then interpret the markup, resulting in subscriptions, event binding and ultimately live content being added to the page.

For our plugin we’ll use HTML5′s data-* attributes. These attributes don’t directly affect the layout or presentation of the page so they’re a great choice for our realtime markup.

The questions we now need to answer about the markup are:

• Where do we put the Pusher application key?
• How do we identify what channels should be subscribed to?
• How do we identify the events that should be bound to on a channel?
• How do we know what data to display in the page, and where?

The first one is relatively easy. Since we need to include our plugin JavaScript file we can add a ‘data-rt-key’ attribute to the ‘<script>’ element for the plugin include and make the value our application key.

Channel subscriptions can be identified by a ‘data-rt-channel’ attribute. This will mean that the element that the attribute is on and all children are related to this subscription.

Event binding can be achieved using a ‘data-rt-event’ attribute where the element with the attribute, and all children are related to this event.

The values to be extracted from the event data can be indicated by a ‘data-rt-value’ attribute.

Putting this all together, update the Fake Bitcoin Prices markup to look as follows:

<h1>Bitcoin Fake Prices</h1>
<table id="bitcoin_prices">
<thead>
<tr>
<th></th>
<th>Last</th>
<th>Low</th>
<th>High</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr data-rt-channel="btc-usd"
data-rt-event="new-price">
<td>BTC/USD</td>
<td data-rt-value="last">61.157 USD</td>
<td data-rt-value="low">51 USD</td>
<td data-rt-value="high">95.713 USD</td>
<td data-rt-value="volume">66271 BTC / 4734629 USD</td>
</tr>
</tbody>
</table>
<script src="path/to/jquery.realtime.js"
data-rt-key="7b9f9ade2135118a915b"></script>

So, from the script tag you can see we’re going to connect to Pusher using the key identified by ‘data-rt-key’. We’re going to subscribe to the ‘btc-usd’ channel and bind to the ‘new-price’ event. When an event is received we’re going to update the appropriate table cell based on the value indicated by ‘data-rt-value’; if the value of the attribute is ‘last’ then the value of the ‘last’ property is taken from the received ‘data’ object and displayed in the cell.

Hopefully what we are trying to achieve is now pretty clear. Let’s start looking at how to create a jQuery plugin.

jQuery plugin basics

The jQuery plugin creation docs are pretty good so I won’t go into the details here. We’ll simply concentrate on building the functionality that we need in our plugin.

Before we write any code we should consider how we want to use the plugin. The normal way a plugin functions is that you use jQuery to query the page, and then you execute the plugin functionality against the matched elements.

$( 'a' ).toggle();

The above code would find all ‘<a>’ elements and then execute the ‘toggle()’ functionality on them — probably hiding all anchors, so not the most useful example you’ll ever see.

So, let’s say we would want to use the plugin as follows:

<script>
$( function() {
$( '#bitcoin_prices' ).realtime();
} );
</script>

Let’s look at creating the expected functionality.

A realtime plugin

First, create a ‘realtime.jquery.js’ file within the ‘src’ directory. This file will contain the plugin functionality. Then add the following to the file as the starting point of our plugin:

( function( $) {
$.fn.realtime = function() {
console.log( 'realtime!' );
console.log( $( this ).html() );
};
}( jQuery ) );

We can even test this out now. In ‘examples/bitcoin/index.html’ remove the example plugin ‘<script>’ tag and find the one below the jQuery include and replace it with a ‘<script>’ tag which includes the new ‘realtime.jquery.js’ file (don’t forget the ‘data-rt-key’ attribute) and a script block which executes the ‘realtime()’ plugin on the ‘bitcoin_prices’ table:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../jquery.realtime.js"
data-rt-key="7b9f9ade2135118a915b"></script>
<script>
$( function() {
$( '#bitcoin_prices' ).realtime();
} );
</script>

If you refresh the page now you’ll see ‘realtime!’ logged to the JavaScript console along with the HTML from the ‘<table>’ element. This is great as it means the plugin is working; we’re successfully executing our plugin functionality on the table identified by the selector we passed in to jQuery.

jQuery plugins and 3rd party libraries

Our realtime plugin relies on a 3rd party library — the Pusher JavaScript library. For the moment we have it included statically within our HTML, but we don’t want to make that a requirement to use the plugin. So, let’s dynamically load it. jQuery provides a way of easily doing this in the form of the ‘.getScript()’ function.

So, let’s load version 2.0 of the Pusher JavaScript library. We’ll load the HTTPS hosted version so that browsers are happy if our plugin is used on a page served over HTTPS (Chrome already blocks attempts to load HTTP hosted scripts in HTTPS pages and Firefox will do in Firefox 23). I’m going to wrap loading the library in a function as follows:

var libraryLoaded = false;
function loadPusher() {
$.getScript( "https://d3dy5gmtp8yhk7.cloudfront.net/2.0/pusher.min.js" )
.done( pusherLoaded )
.fail( function( jqxhr, settings, exception ) {
console.log( 'oh oh! ' + exception );
} );
}
function pusherLoaded( script, textStatus ) {
libraryLoaded = true;
console.log( 'pusher.min.js loaded: ' + textStatus ); 
}
loadPusher();

If you reload the page the ‘pusher.min.js loaded: success’ message will be logged to the console.

As we’re developing it’s always good to have a way of logging information so at this point let’s create a simple ‘log’ function that we can use which just logs to the console. We’ll use this now and also use it for logging Pusher events. The full source of the plugin is now:

( function( $ ) {
function log( msg ) {
console.log( msg );
}
var libraryLoaded = false;
function loadPusher() {
$.getScript( "https://d3dy5gmtp8yhk7.cloudfront.net/2.0/pusher.min.js" )
.done( pusherLoaded )
.fail( function( jqxhr, settings, exception ) {
log( 'oh oh! ' + exception );
} );
}
function pusherLoaded( script, textStatus ) {
libraryLoaded = true;
Pusher.log = log;
log( 'pusher.min.js loaded: ' + textStatus ); 
}
$.fn.realtime = function() {
log( 'realtime!' );
log( $( this ).html() );
};
loadPusher();
}( jQuery ) );

You’ll also notice that we’ve assigned the ‘log’ function to the ‘Pusher.log’ property. This means we can see the internal Pusher library logging as well as our own.

When should we connect?

Due to the asynchronous nature of loading the library we can’t guarantee that it will have loaded when our plugin is called into action. Unfortunately this makes things a bit more complex than is ideal but we’ll try to solve it in as simple a way as possible.

We need to check to see if the library has loaded — hence the ‘libraryLoaded’ flag — and act appropriately; if the library has loaded we can connect, if it hasn’t we need to queue the execution until it does. Because of this it makes more sense to only create the Pusher instance when we really need it, which is when we actually want to subscribe to data.

Let’s look at how we can do that:

var pending = [];
function pusherLoaded( script, textStatus ) {
libraryLoaded = true;
while( pending.length !== 0 ) {
var els = pending.shift();
subscribe( els );
}
}
function subscribe( els ) {
}
$.fn.realtime = function() {
var els = this;
if( libraryLoaded ) {
subscribe( els );
}
else {
pending.push( els );
}
};

When the plugin is called we check the ‘libraryLoaded’ flag to see if the Pusher JavaScript library has been loaded. If it has we’re good to go and we can subscribe. If it’s still pending then we need to queue up the subscriptions. We do this by pushing the jQuery collection (‘els’) onto a ‘pending’ array.

Now, connect

Now that we know that the Pusher JavaScript library has loaded and that the page wants to subscribe to data we can create our ‘Pusher’ instance. Because we only want one ‘Pusher’ instance per page we’re going to follow the Singleton pattern and have a ‘getPusher()’:

var pusher;
function getPusher() {
if( pusher === undefined ) {
var pluginScriptTag = $("script[src$='jquery.realtime.js']");
var appKey = pluginScriptTag.attr("data-rt-key");
pusher = new Pusher( appKey );
}
return pusher;
}

This function grabs the plugin script tag by looking for a tag with a ‘src’ attribute that ends with ‘jquery.realtime.js’, and then gets the value of the ‘data-rt-key’ attribute. It then creates a new ‘Pusher’ instance, passing in the key. As discussed earlier, creating a new ‘Pusher’ instance results in a connection to the source of our data being established.

Subscribe

We can now use the ‘getPusher()’ function anytime we want to access the ‘Pusher’ instance. In our case we want to use it when we parse the elements to determine subscriptions.

Update the placeholder ‘subscribe’ function and add the additional functions shown below:

function subscribe( els ) {
var channelEls = els.find( "*[data-rt-channel]" );
log( 'found ' + channelEls.size() + ' channels' );
channelEls.each( subscribeChannel );
}
function subscribeChannel( index, el ) {
el = $( el );
var pusher = getPusher();
var channelName = el.attr( 'data-rt-channel' );
var channel = pusher.subscribe( channelName );
}
function find( els, selector ) {
var topLevelEls = els.filter( selector );
var childEls = els.find( selector );
return topLevelEls.add( childEls );
}

The ‘find’ function is a utility function to get any elements from an existing collection that match a given selector using ‘.filter()’, along with any descendants of the elements using ‘.find()’. We use this function to find any elements marked up to represent channel subscriptions (‘data-rt-channel’ attribute) and for each we then call ‘subscribeChannel’. This function extracts the name of the channel to be subscribed to and uses the value in calling ‘pusher.subscribe( channelName )’ to actually subscribe to the channel.

Bind

We then need to find any elements marked up to represent events (‘data-rt-event’ attribute) to be bound to:

function subscribeChannel( index, el ) {
el = $( el );
var pusher = getPusher();
var channelName = el.attr( 'data-rt-channel' );
var channel = pusher.subscribe( channelName );
var eventEls = find( el, '*[data-rt-event]' );
log( 'found ' + eventEls.size() + ' events' );
eventEls.each( function( i, el) {
bind( el, channel );
} );
}
function bind( el, channel ) {
el = $( el );
var eventName = el.attr( 'data-rt-event' );
channel.bind( eventName, function( data ) {
displayUpdate( el, data );
} );
}
function displayUpdate( el, data ) {
}

For each event element we find call our own ‘bind’ function which binds to the event on the channel using ‘channel.bind( eventName, eventHandler )’. The event handler function is a small closure which allows us to pass the data update, when received, and the event element to a ‘displayUpdate’ function.

If we run this now we can see from the logging that a connection is being established, we’re finding one channel and subscribing to it, and finding one event to bind to.

jQuery realtime markup finding channel subscription and event binding

Display the update

When the event handler is called we need to find the name of each property on the ‘data’ object (e.g. last, low, high and volume) sent with the update and find any elements that are marked with that name.

function bind( el, channel ) {
el = $( el );
var eventName = el.attr( 'data-rt-event' );
channel.bind( eventName, function( data ) {
displayUpdate( el, data );
} );
}
function displayUpdate( el, data ) {
for( var propName in data ) {
var value = data[ propName ];
var updateEls = find( el, '*[data-rt-value="' + propName + '"]' );
log( 'found ' + updateEls.size() + ' "' + propName + '" elements to update' );
updateEls.text( value );
}
}

We loop over the ‘data’ object and get the name of each property. Once we know the property name (‘propName’) we can find the associated elements and update their text value with the new data value. For now we’re not going to support objects with any kind of hierarchy — we just want one level of key and value pairs.

If you now refresh the page and trigger an event from the Pusher Event Creator the new data will be instantly displayed within the page.

Have you worked with a live data service? What lessons did you learn? Let us know in the comments.

Featured image/thumbnail, live data image via Shutterstock.

The Ultimate Mobile Design Resource Bundle – only $29!

You see movement out of the corner of your eye and glance over at the stop’s integrated advertising. And there you are, being Photoshopped into an ad, in real time.

How would you react? The people in this video from Adobe all had positive reactions, ranging from disbelief to laughter, when they found themselves in that very position.

To promote its Creative Days events, Adobe camped out in a van across from a bus stop in Finland (or Sweden, reports differ), photographed people using a telephoto lens, and then Photoshopped them into an ad at the bus stop where they were waiting. Hidden cameras around the bus stop caught their reactions, which were edited into a compelling promotional video, seen here.

Artwork included a man turned into a Hulk-like monster terrorizing a city, a young man and woman manipulated to look like they were kissing on the top of a wedding cake (from the looks on their faces, the two likely didn’t know each other before ending up in this position), and a woman seated atop a polar bear. The execution was incredible considering the setup and the fact that these were all done very quickly, in less time than it took for the next bus to arrive. The artist, Erik Johansson, shows some excellent Photoshop savvy in this prank.

The Creative Days events themselves are held all over Europe and South Africa, throughout May and June. There are 14 Creative Days total, all dedicated to creativity and expressiveness.

Did you or will you attend any of the Creative Days events? What did you think of the live Photoshopping prank? Let us know in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Premailer

Premailer is an online pre-flight app for HTML email creation. Just paste in your URL or source, add a query string to append to links, and add options (like removing unused IDs, comments, or classes), and submit.

Pixa

Pixa is a $30 Mac app that makes it easy to organize your images into collections. It helps you quickly find and share your pictures, and works with a ton of different image formats, including psd, ai, svg, raw, and many others.

Codifferous

Codifferous helps you review code faster and more effectively. It tracks how much you’ve reviewed within the source code, and even lets you mark whether each line is accepted or rejected. Public projects are free, while private projects will eventually require a small fee.

Ladda

Ladda is a UI concept that merges loading indicators into your submit buttons, so that your users aren’t left wondering whether clicking submit actually did anything.

Stocksy

Stocksy is a stock photo service that offers high-quality, royalty-free photos that are unlike most stock photos and exclusive to Stocksy. Photos start at just $10.

Tourist.js

Tourist.js makes it simple to create guided tours of your app. It includes hooks for things like opening windows or menus, or for waiting for a user to complete certain tasks.

TODC Bootstrap

TODC Bootstrap is a Google-style theme for Twitter Bootstrap that’s packed with features like a 12-column responsive grid, tons of components, JavaScript plugins, form controls, and typography.

Videry

Videry is a curated collection of videos for web designers. There are videos on a variety of topics featured, including CSS, innovation, psychology in design, typography, and much more.

UI Icons

This set of UI Icons comes with 704 minimalist, monochrome icons in the premium version (there’s a free version with a more limited set, too). They’re all delivered in PSD, AI, EPS, and SVG format, ready to use.

Pure

Pure is a set of responsive CSS modules that you can use in all of your website and app projects. It includes modules for grids, forms, buttons, tables, menus, and more.

Bounce

Bounce lets you integrate Dribbble into your design programs, so you can stay up to date on what’s happening without ever leaving Photoshop, Illustrator, InDesign, or Fireworks.

430+ Free Storyboard Illustrations

This collection of 430+ Free Storyboard Illustrations is free for you to use for your personal projects (it’s not made to be used in final production projects). It includes a vector file, as well as a PNG file.

SketchMine

SketchMine is a collection of sketch files from the design community. Sketches are categorized by OS, device, icons, mockups, and more.

Guifff

Guifff is a collection of animated GIFs from Dribbble. There are tons of awesome shots included here, all with permalinks to their respective Dribbble pages.

Red Pen

Red Pen makes it super fast and easy to get feedback from your clients or team members. Just drag your design onto the upload area, share the short URL you’re provided with, and get live, annotated feedback. And there’s no logging in, project management, or other useless features.

Designers Complaining

Designers Complaining is an awesome Tumblr blog that catalogs complaints from designers from across the web. Most recently has been a huge number of complains about iOS 7.

Roon

Roon is a super simple blogging platform that’s cross-platform compatible. It removes 99% of the distractions that come along with blogging, leaving you free to focus on your content.

React

React is a JavaScript library for building great UIs. It uses a declarative paradigm for easier reasoning, computes the minimal number of changes necessary to keep your DOM up to date, and will work with the libraries and frameworks you’re already using.

Flatdoc

Need a website for documenting your open source project? Flatdoc is here to help. It lets you create a website fast, using Markdown.

Breakouts

Breakouts is a selection of JavaScript game engines demonstrating the classic game Breakout, to help you choose which engine is best for your project.

Explore. Create. Repeat.

Explore. Create. Repeat. is an online weekly magazine for the creative community, to inspire and offer insight. You can subscribe by email or read it online.

Popular UIs

Popular UIs is a collection of popular website user interface PSDs you can download. These are, of course, recreated for educational purposes only.

Unsplash

Unsplash is a new Tumblr blog offering hi-resolutions photos for your website or other creative projects. They add ten new copyright-free photos every 10 days.

Projecteo

Projecteo is a tiny Instagram projector that works with photo wheels, each holding nine of your Instagram photos. The project is less than $26, and the wheels are each under $9.

Colourcode

Colourcode is a color scheme design tool that lets you select a color by hovering over the page, and then choose a standard color scheme pattern using the slide-out menu.

Six UX

Six UX is a collection of six second UX videos for inspiration. You can browse depending on what type of UI effect you’re looking for, including animation, transition, CSS, iOS, navigation, and more.

Prepros

Prepros is an app for compiling a variety of languages, including Less, Sass, Scss, Coffeescript, Haml, Markdown, and more. It’s available as a Chrome Extension or a Windows application.

TemplateGen Beta

The TemplateGen Beta script is a Photoshop script for starting your projects with better templates. You can easily create a new document that includes things like grids, OS X Icon squares, iOS Icons roundrects, and even create your own templates.

CSS Modal

CSS Modal lets you create modal windows entirely with pure CSS, with added JavaScript for extra flare. It’s optimized for mobile use, and can be used as a Sass plugin.

Wri.pe

Wri.pe is a smart web notepad that you can sign into with Facebook. It includes shortcut keys and Markdown support, is available on any device, backs up to the cloud, and includes calendar-based organization.

Klinic Slab (name your price)

Klinic Slab is a slab serif font in four weights (plus italics). It’s a contemporary workhorse that has both personality and functionality.

Albert Sans & Serif (free – $15)

Albert Sans & Serif is a type family that includes both a slab serif and a sans serif font. It’s modern and a little bit funky, but still highly legible.

Engine (free)

Engine is a free handwritten font with a playful personality. It comes in regular and italic.

Chomp (free)

Chomp is a playful, fun typeface with a brush script quality. It comes with uppercase characters, numbers, and punctuation.

Gin ($45)

Gin is a vintage display typeface that comes in eight styles and weights. It’s reminiscent of old serif fonts and classic bottles of whiskey and gin.

Lunch Box ($24)

Lunch Box is a unique, handdrawn typeface with infinite customizable options. It also comes with a custom set of small caps, each with four style variations, and stylistic alternatives.

Percival Script (free – $3)

Percival Script is currently a teaser for a script that will be released at a later date. It’s downloadable as an EPS file right now, but the full release version will include a sans version, capitals, numerals, and more.

Operator ($6)

Operator is a slim display typeface that’s great as a headline font. It includes 175 glyphs and comes as both a desktop and web font.

Font Awesome 3.2.0 (free)

Font Awesome 3.2.0 has a number of new features, including 58 new icons, pixel perfection at 14px (Bootstrap’s default size), and more.

Yuma ($10)

Yuma is an experimental typeface inspired by Navajo textiles with strong geometric patterns.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

The Ultimate Mobile Design Resource Bundle – only $29!

You should always quantify the advice you take based on who’s giving it to you, and The Secret Handshake — set up by Bright Bright Great — offers advice from some hugely successful industry names, as well professionals who’ve looked through thousands of job applications.

The advice is filterable based on résumés, application processes and organizing your portfolio. There’s also a series of events, although to date these have mostly taken place in Bright Bright Great’s backyard of Chicago.

With advice like this, any would-be designer would be wise to spend some time browsing the site. And if you’re already established, why not try contributing some of your own experience? 

Do you disagree with any of this advice? What advice would you contribute? Let us know in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

When I was first introduced to graphic design, I was extremely young and a member of a pretty popular message board. Posters showed respect for other members by presenting them with these things called “sigs” — they were little rectangular graphics that fit in the reserved area for a person’s signature. If you’re familiar with message boards and forums, you know exactly what I mean. If not, it was just an image that showed up at the bottom of someone’s message. This wasn’t an exclusive concept for these message boards, as many did use this feature.

Back then, I downloaded either Adobe Photoshop 4 or 5 (it was so long ago, I can’t recall the version). I went to work and eventually taught myself how to do many of the things these other designers were doing.

The designs we made were elaborate and colorful. They were fantastical and made people feel like they were mystical creatures hidden by the cloud of reality. These sigs were nothing but decoration and the more fun you had, the more the receiving member loved it.

This is now

Fast forward to now and if I showed you all some of the graphics I made during this time, you’d critique me harshly and probably continue by laughing at some of the choices I made. I would (and have) too.

We’ve strayed away from formerly learned concepts and there’s two reasons why: 1) Design doesn’t rest upon the favor of decorations and unnecessary aesthetics and 2) It’s just not cool anymore. 

Times change and trends do as well. In 2013, what we seem to value is flat design.

As we progress, so do our trends and our taste in creative things. That’s an understandable concept, but it’s gotten to the point where we just don’t do lots of designing at all. We don’t rarely make any of our design elements design heavy, even when they can be tasteful. We tend to opt for the flat, minimalist look. But when is enough enough?

Predictability and creativity

Lots of us preach creativity and urge others to think outside the box. I’m one of those people, but every so often it seems like we forget this concept and create graphics that are the norm or that are the trend. Sure, some of the things we do now just happen to work, but where’s the creativity? Isn’t there a way to use a trend but make it work for a certain person or brand. Have we become a little too predictable?

A while back, I touched on the idea that minimalism could be killing creativity after I saw redesigns for USA Today and eBay logos. There are obviously standards in design, whether it be logo design or web design, but everything seems to be so…regular. These logos weren’t bad logos, but there were very simple and the rest of the branding seemed to fall into that category. There wasn’t much character (especially with eBay) or style and I’m pretty sure I could open Photoshop or Illustrator now and make exact replicas of these two logos.

It seems that we’ve decided that the cleaner our graphics are, then the better they are. And this makes some sense — we are designing now for people to use things. The less clutter it has, the easier it is to use, but there’s a very fine line between simple and plain. There’s certainly an air of beauty that comes from simplicity, but we’ve got to do a better job of learning when that’s necessary and when that’s not.

Again, I like to think of the eBay logo as a prime example. The former logo stood for fun, but that idea has kind of been taken away. Simplicity is not just stripping the character of an element, but about taking away what doesn’t need to be there, it’s a very fine line. But distinguishing the line shouldn’t be rocket science. What needs to be there and what doesn’t? Not just from an aesthetics point of view but also from a branding point of view as well.

What we do with Photoshop

Adobe Photoshop is still the standard for web design. If you think about this, it’s somewhat baffling because Photoshop was created to be an image editing application for photographers. As we continue to make it the go-to app for everything else, Adobe expands our capabilities and what we can actually create with Photoshop.

Unlike any other programs in Creative Cloud, Photoshop really allows you to do some extremely creative things. We can change and add the lighting in a photograph, add motion and different types of blurs, create glowing edges, warp shapes and so much more. It’s great for graphical elements as well as light and heavy adjustments to photographs. You can literally create a new world and new feel just by messing with images and filters in Photoshop.

All these filters and all this ability to be extremely creative in Photoshop (and other programs), begs the question of why or why don’t we utilize these effects more? Why are we so fond of solid color backgrounds and flat design? Why don’t we create these new worlds for our audiences when they visit us online? Why don’t we do more creatively?

Images and excuses

It’s common to keep our designs fairly simple in print because not all printers and all colors are created equal. We try to control this with Pantone colors, but even still, bad things can happen after you ship a job off to print. This is a concept many who are familiar with print design are familiar with and understand: don’t do a lot of gradients, fine details or crazy colors in print because you may end up very disappointed when your print is in your hand. It seems as if this mentality has crept into our website designs.

We know what Photoshop is capable of. And we know we can see the fine details, wonderous gradients, blurs and bright colors online. All screens aren’t created equal (thanks to developments in retina screens and the like) but there’s a standard that makes so many things viewable, so what’s the excuse?

Many will point to image loading times as more complex designs will typically load slower than usual. And this is definitely the most valid concern, but there are various solutions. In Photoshop, we’re able to splice large images and put them together with code. We can also find different ways and formats to save images so they don’t take as long. There are hacks in web development that help sites load faster and so many other solutions to help out.

Another excuse is the ease of converting a flat design into a responsive site; but whoever said that easy was good?

When are we going to get back to being a bit more creative?

We are minimalist

We’ve been there before, that one website that has so much going on you don’t know where to go or what to do. But that’s not what needs to come back. No one is saying you have to design every piece of your web site, but perhaps create a more intricate background or other elements for your design.

Making everything so clean and simple is nice and it works many times. But we have to think of different ways to be creative and to utilize all the capabilities possible in our applications to really bring forth our creativity.

We aren’t artists, but we are designers, and it’s truly okay to design a little more.

Has the pursuit of flat design stifled our creativity? Is minimalism dull? Let us know your thoughts in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

25 Websites with Scrollspy Navigation for Your Inspiration http://depot.ly/m24d5  Which one’s your favorite?

What Leap Motion And Google Glass Mean For Future User Experience – http://depot.ly/m1V4d  via @smashingmag

Whoa! Madness! http://depot.ly/m1KCN  Creepy illustrations of ‘The Shining’ featuring ‘Toy Story’ characters by @kylelambert

For Yahoo users http://depot.ly/m1Kce  Yahoo Plans to Recycle Inactive User Names

Mobile Marketing Isn’t About Screens or Devices, It’s About Behavior http://depot.ly/m1K8O

“What Are You Using?” is a question some cool developers answered here: http://depot.ly/lZgGo  /@nettuts @scott_gonzalez

‘Jony Ive Redesigns Things’ – a Tumblr that pokes fun at Apple’s iOS 7 http://depot.ly/lZg89

Deconstructing the Mountains of TRON http://depot.ly/lX7wM  Legacy with Joel LeLièvre

Ruby tutorial for absolute beginners from @ElatedDotCom – http://depot.ly/lX792

The rise of Apple’s Craig Federighi http://depot.ly/lX6Zh  via @verge

Four brilliant ways to handle client changes you don’t want to make http://depot.ly/lUs7Y

5 Ideas Apple Gleefully Stole From Google, Twitter, And Microsoft http://depot.ly/lUruj

 Using CSS attr and content for Tooltips http://depot.ly/lUrrW

WordPress hacks and snippets to efficiently reduce spam http://depot.ly/lUrqd

Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study http://depot.ly/lUr4Y  /@smashingmag

Adobe releases Photoshop Lightroom 5. Check out the new features: http://depot.ly/lUqV3  via @CreativeBloq

 In case you’re bored of Dropbox, here are 10 alternatives http://depot.ly/lRUuf

 What’s great art doing in these ugly rooms? http://depot.ly/lRUom

Brilliant! The lives of 10 famous painters, visualized as minimalist infographic biographies http://depot.ly/lRRnE

YouTube Mobile vs YouTube on Your TV and the Impact of TrueView http://depot.ly/lRPIW  *Nice read

 Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

The Ultimate Mobile Design Resource Bundle – only $29!

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

A slow death

Nothing but love

Rear compression

Can you relate to these situations? Please share your funny stories and comments below…

The Ultimate Mobile Design Resource Bundle – only $29!

LA-based designer Sasha Agapov started the blog with a Google redesign. Items posted range from the Mona Lisa, to a Coke bottle, to Microsoft; along with every social media logo imaginable. There’s also a particularly humorous take on iTunes, the Apple logo and the Apple campus.

Whatever you think of the neon color scheme and flat design elements of the new Apple overhaul, this playful take on Jony Ive’s work is a reminder that somewhere there’s always a critic — or thousands of them — convinced they could do it better.

Which redesign is your favorite? What would you like to see Ive redesign? Let us know in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

Look for five main features in a corporate WordPress theme before purchasing it: responsive design, colorization capabilities, browser compatibility, an advanced options panel, and support.

First, a responsive design will allow your users to view the website from any device (smartphone, tablet, laptop, etc). Colorization capabilities free you to select any colors you like for the website. This is important because you want to match your brand’s colors. Hence, choose only a WordPress theme that offers unlimited colors. The theme should be supported by most internet browsers, including Firefox, internet Explorer, Safari, Opera and Chrome. Nowadays, many theme developers sell their themes with an advanced options panel, which enables you to set a myriad of preferences without the hassle of learning code. Don’t go for a theme that doesn’t offer support into the future, including periodic updates and email support.

Now that that’s said, I have compiled a list of 30 splendid corporate WordPress themes to help web designers and businesses make informed decisions when developing or buying a corporate theme.

PAX 

Pax is a corporate WordPress theme supported by all devices and tested on iPad, iPhone and Android 2.3+. Over and above being responsive, Pax has unlimited colorization capabilities. This theme looks incredible on most internet browsers, including internet Explorer 10+, Safari, Chrome and Firefox. Created by Adaptive Themes, Pax also packs a punch in its other features. It comes with a ton of shortcodes, a free Uslider plugin (which would normally cost you about $30), layered PSD files and an options panel. From the panel, you can set many options since the theme is highly customizable. Lastly, you get two layout styles, boxed and wide.

Customize 

Customize is a fully responsive WordPress theme. This incredibly attractive theme supports modern browsers, old browsers (IE 7+), touch devices and responsive designs. Other browsers supported by this theme are Firefox, Chrome, Opera and Safari. Technical support is also prompt. The sales page claims that your queries will be answered within 24 hours of logging them. Created by Kopasoft, Customize also has integrated social media, which enables a business to connect with and satisfy its customers promptly. Additionally, it comes with an easy drag-and-drop layout manager, a visual shortcode generator and multiple sliders. It makes for a great corporate theme, especially for tech businesses.

Super Spark

Super Spark is an awesomely constructed theme. It is responsive, it supports unlimited colors, most browsers support it, and its creator has gone to great lengths to assist users with their queries about it. Created by Good Layers, the theme also features a live color changer, multiple footer layouts, multiple blog styles, a built-in translator, and a font and logo uploader. Additionally, the theme has a custom pricing table, which sets it apart from other business themes. It was created with the creative industry in mind.

Grander 

Grander is a beautiful multipurpose WordPress theme that could be used to make a breathtaking corporate website. It is responsive and comes with multiple color schemes, 25 to be exact. Its advanced admin panel is also to die for, allowing you to change settings for pricing, typography, meta data, contact information and social media. Created by Holobest, it also features a minimal design, a shortcode generator, multiple custom post types, page templates for members and services, Google Maps support, pagination capabilities, and custom widgets (including for Twitter and video). The theme is compatible with most browsers.

Proma

Proma is an incredible WordPress 3.5+ theme. It is responsive, easy to customize, and compatible with major browsers. It supports unlimited colors and, get this, unlimited fonts, and it has an options panel where you can easily set preferences. Created by Final Destiny, Proma also comes with a “revolution” slider, a “flex” slider, custom widgets, a custom color scheme, multiple page templates, custom post types, and a unique filterable portfolio. You also get appropriate documentation, and the creator will do his best to address your concerns.

FreshBiz

FreshBiz is a cool multipurpose theme that can be used for any type of corporate website. It comes with unlimited color and styles and is compatible with internet Explorer 8+, Chrome, Firefox and Safari. Created by MNKY, this theme has an intelligent options panel, where you can set the logo, header, menu, title area, footer, typography, blog area and much more. And it is responsive.

FreshLook

Freshlook is, well, a breath of fresh air. This responsive theme is highly customizable, with a rich feature set, including a visual shortcode editor, over 300 Google Web Fonts, unlimited sidebars and more. In addition, the theme supports unlimited color skins, which could generate profit for the creator. Created by Designare, Freshlook is supported by major browsers and has a powerful settings panel where you can build custom skins and change all of the main styles. You also get to choose from custom patterns and colors for every section of a page.

Nebraska

Nebraska is a fully translation-ready corporate theme. It comes with many features. From the advanced options panel, you can set custom codes and sidebar options. You also get a page creator to help you create a unique corporate theme. Created by United Themes, Nebraska offers unlimited accent colors and compatibility with internet Explorer 10+, Firefox, Chrome and more. The custom widgets (including for posts, Twitter, Flickr and social icons) enable businesses to reduce their workload while streamlining their processes.

Inovado

Inovado is aesthetically pleasing, to say the least. And this is complemented by a myriad of features. The theme is responsive and Retina-ready, meaning that your images will not lose their sharpness and clarity, whatever the device. It also comes with an impressive 500+ Google Web Fonts and unlimited colors. Created by Minti, it is compatible with internet Explorer 8 and 9, Firefox, Safari and Chrome. It also has sharp graphics, localization functionality, a built-in SEO base, premium sliders, and child-theme compatibility. It works with WordPress 3.5+.

Nautica 

Nautica is an HTML5-, CSS3- and widget-ready theme, compatible with WordPress 3.4+ and major browsers. Judging by its ratings and comments, Nautica has a lot to offer businesses. Created by BeOpen, the theme pays great attention to detail. The responsive multi-platform theme allows you to customize almost all aspects, including the logo, slider, menu, call to action, services, portfolio, tabs, processes and testimonials.

Eudora

Eudora is easy to edit and responsive. It packs a punch in features: a myriad of page templates, a powerful admin panel, unlimited colors, multiple widgets, multiple post formats, Google Web Fonts, multiple portfolio layouts, Google Maps support, video support and SEO-ready features. Created by ThemeProfuse, Eudora is equipped with an impressive options panel for general settings, the slider, navigation, the footer and the blog. It is compatible with major browsers.

Avino

Avino is a responsive theme with a powerful options page and unlimited home page layouts, which is an advantage for those looking to develop a unique layout. Created by WSGraphic, Avino is designed for any business, although photographers and those in tech and consulting would especially reap its benefits because it is clean, minimalist and responsive. In addition, the theme has a built-in SEO plugin.

Helios

Helios comes in two styles: boxed and wide. Its minimalist, responsive design gives it an edge. And it incorporates valid HTML5 and PSD files. The theme is compatible with major browsers and comes with an advanced options page. Created by Indonez, Helios’ settings panel has options for general settings, fonts and the logo. Additional features are Google Web Fonts support, two blog page layouts, custom page templates, an AJAX contact form, and translation-ready capabilities.

Grider

Grider is a responsive corporate theme that allows you to pick any color from a color picker. Pick also from multiple page templates, including for the home page and contact page, as well as a full-width template. Created by iWebStudio, Grider also comes with a myriad of other attributes: elastic slider, flex slider, skitter slider, multiple shortcodes, translation-ready capabilities, and an under-construction template with a countdown. The theme is compatible with internet Explorer 10+, Firefox, Safari, Chrome and Opera.

TouchM

TouchM is beautifully crafted. Apart from being viewable on any device, TouchM comes with unlimited color and font capabilities. Its advanced panel helps you set preferences for the header, main content, body, menu and footer. Created by 4GraFx, TouchM comes with full integration with WooCommerce, an e-commerce toolkit. It also features 404 and under-construction page templates, which are not included in most WordPress themes nowadays. It also features a visual shortcode generator, multiple icons and more than 20 page layouts.

Architecture

Architecture is a beautiful theme with a responsive design. The name of the theme gives away its target industry: architecture. And its minimal and contemporary look and feel are appropriate to it. It also features a live color changer and is compatible with most browsers. Created by Good Layers, the theme comes with an advanced options panel for colors, sliders, fonts, the favicon, Google Analytics, the footer, the portfolio and the body. Other features are a built-in translator and built-in shortcodes.

Lawyer

Do not be fooled by the name. Lawyer is designed for all types of businesses. However, lawyers will reap the most benefit. It is attractive and Retina-ready, has unlimited colors through a color picker and is compatible with internet Explorer 8 and 9, Firefox, Chrome and Safari. Created by AitThemes, Lawyers comes with an easy-to-use admin panel for colors, images, widgets, sliders, portfolios, galleries and more. The theme also features practical shortcodes, multiple tools and accessories.

Maximus

Want to know what you can tweak easily with the Maximus WordPress theme? Here is just a brief list: the main accent color, page layout, theme color, social icon positioning, home page slider, general slider, content, navigation, and layout. Created by Dynamic Press, Maximus supports most browsers and comes with a custom skin creator, more than 100 shortcodes, multiple background patterns and SEO support.

Camouflet

One of the outstanding features of Camouflet its responsiveness, not to mention that it is clean and minimalist. With the options panel, you can upload your own background image and change colors. Created by iWebStudios, Camouflet makes it easy for users to style many elements with shortcodes, including for columns, drop caps, lists, dividers, block quotes, testimonials, pricing boxes, buttons, information boxes, accordions, tabs, YouTube and Vimeo videos and Google maps.

CoolBlue

CoolBlue is a responsive theme that comes with an amazing layer slider, unlimited colors and an advanced options panel. Created by Anps Themes, CoolBlue is also compatible with internet Explorer 8 and 9, Firefox, Safari and Opera. Additional features include a set of 500+ Google Web Fonts, unlimited sidebars, multiple shortcodes, 30 PSD files and multiple blog layouts. True to its name, it comes with relaxing color schemes, different icon shapes, different layout styles and the all-amazing Revolution Slider.

Ageless

Ageless is a modern WordPress 3.5+-compatible theme. It is responsive, translation-ready and HTML5-ready. Ageless is also flawless on most browsers, including Firefox, Safari, Opera, internet Explorer 8 and 9, and Chrome. Created by Damojo, it incorporates smart options for styles and colors, and it features unlimited sidebars, unlimited portfolios, custom widgets, multiple post formats, localization capabilities, customizable contact forms and multiple shortcodes.

WP Consultant

WP Consultant is a premium theme suitable for all types of businesses. Coded in HTML5 and CSS3, it is fully responsive and comes with free updates for life (making your website dynamic and responsive and building trust with your customers). Created by Contempoinc, the theme packs many features: multiple page templates (including for testimonials, site map and FAQ), full width pages, three-column pages, a client page, contact page and several home page styles. The theme is also equipped with a powerful page builder.

Impact

Impact is a fully responsive WordPress theme. Built with HTML5 and CSS3, it has some of the best WordPress functions built in, making for an easy-to-use and simply awesome theme. It is compatible with WordPress 3.5+ and comes with multiple color options. Created by WpExplorer, this theme is compatible with the most browsers. And the creator also offers reliable support and updates.

Vanguard

Vanguard is a clean, responsive theme with unlimited color capabilities. Created by Unisphere, the corporate theme comes with 500+ fonts, which you can add to. It is compatible with internet Explorer 8 and 9, Safari, Firefox and Chrome, has both wide and narrow layouts, and has an advanced options panel.

November

November is an amazing premium theme. It comes with a wide array of features, one of the most impressive of which is the page builder, which allows you to build pages by dragging and dropping. Another is the Revolution Slider, which you get free of charge, a $30 value. Created by PWvintage, this WordPress 3.5+ theme is compatible with major browsers and comes equipped with Google Web Fonts, unlimited color capabilities, an advanced options page and multiple customizable slider transitions.

Savior Business

Savior Business is a powerful theme. It is responsive and comes in two styles: light and dark. It even includes a calendar with recurring events. The theme also has goodies in the form of the Nivo slider, which is provided for free. Created by Justin Scheetz, this theme is ideal for any business. It is compatible with major browsers and incorporates custom widgets, shortcodes and an options panel.

Sirius

Sirius is a modern, minimalist theme. Newbies and advanced users will have an easy time using this theme. In addition to being responsive, it comes with a wide array of features. Created by Indonez, the theme features thumbnail support with dynamic image resizing, custom page templates, shortcodes and a powerful options panel. Mainstream browsers are supported.

OpenSpace

OpenSpace is also a responsive theme, supported by WordPress 3.0+. It would suit any industry, particularly photography. One feature that stands out is the admin panel, which is fully brandable and comes with multiple color schemes. Created by Dynamic Press, OpenSpace is compatible with internet Explorer 7 to 9, Safari, Firefox, Chrome and Opera. It comes with multiple patterns, a multicolored menu, custom skin creator, multiple sliders and shortcodes, as well as two layouts: fluid and boxed.

Brandspace

Brandspace is a responsive theme that supports WordPress 3.4+. It comes with unlimited color capabilities, chosen from a powerful options panel and is compatible with most browsers. Created by Pixel Entity, the theme comes with a set of awesome attributes: Google Web Fonts, Google maps, oodles of shortcodes, light and dark skins, Twitter Bootstrap, unlimited widget areas, unlimited portfolios, child theme support, built-in social media, video support, and multiple page types.

BlueDiamond

BlueDiamond is clean, minimalist and responsive. It is equipped with the Layer Slider, which allows you to manage all sliders with an easy drag-and-drop module. It also comes with two styles: boxed and wide. Created by Good Layers, Blue Diamond supports internet Explorer 8 and 9, Chrome, Safari and Firefox. From its advanced options panel, you can configure the slider settings, the background, thumbnails, the page builder and social media.

What do you look for in a WordPress business theme? Have we missed any of your favorites? Let us know in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

Consequently, a script with both clarity and character, suitable for extended use in a project is worth its weight in gold. This week, our sister site MightyDeals.com have arranged a deal on one such font: Thirsty Rough.

Based on the popular Thirsty Script by Yellow Design Studio, Thirsty Rough is softer, rounder edged and consequently a lot friendlier than its parent.

The typeface comes with four weights (light, regular, bold and black) and each weight has four levels of distress for that nice worn feel. There are letter variations to offer variety, professional ligatures, support for dozens of languages, and even a shadow option. This font really is the complete package.

Ideal for any brand that wants to associate itself with vintage flair, Thirsty Rough would be perfect for a small town diner, a clothing label, an independent coffee shop, or perhaps a record label.

What’s more, the effortless cool and numerous distress options makes Thirsty Rough an absolute must-have typeface for T-shirt designers everywhere.

Normally retailing at $49, MightyDeals.com has arranged an 82% discount, which means you can buy a license for the Thirsty Rough font family for just $9. You get the choice of desktop or web font licenses, but why not double up your savings by licensing both for $18?

Head over to MightyDeals.com to grab one of the most usable fonts of its kind you’re ever likely to see.

Have you used Thirsty Rough in a project? What uses can you think of for it? Let us know in the comments.

The Ultimate Mobile Design Resource Bundle – only $29!

Today, there’s even a mini debate going on regarding whether responsive design is here to stay or whether it’s just a flash in the pan. Only time will tell, but for now, it’s clear that responsive design strives to make the user experience as comfortable as possible.

Responsive design is a web design philosophy that focuses on creating sites that give users an enhanced viewing experience. This includes features such as effortless navigation and reading, and a minimum of browser resizing, scrolling and panning. All of this takes place across a range of different devices, from desktops to smartphones.

Since this web design approach is still in a fledgling state, you may not be totally clear on what responsive design is all about. Is it more about seamlessly displaying content across multiple platforms, or is it mainly about helping businesses build more attractive sites to increase their sales through a better user experience?

Mashable has already gone out on a limb and called 2013 the year of responsive design. While that remains to be seen, some basic aspects of responsive design are standards that will never go away. Here are the most important responsive design facts to familiarize yourself with.

There’s a difference between responsive design and mobile design

You’d be forgiven for thinking that responsive design and mobile design are one and the same — but they’re not. Sure, responsive design does create websites so that they both respond to a browser’s size and are mobile-friendly, but responsive design really is whole web design. The problem with referring to this web design approach as mobile design is that it’s inherently limiting, which does a disservice to the approach itself.

The most effective responsive websites may be viewed as they were meant to be, across a range of resolutions. This includes everything from the usual 1024×768 pixels to the 1920×1080 displays and everything in between. Sites like these also look splendid on tablets (both retina and standard displays), as well as on smartphones. If a web designer looks at responsive design solely through the context of mobile, then he’s potentially missing out on a broader user experience. 

At the same time, mobile is a really opportune starting point for the entire responsive design discussion. It’s been the norm to begin with a mobile scheme and then expand this design to additional sizes as a responsive website is developed. Lots of designers believe it’s simpler to grow visuals rather than to minimize them.

Quality and image size are priorities 

If there’s a rule that web designers ought to follow, it’s that image quality is a whole lot more vital than the actual number of images. The reason is that a low-quality image simply doesn’t look attractive in any size. The time it takes a site to load an image is almost as important as the size. Mobile users will agree with this because they have limited bandwidth with which to contend.

What’s a web designer to do? Simply reach a smart balance between load time and quality. This includes scaling images with CSS height and width properties, steering clear of loading full-size images, and optimizing images for the Internet. Prior to uploading, it’s highly advised to crop any images and save each picture at the smallest size possible, as long as it still maintains sharp, visual quality.

Check out Sony USA’s website. Note how all the images are super sharp in quality, no matter what size they are. Once you visit the site or refresh the homepage, also note how fast the images load. You don’t have to wait more than a second for everything to come into focus extremely sharply.

Designers have many choices when incorporating images in a responsive setting. They can use only a few images; lessen the use of images within mobile-sized schemes; permit images to mask themselves in mobile surroundings; or utilize various file sizes and versions. These choices will work effectively, although some developers are against hiding images, because the user will still have to load the images in spite of them being unseen.

Let’s talk about responsive type

Type shouldn’t be one size fits all. One kind of font that looks appealing to the eye on your desktop may be horrid on your smartphone. Typography must follow the same rules as other aspects of responsive design.

The most important aspect of responsive typography is the line length. For smooth readability, type ought to be optimized based on the width of the screen. The rule of thumb, for desktop websites, is that between 50 and 75 characters a line is ideal; for mobile devices, just between 35 to 50 characters is ideal.

Type must also be easily read vertically. Lots of sites utilize a line space that’s up to 140 percent of the screen’s point size for bigger blocks of text. If the screen is smaller, more space should be added.

Even the specific typeface that’s utilized is significant. Fancy fonts and novelty typefaces have the ability to look visually appealing on bigger screens, yet they’re hard to read if the point size is small. These sorts of fonts should have lots of space between them. When you work with smaller sizes, it’s easiest to utilize normal sans serif styles and even strokes.

On Hardboiled Web Design’s site, you can see a lot of these principles being followed, making for good responsiveness. Note how its line length of text on a desktop — while on average greater than the ideal recommendation of 50 to 75 characters — is comprised of a typeface that’s clean and easy to read. In addition, the line space is also greater than the point size of the font. On mobile devices, the site’s responsiveness performs even better: On an iPhone 5 display, the number of characters per line was approximately 67, which is just a bit over the ideal rule of between 35 and 50 characters.

Don’t forget about navigation

When it comes to the user experience — which is one of the most important factors that web designers should think about — navigation is right at the top of priorities. Navigation has to be smooth and efficient to ensure a comfortable user experience.

Effective responsive design must ensure this by paying extra attention to the specific width of a given browser. A site that uses responsive design well will lay out its site navigation in different areas, all dependent on the browser’s width. One of the best examples of this is Food Sense’s site navigation.

It would be a mistake for responsive design to scale the site navigation to larger proportions on devices with bigger screens.

The takeaway of responsive design

So now, when you hear web designers talking about responsive design, you’ll know that it isn’t just about making a website look good and run smoothly on smaller, mobile screens. You’ll know that this design approach is based on the principle of making websites of all sizes provide the most optimal experience to the user — no matter what they’re using to view the site.

Responsive design is still a relatively new concept, at least to most people who just view websites on the internet. That’s why so many people still can’t agree on what makes responsive design…responsive design. Is it about seeing everything properly on mobile screens? Is it just about load times and high-quality images that will please the eye? Is it about a clean design and easy-to-read typefaces? 

It’s all of that and more. Those are just the fundamentals of this web design approach, but responsive design is still evolving and changing, so chances are good that additional elements will be considered, too. In the end, it’s about enhancing the user experience, because no one wants to deal with a website that’s slow, blurry, hard to read, cluttered or difficult to navigate.

Is responsive design just a trend? What are the key aspects of responsive design? Let us know your thoughts in the comments.

Featured image/thumbnail, via s58y

The Ultimate Mobile Design Resource Bundle – only $29!

They’ve been hailed as a daring, and radical move, and they’ve been condemned as a half-hearted Android rip-off.

Apple are hoping that they’ll mark the start of a sustainable alternative to skeuomorphism that isn’t constrained by flat design.

Personally, I’ve always hated most of the iPhone’s native icons, I find icons like the sunflower image — I’ve never taken a photograph of a sunflower in my life — to be both naïve and a little lazy. I was optimistic therefore that a redesign would mean carrying something a little more thoughtful in my pocket in future. The result however, is a mixed bag:

iOS6 & iOS7 comparison by nielsboey.

Some consistency has been attempted; the communication icons (Phone, FaceTime and Messages) are the same ectoplasmic green. Whilst the FaceTime icon is an improvement if only because the original icon was so poor. The white phone and speech bubble have considerably less contrast than their prior incarnations and are therefore less clear.

The Passbook icon may be a success, it blends more easily with the rest of the icons than the previous version. The Mail icon is also a success, despite the poor gradient, the well established icon is clean and easy to read. The Music player icon is also a success, its color differentiating it from the rest of the set, although the brackets joining the dots to the main stems on the musical note look a little clumsy.

Much was has been made of Apple dropping the green felt and wood look from icons like the Game Center, but it’s hard to see the icon’s new incarnation as much more than a middle weight designer’s attempt to portrait everything, and nothing in one fell swoop.

There are the traditional issues Apple has with americanisms: the Maps icon looks like an American sat nav, but it’s unlike a map elsewhere in the world. Surely a map is one of the simplest icons to draw?

By far and away the biggest flop is the re-design of the Newsstand icon. Featuring the words ‘News’, ‘Art’, ‘Travel’ and ‘Sports’ it is supposed to represent a variety of magazines. Will it be redesigned for Germany, or Japan, or China, or Swaziland? If there’s one rule that icon designers should live (and die) by it’s this: if you have to add text to explain your drawing, you didn’t draw it well enough.

The rest of the icons are largely an attempt to ‘flatten’ the existing designs. So Stocks is a flat version of the earlier version. Weather looses its gloss as does Videos. Curiously the Camera icon has managed to retain inner shadows and a similar gradient to its earlier version.

The singularly biggest issue — apart from the color — is that so many of the icons are clearly intended to be round, but are crammed inside rounded rectangles. iTunes, Clock, AppStore, Compass, Safari, all feature circles larger than their predecessor. With the exception of Clock — which has never had enough space — each circle has been enlarged to decrease the amount of space between it and the edge of the icon. This results in an awkward, uncomfortable effect.

I suspect that these icons were originally designed as circles to match the circular number input elsewhere in the OS, and Apple either lost their courage, or couldn’t rationalize the other icons in a similar vein.

And that is probably the biggest problem with the iOS7 redesign; Apple set out with good intentions, but their fear of profit margins kept them from designing something truly exciting.

What do you think of the icons in iOS7? Which is the best, and which is the worst? Let us know your thoughts in the comments.

Featured image/thumbnail, uses flat smartphone image via Freebiesbug.

Fantastic Responsive 3D Slider – only $39!

Designed by Dimitar Tsankov, aka Outlinez; 12 PSD files are included, fully layered and organized into folders. Unfortunately the stock images aren’t included.

It would be an ideal choice for a marketing or professional services company, or you could pick it apart and use elements of it in other projects.

As a free resource, we think it’s an excellent place for developers, or design students looking to take their first steps with Photoshop, to study building a layout in Adobe’s flagship product.

What do you think of Modus Versus? Have you used it for a project? Let us know in the comments.

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive exclusive deals from MightyDeals.com and monthly/weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented.

Fantastic Responsive 3D Slider – only $39!

Since version 3 of Foundation was built from the ground up using SASS — a CSS pre-processor that helps in the writing of more efficient CSS — this new version is also mobile-friendly and provides a lot of features in its grid that you don’t get from other frameworks.

Let’s dive into Foundation and see why it’s so popular…

The grid

Foundation uses a 12 column nestable grid that will adapt to any size screen, if you have already used grids this should all be very familiar to you. All the divs in Foundation use box-sizing: border-box so that the borders and padding do not affect the element’s width and height, making the math a little bit easier for us. But the amazing thing about the Foundation grid is that you actually get 2 grids, a big grid for when the screen is bigger than 768px in width and a smaller grid that you can control just as simply. To that end Foundation uses the small-# and large-# classes, like so:

<div class="row"> <div class="small-3 large-4 columns">Lorem Ipsum</div> <div class="small-3 large-4 columns">Lorem Ipsum</div> <div class="small-6 large-4 columns">Lorem Ipsum</div> </div>

In this code we created a row in which there are 3 divs that are the exact same width when the browser is wider than 768px but when it’s smaller, as you can see by that small class in the divs, the last one will occupy half the screen while the other two will occupy 25% each, this gives you immense control of how our website will look on all screens.

Foundation also allows you to offset a column, by which I mean that you can have a row with 2 columns that are only 3 columns wide but you can offset the second one that it floats to the right and to do that we use the large-offset class or the small-offset class:

<div class="row"> <div class="large-3 columns"></div> <div class="large-3 large-offset-6 columns">3, offset 6</div> </div> 

Block grid

The block grid is just a nice little extra, it is a way for you to split the content of a list within the grid, it’s useful for when you wish this particular part of your website to stay evenly spaced no matter what the size of the browser. This type of grid uses the small-block-grid and the large-block-grid classes, if you only set the first one the grid will keep the desired spacing no matter what the viewport is but if you only use the large-block-grid class when the viewport reaches the breakpoint of 768px the grid items will stack on top of each other, you can always take more control by using both of these classes, like so:

<ul class="small-block-grid-2 large-block-grid-4"> <li><img src="image1.png"></li> <li><img src="image2.png"></li> <li><img src="image3.png"></li> <li><img src="image4.png"></li> </ul> 

Using this, the images will be evenly spaced no matter the size. When the viewport is bigger than 768px they will only occupy one row, and when it’s smaller than that they will occupy two rows with 2 images each.

The main navigation

Now that we’ve covered the grid in Foundation and how it gives you plenty of control in all environments, we will talk about something we’ll nearly always use on our sites: a top navigation bar. And of course this navigation can also be flexible with little to no work using this framework. To create a simple responsive navigation using Foundation you use:

<nav class="top-bar"> <ul class="title-area"> <li class="name"> <h1><a href="/">Website Title</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <ul class="right"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </nav> 

This bit of HTML creates a simple navigation bar that has the title of the website on the left and then on the right it has four menu items. Also note that when the viewport is smaller than 768px this menu will be replaced by a list icon making this menu responsive. If you want this grid to have its position fixed as you scroll down the page you just need to wrap it in a div with a class of fixed. To add dropdowns to your navigation you just need to add something like this to the place where you want your dropdown:

<li class="has-dropdown"><a href="#">Dropdown Level 2c</a> <ul class="dropdown"> <li><label>Dropdown Menu</label></li> <li><a href="#">Sub menu Item 1</a></li> <li><a href="#">Sub menu Item 1</a></li> <li><a href="#">Sub menu Item 3</a></li> </ul> </li> 

There is also the ability to add a divider to your list item adding a little grey vertical line, to do that you just need to place a list item with the class of divider between the two list items you wish to divide.

Buttons

No framework would be complete without some predefined buttons and Foundation actually has more than one style of button predefined, it has the default one that uses a blue color and then it adds the success, alert and secondary styles. By adding the class of radius you give this button a little bit of border-radius and by giving it the class of round you make the button almost entirely round. You can also add the class disabled to the button and there are 4 size classes to make the button as big as you need it.

<!-- Size Classes --> <a href="#" class="button">Default Button</a> <a href="#" class="tiny button">Tiny Button</a> <a href="#" class="small button">Small Button</a> <a href="#" class="large button">Large Button</a> <!-- Color Classes --> <a href="#" class="button secondary">Secondary Button</a> <a href="#" class="button success">Success Button</a> <a href="#" class="button alert">Alert Button</a> <!-- Radius Classes --> <a href="#" class="button radius">Radius Button</a> <a href="#" class="button round">Round Button</a> <!-- Disabled Class --> <a href="#" class="button disabled">Disabled Button</a> 

To create a simple dropdown button you only need to add the dropdown class after the last class, like so:

<a href="#" class="button dropdown">Dropdown Button</a> 

Typography

The typography in Foundation uses Helvetica Neue and it also uses em’s instead of pixels to make it easier to adapt your type across all platforms and breakpoints. Using the headers is pretty self explanatory; you just need an h1 and the text you wish inside it, but there are also some other classes that can come in handy when dealing with typography in Foundation.

<!-- subheader --> <h1 class="subheader">h1.subheader</h1> <!-- Segment header, the text inside the small tag will act like a sub header --> <h1>h1. <small>Smaller</small></h1> <!-- Use .circle or .square to change the style of the bullets in unordered lists --> <ul class="disc"> <li>List item</li> </uL> <ul class="square"> <li>List item</li> </uL> <!-- create an inline list--> <ul class="inline-list"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> 

As you can see, when it comes to typography, Foundation provides us with some basic help and then some additional classes to meet all our needs.

Other components

If this demonstration of the Foundation framework has whet your appetite to learn more and start building with Foundation you should really take a look at the documentation because Foundation also offers additional CSS components such as:

• Alert Boxes
• Panels
• Pricing Tables
• Progress Bars
• Tables
• Thumbnails
• Flex Video

And also some helper JavaScript such as:

• Clearing
• Dropdown
• Joyride
• Magellan
• Orbit
• Reveal
• Section
• Tooltips

As you can see, there’s a lot of Foundation to explore and I strongly advise you to look at all of its CSS and JavaScript properties.

Conclusion

We covered just enough in this article to see how Foundation can help building faster and more responsive websites, using its grid you get a lot more control over the structure of your website than when using a normal flexible grid and Foundation also gives you plenty of helpers to create your website. I hope this article has given you the push to learn and use Foundation for your next project.

Have you used Foundation for a project? What features did you find the most useful? Let us know in the comments.

250+ Creative Photo Overlays to Enhance Your Images – only $29!

With lots of little tweaks, notably tags and tabs in the finder, improved notifications and updates to a number of key applications Mavericks is one of the most eagerly anticipated updates ever on the Mac platform.

Unfortunately, we’re going to have to wait until the Fall to update to Apple’s new OS… but that doesn’t stop us updating our wallpaper.

For those of us that fell in love with the rolling wave desktop wallpaper previewed along with Mavericks, Apple have released the image as a wallpaper.

You can download it here and pretend you have early access to this cool looking update.

What do you think of the look of OSX Mavericks? Do you like Apple’s desktop branding? Let us know in the comments.

250+ Creative Photo Overlays to Enhance Your Images – only $29!

On numerous occasions I’ve seen app concepts posted to Dribbble that have been highly praised by commenters but unfortunately will seemingly never materilize. Why? Well the designer’s excuse is usually that they don’t know anybody that would help to build it.

With developers, it’s often the case that they don’t know anybody that would help to design it.

If you’re guilty of making such excuses then you’ll know that this isn’t entirely true. There’s plenty of designers and developers out there that you could hire to do the job. The real problem is not having the funds to do so, which means having to find someone who’s willing to do these things for free.

Well, not quite.

Anybody who’s going to put work into a project is going to want to be paid something for their efforts. This is why, if you’re not able to pay someone a set fee, you’re going to need to find someone who believes in what you’re trying to do, isn’t afraid to take a risk and is willing to invest their time in return for a share of the profits.

What you need to find is a partner.

Preparing for your search

In a lot of ways finding a partner is similar to finding an investor, except rather than investing their money they’ll be investing their time and it’s up to you to sell them your idea and convince them that it’s going to be worth doing so. 

It’s not going to be as simple as sending someone an e-mail and just saying “Hey, I’ve got this idea for an app. It’s going to be like OpenTable but for bars. I was wondering if you wanted to partner up and help me bring it to life?”.

If you find someone that’s interested it’s likely that there’s going to be a lot of back and forth as no doubt they’ll have a number of questions. Even after exchanging a handful of e-mails and phone calls they might decide that it’s just not for them. As a result, you may have to repeat the process several times before finding a willing candidate.

Where to look

Once you’re ready to get your search underway, a good place to start is by asking friends for recommendations as they can put you in touch with people that they may have worked with in the past. This is helpful because that way you know that at least they can be relied upon and your friend can assure them that you’re a trustworthy character.

Next up is Twitter. Simply send out a couple of tweets explaining that you’re looking for someone with a particular set of skills to help with your latest project and that you would appreciate if those with said skills were to get in touch. You should also ask your followers if they have any recommendations.

Following that, check out some of the websites designed especially for connecting designers and developers. Two popular examples are Builditwith.me and Programmer Meet Designer, both of which are free and easy to use. All you have to do is sign up and post a couple of details about your project along with a list of the skills required to help finish the job. You could also try a promising new tool called the Assemblr.cc newsletter which aims to pair up designers and developers via a weekly newsletter. Simply submit your name, contact details and a 140 character description of your project and have it sent directly to a list of designers and developers eager to work on new projects.

Finally, you can also take a more direct approach by searching for people with the required skills on websites such as Linkedin, Zerply, Dribbble, or via a good old fashioned Google search. Once you’ve found a suitable candidate, contact them directly, explain your situation and ask them if they would be interested in discussing it in further detail. If they live in the local area you could even arrange to meet up and talk about it over a coffee (on you of course).

Just remember

Once you’ve finally found someone willing to team up, remember that you’ve agreed on forming a partnership and that they are not working for you but with you. Just because the idea was yours doesn’t mean that everything has to be your way. It should be a collaborative process and you should remain open to the other person’s ideas. If you don’t then you could very quickly find yourself back at square one.

On the other hand, if all goes well, it could be the beginning of what proves to be a long and prosperous business relationship.

So, to conclude, if you do have an idea for a new product or website, don’t let lack of skill or money hold you back. Bootstrap your ideas into actual products – team up, build and ship.

Have you teamed up to develop a product? Are you currently searching for partners to work on a project? Let us know in the comments.

Featured image by Michael Himbeault.

The Only Journal App You Will Ever Need for Windows or Mac – only $19!

This is due, in part, to the fact that HTML emails are a notoriously tricky medium for developers to work with. Archaic email client technology and a lack of standards have rendered many of the rules of modern, semantic code useless. But email is still a key marketing channel too important to be overlooked: over a six-month period in 2012, Litmus reported an 80% increase in email opens on mobile devices. In the same year, Campaign Monitor revealed that, for the very first time, their mobile email open rate had actually surpassed desktop and webmail.

Obviously it’s important to conduct proper analysis of your audience before taking the decision to invest in mobile-optimization. But a well-executed responsive email design can ensure an excellent user experience for both desktop and mobile users – and with widespread 4G just around the corner, the trend towards mobile is inexorable, so why not future-proof?

Square peg, round hole

If you’ve ever had the misfortune of opening a fixed-width email on a mobile device then you’ll understand the need for responsive email design. Screen-bursting, multi-column layouts can appear zoomed out so that font sizes are reduced to the point of illegibility. Users may zoom in but are then constantly and infuriatingly required to scroll horizontally left-to-right and back again in order to read content. Links appear small and congested, with no regard for fat fingers on touch-screen displays. And low-contrast designs on small viewports, dimmed to save power, often become unreadable. Clearly, mobile optimization is important but what’s the best way to go about it?

Mobile best practice

Before writing a single line of code, consideration of design features can vastly improve the user experience for those on mobile, although arguably these are advisable concessions regardless of screen size.

• Clear, concise content: small screens mean it’s more important now than ever to engage the user as efficiently as possible. 
• Single-column layout: simplicity is key. Layouts no wider than 640px will degrade gracefully. A single-column ensures no content will be completely lost outside the viewport when zoomed in.
• An engaging subject line: this is one of the email marketer’s most effective weapons in an overcrowded inbox. Keep it short and snappy.
• Large call to action (CTA): don’t punish fat fingers! Apple’s iOS Human Interface Guidelines recommend a minimum ‘tappable’ target area of 44×44 points.
• Generous font sizes: make sure your message can be easily read.
• Pre-header: another key area when it comes to visibility in the inbox. Try to avoid simply displaying ‘view in browser’ text.
• Left-aligned text: there are a number of reasons for aligning important elements to the left-hand side of the content area. (Eye tracking research suggests that western users focus the majority of their attention on the left-hand side of email content. This is hardly surprising since we read text from left to right. Certain operating systems, notably android, will not scale content to fit the screen, therefore displaying only the left half of an email. From an ergonomic perspective, the majority of users will find it easiest to interact with elements in the bottom left/middle of their hand-held screen.)
• Vertical hierarchy: diminished screen real estate places more credence than ever on the idea of ‘the fold’. Significant CTAs should be placed as near to the top as possible; if they are not seen immediately, perhaps they will not be used.
• Use images carefully: don’t assume that images will be seen. iPhone’s native email app will display images by default but many clients won’t.

These tips can improve the user experience for mobile customers, but you can, and probably should, optimize further. Thanks to growing CSS3 support among mobile email clients, responsive email design is now possible.

Getting started

As I mentioned earlier, HTML emails suffer from a woeful lack of standards – to the uninitiated, much of what follows will be a journey back in time to the early days of web development. Layouts must be arranged with tables due to the out-dated HTML rendering engines of some email clients and CSS must be applied inline. Several email clients will completely disregard any style declarations made in the <head> section of the document.

There are some fantastic email boilerplates available, I recommend Sean Powell’s excellent HTML Email Boilerplate as a starting point, but for the sake of demonstration, let’s begin from scratch.

For those of you that like to follow along with the code, you can download a template for this article from here.

Doctype

Hotmail and Gmail will automatically insert the XHTML 1.0 Strict doctype. It’s therefore not a bad idea to use it but it’s important to thoroughly test your email with and without a doctype as many email clients will simply strip it out altogether. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Email on Acid has conducted extensive research on email doctypes here.

Media queries

We can now insert a viewport meta tag to make sure our email is correctly displayed on mobile devices. It’s also a good idea to specify the content-type and a title tag too. These will be ignored by many email clients but are a good idea if you’re planning on providing a link to a ‘browser version’ of your email.

Since the content-type will most likely be ignored, it’s advisable to encode all special characters within your email as HTML entities.

Also, we’ll include a couple of sensible style resets to ensure our email is rendered how we want it to be across platforms.

<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Email subject or title</title>
<style type="text/css">
.ExternalClass {width:100%;}
img {display: block;}
</style>

Note that the viewport meta tag has negative implications for Blackberry.

Now we can insert our media queries; how many depends on the level of specificity you wish to deliver to each device. In this example we are going to use just one — making the reasonable assumption that most devices with a screen size no greater than 600px are modern, mobile and touch-screen and will benefit from mobile-optimized styling. Furthermore, we are going to assume that by following the universal mobile best practice techniques, outlined earlier, mobile users on larger devices receiving the desktop layout will encounter no major usability issues.

We are using media queries in the same way we would when building a website; if the viewport size is within the constraints set in the media query then apply that style.

@media only screen and (max-width: 600px) {
    table[class="hide"], img[class="hide"], td[class="hide"] {
      display:none!important;
    }
  }

In the example above we are telling some elements with a class of “hide” to display:none on screens narrower than 600px. The !important property ensures that any inline style is overridden. This is the basic principle of responsive email design: overriding inline style declarations made in the body of the HTML document with !important style declarations made in the <head> section, and targeting these style overrides to specific screen sizes with media queries. A glaring exception is the gmail app that will ignore any style declarations in the <head> section. However, conscientious left-aligning of content should ensure a satisfactory user experience for gmail fans in your mailing list. Obviously this isn’t an ideal solution but at present, responsive email design is as much about considered compromises as it is about cutting edge techniques.

It is worth noting that we are targeting our HTML elements with CSS attribute selectors to overcome a rendering quirk of Yahoo! Mail.

So we can see that media queries are a useful tool for selectively displaying content but we can also use them to manipulate other features of our layout. Perhaps most importantly, we can constrain the column width of our email — the key to a great mobile experience. 

@media only screen and (max-width: 600px) {
    table[class="content_block"] {
    width: 92%!important;
    }
}

We have now stated in our media query that all tables with a class of “content_block” should scale to 92% width on devices with a screen size of up to 600px. Now all we have to do is specify a width attribute inline (600px) for any table with a class of content_block and we have a fixed width container that then scales proportionally on screens under a certain size. Provided that the width attributes of the child elements of this container are all specified as percentages, this is a basic responsive email template.

Take care when disabling webkit automatic text size adjustment on the body tag, as a rule of thumb, try to keep font sizes above 12px minimum.

Buttons

Calls to action (CTAs) are usually the most important part of a marketing email. They should be eye-catching, well-placed and above all, usable. The criteria for a great CTA are different depending on whether it is to be selected by a cursor or a finger. This is a powerful function of responsive email; to provide users on smaller touch-screen devices with finger-friendly buttons that are not affected by image blockers.

Unfortunately, such buttons cannot be displayed universally as they rely on padding properties that are not supported in some desktop email clients.

@media only screen and (max-width:600) {
a[class="button"]{
      display: block;
      padding: 7px 8px 6px 8px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      color: #fff!important;
      background: #f46f62;
      text-align: center;
      text-decoration: none!important;
}
}

The style declarations above will transform tags with a class of  “button”, like the one below, into large, engaging, coloured buttons that span the width of the content area, so long as the device screen width is not greater than 600px. CSS3 support shouldn’t be a problem as we can assume the mobile technology we are targeting is reasonably modern.

<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

The inline styling is sufficient for mouse users that may select links with greater accuracy but overriding these styles to make links large and clear for touch-screen users decreases the likelihood of interaction mistakes. Importantly, this approach does not rely on images and so avoids the usability issues that image blockers would otherwise present.

In conclusion

Responsive email design is still a compromise. The baffling array of different devices, email clients and rendering engines present designers and developers with a daunting task. But as technology progresses it’s becoming easier to provide users with appropriate layouts that they can effortlessly consume and interact with. Growing support for media queries in email has changed the landscape of mobile email optimization and provides us with a platform to drastically improve the user experience on more devices. It is now up to us, the designers and developers, to experiment with creative ways to reach the mobile audience.

Have you designed for email? Did you use a responsive approach? Let us know in the comments.

Featured image/thumbnail, via mattw1ls0n

The Only Journal App You Will Ever Need for Windows or Mac – only $19!

The launch has been greatly anticipated, not least because iOS7 has been completely overhauled by Apple’s design guru Jonathan Ive. Ive’s involvement with Apple has, until now been restricted to hardware design and he is responsible for some of the company’s most iconic output, including the iPod, iMac and of course, iPhone/iPad ranges.

The keynote began with introductions to new Apple products, including a new version of MacOS and the astoundingly Vader-esk Mac Pro, that will launch later this year. But it was clear from the reaction of the crowd in the auditorium that it was the announcement of iOS7 that had been most anticipated.

There had been much debate as to whether or not Ive would adopt a flat design approach, and it was clear immediately that although iOS7 is substantially more minimal than its predecessors, he hadn’t done so:

The first thing you encounter in iOS7 is is the new unlock screen. Conceptually the same as all previous iterations, it is sleek and minimal. The new font — which seems to be a variation on Helvetica Thin — is evident immediately. The round buttons that replace the old input keys were widely anticipated and are evidence that many of the changes had been expected.

The second thing you’ll encounter is the parallax home screen. By tilting your phone, the wallpaper on the screen will move slightly, the icons appearing to float above it. It’s a fun party trick, but feels a little gimmicky.

Ive’s output for Apple has predominantly been black, white and polished metal. However, the first generation of iMacs hinted at his color tastes and the current range of iPod Nanos are similarly bright. Looking at iOS7 it’s clear to see why Apple have steered him towards the mono-tonal palette we’re used to: the washed-out neons that adorn the new iOS7 have none of the sophistication of Android or even Blackberry and surely have more to do with the fashion tastes of an aging hipster than a young design maverick.

The consistency of icon design that we were promised is notably absent, and don’t look like a fully resolved design.

Where Ive’s design is successful is in making the interface unobtrusive, and during the keynote he spoke on video about the “profound and enduring beauty [he finds] in simplicity”. The UI is substantially reduced: the dominant black of the current iOS being replaced with a dominant white; bevels have been removed; and buttons themselves now resemble the ‘active areas of screen’ that they are, rather than actual buttons.

Something that iOS users will like less than Android or Windows users is the adoption of a ‘control center’ which seems to muddy the water of an otherwise brilliantly simple OS. The control center’s pull-up tab contains ‘essential’ functions and features, and is otherwise much like the pull-down info in the current iOS.

A huge criticism of iOS in the past has been the inability to multi-task, but having solved the battery issues iOS7 will enable multi-tasking for all apps instead of a select few.

One fact that was slipped in, almost casually, was that rather than offer the option to search the web (using Google) as is now the case, in iOS7 Siri’s search will be directly integrated with Bing. Whether this is a result of the cooling relations between Apple and Google, or whether Bing genuinely offers a better product is hard to judge. What is certain is that Bing rankings will now be far more significant for clients and future SEO will need to focus on more than Google page rank.

Safari has also been revamped: it has an all-new look to match the other native apps; much of the clutter has been removed to allow your eye to focus on page content. The biggest change being the new tabs view which is an updated version of Apple’s coverflow — expect to see this copied everywhere starting now.

The most pleasing changes are the ones heralded with least fanfare, especially the typography, which has been completely overhauled to create a more spacious and consistent feel across the device.

Apple began their presentation focusing on iOS’ market dominance and customer satisfaction. Undoubtedly they’ll hope that iOS7 will arrest their slipping market share and ensure a healthy future for their device range, they’ll have to wait until Fall to find out.

What do you think of the design of iOS7? Is it an improvement? What’s missing that you hoped to see? Let us know in the comments.

100 Beautiful, High-Grade Textures – only $19!

One solution is the renewed interest in chromatic typefaces. In widespread use in 19th century wood-block printing, chromatic type faces use multiple colors to define different areas. This is the polar opposite approach to modern logo design, in which we’re taught that shapes must work in a single tone.

The benefit of chromatic designs is that they add depth, emphasis and character; without the need for more intrusive text decoration such as shadows.

One of the best examples of this is Sodachrome. Designed by Dan Rhatigan and Ian Moore, Sodachrome consists of two separate fonts; one in which the serifs point to the left, and one in which they point to the right. Set individually the two fonts look distinctly unbalanced, however laid over each other in different colors, they produce an attractive slab-serif. The additional benefit of Sodachrome is that the overlap between the two colors creates a third face, a modern sans-serif, at the heart of the design. The visual interest in Sodachrome is created by the interplay between these three different designs.

Sodachrome by Dan Rhatigan and Ian Moore.

Developing chromatic fonts for use on the web is somewhat of a challenge. Whereas designs such as Lisa Lonergan’s Knoxville follow very traditional roman outlines, designs such as Mark Frömberg’s Pigment — which features 600 characters — don’t readily fit into vector outline formats.

Knoxville by Lisa Lonergan.

Pigment by Mark Frömberg.

Typefaces, even grunge-style faces, are designed as an outline. The outlines can be scaled, colored and spaced however the designer chooses. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) and almost every other available format works in this way. This means that a chromatic design cannot be specified in a single file. However, provided the chromatic typeface is delivered as two separate font files, we can lay one over the other quite easily.

CSS will even allow us to duplicate the title in the styles using the content property, avoiding doubling the content in the markup which would have a negative impact on SEO and accessibility.

The basic format is:

<h1>Any old title</h1>

And in the CSS:

h1
{
 font-family:"Some Chromatic Font A";
 color: rgba(50, 0, 0, 0.5);
 position:relative;
}
h1:after
{
 font-family:"Some Chromatic Font B";
 color: rgba(0, 50, 50, 0.5);
 position:absolute;
 left:0;
 content:"Any old title";
}

For now, the lack of chromatic fonts being produced for web use is likely to mean that their use is a step too far for sites like blogs that require numerous headers. But for logos, or headers that rarely change, where using an image is acceptable, chromatic typefaces are a vibrant and engaging way of setting type that retains a flat aesthetic.

Have you worked with chromatic typefaces? What technical difficulties did you encounter? Let us know in the comments.

100 Beautiful, High-Grade Textures – only $19!

Some people think it’s not a big deal and that designing a page comes naturally because of cultural lessons we learn growing up and looking at design from childhood, yet few, if any, understand why it works the way it does. In most societies, we read left to right. Still sound simple? Just start on the left, and it will all fall into place? Basically, but the challenge is to make the reader look at elements in the right order, or at least the order you want them to see, which is the challenging trick in layout design.

The rules

I was never one to follow the rules, but teachers, and great artists have some memorable quotes on the subject. “Before you can break the rules, you have to know the rules,” and “to create your own world you must first understand the real world”.

If you study the rule breakers, you can see they all had the basis of learning from the real world, the basics, and evolving from there. The rules are the basic understanding of layout, type, elements of color, illustration, and photography, and how the eye views them, and the brain deciphers it all when put together.

What most teachers try to impart in layout is called the “Z” pattern. It’s the pattern of reading (western cultures) for the strategic placement of important information. Start in the upper left corner, work across to the right, and then down and back to the left again, going top to bottom. Standard and simple.

I have to laugh at the following inclusion of 1950′s “layout design rules” I found on the web. The principles are sound, however, and they still do speak of design basics.

• Use borders when you want to frame and draw attention to information (e.g., table of contents, calendars, special notes).
• Allow the edges of text columns, and artwork to create the illusion of borders.
• Draw attention to boxes, or images by using borders with a drop shadow.
• Draw the reader’s attention to important elements by contrasting size (scale), color, and page position. Make sure the elements have a function that supports the content.
• Use large, bold display type, and/or graphics for the creation of focus. Use elements with visual weight, intensity, or color for focus.
• Use a grid to help organize elements on the page. Make sure that the grid is flexible, but that the grid sections are not too small. Divide the page into four or five columns for most flexibility.
• Use multiple columns to organize text, and visuals into smaller (more easily read) blocks of information.
• Divide text into two, or three equal columns for best results on a standard page.
• Use a single, wider column with a smaller column for pullout quotes, and other types of supporting content.

Well, those are simple rules, and still carry over into what is needed today, and in the future, but with our consumer culture, and so many great rule breakers in design these days, rules evolve. One evolution in design was the “grid system.” According to Wikipedia:

After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold’s Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.

By the mid 1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.

Rule makers and breakers

If you haven’t heard of Josef Müller-Brockmann, then he is a must on your list of designers to study. Müller-Brockmann was more than just a man who sought to form what is now labeled the Swiss School; Constructivism, De Stijl, Suprematism, and the Bauhaus, all of which pushed his designs in a new direction that opened doors for creative expressions in graphic design, influenced him. Among his peers he is probably the most easily recognized when looking at that period.

Müller-Brockmann was soon established as the leading practitioner, and theorist of the Swiss Style, which sought a universal graphic expression through a grid-based design, purged of extraneous illustration, and subjective feeling.

The grid was the prioritization, and arrangement of typographic, and pictorial elements with the meaningful use of color, set into a semblance of order, based on left-to-right, top-to-bottom. According to Wikipedia, the grid system is, “a two-dimensional structure made up of a series of intersecting vertical, and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text, and images in a rational, easy to absorb manner.”

Müller-Brockmann is recognized for his simple designs and his clean use of typography, notably Akzidenz-Grotesk, shapes and colors, which inspires many graphic designers in the 21st century. As with the French posters in the 1890s, Müller-Brockmann, and his peers also attempted to attract customers, and sell products with bold, simplicity. The posters that served to attract an audience to events, especially music events, and museum exhibitions embraced the abstract geometrical shapes the style is noted for; but it is the public service announcement posters from this time period that have been more noted than in many other periods of design. The simple, clean, and graphic messages were, as with the music event posters, able to be understood by viewers with different languages.

Ed Fella, a contemporary designer, is a real rule breaker when it comes to both layout, and design, yet he still pays strict attention to how the eye, and brain views the page. Just looking at his work, one would think that he’s a lunatic. He forces contradiction yet still plays to the grid. Not because it’s there, but because it serves his purpose to help pull the eye all over the place, and still make pleasing, readable design. There is chaos, and balance, existing side-by-side like identical Siamese twins — one good, and the other evil.

©Ed Fella

Fella referred to his work as stylistically, “getting it wrong.” His work is raw, and obsessive. It has power, and spontaneity. Born from the knowledge of layout, typography, design, and theory, he seems to have ended up getting it very, very right. He has inspiring words every designer should read:

“I am interested in graphic design as art,” he says, “This is a kind of art practice that uses forms that come out of graphic design, decorative illustration, and lettering, all mixed together-forms that come out of Twentieth Century art, out of Miró and Picasso — all of it has a genealogy, and a certain look — in the same way that artists today use comic books and graphic novels. I was an illustrator, so you see endless styles popping in, and out of the books. The drawings are an unconscious discharge of all the styles, and forms that I used as a commercial artist for 30 years — that was my profession — I did it every single day. So, my unconscious has all this stuff in it, and now, because I don’t have to make meaning anymore, I can just use the techniques, like a machine that has long ago stopped making widgets, but the machine is still running. I’m still making stuff. I love the craft of it — of carefully making some little thing.”

Paul Rand, famous designer, and rule breaker did this in a roundabout way. Mr. Rand, as a young designer, accepted a request to design the covers of a small, but notable publication in the late 1930s, and early 1940s. While the best advice to designers is to never work for free, there are some exceptions. Mr. Rand accepted, but demanded full creative freedom, and got it. When someone asks you for free work, they really don’t have much of a choice, do they?

Rand’s gamble paid off. His work for Direction caught the right attention. Success led to other successes. After being hired to design the page layout for an Apparel Arts magazine anniversary issue, an offer to take over as art director for the Esquire-Coronet magazines came his way. Initially, Rand refused this offer, claiming that he was not yet at the level the job required, but a year later he decided to accept it, taking over responsibility for Esquire’s fashion pages at the young age of twenty-three.

The coolest trick!

A former illustration teacher of mine showed me a handy tool for identifying the main focus points on a page. First, draw a diagonal line from the top left corner to the bottom right corner. The page can be vertical or horizontal. It works with any orientation.

Next, draw a line from each other corner to join the previous horizontal line at a right angle. The point the lines join is the area of maximum attention. Try an experiment — take a famous painting and draw these lines upon it (no, not at a museum because you’ll be arrested). You’ll see how great art is done using this layout technique.

Now, take a magazine page, or web page, and do the same. First, think of how the page is designed. Does it read well? Where does your eye go while you look at the page? Do you start feeling a bit anxious while looking at the page or excited? Now draw the lines, and see where the elements fall.

Chances are, if nothing of importance falls in the areas where the lines meet (general area), you were feeling anxious because your eye was fighting to look at the page, and your brain was confused as the layout was going against the flow. If the elements are laid out well, you feel excited as your eye is led across the page.

When it comes to dealing with your client, or a committee bent on redesigning your choices, give this as a demonstration as to why you placed the elements where they are. People tend to understand element placement when you use such a demonstration. It quantifies a rule they don’t want to break. Show concern for the final product, and involve the team with excitement over their ideas, and how to incorporate it all into the design, and you will find more leeway in committees, and with clients. Sometimes sticking to the rules of others allows you to break rules they don’t know… or can’t see.

Do you feel this makes sense? Have you ever heard of this layout trick and if so, have you tried it? Does it work? Let us know your thoughts in the comments.

Featured Image ©GL Stock Images

Play Blu-ray Movies on Your Mac – only $25!

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Gmail is now your email personal assistant http://depot.ly/lNM5P

Girls, Google says it’s time to back away from cookies: introducing nutrition info in search http://depot.ly/lNKyb

Discussing the Right User Interface for Video Streaming Websites http://depot.ly/lNLSE

Wanna upload photos from your PC to Instagram? Gramblr is the solution: http://depot.ly/lNL0Q

Might wanna check this out: A Guide to the New #HTML5 Form Input Types http://depot.ly/lNKnV

How to Find the Right Designer http://depot.ly/lNHrc  *Good article by @TrevMcKendrick

YouTube’s New One Channel Design Now Live For All Publishers http://depot.ly/lLkBY  via @marketingland

.@mobify shares a collection of 70 stunning responsive sites for your inspiration http://depot.ly/lLdOd

Honey is a social network for businesses that’s flexible enough to fit any workflow. You might like it: http://depot.ly/lLdwR

Fresh Resources for Designers and Developers from @hongkiat >> http://depot.ly/lLdrB

Funny & realistic slogans that tell the truth about famous brands http://depot.ly/lILTf

What’s really like to be a Google Intern http://depot.ly/lISb3

Softies is a very creative advertising campaign. You should check it out: http://depot.ly/lGLdl

‘Posthumanist’ art reflects wearable tech’s impact on humanity http://depot.ly/lGqlI  via @verge

Nice! 10 Print magazines all web designers and developers should read http://depot.ly/lGqfr

Here’s a good read from @TechCrunch – http://depot.ly/lDIew  – The Sisyphean Problem Of Email

Businesses With A Strong Sense Of Purpose Are More Successful http://ow.ly/lDHm2  *Inspiring read from @FastCoDesign

Watch: The History Of The Bauhaus, In 2 Minutes http://depot.ly/lDHaI

 Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Play Blu-ray Movies on Your Mac – only $25!

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The positive designer

The wrong hunger

Short and sweet

Can you relate to these situations? Please share your funny stories and comments below…

Convert Photoshop Layers into CSS – only $19!

Using rakes, sticks and other instruments, the California-based artist traces intricate, geometric patterns. Sometimes he works alone, and other times has made use of a large crew. When The Anthropologist commissioned a project on Lake Baikal in Siberia using ice and snow, the team successfully produced the largest work of art in the world.

Although Denevan considers the erasure of his work by weather and waves to be simply part of the process, its beauty is preserved on film for us to appreciate. Here’s a closer look at his awe-inspiring epic art.

What aspect of Denevan’s creations do you find most impressive? Should Denevan’s creations be preserved or allowed to disappear? Let us know your opinion in the comments.

Convert Photoshop Layers into CSS – only $19!