Sean Gaffney is a newskool HTML5/CSS3/JavaScript/jQuery front end guru. Was that a mouthful? You may not have heard of him yet, but he’s been some of the muscle and brains behind the new Pattern Tap, Blue Sky Resumes as well as Barley’s Greenville. He’s also presented at conferences on jQuery and front end development.

When Sean was growing up, his Dad used to tinker around with radios. He get’s all misty thinking about it and he loves that minimal old world transistor diagram/radiophile vibe. He wanted to tie in his nostalgia for such a style into his new website. One of Sean’s goals as he makes his foray into the world of blogging is to pour out his skills to help the people that helped him learn so much.

It’s been awesome working with Sean and while this project spanned out many moons, we were able to achieve something that he could truly love…and that’s exactly what I wanted to design for him — Something he loved and cherished.

A Testimonial from Sean:

“YOU ARE THE MAN! I mean that, really!!… Thanks bro! You’ve truly blessed me with this project!”

You can view larger images in the portfolio.

The Richard Nixon Foundation wanted a very presidential, elegant and vibrant website to bring life and a new look to it’s previous design. The Richard Nixon Foundation is a multi-blog Powered on WordPress MU.

Komodo Media teamed up with Sarphi to bring some design savvy to The Nixon Foundation.

If you’d like to see more, please check out more photos in the portfolio.

Here are the new additions:

View on light background • View on dark background

• Cargo
• Dribbble
• Gowalla
• Grooveshark
• Paypal
• Xing

Download?

Ok, head on over to the downloads area to click on your download link to get the updated icon pack and that’s it!

Thanks

I just want to say a personal thank you to all of you who have used my icons, commented on how much you love them, incorporated them into your designs and given me some link love back to my website. The adoption of my little icon set over so many pages on the internet has really encouraged me as a designer.

What’s next?

My next addition will contain Xbox (it’s coming Sam ;), Playstation and Wii icons…more suggestions?

Here are the new additions:

View on light background • View on dark background

• Google Voice
• Google Wave
• My Name is E
• Orkut
• Qik
• Robo.to

Download?

Ok, head on over to the downloads area to click on your download link to get the updated icon pack and that’s it!

Hope you enjoy the new additions and thank you all for loving my icons!

Why do you enjoy social networking?

I love people. When I’m out and about, I am always people-watching. I’ve been known to drift off in conversation because I find myself intrigued by people nearby and what they do. This is why I love Twitter so much. It’s interesting to know what people are up to and what they have to say. This is also why I enjoy anthropology classes in school. So social networking is like this for me but online. It’s fun.

Favorite 3 typefaces on impulse, even if it’s Comic Sans or Papyrus. Go!

Hoefler Text, Myriad, Helvetica

What is your specialty in your industry?

I focus on both visual interaction design and CSS architecture. Oh, and I’m really good at eating cookies. I should do a conference talk on it one of these days.

Name one of your favorite webbies and why.

Only one? I have many to choose from… A recent favorite is Meagan Fisher (owltastic.com) on Twitter @MeaganFisher. She is a very good designer, a cool chick to chat with on Twitter, and a fellow fan of Twilight.

Sushi & Robots. I gotta know. Why the obsession?

Uh, because they are AWESOME? Jeez, like you even have to ask.

Haha, seriously, though, these are two of my favorite things. So I figured… why not put the two together for my site’s name? I like it. It totally works for me.

What do you want to be when you grow up?

I want to act in a Tim Burton movie one day. :) Especially if it means I get to make out with Johnny Depp.

Any advice to complete web noobs?

While it is definitely good to know as much as you can about the web, find your one thing and get good at it. REALLY good at it. People will eventually seek you out for that… and you’ll get to do the other stuff along the way. At least that’s how it was for me.

Also, stand up for yourself and learn to say no. It’s easy when starting out to let people walk all over you and take advantage of you, especially if you are new. Your health and emotional state is a key part of your life, and more important to you than how much work you can get. I still sometimes struggle with learning to say no, but I work on it constantly, and advise you do too.

How did you get into art, development, speaking, writing, and design?

I’ve always liked creating things, whether they were handmade greeting cards, drawings, hand-made plush teddy bears, or whatever. Ever since I can remember I’ve been making stuff. When I was about 14, my dad showed me a website he made by himself using AOL’s web site creation tools back in the day. I was fascinated. He could type something and out popped a website! He was using very minimal HTML code (and relied heavily on tables), but this was enough to get my big hobby going. I would sit for hours and hours doing this in my evenings and weekends.

When I went to college, I chose art school because I wanted to be a graphic designer. Somewhere along the way I realized I could merge my hobby of designing things with my hobby of HTML — and actually make a living doing it.

The speaking and writing came as an added bonus. Once I got the first writing gig (the chapter for The Art & Science of CSS), the rest kinda fell into place. :) It’s great — I enjoy doing it and it works well as a primer for one of my future goals of getting into teaching.

Favorite Robot. Go!

Eve from Wall-E. She’s so cute.

Favorite Sushi. Go!

If sashimi counts, I really love sake (salmon). If not, and nigiri counts, I really love unagi (eel). But if we’re talking strictly rolls, I tend to go for a spider roll… or a caterpillar roll.

What is your one passion in the web industry?

Again, I only get one? :) I suppose I would go with sharing/teaching. I love that the web industry seems to be one of the most open industries in terms of sharing skill sets and techniques. This is something I want to be more of a part of.

Who is your favorite vampire and why?

Celine, the death dealer from Underworld. She is such a bad*** and she looks super hot in that black outfit.

Epilogue

Jina’s words and things can be read and bought over at her blog, Sushi & Robots. You can follow her on twitter @jina and she’ll probably talk with you, considering her social butterfly’ness. She is currently employed at Crush + Lovely, a company that shares her vision in creating relationships. If you want to read Jina’s works, I suggest checking out the following of her writings:

• The Art & Science of CSS
  Published March 2007
• 23 Beautiful Examples of Web Site Archives
• Writing an Interface Style Guide
• Make it Modular
• Creating Sexy Stylesheets
• Breaking Out of the Box

Sweet mama, how can this page be so simple, yet so sexy?

Yup, that’s exactly what I said to myself when I saw dConstruct 2009’s newest design by clearleft. I envy them in a very specific way. Simplicity and minimalism. Let me explain.

We all know the kind of sites I design. Detailed and illustrative, but that takes time and often it actually hinders the design. The kind of sites I design tend to be too detailed, and as a result get too busy. The more busy the page is, the more it dilutes the user’s focus and dilutes the experience. I hate this about my design style and my aim is to design sites more and more in the fashion that clearleft does. Simply, beautifully and stunning. Not too much. Not to little.

I love dConstruct 2009’s bold, simple and big style. I love it’s vibrance and quirkiness. I love the speaker view page, with just the right amount of character. I love the fact that the nav isn’t just a horizontal bar. It breaks the mold by offsetting the current navigation item and really ties the whole theme and branding in. It is this type of website that the pros make. This website seems very easy to design. It seems like the design would be very easy to attain, yet it is this sort of site that is hardest to attain, because of it’s striking balance of simplicity and style.

Good job on creating a very inspiring and relevant site clearleft! Your work is an inspiration to me.

As social websites like Twitter and Facebook have become dominant forces in the social network scene and with both networks offering sign-in solutions using either of them, we are going to see “Sign in with…” buttons popping up all over the place. And why not? Why would I want to create yet another account in the account-soup that is the interweb today? I don’t! It’s a heck of a lot easier for me to sign into a site using my Twitter or my Facebook account than it is to go through a lengthy account creation process.

Well, then cool! So as signing in with these websites is becoming more popular, let’s just say that I think that the buttons are not so hot. Let’s face it. I want to click beautiful things. I don’t want to punch some gawdy twitter button that some poor developer with an amazing idea came across on an old geocities design hack’s site. I want that developer to have a beautiful “Sign in with Twitter” button.

Enough of my ramblings, I’ll get to the point. I made signin buttons for both Twitter and Facebook for you guys to use at will. There are 3 button states in each PNG image that you will see in the download: default, hover and press. That’s all! Enjoy!

Download Social Sign In Buttons

Social sign in buttons is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License

Time for another inspiration post. This post is long, long due. I remember when I first saw Anand Sharma’s work at Dragon Interactive. I was stunned by his clever gradients, pixel precision, cross-fading animation and level of detail put into everything. I remember wrongly thinking that his site used Flash because of the smoothness of his animations, and clever way of producing text shadows. No, he does it all in HTML, CSS and JavaScript.

Dragon Labs

While I certainly tip my hat to his work on Dragon Interactive, I think everybody, their Aunt Bea, and their pet snake have too :) I’d like to talk about some of the work I’ve seen him doing on an upcoming site called Dragon Labs. Anand has showed me his work as he has progressed with this design.

Bubbles boil up hover effect on a beaker at Dragon Labs.

First let me say, that he has given me a whole new definition of “meticulous.” Everytime I thought the design was complete and looked great, he’s spend another 3 days on it and make it better. His level of detail, perfectionism and devotion to a design is flawless. Every time a revision is made to one of his designs, its for the better and often introduces on more sparkle to dazzle the design. He thinks and researches each one of this designs in a way I’ve never done before. Typically, I start with a canvas and start designing. Anand researches his subject like a Jedi knight preparing for battle, knowing his enemies’ weakness, studying his target, preparing, waiting, until the right moment. This most of all impresses me about Anand. He designs because he loves it. He designs it right. He is meticulous.

I could rant more on process, but I think it important to see what I’m talking about. Anand has made his “sketches” public on his flickr account. There you can comment on his work, view samples from his portfolio and work that he has done on Noisefreak, Girl Gamer, Dragon Interactive and more.

Another thing I have noticed about Anand’s work is how he uses PNG images and scales them for the browser size. With a large resolution monitor, the beakers at Dragon Labs are large and gorgeous. When a user resizes their browser, they are in for a treat. Anand has used percentage based CSS dimensions on the beakers to scale them according to the browser dimensions. What does this mean? Well, other than being ridiculously and insanely rad looking, there is no cutoff. The beakers stay in view and seem placed right on the “shelf” for large and small screens. Awesome. Also, you’ll notice a bubbling effect shown above on the Octopus beaker. No, this isn’t an animated GIF image. This is a frame-by-frame animation of a PNG image of bubbles. You can see three frames of this PNG “filmstrip” here. Too flippin’ cool.

What is Dragon Labs?

YShout Shoutbox Administration Panel at Dragon Labs

Dragon Labs is more than a pretty face. Its a community offering. It’s some of Anand’s best work put out for you to learn from and use in your own projects. Want to know how he did that great crossfading effect on Dragon Interactive? That’ll be there. Want to see an insanely cool implementation of a “pulsing” shoutbox admin panel? Yup, that’s there, and more coming. Anand will be putting quite a bit of his genius work up there, a sort of tutorial-like, one-way blog of sorts.

Follow him

So what do you do with people that have more talent in their left pinky finger than you do in your whole body? Follow the leader. Read their blogs, study them, learn from them, follow them on twitter. You know what to do.

• Follow Anand Sharma (aprilzero) on Twitter
• Dragon Interactive