As a UX designer, you might wonder how much you need to know about coding. While you won’t be writing code yourself, you will be working closely with developers who will bring your designs to life. To make this collaboration more smooth and productive, you need to understand the basics of programming languages and how they affect your design decisions.
In this article, we will explore why UX designers should learn about coding, what types of programming languages they should know, and how they can benefit from this knowledge in their career. We will also provide some tips on how to learn programming languages as a UX designer.
Front-end Development Languages
Front-end development languages are the ones that are responsible for creating the user interface of a website or an application. They are also called client-side languages because they run on the user’s browser or device. The three main front-end development languages are HTML, CSS, and JavaScript.
HTML
HTML stands for HyperText Markup Language. It is used to define the structure and content of a web page, such as headings, paragraphs, images, links, forms, etc. HTML uses tags to mark up different elements on a page.
For example, this is how you would write a heading in HTML:
<h1>This is a heading</h1>
As a UX designer, you should know how to use HTML tags to create semantic and accessible web pages that follow the best practices of web design. You should also know how to use HTML attributes to add extra information or functionality to your elements, such as class, id, src, href, alt, etc.
For example, this is how you would add a class attribute to a heading in HTML:
<h1 class="title">This is a heading</h1>
How HTML has evolved
HTML has changed a lot from its first version in 1991 to its current version HTML5 in 2014. Some of the changes and improvements that HTML has undergone are:
- The introduction of new tags and attributes that allow for more semantic and interactive web pages, such as
<article>,<section>,<nav>,<video>,<audio>,<canvas>, etc. - The removal or deprecation of obsolete or redundant tags and attributes that were no longer needed or supported by modern browsers, such as
<font>,<center>,<frame>, etc. - The standardization and validation of HTML syntax and rules by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) to ensure compatibility and consistency across different browsers and platforms.
- The integration of HTML with other technologies such as CSS and JavaScript to create more dynamic and responsive web pages that can adapt to different screen sizes and devices.
The benefits of HTML5 for UX designers are:
- It allows for more creative and engaging web pages that can include multimedia elements such as audio, video, animations, etc.
- It improves the accessibility and usability of web pages by providing more meaningful and structured content that can be easily understood by users and assistive technologies such as screen readers.
- It enhances the performance and security of web pages by reducing the need for external plugins or scripts that can slow down or compromise the loading or functioning of the web pages.
- It simplifies the coding process by providing more concise and consistent syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of HTML5 for UX designers are:
- It requires more knowledge and skills to use HTML5 effectively and efficiently, especially when it comes to integrating it with other technologies such as CSS and JavaScript.
- It may not be fully supported or compatible with older browsers or devices that may not have updated their software or hardware to accommodate the new features or standards of HTML5.
- It may pose some challenges or limitations when it comes to creating complex or customized web pages that may not fit into the predefined tags or attributes of HTML5.
CSS
CSS stands for Cascading Style Sheets. It is used to define the style and appearance of a web page, such as colors, fonts, layouts, animations, etc. CSS uses selectors and properties to apply different styles to different elements on a page.
For example, this is how you would style a heading in CSS:
.title { color: blue; font-size: 24px; font-weight: bold; }
As a UX designer, you should know how to use CSS properties to create visually appealing and responsive web pages that adapt to different screen sizes and devices. You should also know how to use CSS selectors to target specific elements on a page based on their attributes, classes, ids, or relationships.
For example, this is how you would target a heading with a class of title in CSS:
.title { /* styles for the heading with a class of title */ }
How CSS has evolved
CSS has changed a lot from its first version in 1996 to its current version CSS3 in 2012. Some of the changes and improvements that CSS has undergone are:
- The introduction of new properties and values that allow for more flexible and creative web pages, such as border-radius, box-shadow, transform, transition, animation,gradient, etc.
- The introduction of new selectors and pseudo-classes that allow for more precise and dynamic targeting of elements on a page, such as :nth-child, :hover, :focus, etc.
- The introduction of new modules and features that allow for more modular and organized coding, such as media queries, flexbox, grid, etc.
- The standardization and validation of CSS syntax and rules by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) to ensure compatibility and consistency across different browsers and platforms.
- The integration of CSS with other technologies such as HTML and JavaScript to create more interactive and responsive web pages that can respond to user actions and events.
The benefits of CSS3 for UX designers are:
- It allows for more expressive and attractive web pages that can include visual effects such as shadows, gradients, animations, etc.
- It improves the responsiveness and usability of web pages by providing more flexible and adaptable layouts that can fit different screen sizes and devices.
- It enhances the performance and efficiency of web pages by reducing the need for external images or scripts that can slow down or compromise the loading or functioning of the web pages.
- It simplifies the coding process by providing more concise and consistent syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of CSS3 for UX designers are:
- It requires more knowledge and skills to use CSS3 effectively and efficiently, especially when it comes to integrating it with other technologies such as HTML and JavaScript.
- It may not be fully supported or compatible with older browsers or devices that may not have updated their software or hardware to accommodate the new features or standards of CSS3.
- It may pose some challenges or limitations when it comes to creating complex or customized web pages that may not fit into the predefined properties or values of CSS3.
JavaScript
A web page can have interactive elements like buttons, menus, sliders, forms, etc. by using the computer language known as JavaScript. When manipulating page components and responding to user input, JavaScript makes use of variables, functions, objects, arrays, loops, conditions, and events.
For example, this is how you would create a function in JavaScript:
function sayHello() { alert("Hello!"); }
As a UX designer, you should know how to use JavaScript to create dynamic and engaging web pages that provide feedback and guidance to the users. You should also know how to use JavaScript libraries and frameworks, such as jQuery, React, Angular, or Vue, to simplify and enhance your coding process.
For example, this is how you would use jQuery to select an element by its id and change its text:
$("#title").text("This is a new heading");
How JavaScript has evolved
JavaScript has changed a lot from its first version in 1995 to its current version ECMAScript 2020 in 2020. Some of the changes and improvements that JavaScript has undergone are:
- The introduction of new features and syntax that allow for more modern and concise coding, such as arrow functions, let and const declarations, template literals, spread operator, destructuring, etc.
- The introduction of new data types and structures that allow for more robust and efficient coding, such as promises, async/await, symbols, maps, sets, etc.
- The introduction of new modules and features that allow for more modular and organized coding, such as import/export, classes, inheritance, etc.
- The standardization and validation of JavaScript syntax and rules by the European Computer Manufacturers Association (ECMA) International to ensure compatibility and consistency across different browsers and platforms.
- The integration of JavaScript with other technologies such as HTML and CSS to create more interactive and responsive web pages that can use the features and styles of these technologies.
The benefits of ECMAScript 2020 for UX designers are:
- It allows for more elegant and readable coding that can express complex logic and functionality in a simpler way.
- It improves the reliability and performance of web pages by providing more error handling and data validation mechanisms that can prevent or resolve bugs and issues.
- It enhances the user experience and satisfaction of web pages by providing more asynchronous and non-blocking coding that can handle multiple tasks and requests without slowing down or freezing the web pages.
- It simplifies the coding process by providing more consistent and compatible syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of ECMAScript 2020 for UX designers are:
- It requires more knowledge and skills to use ECMAScript 2020 effectively and efficiently, especially when it comes to integrating it with other technologies such as HTML and CSS.
- It may not be fully supported or compatible with older browsers or devices that may not have updated their software or hardware to accommodate the new features or standards of ECMAScript 2020.
- It may pose some challenges or limitations when it comes to creating complex or customized web pages that may not fit into the predefined features or syntax of ECMAScript 2020.
Back-end Development Languages
Back-end development languages are the ones that are responsible for creating the logic and functionality of a website or an application. They are also called server-side languages because they run on the server that hosts the website or the application. The two most common back-end development languages are PHP and Python.
PHP
PHP stands for Hypertext Preprocessor. It is used to create dynamic web pages and applications that can interact with databases, files, sessions, cookies, etc. PHP uses variables, functions, classes, arrays, loops, conditions, and operators to process data and generate output.
For example, this is how you would write a variable in PHP:
$name = "John";
As a UX designer, you should know how to use PHP to create user-friendly and secure web pages and applications that can store and retrieve data from databases or other sources. You should also know how to use PHP frameworks, such as Laravel or Symfony, to speed up and improve your coding process.
For example, this is how you would use Laravel to create a route for a web page:
Route::get('/hello', function () { return view('hello'); });
How PHP has evolved
PHP has changed a lot from its first version in 1995 to its current version PHP 8 in 2020. Some of the changes and improvements that PHP has undergone are:
- The introduction of new features and syntax that allow for more modern and concise coding, such as namespaces, traits, generators, null coalescing operator, etc.
- The introduction of new data types and structures that allow for more robust and efficient coding, such as scalar type declarations, return type declarations, anonymous classes, etc.
- The introduction of new modules and features that allow for more modular and organized coding, such as composer, PSR standards, etc.
- The improvement of performance and security of PHP by implementing new engines and mechanisms, such as Zend Engine, OPcache, JIT compiler, etc.
- The integration of PHP with other technologies such as HTML and CSS to create more dynamic and responsive web pages and applications that can use the features and styles of these technologies.
The benefits of PHP 8 for UX designers are:
- It allows for more elegant and readable coding that can express complex logic and functionality in a simpler way.
- It improves the reliability and performance of web pages and applications by providing more error handling and data validation mechanisms that can prevent or resolve bugs and issues.
- It enhances the user experience and satisfaction of web pages and applications by providing more asynchronous and non-blocking coding that can handle multiple tasks and requests without slowing down or freezing the web pages or applications.
- It simplifies the coding process by providing more consistent and compatible syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of PHP 8 for UX designers are:
- It requires more knowledge and skills to use PHP 8 effectively and efficiently, especially when it comes to integrating it with other technologies such as HTML and CSS.
- It may not be fully supported or compatible with older browsers or devices that may not have updated their software or hardware to accommodate the new features or standards of PHP 8.
- It may pose some challenges or limitations when it comes to creating complex or customized web pages or applications that may not fit into the predefined features or syntax of PHP 8.
Python
Python is a robust programming language that can be used for a wide range of tasks, including automation, web development, machine learning, and data analysis. To manage data and carry out tasks, Python makes use of variables, functions, classes, lists, tuples, dictionaries, loops, conditions, and operators.
For example, this is how you would write a list in Python:
names = ["John", "Mary", "Alice"]
As a UX designer, you should know how to use Python to create powerful and scalable web pages and applications that can handle complex and large amounts of data. You should also know how to use Python libraries and frameworks, such as Django or Flask, to simplify and enhance your coding process.
For example, this is how you would use Django to create a model for a database table:
class User(models.Model): name = models.CharField(max_length=50) email = models.EmailField(unique=True) password = models.CharField(max_length=20)
How Python has evolved
Python has changed a lot from its first version in 1991 to its current version Python 3.9 in 2020. Some of the changes and improvements that Python has undergone are:
- The introduction of new features and syntax that allow for more modern and concise coding, such as f-strings, walrus operator, async/await, etc.
- The introduction of new data types and structures that allow for more robust and efficient coding, such as enums, dataclasses, typing, etc.
- The introduction of new modules and features that allow for more modular and organized coding, such as pip, virtualenv, pytest, etc.
- The improvement of performance and security of Python by implementing new engines and mechanisms, such as PyPy, Cython, PEP 484, etc.
- The integration of Python with other technologies such as HTML and CSS to create more dynamic and responsive web pages and applications that can use the features and styles of these technologies.
The benefits of Python 3.9 for UX designers are:
- It allows for more elegant and readable coding that can express complex logic and functionality in a simpler way.
- It improves the reliability and performance of web pages and applications by providing more error handling and data validation mechanisms that can prevent or resolve bugs and issues.
- It enhances the user experience and satisfaction of web pages and applications by providing more asynchronous and non-blocking coding that can handle multiple tasks and requests without slowing down or freezing the web pages or applications.
- It simplifies the coding process by providing more consistent and compatible syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of Python 3.9 for UX designers are:
- It requires more knowledge and skills to use Python 3.9 effectively and efficiently, especially when it comes to integrating it with other technologies such as HTML and CSS.
- It may not be fully supported or compatible with older browsers or devices that may not have updated their software or hardware to accommodate the new features or standards of Python 3.9.
- It may pose some challenges or limitations when it comes to creating complex or customized web pages or applications that may not fit into the predefined features or syntax of Python 3.9.
Mobile Development Languages
Mobile development languages are the ones that are used to create applications for mobile devices such as smartphones and tablets. The two most popular mobile development languages are Swift and Kotlin.
Swift
iOS apps are made with Swift, a programming language. To specify data and behaviour, Swift employs closures, loops, conditions, enumerations, protocols, extensions, variables, constants, functions, classes, structures, and operators.
For example, this is how you would write a function in Swift:
func sayHello() { print("Hello!") }
As a UX designer, you should know how to use Swift to create native and responsive iOS apps that follow the Apple design guidelines and provide a great user experience. You should also know how to use Swift tools and frameworks, such as Xcode, UIKit, SwiftUI, or Core Data, to develop and test your apps.
For example, this is how you would use SwiftUI to create a user interface for an iOS app:
struct ContentView: View { var body: some View { Text("Hello, world!") .padding() } }
How Swift has evolved
Swift has changed a lot from its first version in 2014 to its current version Swift 5.4 in 2021. Some of the changes and improvements that Swift has undergone are:
- The introduction of new features and syntax that allow for more modern and concise coding, such as optionals, guard statements, extensions, protocols, etc.
- The introduction of new data types and structures that allow for more robust and efficient coding, such as enums, tuples, generics, etc.
- The introduction of new modules and features that allow for more modular and organized coding, such as Swift Package Manager, Codable, Result, etc.
- The improvement of performance and security of Swift by implementing new engines and mechanisms, such as LLVM, ARC, SIL, etc.
- The integration of Swift with other technologies such as Objective-C and SwiftUI to create more interoperable and declarative iOS apps that can use the features and styles of these technologies.
The benefits of Swift 5.4 for UX designers are:
- It allows for more elegant and readable coding that can express complex logic and functionality in a simpler way.
- It improves the reliability and performance of iOS apps by providing more error handling and data validation mechanisms that can prevent or resolve bugs and issues.
- It enhances the user experience and satisfaction of iOS apps by providing more asynchronous and non-blocking coding that can handle multiple tasks and requests without slowing down or freezing the iOS apps.
- It simplifies the coding process by providing more consistent and compatible syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of Swift 5.4 for UX designers are:
- It requires more knowledge and skills to use Swift 5.4 effectively and efficiently, especially when it comes to integrating it with other technologies such as Objective-C and SwiftUI.
- It may not be fully supported or compatible with older devices or operating systems that may not have updated their software or hardware to accommodate the new features or standards of Swift 5.4.
- It may pose some challenges or limitations when it comes to creating complex or customized iOS apps that may not fit into the predefined features or syntax of Swift 5.4.
Kotlin
Android apps are written in Kotlin, a programming language. To specify data and behaviour, Kotlin employs variables, constants, functions, classes, objects, interfaces, generics, collections, loops, conditions, and operators.
For example, this is how you would write a variable in Kotlin:
var name = "John"
As a UX designer, you should know how use Kotlin to create native, responsive Android apps that follow Material design guidelines and give a fantastic user experience. You should also know how to use Kotlin tools and frameworks like Android Studio, Jetpack Compose, and Room to develop and test apps.
For example, this is how you would use Jetpack Compose to create a user interface for an Android app:
@Composable fun Greeting(name: String) { Text(text = "Hello, $name!") }
How Kotlin has evolved
Kotlin has changed a lot from its first version in 2011 to its current version Kotlin 1.5 in 2021. Some of the changes and improvements that Kotlin has undergone are:
- The addition of new features and syntax, such as null safety, coroutines, data classes, etc., that make writing more modern and concise.
- The introduction of new data types and structures that allow for more robust and efficient coding, such as sealed classes, inline classes, ranges, etc.
- The introduction of new modules and features that allow for more modular and organized coding, such as Kotlin/Native, Kotlin/JS, Kotlin Multiplatform, etc.
- The improvement of performance and security of Kotlin by implementing new engines and mechanisms, such as LLVM, IR, JVM, etc.
- The integration of Kotlin with other technologies such as Java and Jetpack Compose to create more interoperable and declarative Android apps that can use the features and styles of these technologies.
The benefits of Kotlin 1.5 for UX designers are:
- It allows for more elegant and readable coding that can express complex logic and functionality in a simpler way.
- It improves the reliability and performance of Android apps by providing more error handling and data validation mechanisms that can prevent or resolve bugs and issues.
- It enhances the user experience and satisfaction of Android apps by providing more asynchronous and non-blocking coding that can handle multiple tasks and requests without slowing down or freezing the Android apps.
- It simplifies the coding process by providing more consistent and compatible syntax and rules that can be easily learned and applied by UX designers.
The drawbacks of Kotlin 1.5 for UX designers are:
- It requires more knowledge and skills to use Kotlin 1.5 effectively and efficiently, especially when it comes to integrating it with other technologies such as Java and Jetpack Compose.
- It may not be fully supported or compatible with older devices or operating systems that may not have updated their software or hardware to accommodate the new features or standards of Kotlin 1.5.
- It may pose some challenges or limitations when it comes to creating complex or customized Android apps that may not fit into the predefined features or syntax of Kotlin 1.5.
Benefits of Learning Programming Languages as a UX Designer
Learning programming languages as a UX designer can bring you many benefits in your career. Here are some of the main ones:
Better collaboration with developers
Understanding coding can help you communicate your ideas and feedback more effectively with developers. You can speak their language, understand their challenges, and respect their constraints. You can also create more realistic and feasible wireframes and prototypes that can be easily translated into code. This can reduce friction and confusion in the design handoff process and improve the quality and speed of the development.
Better design solutions
Understanding coding can help you create better design solutions that meet user needs and expectations. You can think like a developer and see your projects from a different perspective, sometimes more objectively. You can also explore new possibilities and opportunities that coding can offer, such as animations, interactions, or personalization. This can enhance your creativity and innovation as a UX designer.
More career opportunities
Understanding coding can help you stand out from the competition and find more job opportunities in different industries and sectors. You can showcase your versatility and adaptability as a UX designer who can work with different technologies and platforms. You can also apply for more roles that require coding skills, such as UX developer or UI engineer. This can increase your value and income as a UX designer.
How to Learn Programming Languages as a UX Designer
Learning programming languages as a UX designer can be challenging but rewarding. Here are some tips on how to learn programming languages as a UX designer:
Online courses and tutorials
UX designers can learn programming languages by taking interactive online courses and tutorials. Codecademy, Coursera, Udemy, and W3Schools offer online tools for learners of all levels. Flatiron School and UX Design Institute offer courses for UX designers who wish to learn coding.
Books and blogs
UX designers can learn programming languages by reading books and blogs that simplify the concepts and applications of coding. Many books and blogs discuss coding syntax, reasoning, best practises, and examples. Some of the books and blogs that we recommend are:
- HTML & CSS: Design and Build Web Sites by Jon Duckett
- JavaScript: The Definitive Guide by David Flanagan
- PHP & MySQL: Novice to Ninja by Kevin Yank
- Python Crash Course by Eric Matthes
- Swift Programming: The Big Nerd Ranch Guide by Matthew Mathias and John Gallagher
- Kotlin in Action by Dmitry Jemerov and Svetlana Isakova
- Smashing Magazine
- CSS-Tricks
- CodePen
Projects and practice
The best way to learn programming languages as a UX designer is to practice your coding skills and apply them to real-world scenarios. You can find many projects and exercises that challenge you to create web pages or applications using different programming languages. You can also use online tools or platforms that allow you to write and run code in your browser, such as CodePen, Repl.it, or Glitch. Some of the projects and exercises that we suggest are:
- Build a personal portfolio website using HTML, CSS, and JavaScript
- Create a blog using PHP and MySQL
- Analyze data using Python
- Make an iOS app using Swift
- Make an Android app using Kotlin
Conclusion
In conclusion, learning programming languages as a UX designer can be very beneficial for your career. It can help you collaborate better with developers, create better design solutions, and find more career opportunities. You don’t have to be an expert coder, but you should know the basics of the most common programming languages for web and mobile development, such as HTML, CSS, JavaScript, PHP, Python, Swift, and Kotlin. You can learn these languages by taking online courses and tutorials, reading books and blogs, and doing projects and practice.
If you are interested in learning programming languages as a UX designer, we encourage you to start today. You will be amazed by how much you can learn and achieve with coding. Happy coding!
Frequently Asked Questions
Here are some of the frequently asked questions about programming languages that UX designers should know:
Do I have to know programming to be a UX designer?
No, you don’t have to know programming to be a UX designer. However, knowing the basics of programming can help you as a UX designer in many ways.
What is the difference between UX design and UI design?
UX design is the process of creating products or services that provide a positive and meaningful experience for the users. UI design is the process of making a product or service’s visual and functional parts, like colours, fonts, layouts, buttons, etc.
What is the difference between front-end development and back-end development?
Front-end development uses HTML, CSS, and JavaScript to create a website’s user interface. Back-end development uses languages like PHP and Python to build a website or app’s logic and functionality.
What is the difference between native and hybrid mobile development?
Native mobile development uses Swift or Kotlin to create apps for specific platforms or devices. Hybrid mobile development uses HTML, CSS, and JavaScript to create cross-platform apps.
How long does it take to learn programming languages as a UX designer?
It depends on many factors, such as your previous knowledge, your learning style, your goals, your motivation, etc. As a UX designer, learning computer languages can take weeks to months.
