Book Image

Hands-On UX Design for Developers

By : Elvis Canziba
Book Image

Hands-On UX Design for Developers

By: Elvis Canziba

Overview of this book

Designing user experience (UX) is one of the most important aspects of a project, as it has a direct effect on how customers think of your company. The process of designing a user experience is one of the most challenging yet rewarding aspects of product development. Hands-On UX Design for Developers will teach you how to create amazing user experiences for products from scratch. This book starts with helping you understand the importance of a good UX design and the role of a UX designer. It will take you through the different stages of designing a UX and the application of various principles of psychology in UX design. Next, you will learn how to conduct user research and market research, which is crucial to creating a great UX. You will also learn how to create user personas and use it for testing. This book will help you gain the ability to think like a UX designer and understand both sides of product development: design and coding. You will explore the latest tools, such as Sketch, Balsamiq, and Framer.js, to create wireframes and prototypes. The concluding chapters will take you through designing your UI, dealing with big data while designing a UX, and the fundamentals of frontend. Finally, you'll prepare your portfolio and become job ready in the UX arena.
Table of Contents (18 chapters)
Title Page


The User Experience (UX) field is growing rapidly, and most businesses are realizing that achieving their goals requires a level of product presence that is aligned with that of customer needs. UX is an essential part of product creation today, but the process of it can be long and costly. So, in this book, we are going to explain everything UX—from the complete basics right up to the advanced stuff.

If you want to learn about the processes, tools, and techniques that are required for creating a great UX design, this hands-on guide has you covered.

We'll start off our journey by understanding what UX is in the first place, why we need UX, how to do UX, and how to handle discovery, planning, research, and design with good UX in mind. Then, we will explain the full stack design dilemma and, more importantly, we will dive deeper into explaining the development side of an UX project.

With this book, you will gain the ability to think like a UX designer and understand both sides of product development, both the design and coding parts. You'll master how to create engaging, human-centered design practices, UX methodologies, the UX process itself, animation, and interaction. Finally, you'll prepare your portfolio and find yourself having become an expert in the UX field.

Who this book is for

This book is mainly for developers who want to enter the UX design field, but is also for product owners, entrepreneurs, and even beginner designers who would like to learn more about UX design and become professionals in this field.

What this book covers

Chapter 1, What is UX, will explain what UX design is, the main differences between UX and UI design, and the path to becoming a UX designer. Once everything is clear regarding the tasks of the UX designer, we will move on to explain the simple process of UX design and its various stages. Besides this, we will explain what full stack design is and how to become a full stack designer.

Chapter 2, UX Design Process, will discuss the most important things that we need to know to become a UX designer. The UX design process is a key thing that everyone in the UX industry is undertaking, but they are all doing so differently. So, we will dive deeper inside the UX design process and its stages to fully understand them. After that, we will move on to explain how to do UX project planning and proposals, and look at how to create a UX strategy. Also, to create a good UX, we need to understand the client business, competitors, and customers, and this will be covered during this chapter.

Chapter 3, User Behavior Basics and User Research, talks about how, as UX designers, we need to think about more than just what our product looks like. We will need to encourage users to engage with our product or service. So, to do this properly, we have to observe how the users behave with our product, and, for this, fortunately, we can use some psychology principles to analyze how our users think, behave, and interact with our product. So, this chapter will cover the user behavior basics, including psychology principles and how to conduct a proper user research.

Chapter 4, Getting to Know Your Users, explores how, to deeply and clearly understand why people use specific products and how they use them, we first need to know them. To create outstanding products, getting to know our users is an important thing. In this chapter, we will explain the importance of knowing the users during the process of UX design and how, by knowing more about users, we can easily create successful products. So, during this chapter, we will cover the areas that are important for us to know when it comes to users, as well as UX research methods and how to conduct an interview.

Chapter 5, User Personas, will help us achieve our goal of creating a great user experience for our targeted users by explaining the need for creating user personas. They are important to us because we can easily know who our user is during the product design process. This chapter will cover everything related to user personas, including why we create them, why we need them, and how to create a proper structure of user personas.

Chapter 6, Designing Behavior, will explain what drives users to behave in a certain way or take certain actions. Besides the BJ Fogg model, we will cover a few other behavior models that are worth knowing and understanding. We will cover topics such as behavioral design models, the factors that compel users to take certain actions, and how to create designs that will change user behavior.

Chapter 7, Visual Design Principles and Processes, goes into how, when we want to speak about the language of design, we need to provide a proper visual design for the users so that they can understand what we are trying to tell them. So, in this chapter, we will go through the basic elements of visual design, looking at what they are and how to use them. This is one of the most important chapters of this book when it comes to understanding UX and UI design together. We will cover everything, ranging from the basic elements of visual designs, such as colors, shapes, and lines, up to design principles such as repetition, balance, contrast, hierarchy, and spaces.

Chapter 8, Wireframes and Prototyping, continues in helping you learn the skills and methods for creating and designing interactive wireframes and prototypes, which will help us in the process of visual design, especially when it comes to creating better UI designs. I will share different examples on how wireframes can be created, what kind of tools we can use, and what kind of wireframes we can create to enhance our product design process. Here, we will cover everything from the basics up to the advanced concepts of wireframes and prototypes. Then, we will move on to explain in detail the different types of wireframes that we can create and the different ways of creating them.

Chapter 9, UI Design and Implementation, will explain what UI design is, where it can be used, and how we can create it. This chapter will explore what the process for creating a good UI design for our product is.

Chapter 10, Frontend UI Implementation and Process, explains the process of how to hand product design over to the frontend development team, what kind of assets should be provided to them, and what kind of tools we can use to make the process easier for both the design and frontend development sides of the story. After that, we will move deeper and explain the frontend development discipline—what languages and tools they use, and what areas of development they cover. So, this chapter will cover the complete process of UI implementation on the coding side of things, starting from the UI hand-over process and going right up to the organization of HTML, CSS, and JavaScript code.

Chapter 11, Post-launch UX Activities, goes into how, after we launch the product, we will need to learn more about those who will be using our product—we need to reach them, listen to them, and improve the product for them. We will talk more about what kind of metrics we should get from our customers, which parts of these metrics are important for us to know, and how we can use those metrics for our benefit. Areas such as A/B testing, gathering user metrics, and performing user interface accessibility testing will be covered during this chapter.

Chapter 12, Designing for Big Data, looks at how today's world is experiencing a growing amount of big data, which is all being collected from different sources, such as e-commerce businesses, social network platforms, search engines, and even small online businesses. Throughout this chapter, you will gain a better understanding of those points and the role of big data when it comes to UX. We'll also look at how we can use big data in design and why big data matters.

To get the most out of this book

In order to get the most out of this book, you should have some experience in developing products or services, besides knowing the basics of UX. It might be good as well if you have some knowledge of using design tools. Although this book will show you a few great tools to use, this is not a book focused on tool or software tutorials. Be prepared to use not only online tools, but papers, sticky notes, pens, paper templates, canvases, whiteboards, and whatever walls you can write on.

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here:

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "As you may have noticed, using the grid-column CSS property, we define the starting and ending points of each column that we have."

A block of code is set as follows:

<button class="f1 br1 ph3 pv4 white bg-red hover-bg-light-red">Search</button>

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: " To choose one of them, we need to simply go under theFilemenu of Sketch, open theNew From Templatesubmenu, and choose one of available UI templates, as follows ."


Warnings or important notes appear like this.


Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit


Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit