Designing User Interfaces and Reaching Stylesheet Nirvana-Interview with Dan Rubin

Greetings WOW members and Web professionals everywhere. Bill Cullifer here with the World Organization of Webmasters (WOW) and the WOW Technology Minute.

WOW participated in the Web Builder 2.0 Conference last week in Las Vegas, NV. as a Media Sponsor. For today?’s podcast, I had the pleasure to sit down with and to interview with Dan Rubin, Founder and Principal, Webgraph a Web design and consulting firm based out of Fort Lauderdale, FL.

In addition to bringing a wealth of knowledge to the conference, Dan’s truly a great guy and the kind of Web professional that loves to share what he knows with others. I asked Dan to summarize his session. “Designing User Interfaces: Details Make the Difference” where he talked about grids, typography, abstraction, ornamentation, and photography to create aesthetically pleasing, sexy interfaces. Dan other session Reaching Stylesheet Nirvana discussed working to improve the maintainability and efficiency of your style sheets, planning for the future, and mastering your work flow. In his interview, Dan shares his thoughts regarding managing clients for those that freelance.

Check out today?’s six minute podcast on WOW Technology Minute website.

Today’s WOW Technology Minute is sponsored by Adobe Systems and their series of MAX conferences for 2008/2009

MAX is an experience unlike any other — an opportunity to connect with thousands of designers, developers, partners, executives, and Adobe staff for education, inspiration, and community. MAX 2008/2009 will be held in San Francisco, Milan, and Tokyo. Be sure to mark your calendar for this important global event.

MAX is an experience unlike any other — an opportunity to connect with thousands of designers, developers, partners, executives, and Adobe staff for education, inspiration, and community. MAX 2008/2009 will be held in San Francisco, Milan, and Tokyo. Be sure to mark your calendar for this important global event.

Follow these steps to receive your Adobe MAX North America WOW registration discount:

Step 1: Visit the MAX North America registration listed below
Step 2: Select the button for “Yes, I have a registration code.”
Step 3: Enter registration code [WOW844]
Step 4: Complete the steps for online registration.

Register today on the Adobe Max website!

Transcript of Designing User Interfaces Dan Rubin

BILL CULLIFER: Bill Cullifer here with the World Organization of Webmasters (WOW) and the WOW Technology Minute here at Web Builder 2.0 at Las Vegas. I have the pleasure to be interviewing and discussing a variety of topics with Dan Rubin, he?’s a speaker here at the conference. He?’s the Principal of Webgraph and wears a variety of hats. He?’s a Web guy going way back. He participates in a lot of events and we?’re pleased to be interviewing him on a variety of topics including the two sessions that he did here today, “Designing User Interfaces: Details That Make A Difference” and “Reaching Stylesheet Nirvana.” Good evening, in this case Dan, and thanks for agreeing to this interview.

DAN RUBIN: Thanks for having me Bill. I appreciate it.

BILL: You bet. Can you summarize the sessions for us and could you give us a couple of walk-a-ways that we could use today?

DAN: Sure thing. Thankfully the presentations that I put on tend to all be about take-a-way and there?’s just a lot of filler and explanation and discussion that goes on in between. The first session, again the title is “Designing User Interfaces: Details Make the Difference” and really what it?’s about is all the subtle details that take an interface from plain and boring to something more. The emphasis throughout the entire session is about that subtly, that something should be felt more than it?’s seen, whether that?’s something simple like a drop shadow or a highlight or a bevel, anything like that that of course if you use a default setting on a filter to apply those it looks obvious. Well, our goal when adding things like shadows and highlights and texture is to make something feel like it does in real life. In real life they aren?’t obvious, they just feel like whatever the texture looks like. We can tell by looking at something what it feels like, usually without even touching it. If it looks smooth and polished we know what it feels like. If it looks like burlap we don?’t have to touch it to know. So it?’s all about applying things in a subtle way to go for feel over look.

Some of the take-a-ways as well even go down to a more basic level for folks who aren?’t designers. So I talk a lot about patterns that are easy to apply to take something from being just a jumble of disorganized content on a page into something that has some form and has been designed, even if someone isn?’t artistic. So some of those things are using pattern and design. Patterns can be something like relative margins and padding, for instance. Coming up with a base scale that you?’re going to just multiply in order to get consistent, relative proportions. For margins and padding, for instance, you could have 5, 10, 15, 20 pixels and go on beyond that, 10, 20, 30, 40, all of those are going to be related to each other.

One of the examples I gave was the cnn.com site where their base type size is 12 pixels, that?’s where the content renders out to, so all of their type sizes are relative sizes, larger sizes 15 or 18 or 21 or 24, all multiples of 3, basically using 3 pixel intervals. Their margins and padding are likewise, based on 12. So you?’ll have 6, 3, 9, 12, 18 and you see these measurements used consistently. It creates a coherent interface. It doesn?’t require any creativity. It actually requires the opposite.

The use of patterns we talk about a lot, even ways to use tools like Photoshop to use the patterns that the tools allow you to use. So layer styles create a look and feel of something, like a button element, once and don?’t recreate it each time and risk having it be something different throughout a given design. Copy and paste the layer style to a different layer. It allows you to be more consistent. Basically the core concept of patterns in this way is patterns make it easier for you to do the right thing. You?’ll make less mistakes by using these patterns because you have to work less. You can spend your creative time on creativity, not on the things that make a good interface, a good, solid, balanced interface. And that?’s really the gist of it.

BILL: I appreciate you sharing. I?’m curious to know, you?’ve been a designer for a number of years, I?’ve heard you earlier talking about freelancing, can you give some tips, any recommendations that you?’d share with those sitting out there listening, wanting to know how do I improve my overall design workflow, how do I reach out to my customers and just be overall better designers?

DAN: Well the biggest thing that?’s worked for me, I run a small agency, small being that it?’s a family agency, myself and my younger brother, we?’ve been running that for over 10 years and before incorporating as that agency I worked freelance since I was 16. So I?’ve been doing this, and doing freelance, for a long time. And I also work with folks at Sidebar who are all small agencies, they?’re just slightly larger than freelance, but we?’ve all been doing it a long time and the trick is being selective with the clients you take on. That?’s counter to your instinct which is, especially when you?’re starting out, “I?’ve got to take on everything that I possibly can,” because you don?’t know when the money?’s not going to be there. That?’s what everybody tries to do. What you end up doing is you take on a lot of clients that either don?’t really want to pay for services, your quality of services and they stress you out and degrade your quality of life because of that, and you end up taking on a lot of small projects because you can?’t take on a lot of large projects at once and handle them. The small projects are the ones that tend to disappear when the economy goes bad. The large projects for the better clients, the higher-end clients, are the ones that don?’t disappear. Those are the ones that stay consistent. So the combination of picking clients that you want to work with, that you can be passionate about and not worrying about the volume, focusing more on the quality and also targeting higher-end clients. If your goal is mom and pop stores, be prepared for them to not want your business when the economy goes south. If you?’re focusing on big corporations, larger organizations, then typically the business will not falter with the economy. That stuff stays pretty consistent.

BILL: Yeah, very good advice. We certainly appreciate that and your time. That you so much Dan.

DAN: Certainly. Thanks Bill.

Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.