A collection of the best time-saving apps, tools, and widgets from around the web.

Created specifically for iPhone & iPad apps, they're also perfect for Android, websites, t-shirts, tattoos and more.

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

"Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackers was in theaters. Through short tutorial videos, you’ll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. You’ll feel empowered rather than crippled by the internet and worst case scenario you’ll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen."

{Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot. This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js and Rhino.

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Placeholder Images for every case. Webdesign or Print. It's simple and absolutely free! Just put the custom url in your code like this:
<img src="http://lorempixel.com/400/200" />
to get your FPO / dummy image.

When doing web design, it's critical to test how your page looks under different screen resolutions. Since the mobile web is exploding fast, you have to test against the mobile devices too. Resize is a Safari Extension that to make the process dead easy.

HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10's of hours on your next web project.

The web’s most beautiful typefaces: Try typefaces from the web’s best known web font services.

Design with real content: Kiss goodbye to Lorum Ipsum. Get real web content in place, fast.

Create HTML & CSS in the browser: Quickly get to a working, standards-compliant prototype.

Let me introduce you to the best way to do your @font-face definitions:

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

The basic rule is: 10 to 15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.

Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people's attention for much longer because visit-durations follow a negative Weibull distribution.

Christmas 2010 I had the idea to make a video of the 37signals homepage. I’d recently gained access to the relevant source code repositories and It seemed like a fun thing to do over a weekend.

The result is the video below. It’s a timelapse of the 37signals.com homepage between March 2009 and January 2011. Enjoy!

Layer Styles are nothing new. They’ve been used and abused again and again. Despite their ubiquity, or perhaps because of it, many designers do not yet realize the full potential of this handy menu. Its beauty lies in our ability to create an effect and then copy, modify, export, hide or trash it, without degrading the content of the layer.

Below we present, step by step, several practical techniques to help you refine your designs, increase productivity and reduce layer clutter.

An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty.

Handling these typographic details on the Web brings new challenges and restrictions that need to be considered. Below are a few rules of thumb that will have you using typography more lucidly than ever before.

flickrBomb provides an easy way for you to fill your prototypes with relevant content, and not just dull gray placeholder images. It's quick and easy, so let's dive in!

For many beginners, the task of picking fonts is a mystifying process. There seem to be endless choices — from normal, conventional-looking fonts to novelty candy cane fonts and bunny fonts — with no way of understanding the options, only never-ending lists of categories and recommendations. Selecting the right typeface is a mixture of firm rules and loose intuition, and takes years of experience to develop a feeling for. Here are five guidelines for picking and using fonts that I’ve developed in the course of using and teaching typography.

Trying to convince a client not to squeeze everything above the fold? Is your whitespace filling up fast? We've collected a variety of articles on some sticky web subjects that might just help you make your point. Send your client to one of our topic pages for a quick intro, some links and a wee nudge in the right direction.

As we can find on Wikipedia, “Form refers to the shape, visual appearance, or configuration of an object.” And here I believe that this is also the perfect explanation… forms in web design are a way to gather information, but they must also take on a “form” or an appealing visual appearance in order to be effective. So we decided to gather some fresh examples of websites that have well designed forms. From registration to contact and login forms, you will see some very inspiring examples.

Instead, what I’m seeing more and more of is ridiculous pagination for the sake of juicing page views. Take for example this article which was seeded sarcastically to Newsvine the other day. It’s from a site called Associated Content. The article is a lousy 1504 words and it’s broken up into four pages! I’ve read cover letters that are longer than that.

Fivesecondtest helps you fine tune your landing pages and calls to action by analyzing the most prominent elements of your design.

You should take time to design your URL structure. If there’s one thing I hope you remember after reading this article it’s to take time to design your URL structure. Don’t leave it up to your framework. Don’t leave it up to chance. Think about it and craft an experience.

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it.

The recent hubbub about Delicious got me thinking about bookmarking in general, and brought to mind a long-standing irritation: poorly designed web page titles.

We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.

Fitts's law (often cited as Fitts' law) is a model of human movement in human-computer interaction and ergonomics which predicts that the time required to rapidly move to a target area is a function of the distance to and the size of the target. Fitts's law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer display using a pointing device. It was proposed by Paul Fitts in 1954.

The success of third-wave tools [Instapaper, Readability, et al] is in part a reaction to the excessive (and frankly poor) designs that dominate most web pages today. Web 1.0 and Web 2.0 may have been commercial and creative successes, but they've left a legacy of cluttered designs in their wake. And that's not the designers' fault. Led by the dual demands of shoveling readers towards as much content as possible, while cramming as many ad impressions as possible onto each pageview, modern content sites are design disasters, with multiple layers of headers, sidebars, menus, widgets, banners, skyscrapers, and calls to action competing for attention and, often, completely drowning out the narrow bands of true content that they surround.

Below is an assortment of various links that will help you assemble the ultimate Fireworks toolbox, so you can get the most out of this under used member of the Adobe Creative Suite family of design tools. So if you are a Fireworks enthusiast, or looking to become one, take a peek through the gathered resources below so that when you dive in to the works, you can dive in with style and preparedness.

The more things change, the more they stay the same. 11px Verdana will never go out of fashion: http://drbl.in/mf

This book is a highly readable, plain-language introduction to the concepts behind grids in interaction design, as well as a primer on their practical usage in solving design problems in online media. It is intended to serve as both an inspirational reference as well as a useful guide for designing with grid principles. Its focus will be primarily on web design, but will also touch upon design for mobile devices, application design and interaction design at large.

Gangsta Lorem ippzle dummy text generator: http://bit.ly/bSsTRo

Designed by Jory Raphael at Sensible World, Symbolicons are a family of royalty-free vector icons and symbols for (most) any use.

In this article, we’ll look at five useful coding solutions that we’ve stumble upon recently. All of these solutions enhance a website’s design, not just the code. These solutions affect the user interface and the user’s interaction with the design, and they can make for a more usable and interactive website.

RT @les: "Ok, it's been a few days. I see you guys haven't noticed yet. So I'll show you how great this is." http://flic.kr/p/8ETYM7

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

I wrote some words and borrowed some pictures about my time at #dConstruct: http://tumblr.com/xrihmo3p8

Your content is your product. Own every pixel, and treat your readers with respect. My post on UX and minimalist design. http://bit.ly/9dlcwe

So my proposition is this: :hover as an web interface design tool going forward is going to be less and less important.

Interesting take on the standards vs. Flash debate. Instead of decrying either option, support the other (a more positive move) but make it your mission to be agnostic and to look at technology last during the creative process. (NB: Forrester espouse the POST method: People, Objectives, Strategy, then Technology. This seems obvious to me, but we have all seen misused technology for its own sake.)

"I took one (bad) computer science class in college, and I'm not a web developer. So in early 2008, when I decided I was finally going to build a web site I'd been fantasizing about for years, I was starting from scratch."