The Great Discontent may be one of the best designed magazine websites ever.
Unheap is a wonderfully curated collection of jQuery plugins with charming explanatory illustrations.
Form Follows Function is a site full of mind boggling examples of what can be done with HTML instead of flash.
I guarantee my jpgs, gifs and pngs are smaller than yours. That’s because of ImageOptim. This utility is a mandatory step when I create websites. It runs, at the time of this writing, 9 separate image optimization tools on your images to reduce their sizes. Best of all it is totally lossless, only removes pieces of information you don’t use, and is Free!
When I design, the annoying part of getting my designs in Adobe Illustrator or Photoshop on the web, is the export process. It can take a long time to get all the elements in my design exported out as web usable images. Today I ran across 2 useful utilities that can greatly speed the process.
CSS Hat takes Photoshop layer effects and translates them into valid CSS3 markup. As long as you are styling with layer styles, you can get the applicable code in CSS.
Slicy, likewise, takes Photoshop layers and exports each one as a transparent PNG, JPG, or GIF based on your layers export settings. Especially useful if you are layering image elements.
While you can achieve both effects by spending a little time, these utilities can speed up your workflow if you are doing this kind of work a lot.
As with all things on the web, I was surfing around, minding my own business, when I came across some sweet, sweet typographic web design that blew my socks off. Blew them right out the door. I could just give you a few links, but wouldn’t it be better if we followed the links down the rabbit hole?
First I was looking for a website which explained a little better hyphenation on the web. I hate hyphenation at wide column widths and couldn’t for the life of me find any documentation on the hyphenation CSS tag. But then I found:
CSS Hyphenation was pretty slick. I was like “who made this site?” because it is responsive as HECK!
Trent Walton, WOW! I thought rubbing my eyes. How did he do that with the type? Is he a warlock?! Let me sneak around, I thought. Then I found the answer:
Lettering.js is a website I had come across before, but I always thought it was unnecessary for my web design purposes. Now I’m intrigued. Looking over the case studies I found this:
Lost World’s Fairs. Amazing! Especially the Atlantis one. I seriously have never seen anything like it before. Anyway I was so impressed I decided to tell all of you… because we are best friends.
MAMP stands for Mac, Apache, MySQL, PHP. What does that mean right? Well lets say you want to install WordPress on your computer to create pimping websites without uploading junk to the internet? DONE! Simple and elegant. Best of all, the free version is all most people need.
Animated Dragons fly over the tables at Miss Ko, a paris restaurant designed by Philippe Starck. While I thought this concept would be horrible, in execution it actually seems pretty well done and not as garish as one might think.
Apparently they can also change the video on the tables to suit any event at the restaurant.