Recently, I made it practice to keep my most important web development resources in my bookmarks bar in Google Chrome (which is awesome, because I also use Bookmark Sync). These aren’t my development tools of course (Coda on Mac, Notepad++ and Filezilla on PC, Photoshop on both), these are online resources I use on a regular basis. Click on to see them!
Up first is Color Scheme Designer. Not only have I been using this the longest, but I think it’s most helpful in the design stage. In my humble opinion, color scheme and typography are the most important elements of design. So with Color Scheme Design, I will choose a base color (usually based on a logo or primary color I have in mind for the site), and play with the complementary colors to come up with a nice design. There are six complement schemes to choose from, as well as a color wheel and ability to adjust the colors with a slider. Then I grab the hex codes from the color list, and boom! I’ve got myself a nice set ofÂ complementaryÂ colors. The site even has options to view the color schemes in action, with both a light and dark page example. And now that we have color scheme out of the way, it’s time to take care of that pesky typography….
The League Of Moveable Type is a website dedicated to providing free use, open source fonts that can be used on websites without the legal ramifications of illegalÂ distribution. They have a great catalog that is growing every day, and I’ve used it a lot recently (I love Helevetica and Garamond, but they just aren’t cutting it anymore). Once you download the font, you can use it with any font replacement tool. My tool of choice is Cufon. Cameron Moll has a nice write up on that here. And with colors, and fonts chosen, it’s time to start on the CSS.
After reading Handcrafted CSS by the great Dan Cederholm, I took a great interest in CSS3, which I was putting off until more widespread support from browsers. Today he posted a link to CSS3 Please! on his blog, which is a resource that allows you to manipulate CSS3 elements inline; it willÂ dynamicallyÂ change as you edit it, and then you can copy the CSS3, which includes the code for each supported browser. Very nice!
Another staple in my CSS development is the supplementary images for lists and other HTML elements. I’m no graphic designer by any stretch, and with Free Icons! I don’t have to be. They have hundreds of icons in different styles and size. I just go there, find what I need, and add them in.
Finally, every designer needs placeholders until they get the real content. For a while I was generating lipsum myself and dropping it in. That is, until I came across HTML-Ipsum (another hat tip to Mr. Cederholm). Â The site has different sized lipsum blocks wrapped in all kinds of HTML elements so you can just copy them and drop Â them into your design. The dummy text is taken care of. Now, there is the issue of images. Recently, I came across a resource called Dynamic Dummy Image, which allows you to create images of any size and color on the fly. Very nice tool.
Here are all of the resources, in list form, for your consumption:
- Color Scheme Designer
- The League of Moveable Type (and Cufon)
- CSS3 Please!
- Free Icons!
- Dynamic Dummy Image
They help me out on a daily basis, and I hope you’ll find them useful too!