The Mythical User

Taking the mystery out of User-Centered Design

What you need to know, to be a UI Designer

on 28 November, 2012
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.


12 responses to “What you need to know, to be a UI Designer

  1. MS says:

    Fave’d this article. thanks!

  2. Tee Arr says:

    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?

    • Krys says:

      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?

  3. Den says:

    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?

    • Krys says:

      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. :D

  4. Larry D. says:

    Very useful article! I have some questions:
    I saw a lot UI design jobs require knowledge about HTML/CSS, do you think they expect UI designer writing code as well? If not, why they require it? If yes, there are a lot of works for UI designer to take care front/back end? Is it enough to be UI designer if I have a great creativity and UI design methods but not HTML/CSS? Thanks

    • Krys says:

      I get this question, a lot.
      UI Designers need to know HTML and CSS for several reasons:

      1 – Some companies do have their designers write presentation-level code. Groupon is one of these.
      2 – You can’t design a car if you don’t know how they work, roughly. You don’t have to be able to wire the electrical system of the car from the ground up, but you do have to know there is an electrical system, and the basics of how it works – so that you design it in. Web sites and apps are the same way. If you don’t know how they are built, you cannot design them WELL.
      3 – UI design is not ART. You have to be creative, yes, but you need a deep understanding of how apps work to make good UI. I’d hire someone who didn’t consider themselves creative, but had a good grasp of HTML over an artist who can’t code. And I have. :D

      I hope this helps! Learning HTML and CSS is REALLY easy and I’d encourage you to do it – you’ll find it makes your life better in a lot of ways.

  5. […] is more about web design, but UI is […]

  6. මමss says:

    Hi,

    Good article. I want to be a UI engineer and appreciate if you could guide me to a starting point.

    • Krys says:

      When you say UI Engineer, do you mean someone who writes code for web/mobile applications, or someone who designs them?

      If you want to write code and don’t already know how, Codeacademy is amazing.
      If you already know how to write code, start applying to companies and be prepared to take a code test. As long as you can code and are easy to get along with – you’ll be hired! Companies are desperate for talent.

      If you want to design, this article is where to get started. :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 644 other followers

%d bloggers like this: