Applications to boost productivity
Over the last year I seem to have gathered quite a collection of resources and apps that help to take some of the labour out of my work. This post is really a simple way for me to document them in one place. I was getting tired of scanning through bookmarks and favourited tweets to find what I needed, so here they all are!
Resets and more
If your not aware of html5boilerplate Im not sure where you've been! It now incorporates normalize.css which is pretty good. No more adding bullets back in to list items! I would also recommend taking a look at toast which is a nice CSS framework with a great trick to avoid having to tell the browser when the last column is put in. With that in mind if you interested in setting up stronger standards in how you write your CSS, or if your project requires a more scalable and modular approach to it's architecture, dive into Jonathan Snook's great book which is a very clear account from a seasoned expert on some of the pitfalls you might find, if working on a larger site that requires that extra level of flexibility.
Setting up grids
Once I have planned my grid structure I always tend to use gridulator to work out my exact dimensions for column width and gutters, at least when Im working in photoshop. However as we're all starting to get responsive, this fluid grid calculator will probably come in pretty handy. Im also a fan of the golden ratio calculator which does exactly what it says on the tin. With regard to baselines grids, I haven't quite made up my mind on their value on the web, however if you are interested, take a look at the baseline rhythm calculator. Finally once Im out of photoshop and into HTML and CSS I think griddle it is quick to implement and works well. I especially like the guide numbers and the ability to set up horizontal gridlines. However a real contender is the fantastic heads up grid which takes into account responsiveness. I should also mention the golden grid system which is a folding system which is also worth playing around as web layouts start to move beyond the desktop. With this in mind, fluidbaselinegrid, getskeleton, cssgrid, 978.gs and blucss are also well worth investigating. And don't forget to check them out with this little tester. Finally if your not using xscope then your grafting that little bit to hard.
Need a set of icons
Before I go any further I should mention copy paste character. It's just so damn handy when you have forgotten the code for a left arrow or quote mark. For a nice variety of open source icons I just love the noun project and defaulticon, both free to use in your designs. Also worth checking out is this great round up of some of the best icons you can find right now. Finally glyphish is worth a look too. Although Im not a fan of filling templates with 'lorum ipsum', in certain contexts this little app is handy. And lorum pixel is great for quickly adding images to a browser mock up, if you don't have final images to work with. Finally, if you're after something with some humour try hipster ipsum.
Choosing colour
When it comes to choosing colour I find color scheme designer is brilliant. Mono, complement, triad, tetrad, analogic and accented. What more do you need? Kuler is also good for finding interesting combinations. Finally If your using a mac, color snapper is pretty handy, although Firefox has a neat plug in which I have recently found myself using.
Musing on font choice
If your sticking with system fonts this type tester is a really handy app and if your interested in trying out web fonts in photoshop this plug in might be of use. I really like the idea of quickly being able to inspect a web page and find out what fonts are being used and so what font really is brilliant. It will also tell you colour, font size and line height and where the font is being served from. Another really useful tool is word mark it which lets you preview words with the fonts installed on your own computer. Of course typography is so much more than choosing a font. I always advise students to visit web typography and 8 ways to improve your typography as a starting point. As an example, do you considered modular scale and vertical rhythm? If not, try grid lover to get started. Finally, although not always a designers responsibility, it's good to communicate to humans and computers using the right set of rules in mind! I find those last two links really handy bitesize resources that I often find myself re-visiting.
Getting visual with CSS
While we are all getting to grips with these new fancy effects, if you can't always recall those new declarations when your typing away in your text editor, the following resources will come in handy. These apps are really good for quickly experimenting and grabbing the code you need to implement. Try both css3please and css3generator. Im also a fan of css3.me as it's so polished and user friendly. Cssbutton.me is well, you guessed it, for making beautiful buttons! If your looking for ribbons look no further and if you need a background pattern well, here you go. Finally if stripes are your thing you can't go wrong with this little generator. I should also mention I'm a huge fan of both css-tricks and Zurb's playground, both fantastic resources that always come in handy.
jQuery for designers
I'll be the first to admit as a designer javascript isn't my thing. However frameworks like jQuery make it really easy to get involved. Especially when you have tools like these which mean people like myself can easily implement common interface elements like scrollers, tabs, overlays and tooltips. There are also two great sites that I find really useful for looking for plugins, both codrops and tutorialzine because of the quality of the code. By the way, If you need a neat little scroller, look no further than flexslider, which is build for responsive designs. And finally if you need a twitter feed use Remy Sharp's, it's totally bullet proof!
Ok, well, that covers a fair ammount of what I've found myself delving into recently. If you find any of these links useful then great! You'll notice I haven't ventured into project management and a whole host of other areas as I wanted to just document those resources and applications that come in really handy when clarifying or implementing some of my design decisions.
After finishing this post I came across a link on twitter which really put my little list to shame! Here are over 200+ tools and resources that Im sure will be of use to you at some time or another. Go explore.
