Web design is a tricky business. To me, the most unexpected discovery about web design is that “design” is a minimal part of it. When you break down the process of seeing a website from start to finish, it’s only about 1/3 actual creative, conceptual work – searching for inspiration, creating mood boards, sketching and concepting, etc.
The other 2/3 is a designer’s gruntwork – applying a design concept to various instances of elements, creating redlined mockups for development, cutting image assets, creating specs for text, colors, etc. And then there’s development testing, going back and adjusting the design, and reimplementing.
To look at it this way, it seems pretty dismal. But it’s the satisfaction of that initial 1/3 – you know, that part where you got to be creative – that keeps us going and pushing toward creating new things. We really don’t learn, do we?
In an effort to keep as much of my time and energy in the creative part of the process as possible, I’ve been slowly building up a collection of tools and shortcuts to speed up the un-fun parts. There are a ton of great resources out there that other designers and developers have created to make life easier for the rest of us, and I try to take advantage of those whenever possible. So in turn, I’m sharing them with you.
Typekit – high quality typefaces from established foundries, with a free basic plan
Font Squirrel – free fonts for web use or download
Google Web Fonts – totally free and building up a solid collection
960 Grid System – Photoshop action that automatically creates a 12 or 16-column grid
Grid Calculator – handy tool for calculating custom gutter, margin, and column widths
GuideGuide – extension that sets up guides in Photoshop based on the settings you want
CSS3 Generator – input values for shadows, rounded corners, etc & generate CSS3 markup
CSS3 Button Generator – input color, shape, and other values & generate CSS3 markup
CSS Portal – a variety of online CSS3 generators
ColorZilla Gradient Generator – Photoshop-like CSS generator for gradients
Premium Pixels – I use this mostly for browser chromes, media players, & device renderings
365psd – similar to above, with some good buttons and UI ideas
PSD Freebies – smaller resource, but with good base elements to work from
Subtle Patterns – great place to start if you’re looking for a subtle background texture
NounProject – the holy grail of standard, pictogram-type icons
iconmonstr – newer icon resource with lost of depth in icon variety
Symbolset – service that serves icons in the form of fonts to your website instead of images
Pictos – another icon font service, will also host your custom-built icons
Brands of the World – an encyclopedia of vector versions of established brands’ logos
Density Converter – halfway through the post, there is a guide to sizing up for HD displays
LiveView – desktop app with companion iPhone app, lets you preview work live on a phone
Android Design Preview – desktop app that previews work on Android phones via USB
Photoshop CS5 Shortcuts – seriously, keyboard shortcuts cut my work in half – use them
I hope these prove helpful. If you know of any other great resources that I didn’t include, please share them in the comments section!