Skip to content

The difference between a UX Designer and UI Developer

November 10, 2011

I’ve recently found myself trying to explain the difference between the skills I bring to a project as a UX Designer and why I’m not able to cover the role of a dedicated UI Developer.

There is of course a necessary overlap between the skills-sets in these roles, which is a good thing. And some individuals have a broader coverage of skills than others. However, people outside of these roles don’t always appreciate the specialist skills and focus that is required to work within them.

This as simply as I can describe the different skills required for each role:

  • User Experience (UX) Designer = Research + Design
  • UI Developer = Design + HTML/CSS/JS
  • Application Developer = Back-End coding + HTML/CSS/JS etc.

As much as I’ve tried to avoid it, I just haven’t been able to prevent myself from creating a Venn diagram to visualise this.

These different combinations of skills bring with them a different perspective and focus on what each person does.

UX Designers combine their research and design skills together to understand the user needs and produce concepts/solutions/designs that people want to use. This requires a focus on human behaviours, psychology and understanding why people do what they do. It’s all the soft squishy, creative stuff on the right-side of the brain.  Most UXers can tell you what it should do and why it should do it, but can’t actually build something that works.

Application Developers (which is a very broad and hopefully inclusive term for your average technical skill set) build the underlying functionality which makes the product work. It’s all about code, logic and the left-side of the brain.  Often heard from Developers is “I can make it work, but it won’t look pretty“. Meaning that they can craft HTML that will technically work, but it may not create a very good impression for anyone who is influenced by the look of it (which means your average end user).

UI Developers fill the middle ground by combining both design sensibilities and technical skills together. They are skilled at making something both look good and function in a browser/device at the same time. They have the production skills to be able to produce visual designs in Photoshop and then turn them in to HTML code that deals with the wonders of browser compatibilities.  This requires in-depth understanding of how browser rendering engines behave to be able to implement a design for the web that renders correctly and get all those pesky pixels to line up perfectly.

Of course this is very much a generalisation and it is possible to find people who work effortlessly across all these different skills-sets. I need to make the caveat that every person has different strengths and weaknesses. My point here is about the commonalities that define UX Designers, rather than each individual’s unique differences.

There is an age-old discussion out there on should designers know how to code? which often ends up concluding that ideally, yes they should. However the kind of people who can effortlessly switch between focusing on code and user needs are a rarity. The mindset required for each is generally quite distinctly different. Most people just aren’t wired up to do both. At the very least, even if they can, switching between them in their day-to-day role on a project tends to hinder their ability to do either well.

Breaking down Design further

Of course this is very much a simplification of the four areas covered in this diagram Research, Design, HTML, & Back-End. With just one wave of a Venn diagram I have lumped an entire technology industry in to just one circle. 

At the risk of complicating the main point of this post, I do feel the need to break down the area of Design a little bit more as it’s the area that I feel most non-Designers struggle to understand the differences between the design disciplines, and the different the backgrounds that UXers come from.

Within the context of Software Development, I would argue that design is primarily all about Visual Design, Interaction Design & Information Design.

It has to be said that the line between these three design disciplines is very blurry and rarely possible to separate entirely (the best way I’ve seen them articulated is in Jesse James Garret’s JJG Elements of UX).

This is how I would expand my diagram and the roles to include them:

To further expand the distinction between the roles:

  • UX Designers focus on the structure and layout of content, navigation and how users interact with them. These don’t normally (but can) try to be perfect from a visual perspective. The types of deliverables they produce include site-maps, user flows, prototypes and wireframes, which are more focussed on the underlying structure and purpose of the software.  The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
  • UI Developers focus on the way the functionality is displayed and the fine detail of how users interact with the interface. They produce the visual comps and functioning front-end code. This is very much about polished final production quality outputs.

The other role that I added in to the expanded version of the diagram is the Graphic Designer. It’s worth calling out that there are specialists who tend to work solely in Photoshop to produce static visual comps. This starts to talk to the area of illustration, fine arts, print media and the more creative stuff. Traditionally within web design this was a separate role, but not so much any more. Within software design the majority of people tend to have developed technical skills to become a UI Designer/Dev.

The different disciplines within UX Design can be expanded further to paint a much more comprehensive picture. The best way I’ve seen it articulated was put together by Dan Saffer in his book Designing for Interaction. He represents the different disciplines of User Experience Design like this:

If you start thinking about designing experiences across different platforms, devices and contexts then you very quickly need to bring in Industrial Design, Architecture, etc. But that’s a blog post for another day.

About these ads
32 Comments leave one →
  1. Sally permalink
    November 11, 2011 9:54 am

    Hi Ben, I like your post! And would like to ask where it is (in your mind) that a BA fits into this when working in a complex environment. I find as a UXer that my BAs are essential to help understand the nuances of the business so we can balance them as a team with user needs.

    I would kind-of overlap them in your ‘research’ bubble but focusing on engaging with, understanding and modelling the business whereas I focus on engaging with, understanding and modelling users. All of this info then feeds into the design.

    Thoughts?

  2. November 11, 2011 3:24 pm

    The difference between a UX and BA is another topic of conversation that I often find myself having, and is probably going to be topic for my next post.

    Briefly though, I’d say that there is a large amount of overlap between the two. Quite often a UX and BA either pair together to work on the same activities or use the same skill-set in different way.

    The key difference between the two is usually about the role that they perform on a project. In a very broad sense UXers focus understanding and representing users needs within the project, whereas BAs focus on identifying and representing the business requirements.

    If you then add someone in a technical role focussing on technical feasibility you are covering the three major areas that need to be considered when creating a successful product. There are already many Venn diagrams out there representing this.

    Where UX and BA differ is usually that UXers usually bring the designs skills and BAs the business process analysis tools (that are often hard to define).

    Tongue in cheek, I usually say that within every good BA there is a UXer bursting to get out, if they can just learn to draw pretty pictures.

  3. December 3, 2011 1:57 am

    Hi Ben,

    Great post, Intresting reading.

    As a product manager I also work on user experience, and always wondering how significate the UX part of my job. I think having few additional responsibilities, also takes a lot of attention from UX, and this is something we are always facing at our company.

    Responsibilities have to be more concentrated.

    Thank you.

    • December 7, 2011 7:12 am

      I’ve been fascinated by the recent trend of UXers moving in to Product Managers roles. There is a very natural overlap between the two in terms of own the vision for the product. I think it’s great to see the UX skill-set being used in that way. And also to see product managers who don’t just have a focus on the business numbers.

      Unfortunately, I’ve seen a few UXers not last long in the role as, while they do some UX design as part of it, they don’t get to spend enough time focussing on it and start to become frustrated as a result. It’ll be interesting to see how people manage to find that balance over time.

  4. December 6, 2011 5:03 am

    Hi, my name’s Rina, I’m the editor in chief of iMasters.com.br, one of the largest brazilian communities for developers. I’d like to talk to you about translating and republishing this article. Can you write me on rina.noronha@imasters.com.br?
    Thanks very much!

  5. April 24, 2012 4:48 am

    Thanks very much for sharing this Ben. You have obviously spent a fair bit of time putting your experience into these concise set of tutorials. I plan to direct some of our clients and associates to your blog. I will also promote your work and insights on my own blog. Thanks again.

  6. May 11, 2012 10:29 pm

    Hi Ben,

    We enjoyed reading this post. We’ve tossed around the job description venn diagram a number of times in our offices and mostly ended up with a number of intersections between zero and a million. Well thought out discussion here though.
    As an aside, you’re linking to our Think Blog in your blogroll, which is very nice, but we’ve moved it here: http://flow-interactive.com/thinking. Would it be possible to update the link?

    Thanks!

  7. May 16, 2012 7:09 pm

    Ben,
    As much as I’ve tried to avoid it, I just haven’t been able to prevent myself from creating a Venn diagram to visualise this.
    I got a chuckle out of that line, but it was a very useful diagram all the same!
    John

  8. June 1, 2012 9:45 pm

    Great article! Especially for me as a recruiter who is currently looking for a talented UI/UX designer. Ben, your scheme for me is really helpful, but where would you place a UI designer in these circles?
    Thank you.
    Best regards,
    Anastasiya

  9. June 4, 2012 4:26 pm

    A colleague of mine just shared this link with me about The Difference Between UX and UI: Subtleties Explained in Cereal.

    Now I think that articulates this whole topic perfectly.

  10. June 13, 2012 7:10 am

    Awesome…i reblog in indonesian language.. love to have community in UX/UI.

    http://blogs.mervpolis.com/roller/flatburger/entry/ux_dan_ui

  11. Srinivas permalink
    June 21, 2012 3:45 am

    Very Interesting and get the clariti of what is the UI UX. I am facing this problem from many days thanks for this artical…

  12. July 16, 2012 5:19 pm

    Thanks Ben, this really a very interesting article. I’m clear what should I call and what the next level I need to go for now!

  13. August 21, 2012 2:06 am

    Reblogged this on KARMANIC! and commented:
    I finally found an article that actually has diagrams to explain the differences between UX/UI/developer roles! I need to spread the word as people misinterpret those terms all the time. I’m grateful and happy to have read this!

  14. Robert Winkler permalink
    October 10, 2012 6:45 am

    Hi Ben,
    I’m a consulting editor at Gartner and we would like your permission to reprint one of the above figures in a report, but I can’t find your email address. Could you send it to me at rwinkler@snet.net and I’ll send you a proper permission request? Hope to hear from you soon.
    Regards,
    Robert

  15. Johan permalink
    November 8, 2012 6:00 am

    Hi Ben, great article. Working as an Art Director making apps (iOS, Android) I would like to turn the perspective a bit. I usually work with an Interaction Designer who makes wireframes. The process in making apps is that we both care a lot about each others work and constantly get feedback from each other. After we are done a developer gets my mockups and we start to make assets and break down the GUI. All three of us are VERY aware about UX, its not something that is one persons responsability or skill. It is something that is always present in every step.

    My point is that maybe UX shouldn’t be a specific role in the way we usually talk about it. It should be EVERYBODYS focus, ALWAYS. To always think about the Users eXperience all the way. “How can I as a developer make the code sing so that the application runs smooth and which decisions do I have to make in order to make the app as user friendly as possible. Maybe my knowledge about the technical side of things can contribute in making decisions that no one has thought of before”.
    Even the sales guy who bring in the project from the start should ask himself if this is good for the customers experience.

    For me as an AD i couldn’t work a minute without constantly trying to focus on the WHY, not the WHAT and HOW.

    I know that this isn’t something you allready know and talk about but it would be nice if the UX role could be something that is a given for everybody rather than having a “UX guy” responsible for it.

    • November 8, 2012 9:37 am

      I couldn’t agree more, Johan. Everyone is responsible for creating a great UX and contributing to it. I guess that’s part of the reason for exploring the different skill sets with the team roles, the label of “UX Person” is a very broad umbrella and it’s worth considering the different skills and capabilities that different people bring to that role(s).

      I always point out that someone in the team is designing the UX regardless of whether you have a recognised Designer in the team. In a lot of cases it’s the Devs doing it as a side effect of the code they are building.

      So everyone needs to take responsibility for creating a great UX, it’s just that some people have stronger capabilities and skills for doing it.

  16. November 23, 2012 6:05 pm

    its nice post dear I was confused about so long time I read your post clear yet its really nice article thanks a lot dear

  17. January 18, 2013 1:22 am

    Hi This is Awesome!

  18. Adhee permalink
    February 21, 2013 6:17 pm

    Awesome! As a person who just stepped in to UX world, I was confuse with the role of UX person, vs UI designer/developer. My background was came graphic designer, and all the UX things that i know was learnt and absorbed form my experience, never had any formal education regarding UXs before, yet. So, really nice found this article throughout the net.
    Thank you, and wishing permission to reblog this. :)

    • Adam Berndt permalink
      April 25, 2013 12:20 am

      Just wanted to say thanks a lot for this breakdown! I have been technical recruiting now for about a year and a half and this was the simplest and most effective explanation of these differences I have come across!

  19. July 8, 2013 4:20 pm

    I think the final venn diagram pretty much explained everything.

  20. Roberto Torres permalink
    July 18, 2013 4:42 am

    Oh, I love this! Great breakdown of roles.

  21. September 5, 2013 7:07 am

    Love this post. It’s so difficult to describe the complex relationships between these skillsets to managers, or to correctly target these roles for the right position within a company!

    Speaking of, can I use your first Venn-like diagram on my resume? I would make one myself, but you’ve already done a really good job :)

Trackbacks

  1. UX by mdemrs - Pearltrees
  2. Fábio Caparica » Links entre 17.11.2011 e 12.12.2011
  3. To Code Or Not To Code? | JODIE LOCKLEAR
  4. Blomeley Communications Inc. – Management of Social Media Production & Implementation is Key to Our Client’s Success
  5. Design: What are some good graphics (charts, diagrams, etc) that capture the relationships amongst design disciplines in today's marketplace? - Quora
  6. Just Say No to (Corporate) Unicorns | Amy Marquez
  7. eScholastic Design » Design Skills Ven Diagram
  8. 10 of the Best UX Infographics - The Usabilla Blog

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 296 other followers

%d bloggers like this: