April 30th, 2007 | Filed under Icons
Always will be a sucker for free, good-looking icons.
A web programmer’s notebook.
The first indicator that a design trend is on the way out is when there’s a Javascript toolkit for it. Here’s image reflections.js. (via pb)
Programmer, Meet Designer: because “rarely is a person good at both programming and designing.”
“The Jolly Rancher/Fisher Price style of design needs to die. Now.” - a commentor on Greg Storey’s ripping critique of Technorati’s new design. I wholeheartedly agree. I don’t want my webapps looking like children’s toys.
There’s no feeling quite as sweet as when you discover code you set a sail into the public domain ages ago was republished and improved upon by others. Thomas Upton took my del.icio.us Prettifier Greasemonkey user script and modified it to make del.icio.us even prettier. Nice work, Thomas.
I just adore the Lightbox JS v2.0 photo gallery Javascript library. It’s flashy but usable, it degrades nicely sans Javascript, it looks search engine friendly AND it’s optimized for performance with pre-loading as well. I must hook this up; I’ve already got a couple places in mind.
Silk icons is a gorgeous - and big! - library of free icons.
There are some aspects of contemporary web (web2.0?) design which are duplicated across many sites…
The Clearbits icon set can be styled and colored using CSS. Very cool… and what looks like a very extensive range of icons. I only wish the rounded corners didn’t look so pixelated in Firefox on WinXP.
Interesting summary of the current state of web design.
Happened upon this personal site by Garrett Murray today, via torrez, and found the design really inspiring. I love sites with a dark background and light text - so much easier to read. I like how there’s lots of empty space but that navigation links appear when you rollover the post and titles, wondering what’s what. I used to dog Ruby on Rails sites for always having the same look - the big headlines, certain font families and colors. I don’t know if it’s the default style in the Rails view templates or the fact that Rails fans are influenced by 37 Signals or what - but Maniacal Rage doesn’t. Just looking at it I couldn’t tell what CMS or platform publishes it which is rare with most blogs. (Give it a try - lots of TypePad, WordPress, MT, RoR and Blogger sites are identifiable by style.)
Bonus: there’s no drop shadow or rounded corners, which are really getting on my nerves lately. *stares at drop shadows on this page*
Anyway, if I were a designer, this is the kind of site I’d want to create. It’s got my wheels turning about my sad, poor, bare scribbling.net.
Speaking of prototypes, I really dig 37 Signals’ approach: for each web page, on paper, list the page elements needed, group related items together, design each chunk, and then arrange them on the page.
I prefer open-source graphics, but this icon set is beautiful enough to pay for. (And it includes the camera icon, which always seems to be missing from icon sets I’m interested in!)
The makers of one of my favorite markup/text/code editors on Windows, HTML Kit, have made a web service available which creates favicons out of images.
Favicons are the small images just before the URL in the address bar of many web browsers.* The images are in the .ico file format, so this web service takes any graphic (like a jpg or gif), resizes it and converts it to the .ico format which includes both a 16×16 and a 32×32 pixel version embedded within it.
It’s a tough challenge finding an image that is recognizable at that size, but totally worth it for the visual branding it brings to your site on readers’ and users’ tab bars and bookmark lists.
Once you’ve created an unzipped your favicon.ico to the web server, include the following inside your pages <head> tag to activate the icon:
<link rel="shortcut icon" href="/path/to/your/favicon.ico" type="image/x-icon" />
* Firefox’s support is probably the best, displaying favicon’s on bookmarks, tabs and in the address bar. Internet Explorer’s support for favicons is pretty much nonexistent.
To create a gradient from one color to the other with Photoshop (like, um, a lightening blue sky), choose set the foreground color to the starting color and your background color to the ending color. Select the area in your image where the gradient will occur. Then choose the gradient tool (in Photoshop, not ImageReady) and draw a line in the direction the gradient should occur (up/down, horizontal, diagonally, like in the screen grab.
(Disclaimer: I am Photoshop-stupid, and this is rudimentary how-to on the Gradient tool, which I just discovered today.)
CSS guru Eric Meyer’s Color Blender tool takes two colors and a number of midpoints and returns all the shades in between. I used the Color Blender to calculate the blues in this site’s design. Neat, helpful Javascript widget for the color-dumb.