What you need to know, to be a UI Designer

Clearly, it is holiday time

Clearly, it is holiday time as I write this.

Not too long ago, jiatelin5 asked in a comment what books and lessons I recommend for brand new UI designers.  Since I get this question a lot, I thought I’d make it a post.

Becoming a UI designer is a lifelong process.  I’ve been doing it for 16 years and I’m still learning.  You need to have some soft skills, which I’ve described in a previous post.  In addition to these, you need to be very good at communicating, and you also need to have some technical and artistic skills.

The very minimum

  1. Learn HTML & CSS.  If you don’t understand how web pages work and how they are built, you can’t possibly hope to design them.  My very favorite resource for this is Code Academy, but there are also good books out there – don’t be afraid to buy the latest edition of HTML for Dummies.
  2. Learn Photoshop.  There are plenty of design applications out there, but if you only ever learn one, learn this one.  The reason: once you can use Photoshop, you can use any of them.  The bonus reason:  employers will search for this skill in your resume, and if they don’t see that you know Photoshop, they might not even consider you regardless of what you do know.  All the photoshop books and tutorials have their benefits, but feel free to check out Photoshop for Dummies – pick the edition that matches whatever version of Photoshop you can get your hands on.
    There is a great forum on the adobe website set up just for Photoshop newbie questions – check it out.
  3. Learn basic typography.  There are a lot of great articles for this, and some of my favorites are from Design FestivalSmashing Magazine, PSD Tuts and 24 Ways,   There are a lot of great books out there for typography too – start with The Elements of Typographic Style and move on to whatever holds your interest from there.
    The 24 Ways link above is particularly important because you need to understand vertical rhythm in order to design sites that make users comfortable.
  4. Learn basic color theory.  Unless you intend to be designing in black and white forever, you’ll need to understand when and why to use color.  Check out these articles: Color Theory For Web Designers,  Basic Color Theory.  Ignore anything you see about what colors mean because they will differ for each culture and demographic.  Red means one thing to the chinese, another entirely to americans.  It means one thing to older americans and another to teenaged americans.  So just forget all that temporarily.  Read The Principals of Beautiful Web Design.
  5. Learn about layout.  This is something you’re probably going to get instinctively, or never really get at all – but there are a lot of articles and books about it so even if you get it instinctively you need to read them to be able to explain yourself and make wise choices.  Start by researching Responsive Web Design and follow it wherever you want.  As long as you start understanding layouts from the responsive web design standpoint, you’ll be fine. Interactive Media Center has a pretty good approach to layout, although the site is a little dated.
  6. Get a feeling for producing UX deliverables.  At the very minimum, every UI designer needs to know how to make good wireframes, low-fidelity mockups and high-fidelity mockups.  Depending on where you go to work, you might also have to write styleguides or work from them, write specs or PRDs, or build prototypes.  Don’t just follow my links – google all these terms and read everything you can.  You’ll develop your own style and that’s just fine.  It’s awesome, actually.
  7. Learn about usability evaluation methods.  Even if you work in an organization where someone else does the research, you need to understand methodologies, when to use which one, and how to understand whether you’re making good designs.  It’s good to do customer requirement gathering before you start your design, and then evaluate your design afterwards – even if you’re just using budget, quick or halfhearted methods.  You can’t design in a vacuum unless you’re designing something only you will use.  Read Don’t Make Me Think and Website Usability: A Designer’s Guide and then keep reading other books that those books recommend.
  8. Learn the best practices for web design. Again there are hundreds of good resources, but my favorites are Smashing Magazine,  Jakob Nielsen (even though he’s controversial),  Bruce Tognazinni,  and Designmodo.  Subscribe to blogs and read them every single day.  Best practices evolve, so you need to keep up with the latest research.
  9. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.  This could be a whole blog post of its own, so my recommendation to you is to google all of the above and come to deeply grok the differences.

Please keep in mind that this is just your basic “get an internship” level of learning.  You need to register for conferences, and get out there working and learn more.  If you can find an undergraduate program at a college, go for it.  Otherwise, look into cognitive psychology, computer science, and design courses.  If you have your baccalaureate already, see if your local college has an HCI or CHI or UCD program.

Good luck to you.  It’s a tough profession, but the world needs more of us.


Today’s Interesting Link:

weenudge.com – I heart this page so much.  It’s MOST useful for the freelance or agency designer, but everything in here is helpful for in-house designers too.  It’s essentially a collection of things you need to explain to your clients, and ideas for how to explain them in friendly, clear ways.   It hasn’t been updated since May 2011 (sad face) but it’s still super awesome.

Today’s Usability Quote:

“Ideas are not so compelling that they just jump off a page.  You have to sell your story.” – David Blakely, Director of Technology Strategy at IDEO

Today’s Music To Design To:

I’m so embarrassed to say this: All of the Twilight movie Soundtracks.  Ok, stop laughing and listen – the movies are awful but the soundtracks are fantastic.  You get everyone from Florence  + the Machine to Bat for Lashes to The Bravery.  The tempo is just right and the songs are just innocuous enough to let you throw your own meanings onto them.  The best one is Eclipse, which I think was the third movie.

5 thoughts on “What you need to know, to be a UI Designer

  1. Why should Designers know CSS and HTML? I think it may be good to understand it to a certain extent, but wouldn’t it be better for them to push the design to it’s limit and then come to a compromise with a developer? I woudn’t expect a UI Designer to code anything, since that’s what I’m hiring front end developers to do, so where does the cross over begin/end?

    • What a great question!
      You are right – they don’t always need to code, so it might seem like not knowing CSS and HTML will free them to do the very best design without limitations. However, not knowing the basics of these two actually hobbles them. It’s like designing clothes without knowing the structure of the human body – you might not design holes for arms and then the clothes aren’t very useful, even though they might be gorgeous.
      HTML and CSS are the framework on which the web operates, so a designer who doesn’t comprehend that framework is designing blind. And I’ve never seen even beginning designers who felt that knowing these things limited their creativity.
      Additionally, I’ve found that designers who don’t understand HTML and CSS don’t interface with developers very well. Even if the designer’s knowledge is the cursory “HTML for Dummies cheat sheet” level, it gives them an architecture within which to communicate their intentions to the devs.
      Last, as a designer I’m aware that I’m far more valuable because I can write code. When I design something and a developer says “it can’t be done that way” I can discuss techniques and approaches with them, or even build them a prototype very quickly. I can build HTML prototypes to usertest my designs far cheaper and quicker than having a developer do it, and by doing so I save the company huge amounts of money and precious dev resources. A company with a code-savvy designer is far more nimble and responsive than one without.
      If a designer is only creating print material, of course they don’t need to know anything about HTML/CSS. However I don’t think they can even begin to make beautiful, easy to use websites if they don’t understand the bones behind their elegant skin.
      Does that make sense?

  2. Hello,
    Thanks for this article! I’m a graphic designer and I know very basic HTML and CSS. Do I need to learn JavaScript and JQuery as well?

    • Need? No. It would be good for you to have a basic understanding of how Javascript works because a bunch of places are using jQuery for interactive elements. It’s nice to know what the toolbox is. However, I don’t think you have to be able to write JS to be a good designer. Just understand the basic concepts.

      On the other hand, it’s NEVER a bad thing to have more skills. 😀

Leave a Reply to Krys Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>