Ryan Singer on UI design, Frontend Development, Project Management and Inspiration

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

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

0 comments on “Ryan Singer on UI design, Frontend Development, Project Management and Inspiration

  1. Great stuff! As a designer, it kind of boggles my mind that most of my peers don't know how to translate a design into HTML and CSS. This is such an essential skill, and without it, you're creating a barrier between yourself and people doing the work of slicing up the layout.

    I have to disagree with one point though. I think that a designer that has an understanding of marketing is going to be much better off when it comes to branding an app and creating a consistent experience across products. For me, this is an essential skill that I utilize when doing any design work. I'm not Ryan Singer though, so :)

  2. "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…"

    So interesting you write this. I am a designer and developer. Quite a few years ago (10 to be exact) I designed and developed my first application using Filemaker for our family printing business. It was a huge success and I guess I was hooked.

    These days I use Rails. I've also had a lengthy career in print before coming to the web.

    Great interview :)

    • HI I am a BCA graduate I am planning to start a project I would like to have some suggestions and guide lines from you will you guide me please? Send urr reply to my e-mail ID.

  3. Interesting insights. It is nice to see an actual UI developer being intereviewed to talk about what they do and how. It's a slight diversification from interviews with designers and IAs or whatever. Nice.

  4. Great stuff, really inspiring! and thank s for recommending ffffound.com, now my whole work day is ruined .. but I love it! So much amazing, intriguing stuff!

  5. Ryan,

    Great article. “Where are all the blog posts about how to make really super-clear content?” is a good question–seems like there are few people talking loudly about content right now, but not as many as you’d expect given that we’ve all been dunked in content-is-king speak.

    Thanks for the bright ideas.

  6. Pingback: Front-end Engineering and Development Resources ‹ Sam Morris

  7. that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.

  8. Hi,

    Very intersting post, thank you!

    Little question: what’s the plugin you use in your sidebar for the newsletter?

    Thanks in advance.

    Best regards,

    Olivier