Be a better UX designer by understanding development aspects
4.5 (122 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,023 students enrolled

Be a better UX designer by understanding development aspects

Stand out from the crowd, make more complete UX designs and better design decisions by understanding development aspects
4.5 (122 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,022 students enrolled
Last updated 11/2019
English [Auto]
Current price: $61.99 Original price: $94.99 Discount: 35% off
9 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 1 article
  • 98 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • How to make better design decisions by understanding development fundamentals, technical constraints
  • Knowing what is going on inside the computer is essential for great UX design work
  • Understanding technical aspects will make you a better designer, even if you don’t have the chance to collaborate with developers
  • Involving developers in your design workflow right from the start of the project adds a powerful new perspective to your UX work
  • Forget the “Should designers learn to code?” question, designer-developer collaboration is not about learning to code
  • How to get involved in developers’ activities (e.g. during implementation: testing, bug reporting)
  • Understand the differences between online and offline apps, so that you can take into account users’ needs and context better
  • How to represent real world objects & concepts inside a digital app (e.g. data types, data modeling)
  • Better form design: what you should specify next to UI specs (e.g. user input's data type, max. text length)
  • Learn algorithmic thinking so that you’ll be able to consider all cases, spot redundancies, remove inconsistencies
  • How a form validation algorithm works, what the design implications are
  • Performance is an important limitation, and your design decisions always impact it! (e.g. designing web applications)
  • You should be involved in decisions about how to store data, e.g. you can tell what groups of data will be read or modified together and how often
  • How to define logical relationships inside an app, e.g. “a user can have maximum 1 profile picture” is a rule you should define
  • Design decisions affect risks, costs and development effort, e.g. custom code is usually more expensive than using an existing solution
  • How to choose an appropriate existing solution, reusable component (e.g. map component: Google Map)
  • How API’s work, why you should know what functions are provided by a given API (e.g. in case of a payment solution)
  • How to ask better questions from developers, and how to educate them to ask better questions from you
  • There are no requirements necessary to enroll.

This course is about development fundamentals for UX designers & how to involve developers in your design processes.

We won't teach you how to code, instead, we'll focus on all the topics, aspects you need to know in order to create designs that developers'll be able to build effectively. You, as a designer, contribute to a software development process. And without knowing what's under the hood, you won't be able to make informed design decisions.

[Update: 0.5-hour new content added on 16th November, 2019 - Designing for Different Screen Sizes & Devices; Design Handoff Advice]

[Release date: 7th November, 2018]

By learning about technical constraints and development aspects, you’ll be able to include a valuable additional layer in your design work. As a result, you’ll stand out from the crowd, you’ll be able to provide a more complete, more intentional design to your clients (whether you are a freelancer or an employee). Here are some of these aspects you can and should include:

Let’s say users can upload pictures inside your app. But how many pictures can they upload? Or let’s say you design a form. You should specify the max. length for each text fields, otherwise the user input displayed on a UI - e.g. a username - might break the layout. Or what happens if two or more users modify e.g. the price of a product simultaneously, how this conflict should be resolved? Another aspect is that based on the users’ context, what application type should you choose, an online or an offline app would support user goals better?

These are all design decisions, and if you don’t make them, someone else will do, so if you want to design a product or service intentionally, you should consider these aspects.

It is even better if you can make these decisions together with developers. Their unique, specific perspective’ll complement your interpretation and point of view.

So next to considering and incorporating technical aspects during your design work, it’s also great to collaborate with developers right from the start of a design process. You should involve them in UX research and ideation (e.g. design sprint, storyboarding) activities. Likewise, you should participate in their workflows, for instance during implementation, you should follow their progress inside a version control software, help them write automated tests and regularly test out what they built.

To sum up, the course has two main goals.

1. We teach you the main technical constraints and development aspects.

Understanding these is beneficial for any designers, whether you are a freelancer or an employee.

2. You'll learn how to collaborate with developers. We'll teach you how you can involve them, how you can ask better questions from them, and how you can participate in their workflows.

Learning how to collaborate effectively is beneficial for designers who work in a team or collaborate with others regularly.

The two goals are closely connected: understanding development aspects will help you improve the way you work with developers.

The course has 4 parts:

  • Foundation: By watching this section, you’ll understand how design work is incorporated into a digital product development process (e.g. waterfall, agile, lean)

  • Being On The Same Page: Without having a common language, you can’t collaborate effectively. By watching this section, you’ll learn how sketching and visual thinking helps you establish a shared understanding with developers.

  • Design Aspects: Involving developers in your design workflow right from the start lets you include a unique, additional perspective in the process. Thanks to this section, you’ll learn about the main opportunities for involving developers, e.g. conducting UX research together; ideating together (e.g. design sprint)

  • Developments Aspects: To design and implement a digital product or service in a way that it matches users’ needs, you must know what is going on inside the computer. We’ll teach you the most important aspects in this section.

If you are a UX designer / interaction designer / product designer / service designer / UI designer (your label doesn't really matter), most probably you are working on digital product or services. In other words, you are creating software products.

Learning about the different development aspects is not only about making a product development process more efficient. It's so much better to work in an organizational culture or in a cross-functional team where you can concentrate on doing your best work! Your team members'll appreciate that you understand the risks, costs, trade-offs of a design decision, a request, and as a result, a mutual trust can be established.

This mutual trust means that developers know that you won't ask for an unreasonable modification, and you'll also know that they'll be transparent about their processes and about the amount of development effort required to complete a task.

As you'll see, involving developers in your design processes, and asking developers to involve you in their processes results in an effective cross-functional collaboration. Product development processes have evolved in a way to reflect how technology and users' expectations have changed. Now we can get user feedback from the market really fast, and based on that feedback, we can continuously improve and fine-tune our digital product or service, in other words, we apply continuous integration and continuous deployment. To be able to work in this environment, we need cross-functional teams creating software products in close collaboration. And even if your organization still uses a waterfall process, you'll learn a lot about how you can take into account development aspects during your design process, how you can create a better design hand-off.

About the course material:

  • We created more than 50 hand-drawn sketches to explain the otherwise complicated concepts in a digestible, comprehensible way - you can download all these sketches in high-resolution!

  • We included a many practice activities so that you can solidify your understanding

  • You'll also find a walkthrough of GitLab's interface - knowing about how version control systems work helps you participate in implementation activities; and since version control tools created for designers apply the same concepts and terminology, this guided tour'll help you use these tools, for instance Abstract.

  • While we won't teach you how to code, thanks to the lectures about algorithms and programming, you'll understand all the basic concepts that are actually prerequisites of programming. Therefore, you can use these parts of the course material as a litmus test: if you particularly enjoy those parts, maybe programming is for you. But we believe that the infamous "Should designers learn to code?" question is irrelevant. If you want to learn to code, go ahead and start learning it. However, what is truly relevant is that you should understand how developers work, what challenges they face, what their main tasks are. This course'll teach you all these.

  • We have also included the related UX Knowledge Base Sketches, you can also download these in high-resolution.

  • The course videos are optimized for full HD resolution [select 1080p (or "Auto") resolution at the bottom left corner of your streaming player if it is not set to that resolution automatically]. If for any reasons (e.g. slow Internet connection) you can't access the videos in full HD resolution, we attached all the sketches in high-resolution, so you can print them out and follow the lectures by using the printed material.

Stay tuned for future updates! We're planning to add new lectures soon, e.g. about Responsivity (designing for different screen sizes and devices); Internationalization & Localization; Security and Cryptography.

As a result of watching these lectures, you'll be a more confident designer, who knows what making intentional design decisions mean.

Who this course is for:
  • UX Designers
  • Interaction Designers
  • Product Designers
  • UI Designers
  • Service Designers
  • Web Designers
  • Freelance designers
  • Designers working at an organization (whether it's a startup or an enterprise)
  • Any designer who wants to learn about how developers work, and how to ask better questions from them
  • Anyone who wants to improve the workflow of creating digital products and services (apps, websites, systems)
  • This course is NOT for you if you want to learn how to code! This course is not about coding!
  • This course is NOT for you if you are expecting a detailed, step by step walk-through for creating a digital product or service from the first stroke all the way to the first release! This course concentrates on development aspects, technical constraints, and designer-developer collaboration.
Course content
Expand all 59 lectures 08:36:26
+ Foundation
7 lectures 01:07:34

This lecture is a starting point, it's for setting your expectations about the course (so imagine that it has a "start here" sticker on it :) ). So it summarizes what the Designer - Developer Collaboration course is about.

Preview 09:25

This is the 1st part of the product development processes series. This lecture summarizes these: waterfall, agile, lean startup, design thinking and staggered sprints. By watching this lecture, you'll get a good understanding of how product development processes have evolved.

Product Development Processes - Part 1

This is the 2nd part of the product development processes series. It explains these: lean UX, dual-track agile and dual track design. By watching this lecture, you'll get a good understanding of how product development processes have evolved.

Preview 07:55

This is the 3rd part of the product development processes series. It discusses what scrum is, and how you can integrate scrum & UX. By watching this lecture, you'll get a good understanding of how product development processes have evolved.

Product Development Processes - Part 3

This lecture is about the core and additional competencies of designers and developers. If you watch this lecture, you'll realize why strict job descriptions are outdated.

Roles and Core Competencies

This lecture explores the main areas of designer - developer collaboration, and also contains the key areas of developers' contribution to a product development process. By watching this lecture you'll have an overview of collaborative activities throughout the product development process.

Collaboration: Main Areas

In this lecture you'll find a set of actionable best practices for designer - developer collaboration. For example you should create a code of conduct together! We'll also provide you some arguments for involving developers - hopefully you won't need these, since your organization already knows the importance of designer - developer collaboration.

Collaboration: Best Practices
+ Being on the Same Page
5 lectures 37:49

This lecture highlights the importance of sketching and visual thinking. We also included a list that summarizes why sketching is great for collaborative activities and ideation.

Sketching and Visual Thinking - Part 1

The 2nd part of the sketching and visual thinking lecture is about visual metaphors. These can come in handy during a designer-developer collaboration, since these can make otherwise complicated concepts more comprehensible. By watching this lecture, you'll understand how you can create and combine visual representations effectively. Next to these, the lecture lists out how sketching can be utilized during a product development process. 

Preview 05:15

Giving and asking for meaningful feedback might seem to be an obvious or straightforward activity. As you'll see after watching this lecture, there are some many guidelines you should consider following! Good feedback results in better design and development choices, and better choices ultimately lead to better work. 

Giving Feedback - Part 1

The 2nd part of the giving and asking for meaningful feedback lectures contains some more guidelines, and we also included a practice activity for you!

Giving Feedback - Part 2

This lecture underlines the importance of having a common language with developers. We can always apply visual language and visual thinking, however, it's also a good practice to ask honest questions about things you don't fully understand, and you should communicate in a way that it's jargon free and easily understandable.

Speaking the Same Language
+ Design Aspects
10 lectures 01:34:41

You should involve developers right from the start, it's pretty self-evident. But how can they contribute effectively? What does the term "technical constraint" really mean? This lecture answers these questions.

Project Kick-Off - Part 1

This lecture is the second part of the project kick-off lectures, and it lists out the main technical constraints. Naturally, it's not your job to figure out an answer for these possible limitations, but you should know this list so that you can support your developer team members during a stakeholder interview or during a project kick-off meeting (workshop). By watching this lecture, you'll walk away with a comprehensive checklist of the most important constraint types.

Project Kick-Off - Part 2

Prioritization is an essential and ongoing activity during a product development process. And while some might think that prioritization is only about features, it's quite the opposite. You should focus on outcomes and impact instead of shipping features with great velocity. This 1st part explains some related concepts (e.g. feature creep / feature fatigue), and also contains some advice for you.

Prioritization - Part 1

The 2nd part of the prioritization lectures summarizes these prioritization approaches: lean UX method, user story mapping and Intercom's method. More specifically, the lecture is about how you can collaborate with developers while applying these methods.

Prioritization - Part 2

Involving developers in research activities is vital: it helps them build empathy for the users, but there are many more advantages, if you watch this lecture, you can learn about these. This lecture also gives you a high level overview of some research methods, and the ways you can involve developers. For instance in case of a user interview, you can ask a developer to act as a secondary interviewer. 

Research - Part 1

The 2nd part of the research lectures is about synthesizing research. In other words, you gather all the raw research data, and search for patterns. This "meaning-making" should be a collaborative team activity. Developers might have observed different things, e.g. identified obstacles or pain points you haven't noticed. In this lecture we mention several methods, e.g. empathy mapping, persona creation and storyboarding.

Research - Part 2

This lecture summarizes how developers can participate in an ideation process. More specifically, it explains conducting a design sprint together, and we also mention several other methods. Next to the theoretical knowledge, we're going to show you how we do a crazy 8 session, and we're going to ask you to try out this method, so there is a practice activity waiting for you! 

Preview 13:13

In this lecture, you'll learn what's the difference between fixed, fluid, responsive and adaptive layout.

Preview 12:35

In this lecture, we'll talk about responsive images, pixel density, and some more aspects concerning how to design for different devices.

Designing for Different Screen Sizes & Devices - Part 2

This lecture contains some advice on how to achieve a good design handoff, how to hand over designs to developers effectively.

Design Handoff Advice
+ Development Aspects: Introduction and Architectures
7 lectures 57:51

This lecture summarizes what the development aspects section is about, and why these topics are relevant for your design work. There is so much more to design than pushing some pretty pixels in Sketch or in an other design tool! By watching these lectures, you'll realize that a basic understanding of these topics is essential. As a result, you'll be able to make much more informed design decisions.

Preview 05:59

Architectures are basically application structures. Do you know how the application you are currently working on actually works? What is under the hood? Do you know what platforms are? This lecture explains all of these.

Architectures: Introduction and Platforms

The 2nd lecture about architectures summarizes 3 different application types. Designing an online and an offline application is fundamentally different. In case of an online application, there is a client and a server side. You might ask why it is important for you. As you'll see, there are a lot of aspects that directly influence the users' experience.   

Architectures: Application Types

The 3rd lecture about architectures explains how offline applications work. We're going to demonstrate the mechanism through a note taking application.

Architectures: Offline Application Example

The 4th part of the architectures lectures summarizes how online applications work. You'll see that tasks are split between the client and the server side. What you put on one side and what on the other should be an intentional design and development decision, since as you'll see, it directly impacts the users' experience. By watching this lecture, you'll also understand how Instagram manages to upload pictures instantly.

Architectures: Online Application Example

In the last lecture about architectures we discuss what microservices and microfrontends are. We know that these concepts sound complicated, but believe us, knowing about these'll make your collaboration with developers a lot smoother in many cases (especially if you work in a bigger organization).

Architectures: Microservices and Microfrontends

There is a huge overlap between designers' and developers' mindset. Developers' work requires a special mindset, so if you understand how they think and operate, you’ll be able to better empathize and collaborate with them.

Developer Mindset and Developer Types
+ Development Aspects: Data Types
6 lectures 51:55

This lecture is an introduction to data types. Defining data types is about translating reality to computer processable format. While this topic may sound boring, you'll realize that defining data types is an important part of a specification, and it can be explained by talking about roller coasters, beer and a wardrobe :) (yes, we apply real life analogies to make it more interesting.)

Preview 09:16

This second lecture about data types summarizes what primitive data types are. We discuss these data types: logical (or boolean), numeric, character. How does it affect the users' experience? For instance if you choose an inappropriate numeric data type for a given currency, you might encounter problems when you localize that part of the app.

Data Types: Primitive Data Types (Logical, Numeric, Character)

The 3rd lecture about data types explains what composite data types are. While the word "array" or "record type" might sound complicated, you'll see that these concepts'll help you design forms in a more complete way. Form validation is only possible if the required data types are specified for each form field.

Data Types: Composite Data Types (String, Array, Record)

Next to primitive and composite data types, there are data types with an additional layer of meaning. These are: date and time; gps coordinates and images. Have you ever wondered how the binary representation of an image looks like? This lecture gives you an answer.

Data Types: Date, Time, GPS Coordinate and Images

As you'll see, for the purposes of designing an application, you'll need to combine the different data types. For instance, let's say we represent a user by using her name and date of birth inside an app, these are the two relevant aspects. It also means that for example her hair color is irrelevant, so we don't ask her about this information. Now, since we have more users, we should create "templates" for these two data pieces. You'll get why it is important after watching this lecture.

Data Types: Combining Data Types

The abbreviation "JSON" stands for JavaScript Object Notation. Don't worry, this lecture is not about teaching you how to code! You'll see that understanding JSON is not that hard, and it's going to be a really useful skill for you, for instance you'll be able to interpret specifications written by developers.

Data Types: JSON
+ Development Aspects: Programming
5 lectures 43:30
Programming: Introduction

The 2nd lecture about programming summarizes the concept of variables. This particular lecture clearly demonstrates the power of using visual metaphors: we're going to explain the concept of variables in a way that you'll instantly get it! The lecture also contains a real life example of using variables: we're going to take a look at a sign-up flow inside a web application.

Programming: Variables

If you've ever designed user flows, understanding algorithms won't be that hard! An algorithm is just a set of computer-executable steps designed to solve a problem. It processes input data and produces output data. By the end of this lecture, you'll understand what algorithmic thinking is about.

Programming: Algorithms

The 4th lecture about programming takes a look at what programs are, how they work. We demonstrate it by analyzing a form validation algorithm. If you watch this lecture, you'll get a basic understanding of how programs work - we even mention the concept of loops, so that you can dig deeper if you are further interested in this topic.

Programming: Programs

This lecture'll help you navigate in the sea of the following terms: programming language implementation, framework, run-time environment, platform. As a result, you'll know what developers are talking about when they mention or refer to these concepts. For instance you surely know that Android and iOS are platforms. But what about the other terms? Can you apply them in a confident way?

Programming: Application Environment
+ Development Aspects: Reusable Components
4 lectures 31:19

Applying an existing solution (a reusable component) instead of writing custom code significantly impacts the feasibility of a project. This lecture explains what reusable components are through a map component example. By watching this lecture you'll know what are the most important things to consider in connection with using an existing solution.

Reusable Components: Introduction: A Map Component

The 2nd lecture about reusable components highlights the importance of customizability. You need to check whether a certain existing solution supports customization or not, and if it does, to what extent. This lecture summarizes the 3 levels of customization, so next time your team considers applying an existing solution, you'll know what to pay attention to in terms of customizability. 

Reusable Components: Customization

The two most common types of reusable components are libraries and services. These add additional functionalities to our software product. Again, we're going to use real life analogies to make these concepts more comprehensible for you. After watching this lecture, you'll know what the main differences between libraries and services are.

Reusable Components: Libraries and Services

The abbreviation "API" stands for Application Program Interface. In this lecture, we're going to explain you this concept by two detailed examples, and as always, an exciting real life metaphor'll help you understand what an API is about (this metaphor involves ordering a pizza, so you'll surely like it). 

Reusable Components: API
+ Development Aspects: Data Modeling
7 lectures 01:15:01

Data modeling us about representing real life concepts inside a digital product or service, and it is a process of choosing and designing effective storage solutions for our data, so that programs running inside our applications can work with it. This lecture is an introduction to data modeling, for example it lists out many-many answers to the "why should I care about this stuff?" question.

Data Modeling: Introduction

A conceptual model is a tool for defining reality in a way that you can translate the components to data structures. We believe that this is one of the most exciting lectures in the development aspects section, after watching it, you'll think about digital products or services in a more systematic way, and you'll realize that even the most complex systems can be broken down into entities, activities and relationships. 

Preview 09:30

In this lecture we're going to show you some possible designer - developer conversations about data modeling, so we're going to illustrate how the designer - developer collaboration might look like on this aspect. After watching this lecture you'll surely understand why this data modeling topic is relevant for a designer.

Data Modeling: Designer - Developer Conversations

After creating a conceptual model, you can start working on the next layer, that is the logical data model. To put it simply, it's a more detailed version of a conceptual data model. We're going to show you examples (e.g. how this looks like in case of a boardgame event organizer app), and we're going to give you an exciting practice activity, you'll map out relationships between entities for a design studio finder app.

Data Modeling: Logical Modeling

There are two common database types: relational databases and NoSQL databases. This lecture summarizes the main aspects of using relational databases. We're going to guide you through a very detailed example so that you'll understand everything you need to know about this concept in an easily comprehensible way!

Data Modeling: Relational Databases

As we mentioned earlier, there are two common database types: relational databases and NoSQL databases. NoSQL stands for “Not Only SQL”. After watching this lecture you'll understand what the main differences between these two database types are, and why this distinction is important from a UX perspective. Instead of talking about complicated concepts in an abstract way, this lecture summarizes using NoSQL databases by explaining 4 different use cases (e.g. a news website and a restaurant recommendation app). 

Data Modeling: NoSQL Databases

This lecture explains the concept of data concurrency and data consistency (as you'll see, these are very important in cases where the application uses the users' balances, so if transactions are involved). After watching this lecture, you'll also have a list of the main design making points concerning logical data modeling.

Data Modeling: Main Decision-Making Points
+ Development Aspects: Implementation
7 lectures 55:14

In the lectures about implementation we’re going to walk you through some important steps of the implementation of a note taking app we use as an example app throughout the course. You’ll get a clear picture of the process and all the relevant aspects, for instance we’re going to talk about version control and automated tests.

Implementation: Introduction

This lecture is a guided tour, we're going to walk you through the most important parts of Gitlab, so that you’ll see the version control concepts we’re talking about in context. Understanding how Gitlab works, and learning its terminology'll help you use other version control tools as well, for instance Abstract.

Preview 09:16

We believe that instead of just talking about theory and abstract things, you should see how things really work inside Gitlab, how designer - developer collaboration actually looks like. Therefore, we're going to walk you through 3 example situations in the following two lectures. This lecture contains the first example.

Implementation: Gitlab Example 1 (Wireframe Review)

As we mentioned in connection with the first example (the previous lecture), our goal with these two lectures is to show you how things actually work inside Gitlab, how team members collaborate, what they can do using this application, how they notify each other, how they leave comments and so on. This lecture contains 2 more examples.

Implementation: Gitlab Example 2-3 (Build & API Review)

This lecture explains some more concepts about version control, and provides you a short summary of this topic. Next to these, it also contains a little practice activity.

Implementation: Version Control: More Aspects and Summary

This is one of the most exciting lectures, since it is about all the pieces coming together. You'll fully understand why we discuss architectures, data types, programming, reusable components, APIs and data modeling. It's like completing a complex puzzle! Next to this, the lecture illustrates that even in case of a really simple note taking app, there are so many design and development decisions you should make together with your team. 

Implementation: The Pieces Coming Together

The last lecture about implementation showcases the different collaborative activities during implementation. It also explains what automated tests are, how you should conduct usability tests together with the developers, and it summarizes how you can report bugs in a highly effective way.

Implementation: Collaboration in General
+ Bonus Lecture
1 lecture 01:31

This lecture contains a coupon code for the Sketching for UX Designers course and some recommended readings, useful links.

Bonus Lecture: Coupon Code & Recommended Links