Lesson Thirteen

Understanding the different types of designers and developers

When I first started learning about the roles and skills needed to build an app or a website I was overwhelmed. From UX and UI design to iOS or Rails, it can be hard to know exactly what you need or who you need to work with.

It’s almost never as simple as finding one designer or developer who can do it all. In fact, this is nearly impossible. Who you need to work with to design a blog is much different from who you need to work with to build an app.

So to help you find the right people to work with, we put together this post about who does what in the online world.

The different types of designers

When it comes to building digital products, there are two main types of designers.

1. Visual designers (graphic designers)

Visual designers are typically responsible for creating graphical elements within a product.

Some of the most common visual design work includes:

Instagram logo
Instagram Logo designed by Mackey Saturday
Icons by Manu Gamero
Icons designed by Manu Gamero
Style guide
Style Guide designed by Janna Hagan
Illustration by Justin Mezzell
Illustration by Justin Mezzell
Medium's typography
Typography room at Medium

To give an example of what would be created by a visual designer, here’s the homepage for Dropbox.com.

htbaob-13-06

The images outlined in pink were likely created by a visual designer.

htbaob-13-07
2. Product designers

Digital product designers create interfaces to help people interact with products.


Example: Interface for How Much To Make An App

Two main areas of expertise that make up product design are:

  • User Interface (UI) design. A UI designer focuses on creating interfaces, making sure all the elements are included in the product.
  • User Experience (UX) design. A UX designer specializes in understanding how a product interface feels for the people who use it.

Let’s say you were making a form on your website with input fields and a button.

A UI designer would create the input fields and the button.

htbaob-13-09

A UX designer would then work on ways to make the input fields and button feel right so people could complete the form easier.

To do this, a UX designer might add hover states so a button feels more like a button when clicked. For example, this grey color when you move your cursor over the ‘Register’ button.

htbaob-13-10

A UX designer may add other visual feedback cues to the input fields, like a color change to signal that you’ve filled in the input field correctly.

htbaob-13-11

The difference between UI and UX design

While a UI designer makes sure all the elements are included in an interface, a UX designer focuses on how the elements flow together to create an experience that delights people.

Understanding the difference between UI and UX design can be difficult as they can seem quite similar, so here are a couple of analogies to explain the difference.

The difference between UI and UX design
Source: @jma245
Source: @catalinarusu
Source: @catalinarusu

While UI and UX design are different skills, some product designers have experience with both.

Different types of development

The other main group of skills you’ll need to bring your digital product to life are development skills.

Product development is often split into frontend and backend development.

1. Frontend development

A frontend developer writes code that people see and interact with. Frontend development involves creating elements like tap gestures in a mobile app or animations for a website.

The rotating text on Moodboard, a website that helps you share images with a link, is an example of what can be created with frontend code.

htbaob-13-14

Some product designers are familiar with frontend development, which helps them to understand the programming constraints that may make it easier to craft a product experience that looks and feels exactly how they intended.

Common frontend programming languages

  • HTML
  • CSS
  • JavaScript
2. Backend development

Backend development refers to the part of your product that isn’t seen by the people who use it.

A backend developer would be responsible for creating elements like the databases that hold information entered in the product or the algorithms that operate while a webpage is loading.

As an example, here’s the online form for starting a project in Crew. A backend developer created the database that stores the information that is entered:

htbaob-13-15

Common backend languages

  • PHP
  • Python
  • Ruby

The difference between front-end and backend development

If you’re having trouble wrapping your head around the differences between frontend and backend development, Ian Peters-Campbell, VP of Engineering at Green Dot, suggests imagining you were building a car.

You can think of the frontend developer as the person who installs the leather seats, steering wheel, pedals, shifters, and the stereo. The backend developer is the person who puts in the engine and the transmission.

Designers and developers each have their own unique skill sets. And while understanding the difference between these roles can be difficult, hopefully this post helps highlight who you should be looking for when you create your digital product.