Design category archive

April 30th, 2007 | Filed under Icons

Always will be a sucker for free, good-looking icons.


April 27th, 2007 | Filed under Javascript, Design

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)


August 11th, 2006 | Filed under Design

Programmer, Meet Designer: because “rarely is a person good at both programming and designing.”


July 27th, 2006 | Filed under Design, Web 2.0

“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.


July 26th, 2006 | Filed under Design, Greasemonkey, Open source

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.


July 25th, 2006 | Filed under Javascript, DHTML, Design

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.


June 26th, 2006 | Filed under Design, Icons

Silk icons is a gorgeous - and big! - library of free icons.


The Trendiest Web2.0 Page on the Net!

February 14th, 2006 | Filed under Design

There are some aspects of contemporary web (web2.0?) design which are duplicated across many sites…

TrendyWEB | The Trendiest Web2.0 Page on the Net!

Clearbits - CSS based icons

February 9th, 2006 | Filed under CSS, Icons

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.

Clearbits [Some Random Dude]

Current style in web design

February 9th, 2006 | Filed under Design

Interesting summary of the current state of web design.

Current style in web design [Web design from scratch]

Well-designed weblog: Maniacal Rage

November 6th, 2005 | Filed under Design, Ruby on Rails

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.

Maniacal Rage. Senseless acts of writing.

Using Patterns in Web Design

October 20th, 2005 | Filed under Design, Interface design

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.

An Introduction to Using Patterns in Web Design [37 Signals]

SimpleBits Chameleon icon set

September 21st, 2005 | Filed under Design

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!)

Chameleon: an icon set that changes color [SimpleBits]

Create a favicon.ico from any photo

September 3rd, 2005 | Filed under Code snippets, HTML, Design, Essential Tools, Browsers

FaviconThe 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.

FavIcon from Pics — how to create a favicon.ico for your website [Chami]

Photoshop color gradients

September 3rd, 2005 | Filed under Color, Photoshop

Creating a gradient in PhotoshopTo 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.)


Color Blender

August 30th, 2005 | Filed under Javascript, Color, Essential Tools

Color Blender screen grabCSS 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.

Color Blender [Eric Meyer]