HSLpicker.com Released

I needed a good HSL color picker, so I built one. Check it out ».

Cool Stuff

1. This was designed in browser using CSS3, Javascript, and HTML. Zero images.
2. Sliders use CSS3 gradients which change as the sliders move.
3. Every color change generates 745 new colors to restyle the site.
4. The URL updates with the hex color code, for easy color sharing.
5. Use the arrow keys on the slider inputs to move 5 steps at a time.
6. It’s open source. Explore the code, or fork and improve on Github.

Why?

At first I thought HSL was yet another name for HSB, (also called HSV). It isn’t, but without a good color picker, it was difficult to wrap my head around it. I didn’t originally plan to spend five days building an HSL color picker, but I couldn’t find one that I liked, and I wanted one badly.

Specifically, I wanted an HSL picker with interactive gradient sliders. Why? Because sliders are more precise than color wheels or gradient maps. While choosing an initial color is more fluid experience with wheels and maps, refining your color choice or transforming other colors with the same changes is pretty hard. Trying to pick the same color twice is even a challenge.

What’s so great about HSL?

HSL allows us to describe meaningful relationships between colors. Given this brown color, hsl(36, 73%, 10%), it’s clear that if we desaturate 40 steps and lighten 70 steps we have hsl(36, 33%, 80%), a cream color. Look at that in hex, #2C1D07 to #DDCFBB, or in rgb, rgb(44, 29, 7) to rgb(221, 207, 187), and the relationship between colors isn’t evident in any meaningful way.

Sass has some great color functions that allow me to manipulate colors using these relationships. I can use Sass’s adjust-color function to convert brown to cream from the example above.

Note that Sass converts easily between RGB, HSL, and hex, giving us the intuitive utility of HSL and the browser compatibility of hex color notation.

I do a lot of color manipulation in fancy buttons and version 2.0 (coming soon) relies heavily on color transformation functions to create some really nice new themes. My new HSL picker is already helping me do a better job of working with color, and I hope it helps you too.

Zero to Fancy Buttons

Here’s a quick screencast demonstrating how you can use fancy buttons to easily generate beautiful flexible CSS3 buttons.

Here’s a live demo and here’s the project page

Update: For those who’ve asked, the color picker I’m using in this screen cast is from xScope, an excellent set of tools by the Iconfactory. It has:

1. A dimension measurement tool. See it in action.
2. Screen rulers
3. Screen resolution frames
4. The color picker (Loupe)
5. Guides
6. Frames (adjustable floating marker boxes)
7. Crosshairs (for easy alignment)

This is one of my favorite apps out there. I use these tools all the time and they’re great for in browser designers.

Fancy Buttons 1.0 Released

Check out the changelog for a full look at what’s new.

To get the latest gem install fancy-buttons.

Wait a sec… you skipped 0.6 - 0.9; what are you trying to pull? Here’s the deal. Some slick new Sass features are coming and when they do, I’ll be doing some exciting stuff with fancy buttons that I couldn’t do before. That may mean leaving behind some current mixins and it will be easier for people to look to the 1.* version to get their legacy fix instead of trying to remember to use 0.6.1 or something.

2.0 Concept

In 2.0 I’ll be building on the upcoming Sass features named variables and lists along with @extend and other goodies to make it even easier to use fancy buttons. I also want offer a variety of button styles like these and allow you to modify them or create your own without much effort. Just pick a style, a color and go.

‘Til then…

For a project that I use all the time, it’s pretty lame that there’s really no documentation to speak of except a few blog posts and demo video that is way out of date. In the mean time, while I await more Sass awesomeness, I’ll be working to make sure 1.0 has good support with a new improved screen cast and thorough documentation with examples.

I’ll be posting some of that goodness soon.

The Web in Print

A couple of days ago I posted a screencast on producing high resolution screenshots of a website for print. If I’m honest, when I made that screencast, I had really just discovered the method for getting hi-res screenshots. I was sure it would work, but I hadn’t actually tried using them in the design.

Now, I’ve actually completed the design and I wanted to share the finished work.

One thing to note. If you’re working in Illustrator, save the screenshots as a separate document and use the “place” command to link the screenshot PDF instead of copying it over into the primary design file. This is way faster since Illustrator doesn’t have to keep track of all the points and controls it just has to render the PDF.

Logo Design Is Easy

‘Tis the season to rebrand yourself, and in that spirit, I’ve put together this post to help you with your logo redesign. I’ll be drawing on lessons learned from the branding masters at Gap and MySpace to show you how to design a logo people will hate so much they’ll be forced to tweet and tumbl in their fits of rage.

Gap’s logo lessons

1. Don’t waste time or money on fonts.
Simply use any font that came with your computer. Have you seen how much fonts cost?

2. Add a geometric shape.
This way it doesn’t just look like some word typed on a screen. Now it’s a logo!

MySpace’s logo lessons

1. Be clever.
Make it confusing at first. Your logo should be like a fun puzzle with an “Oh, I get it” at the end.

2. Always use your first idea.
Be careful, clever logos can take a lot of work. For example, everyone knows by now that FedEx has hidden an arrow and a spoon in their logo. That probably took a long time, and it’s too easy read. Avoid that.

My new logo

I took the ideas above and redesigned my own logo. Please go crazy with hatred and tell the world what a fool I am.

Business Card Design : Cofamilies

I’ve been able to do branding work as a part of my work with Cofamilies.com. Today I ordered these business cards from Moo.com. Even though we didn’t take full advantage of their printfinity service, I love knowing that when I order from Moo, I’ll be getting a fantastic product that my clients will love.

Here’s a look at the cards I designed.

How to Get High Resolution Screenshots of a Website

I’m working on a brochure for cofamilies.com (a web app I’m designing) and we want to highlight some screenshots from the app. Problem is, taking a screenshot doesn’t give you print quality graphics. So how do you get a high resolution image from a website? I found a cool way to solve this problem and so I decided to put together a screencast to show you what I came up with.

CSS3 Unexpected Goodness

When I designed this site, I used CSS3 instead of images for all my gradients, box shadows, and other effects. I had no idea that it would help me taking the design to print. CSS3 is loaded with unexpected goodness and if you’re not using it, you’re missing out.

Just so you know, in the video the gradients appear to be a little blocky, they are actually quite smooth and that’s just a result of the video compression. Here’s an uncompressed screenshot to prove it.

If you have a better way of doing this, I’d love to hear about it. Also, If you find this helpful let me know.

Gap’s New Blanding

GAP is now Gap. At least they’re not ‘gap’ but really? Why the change? Here’s a look at what makes a logo good or bad. If you don’t already know, it’s much more than how it looks.

I’m may be coining this term, but I’m calling the ruin of classic brands Blanding.

Design Review: Old GAP

At this point in history, we can start calling this “The good GAP logo”. Briefly, here are some key points to note.

It’s Elite

It’s skinny and good looking. It can wear anything and look amazing. “If you want to shop here lose some weight, tubby.”

It’s Unique

Have you seen many logos with a highly condensed serif typeface? Probably not. I haven’t. One reason for this is that it’s hard to accommodate many letters with a highly condensed typeface as readability decreases with each letter you have to process. With only three characters it’s not a problem, and the typeface suits it perfectly.

It’s Flexible

Because this logo reduces well to black only, it’s easy to use anywhere. You could emboss it, reverse it, cut it out, or use transparency. Reversing out of a box gives it a solid symmetry which allows it to execute well on labels, packaging, or any form of physical presentation. This logo is fantastic.

Design Review: New Gap

One thing to keep in mind here: a brand is more than a logo. Gap can do a lot here to make use of that square. Eventually you’ll get used to it and decide that it makes sense. Soon, just like the Walmart* Logo, you’ll forget how stupid it was the first time you saw it.

It’s a Fatty

The first thing you notice, after you stop staring at the square, is that the logo has gained some weight. This is a major change — not a brand update — but a complete departure. This logo has forgotten it was ever thin and beautiful.

It’s Forgettable

In the new logo, ‘Gap’ feels more like the word than the company. Why is that? I suggest two reasons.

1. Helvetica Neue. You’ve seen it everywhere. In fact, drop the blue box and the logo appears in the title of this blog post. It’s the same font but with a tiny customization on the ‘G’ and the ‘p’. That’s how common it is.

2. Lowercase ‘ap’. Moving away from uppercase logos seems to be a trend. tcby, Mayflower, technicolor, mapquest, and girl scouts have each dropped some or all of their uppercase letters. In digital communication, using all uppercase is equated to shouting, and using lowercase can make logos look more natural or friendly. This effect is probably because most of the words we read are written without uppercase letters.

For some brands this change is good, but in this case, it isn’t. Since ‘gap’ is such a common word, uppercase letters really helped convey that it referred to the company. Even if you don’t use the correct font, typing ‘GAP’ invokes the brand easily. Uppercase was very much a part of the brand, and I think changing it was a mistake.

It’s Not Flexible

Applications of this logo will frequently require special considerations. For one thing, unlike the previous version, it cannot be displayed in black and white. It requires gray. This matters because all that fun stuff I mentioned above (embossing, reversing, transparency, etc) gets a lot more complicated when a logo requires more than one color to work.

The union of the ‘p’ with the square also makes everything more challenging. Embossing won’t work unless you can use different depths for the letters and the square, which changes what materials you can use. This intersection also makes cutouts impossible since the ‘p’ won’t read correctly with a big square cut out of it. While gradients may look fine on the screen, they don’t usually print well in newspapers.

Bad Logos Are Expensive

Logo design is so much more than just making graphics that feel like your brand. The guidelines and constraints which a designer must design for are tremendous. With a good logo, like the old GAP, any graphic designer can use it with ease, no matter what the application. A bad logo needs more thorough guidelines to cover the difficulties with each application. Check out Best Buy’s logo guidelines for an example of what these are like.

If you’ve ever been stuck trying to figure out how to prepare a complex multicolored logo for embroidery, you know what I’m talking about. A logo may look fantastic, but if it’s not flexible it’s going to be expensive down the road.

WP-Life: a WordPress Theme for Family Blogging

Get the source on Github.

I wrote a very minimal WordPress theme for my family blog. This is it. When I say minimal, I mean it. Here’s a list of what this doesn’t have:

• A sidebar
• Navigation
• Search
• Widgets
• And More!

Who is this for?

Me. But you can use it too if you like. If you’re like me and you want to make your family blog look nice, but you’re sick of flipping through crappy free WordPress themes or suffering through editing a crappy free WordPress theme, just to share pictures of your son with your mother-in-law. Perhaps you’ll like this instead.

WordPress Themes suck (a short rant)

I strongly dislike (to put it mildly) how nearly all WordPress themes are written. There is almost no concept of reuse built in, and WordPress uses annoying functions like get_header(); to basically import header.php. Changing your HTML layout usually means making the same edits across many different files. It just plain sucks. You already know this because you learned to write WordPress themes by modifying existing themes.

With WordPress themes frequently HTML tags (like <div id="wrapper">) opened in one file and closed in another file, which is liked through a magical WordPress function. This makes editing a real pain since you can use text editor folding, and you have to keep track of closed divs across multiple files. This leads to lots of inline HTML comments like <!-- closing #wrapper-7-big-blue-crappy-theme --> scattered across the theme. Updating custom WordPress themes is a pain which typically involves messing about with replacing files over ftp.

How WP-Life fixes that

1. Layouts & Partials - WordPress conditions call a simple render function using server site imports to create sensible layouts and partials. This maximizes reuse and allows for sensible HTML.
2. Rsync Deployment - Update the Rakefile with your hosting account’s ssh username and theme path eg. “user@host.com” “~/document_root/wp-content/themes/wp-life”. Then run rake push from the terminal to update your theme instantly.
3. Compass/Sass - Simple organized stylesheets with Compass and Sass. All my projects use this. Yours should too.
4. Modernizer & HTML5 video support - I’m using the HTML5 video element with h.264 and I’m not re-encoding my video for FireFox. Instead I’m using Modernizer.js (included) to detect h.264 support and MooTools to swap out for a flash player using the same h.264 video.
5. Captioned images - If images have a title attribute set, that’s all you need. I’ve written some javascript (in site.js) that adds nicely styled captions. Also if you prefer, you can add captions as a <q> element after any image. The script will detect it and add it to the preceding image.
6. Font-face - For that custom-web flavor, I’m using CSS3’s @font-face support (with free fonts from FontSquirrel). Checkout /stylesheets/partials/_typography.sass to change this.

Sound good?

You can get the theme source on github and make it do whatever your family needs. If you have problems with it, I’ll read issues posted on github or comments here — but I’m not going to hold your hand or anything.

Coping With Your Family?

While you work at a MegaCorp “developing strategy”, you long for a product that would keep you focused, and get you through the day. Sometimes you even dream of a device that could help you cope with your family.

RIM understands your disconnected needs. Introducing the BlackBerry Playbook.

Full video (Quote starts at 2:44)

Message matters. I cannot relate to the person being described here. This is a perspective — beyond marketing — that defines the role of technology in our lives. Unless RIM makes some bold changes they’ll never escape the corporate niche.

Watch the Playbook ad, and compare that to Apple’s iPad commercial. By contrast, Playbook looks impersonal — even fictional. I mean, you barely see anyone holding it, or using it in a real setting. Some are even suggesting that it doesn’t exist.

I have far greater hopes that an Android tablet will someday compete with the iPad. Come to think of it, what ever happened to Chrome OS?