Visual design is often subjective and can be difficult to describe or judge. Often, people lack the language or understanding of the work to accurately express their opinions. Consequently, we use simple terms of the way an object “looks” or how it “feels”.

Speaking in terms of these qualities does a disservice to the design. We cheapen the value of the work by paying attention only to the superficial aspects.

When I refer to the visual design of a website or a web application, I tend to use “aesthetics” or “style layer” but those words don’t do visual design any more justice than “look and feel”.

Also, don’t forget to read the comments.

I recently began working with a client whose staff doesn’t design together. When they walk into the office in the morning, they plug in their headphones and stare at their screens, hardly speak to each other, and forge product plans by way of short, infrequent conversations about what needs to be implemented next and when. The conference room has only a table and a projector. The front room is filled with broken-down boxes, presumably leftover from setting up shop in a new place, but the company has been in the space for months.

The people on this team are smart and engaged, but they’re nowhere near doing their best work. They’re not taking advantage of each other’s ideas and passions. They’re not having any fun.

I’ve worked in a couple of environments similar to what Robert describes here. In both environments, I did not work at an efficiency I would consider to be productive. More importantly, I did not produce what I would consider to be my best work.

What I’ve taken away from both experiences is the work environment of any job will always set a threshold on the potential enthusiasm (and fun) you will have for the duration of your time at said job. In other words, focus on evaluating the team you will be working with, not the work you will be doing. Enthusiasm and attitude is contagious.

A bit of a tangential thought from Hoekman’s point, but thought it was worth noting.

Brief Overview of the HSB color space

Before we choose the monochromatic color palette, we need to understand what HSB is. HSB is a color space that defines colors based on 3 values: Hue, Saturation, and Brightness¹. Imagine HSB as a cylinder: Hue takes a value of 0-360°, saturation and brightness each take a value of 0-100%. In my opinion, the last 2 values is what makes HSB so wonderful to work with, as I can adjust colors by changing these values without using Photoshop as a intermediary. This is why I prefer HSB to using RGB. It’s far less abstract and lends itself to how humans perceive color.

Choosing the colors

When I started choosing colors for version 4 of chrisgriffin.org, I began with a dark base color since I was going with a light on dark theme. I ended up choosing a slightly warm dark gray. In HSB, it’s value is (60,8,14) (the hex value would be #242421). The rest of the grays in my design are a variant of this base color. The way I did this is just by increasing or decreasing the brightness value in increments of 10 (and sometimes 5). For example, the background color of the main navigation here is (60,8,34), compared with my base color, there is a 20 unit brightness increase. Obviously, you can choose intervals that work best for your design. Adjusting color saturation is just as easy; let’s say I wanted a slightly less saturated color for my visited links, I would decrease the saturation value depending on how unsaturated I would like the color to be.

HSL and CSS3

The CSS3 color module includes the HSL color space which will allow for easier color adjustments without the need to fire up Photoshop. At the time of this writing, the major browsers that have HSL support are Firefox 3, Safari 4, and Opera 9.64. Since CSS support for HSB is not supported by IE (big surprise), it’s best we continue to use hex values in our CSS, which means you’ll need to use the hex value that the Photoshop color picker generated when you chose the color palette using HSB.

More Resources

• Wikipedia: HSV Color Space
• W3C: CSS3 Color Module
• Working with HSL in CSS

1. HSV, HSL, and HSI, are other color spaces that use a very similar representation, but for the sake of this tutorial we’ll stick to HSB because that’s what Photoshop uses

From the original article:

To put it into perspective, if you watch an average of 31.5 hours of TV each week (which the average person in the US does) and you value your time at minimum wage of $5.85 an hour, you are spending nearly $800 a month ($798.53) to watch TV. That comes to nearly $10,000 ($9582.30) a year. I would imagine that most people reading this value their time well above minimum wage, so the cost is likely several times that number. When you look at it from that perspective, watching TV is an extremely expensive and financial draining habit to have.

I would say I fall near the average, especially this time of year with the amount of sports I watch. Let’s say my time is valued at $100 an hour, and let’s also include the cost of cable itself ($90 for me). I waste $3240 a month in potential (and actual) income on TV.

On the other side of the coin, putting a monetary value on all facets of life may give one perspective on the priorities in one’s life, but probably isn’t the best approach in most situations.

Enter Deadbolt. I’ve owned this domain name for just over 3 years with the intentions to rebrand myself, and with my current situation, I decided it was time to do just that. Griffin Webworks is now officially retired.

And with that, I’m open for business.

Sometimes I wonder, then: given that everyone in design seems to more or less know everyone else, are we really having the kinds of meaningful, constructive, critical discourses that we really should be having? Are we too quick to take offense at the opinions of our peers? Or are we pulling our punches too much when discussing the merits of the work that our peers turn out? To put a finer point on it: are we being honest with one another?

When someone asks me for feedback of their work, I try to be objective and honest with them, even more so when I have a certain level of rapport with said person. But, when I have something critical to say, I watch my tone of voice, as I want them to hear the feedback without the person interpreting as a personal attack. My experience with designers (myself included) is they sometimes align critical feedback of their work with a personal attack.

Personally, I like to think I take criticism well from designers who I respect. The trouble I have is a tendency to dismiss feedback from designers who I don’t respect, along with non-designers, non-designers commonly being developers. Their reputation (or lack thereof) precedes their feedback and holds less weight with me, even if they have valid concerns. When I step back, I see that I should handle these situations more objectively by being more inclusive and receptive, while remaining assertive, standing behind my design decisions. Clear communication and approach is key here, as we all have our egos to worry about.

There just wasn’t enough work to warrant keeping me on the roster and they decided to lay me off. Planet Argon did what was necessary to cut costs in order to survive in this bad economy, and I don’t blame them for that. Saying that, we parted on good terms and I’ll still see most of them regularly outside the office. We may no longer be colleagues, but we are still friends.

What does this mean for me? It means that I have some extra time on my hands. I was somewhat prepared (admittedly, not completely prepared) for this to happen, and have been working on contingency plan in the background over the last few months to not leave myself in such a bad position in the case that I would end up jobless. The redesign of this blog and my business card site, chrisgriffin.me, were among the things on my list, although my work isn’t done.

I also had plans to get back into freelance work that I abandoned a couple years ago. While it isn’t as graceful as I planned it to be, my current situation brings these plans to the forefront. Now that I have all this time on my hands, I can take on freelance or contract work. Please feel free to check out my résumé and/or contact me, if you would like to talk more about your project.

I am nervous and happy about what the future will bring. I haven’t been unemployed since I started making a respectable income as a web professional, and once one starts making a respectable amount of money, they carry on new responsibilities financially, all of which carry a certain burden. In addition to these burdens, the crumbling economy just makes it that much harder to find work. Despite of all this, I am optimistic that I will come out of this just fine. I will keep you all posted on the outcome of this scenario.

Why the new domain?

Honestly, I never liked having my middle initial in my domain name, but being that Chris Griffin is a somewhat common and famous name, I had to settle for Chris Z. Griffin when I initially bought the domain in 2005. Sounds picky, I know, but I always thought it sounded out of place with my nickname, Chris, as middle initials are usually reserved for more formal purposes. So, you could imagine how giddy I was when I stumbled upon chrisgriffin.org while purchasing chrisgriffin.me last July, only 16 days in the wild after it’s previous owner abandoned it. When I moved to a new host I decided to go ahead and switch domains.

Boxcar

Beginning of this year, when I decided I wanted to move from the shared hosting environment I had over at Media Temple to a VPS, I decided to go with Boxcar. Beyond the fact that as an employee of Planet Argon, I get a free Boxcar, not to mention that if at any time I’m having any problems with my hosting I could literally throw my shoe at Alex’s head. But seriously, I hear nothing but good things about it from Boxcar clients and our managed hosting clients. And yes, I’m a little bias.

Wordpress

if that wasn’t enough, I decided that it was time to abandon the abondonware blogging application Simplelog. In my last post, I stated that I wanted a blogging application that ran on ruby on rails so I could get my hands dirty in ruby. That still stands true, but I came to the realization later that I just wanted a place, first and foremost, where I can just write. Writing and refactoring code should come secondary to that.

Enter Wordpress. I know it’s PHP, it’s bloated, and a bit ugly, but it has a decent UI, almost everything I needed in functionality, and what it lacked in functionality, there was bound to be a plugin to fill in the gaps. I won’t go into any more details about Wordpress, as it’s ubiquitous on the web and the upsides and downsides are well documented.

New Design

And lastly, the redesign. This redesign was a bit spontaneous, as my original plan was to migrate the old design to Wordpress and revisit the design later. Just as soon as the old design was completely migrated, the redesign bug hit, and I decided to go ahead with it. Migrating the old design first actually worked out for the better, as that was my first experience working with Wordpress and it’s template system. The second time around, I had more of a grasp as to what I was doing.

With version 4, I decided to do something I’ve never done: light on dark. I’ve tried it a couple times in the past, but I ended usually trashing it, as the dark design never felt right. This time around, I went with it and never looked back. I got through the design phase in about a week and a half of my spare time, which was pretty quick considering there were times I’ve spent month(s) on a design.

For the grid CSS framework, I rolled my own. It’s based off of 960 Grid System but I wanted to create something from scratch, as there were things I didn’t need in 960 GS. What I came out with was something similar to the 960, but with two major differences:

• No IE6 support: I like writing as efficient CSS as possible (as most developers do), and since I am not supporting IE6 in any way, this opens the door to a plethora of options for selectors and properties that most of us designers and front-end developers dream of using, but tend to avoid because it’s not supported by IE6, such as :first-child and :last-child and the selectors that include class subsets (e.g. .main.link).

• Less bloat: When CSS frameworks provide options to accommodate different grid systems, or better yet, all in one solutions such as typography styles, icons, etc, such as Blueprint provides, it also comes with extra baggage. This isn’t a knock against 960, Blueprint or any other CSS framework, as these are built for a lower common denominator than what I needed, and for different uses such as prototyping.

Handy Wordpress Plugins

In addition to blog entries, I wanted to have a place where I can also post interesting links with commentary. Wordpress, plus the very simple wordpress linked list plugin allowed for me to go with a different format for this version of my blog. You will see blog entries and links in similar fashion, and both will appear together in the RSS feed. I have plans to also include blog entries only and links only RSS feed, but for now this should work just fine.

The archives page is probably the page I’m most proud of. I didn’t want a typical archive that lists out years, months, or categories in a typical, not very useful format. I went digging around for a wordpress plugin that allowed me to display months by year. I found one that allowed me to do just that called Smart Archives Reloaded. I had to completely rewrite the HTML output, but the final result is exactly what I wanted. As for the category list by alphabetical order, I had to use Multi Column Category List. Again, this plugin required me to change almost all of the HTML output.

Conclusion

So there you have it. I think, for once, I’m completely satisfied with the my blog setup and design, and who knows, I may write a blog post or two. Feel free to leave feedback via comments or the contact form.

(via Jason Kottke)

Also read Website Optimization’s for implementation methods.

At Planet Argon, we’ve been using 960 Grid System in most of our projects for the last few months. Some of our internal projects, we’ve been using a heavily-modded version of 960 (more on that later).

(via Jeff Croft)

It’s been happening throughout history, of course. Beautiful accidents. Unintentional intentions. We can’t plan these mistakes, but wish we could. What seems like disaster, turns into the spark that ignites what we perceive later as “rightly so”.

And it happens all the time when I’m designing. Oops, I dumped a white paint can where color used to be. Wait. That’s nice. It’s become a part of my process. A part I can’t anticipate, or account for, but a part nonetheless.

The serendipitous nature of design is part of what makes it so rewarding—those eureka moments.

So I’ve redesigned, finally. I promised myself I wouldn’t tell a long story of the trials and tribulations of how I came to this design. Just know that I actually started doing some IA work on it about a year ago and then it dropped off the radar for about a year, and picked it back up in February of this year.

The goal here was to keep it fairly simple. I wanted the content to stand out and come first. Frankly, I’ve never been a fan of the heavily styled blogs. While they are “pretty”, there is a threshold where a blog loses its utility and becomes more of a piece of art. For some, I guess that is the point, but to each his own.

Right now, it’s a bit rough around the edges. I have a long list of known issues that I put off because I felt were not show stoppers like:

• It doesn’t look great in IE6. I’m debating whether I’ll even attempt to dumb down my markup and CSS for the inferior browser.
• HTML may not validate, if you care about such trivial things.
• Search doesn’t work. I have a whopping 13 posts, so I think you’ll live. If that’s not good enough, here’s Google.
• Tidying and refactoring of some of the code.

Why Simplelog?

I wanted to stick with a blog application that ran on ruby on rails. My reason is twofold: As a rails noob, I wanted something I could hack on and get my hands dirty, and even though Simplelog development has stagnated as of late, I still felt the UI is simpler and has less cruft than Mephisto, which seems to be the ruby on rails blog application front-runner.

Thanks

Thanks to Robby Russell for the help on all the random development and deployment issues I was having, and to Andy Delcambre for helping me getting this beast up and running.

I decided I really needed to make more of an effort here on my personal blog, as it reflects poorly on me from the lack of writing to the default template that has been up for a year, a. year. That’s sad, even sadder that I call myself a designer. Saying that, I’m going to start making big changes around here.

Change #1: Say Bye Bye to the Default Template

In the very near future (by very near future, I means an ambiguous day in the realm of the very near future that isn’t specific enough to be held accountable for if I do not meet the goal.) this blog will feature an awesome new design by yours truly. Right now, I’m working on beating Simplelog into submission (a few nit-picky things), which is tall order of rails development for a designer. There also needs to be a few more lines of HTML/CSS to be written here and there. So, get your validators ready.

Change #2: More Linkage

My first and second attempt at blogging were more about coming up with original content. If you can do this on a regular basis, hats off to you. I, on the other hand, have trouble doing this—especially since this blog is not my full-time job. To keep things moving, I’m going to start posting links with commentary inline with the posts. This is an experiment to keep this blog interesting between blog posts. I will start doing this after getting the new design up, as this may require some development work.

Here’s to hoping that I won’t fail my blog a third time around.

I always love when I find a keyboard shortcut alternative to mouse clicking. It means just a little less strain on my right wrist, which at the ripe old age of 24, is starting to feel a little bit of a tingle from the 10 years of mouse wear and tear. It also means I don’t need to use the dreaded mighty mouse (the only Apple product that I hate).

I’ve recently discovered a few very handy text editing shortcuts in OS X that have cut my “mouse time” down dramatically. All of these keyboard shortcuts move the cursor using a combination of COMMAND, CONTROL and the LEFT & RIGHT ARROW keys:

NOTE: If the SHIFT key is pressed with any of these shortcuts, it will highlight text from the current cursor position to where the cursor was moved.

After finding about these simple shortcuts, I wonder how I didn’t know about these earlier.

2 of my favorite shortcuts in Textmate for for code editing are:

I spend a lot of time in stylesheets, so I make use of the block code commenting keyboard shortcut when I’m troubleshooting CSS.

There are a ton more shortcuts I didn’t mention here that I use. For more keyboard shortcut goodness:

• Mac OS X Shortcuts
• Textmate Cheatsheet

What are your favorite shortcuts?

Maybe I’m still hanging out in the web standards design blogosphere too much, but finding IxD & IA blogs to read have been few and far between. The ones I have found get updated once every 8 months or so. In an effort to spread the knowledge, here are some initial thoughts and experiences from an IxD n00b:

• Designing for interaction requires a lot more thought – Seems like an obvious assertion. Creating an user experience with interaction and behaviors that users have to interact with on a computer is a daunting task. In visual design, design decisions are based on an emotional response. Visual design for web applications—most of the thinking is already done for you.
• The sketchbook is your friend – Until recently, I didn’t do much sketching. I had nothing against it—it was a personal preference. After doing some sketching for a current project, I have found it useful in getting solutions & ideas out of my head quickly and with little effort.
• Wireframes versus HTML Wireframes & Prototyping – I am a big proponent of HTML wireframing & prototyping. Web applications encompass a lot of different interactions, some simple, some not so simple. Asking a client to fully understand a paper document made up of interface elements and interactions is asking too much. Paper is an inherently static medium, which is counterintuitive to the point of having wireframes in the first place. On the other hand, HTML wireframes & prototyping can capture interactions exactly same way as the will be in the final product. The design document is actually the final product. This topic is a blog post in itself, so I’ll leave it at that.
• OmniGraffle is the worst (wireframing) tool ever – I’ve been taking my OmniGraffle rants out on twitter for the last couple of weeks. I really don’t understand why people love OmniGraffle so much. Maybe Photoshop spoiled me with all the keyboard shortcuts, but I’ll be damned if I have to use the mouse for everything. Having “hot keys” for the tools is ridiculous. Not only that, OmniGraffle seems to have a problem nudging things around when nobody is looking. I’ve went to other pages and come back to see elements nudged over 1px. I’d use OmniGraffle for flowcharts and diagrams, but anything interface related? most definitely not.

Overall, I really enjoy what interaction design & information architecture has to offer. It may not be something I ever master, but putting my brain to work to turn client ideas and business goals into something real that people can use is something I can get passionate about.

My Griffin Webworks email has been riddled with spam for years. Long ago, I exposed my email to the web with my first incarnation of Griffin Webworks, and spam started rolling in after a few months. My web host for Griffin Webworks, Media Temple, has a spam filter called Mail-Protect, which is decent, but not as good as Gmail’s spam filter.

My personal Gmail account sees much less spam. It has mostly to do with the fact that I keep it private, and that Gmail has a great spam filter. So to get rid of my GW spam, I decided to route my GW account through a Gmail account to see what effect it would have on filtering out the spam. I went from about 20 spam emails a day to about 1 spam email a day.

It’s very simple what I did, and anybody with any technical expertise probably already has this set up, or has some other method of filtering their spam. I’ll run through the steps on how I did this:

1. Create a new “branded” (aka #######@griffinwebworks.com) email, and a new Gmail account just for spam filtering.
2. Set up my public-facing branded email to forward to the Gmail account I just created.
3. Set up Gmail to forward to the new branded email I created in step 1
4. In Mail.app (or your favorite email client), change your account to use your public-facing email as the reply-to email.

Now your branded email will run through Gmail’s wonderful spam filter and then forward to a private account.

IMAP your Gmail

UPDATE 10/23/07: looks like Google finally released IMAP for Gmail, which renders this tutorial meaningless.

One annoying thing about Gmail is their lack of support for IMAP. Using Gmail via POP isn’t so bad when you only have one computer (as I did). Now that I have an iPhone, I had duplicate emails coming into 2 email clients. Ironically, to solve this problem I had to do the opposite of what I did above to kill my spam:

1. Set up a new email with IMAP capabilities (in this case, a new Griffin Webworks email).
2. Forward my Gmail to the email I created in step 1
3. Set up the IMAP account in Mail.app (or your favorite email client) using your Gmail as the reply-to email. I did this by setting up Gmail as the outgoing server.

My Griffin Webworks email is virtually spam free, and my Gmail account has IMAP capabilities.

Also see: Spam Free Email (For The iPhone) by Sean Sperte

Robby did all the development work for RubyURL, and I was in charge of the visual design & XHTML/CSS. Not to be too self-indulgent, but this has to be the sexiest URL “shortner” on the web right now. Not too bold of a statement when you take a look around the web (if only sexy accounted for something ).

If you find any bugs, feedback or feature requests, feel free to post them here.

We are all in agreement here, right?

So why are websites forcing me to use their mobile-friendly version of their website? (Amazon and Bank of America, I’m looking at you).

It’s true that the majority of iPhone users may prefer the mobile-friendly version of a website. My point is, my iPhone is capable of seeing the “real” internet without any extra effort on behalf of these companies. So, let it be my choice. Give me the option to switch to a mobile version if I so desire.

Let me decide how I want to experience your website on my iPhone, whether it be the “real” way or the mobile way.