Tagged: Design

We recently sat down with Ryan Singer, lead designer at 37signals, to ask him several questions that are on web designer’s minds. He talks about copywriting, being a project manager, frontend development skills, handcoding and where to find inspiration. Here’s a transcription of the interview …

What websites do you usually go to for design news, inspirational, or tutorials?

I’d have to say probably my favorite place right now for inspiration is ffffound.com. It’s not really web design exactly but it’s a lot of really cool imagery, a lot of cool colors, shapes and stuff like that.

As far as design news, I don’t know if there’s anything so interesting out there that I’m really watching for, but there’s new great design in all directions, coming from all different places all the time. Things like poster design, new typography ideas, etc.

Is there a particular web designer that you’re looking up to right now?

You know, I’m seeing more and more good design actually all the time. However, I can’t say that I have a favorite right now.

Generally I’m seeing just a lot of cool stuff and stylistically, style continues to advance. But the copy and the clarity isn’t necessarily getting better. I’m not seeing very many sites where I think, “Wow this was really well thought out and well written. I still don’t see a lot of that.

Why is there a lack of copywriting skills among web designers?

Nobody seems to be talking about it. Where are all the blog posts about how to make really super-clear content?

The thing that’s really easy to look at and copy are pixels, color combinations and type. I think it’s really hard to look at a website as a writing project because as a designer, we have all these magic tricks we can do with our CSS and our HTML and everything and we kind of have to put that in the back and make that take a back seat to, “do I really have anything to say here?”

Last week I posted to our blog about Jacob Neilsen’s site, praising the the Alertbox articles. Each one is completely crafted as a piece of writing. Something to be read and understood and digested. I love the way certain points are bolded and the way the whole thing is structured is really well thought out. I think it’s a really inspiring example of great copy.

If you’re a designer who doesn’t do any writing, you’re going to hit a brick wall in your career at some point.

What books can designers read to get better at copywriting?

One of my favorite books is by a guy, William Zinsser, it’s called, On Writing Well. That was an inspiration for me and I remember reading that and feeling like it really helped me a lot.

What’s the one skill that new designers focus on?

You gotta start handcoding! It’s the number one basic craft of web design, if you don’t handcode then you’re not going to be able to move into doing web app interfaces, which is really what I’m doing now.

You’re not going to able to work on applications or collaborate on code or make apps, websites that really have a lot of behavior unless you get into handcoding, so I think that’s like the barebones thing that for sure everybody should be doing.

What software do you use for coding?

I happen to use Vim, which is a little bit of a nerdy tool, but a lot of my coworkers use Textmate and love it. A lot of people say that BBedit is great and I also hear that Coda is really nice. There are all kinds of options out there.

As a designer, do you need to understand frontend development?

The more you understand about frontend development, the better designer you’ll be. If you are really familiar with handcoding and you understand basic HTML markup and you know how CSS selectors work then you’re really well prepared, for example, to use the fact that jQuery and Prototype both have a way to refer to pieces of your mark-up using CSS selectors even though your not using CSS.

If you’re designing web app user interfaces, then I think it’s important to get into understanding how an MVC framework works like Rails or Django. If you can understand how your templates fit in to the view, as the “V” in MVC then that’s a huge leap. You can really start doing work with programmers and you can have ideas and you can make them into reality instead of just making designs and handing them off to somebody and hoping that someone else can plug them in.

How do you learn about MVC?

It depends on your situation. If you’re a designer and you work with programmers already (who are friendly) then just ask them questions. They can really get you started on the right path. Don’t be afraid to ask dumb questions – they’ll appreciate the fact that you’re trying to learn.

If you are a little more programming minded and you’re on your own, there’s all kinds of stuff you could read, a basic primer on Rails would help a lot.

Getting into programming in general is quite useful. Before I did web design I setup Access databases and Filemaker databases and stuff like that. Jason Fried did the same thing actually – he started with Filemaker databases, and I think that basic understanding about how does a database work, just what are the pieces and trying to visualize, how could I display that or how could I manipulate that data, is a really good kind of foundation level.

What is a typical day in the life of Ryan Singer?

Ugh, it’s pretty busy lately. We are a small team and we try to do a lot with a few people. We actually just brought on a new designer, so we’re up to three designers now which is going to help. I spend a fair amount of time designing UI for new features. We always design the interface first, before building anything.

So part of my day is actually designing new features, another part of my day, because I’m also working as a product manager here, is to figure out what we should be doing next and who’s going to be doing it.

Also I love, I just love, getting into Rails and making things work too, so I do a fair bit of programming everyday. As much as I can plug stuff in, I do it.

Do you think being a product manager has helped you become a better designer?

No, not at all. I think that it’s the opposite actually. When you’re wearing your ‘Manager Hat’ you start to create a barrier between you and the designers and developers that are actually implementing the app.

It’s really harmful to the product because anytime you have a separation from the one whose coming up with the ideas and the ones who are doing the work, it’s a bad thing.

As a designer, is it important to be interested in the business side of things?

No. Either you’re interested in the business side or you’re not. However, if you have an understanding of what compels people to make buying decisions and how marketing works, you can feed it into your design work.

Okay, well with that, I think that our time is up, thanks so much for your time.

Yeah sure thing, thanks for chatting.

Like this article?

If you enjoyed, this article, feel free to re-tweet it to let others know. Thanks, we appreciate it! :)

Photo Credit: DHH

We’ve compiled six useful tips for all you web designers and developers out there. They cover various topics including: accessibility, SQL, web developer plugins for Firefox, HTML emails, design and jQuery.

Feel free to disagree or add your own in the comments below. If you’d like to submit a tip to be considered for future articles, just head over to Tipster and add your own.

Alt Tags and Screen Readers

By: James Fenton

I can’t claim these tips as my own, though my web accessibility hero Bim Egan (of the RNIB) recently gave me a few simple tips regarding alt tags and screen readers.

1. Keep your alt tags as concise as possible.
2. Don’t just describe exactly what is going on in an image, describe what message it is trying to convey.
3. It is OK to leave the alt attribute blank (alt=”") as it can be more of a hindrance to blind users than a help.
4. When an image is essentially just style, use it as a background-image.

Spending a few hours watching (and listening) to a blind user on the web is a mind blowing experience and will totally change how you approach accessibility

Shorter SQL statements by abbreviating table prefixes

By: Joris Heyndrickx

Instead of writing:

SELECT books.title, books.short, books.releasedate, authors.firstname, authors.lastname
FROM books, authors
WHERE books.author_id = authors.id AND authors.id = 21


You can write:

SELECT b.title, b.short, b.releasedate, a.firstname, a.lastname
FROM books b, authors a
WHERE b.author_id = a.id AND a.id = 21

My Top 6 Firefox Plugins for Web Development

By: Simon Hamp

FireBug with FirePHP FTW!

1. FireBug (getfirebug.com)
2. FirePHP (firephp.org) req. FireBug
3. ColorZilla (colorzilla.com/firefox/)
4. HTML Validator (users.skynet.be/mgueury/mozilla)
5. YSlow (developer.yahoo.com/yslow/) req. FireBug
6. Web Developer (chrispederick.com/work/web-developer)

Image headers in table based HTML Emails

By: Pete Roome

If you have an image as a header on a table based HTML Email it is likely you will find you have a very annoying gap beneath it between your two <tr>’s. Simply add the following styling to your image to close this gap:

{vertical-align:bottom;}

Lighting effects on boxes

By: David Smith

To make a box stand out in your design simply:

1. Choose a colour for your box
2. Create a subtle gradient starting from a slightly darker version of your colour (bottom) to a lighter version of your colour (top)
3. Make sure your gradient is SUBTLE!
4. Draw a horizontal line across the top of your box so that it spans the whole width.
5. Pick a colour from the top of your gradient and lighten it still more. Apply this colour to the line you just created.

You should have an effect which looks like light is hitting the top of your box making it stand out. The blue Tipster banner uses this to good effect.

Manual filmstrips in jQuery

By: Michael Peacock

Here’s how to create a really simple manual photo film-strip in jQuery. It can be used to swap a large image on a page with that of a thumbnail elsewhere on the page, such as different photos of a product in an e-commerce store.

$(document).ready(function(){
imageSwapper(".thumbnails a");
});

function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};

Just link the thumbnails to their larger versions and pop them in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

Any tips you can add?

If you have any tips you’d like to add, please do so in the comments below. Thanks!

[Photo Credit: flickr.com/photos/dunechaser]

Like this article?

If you enjoyed, this article, feel free to re-tweet it to let others know. Thanks, we appreciate it! :)