Hands-On UX Design for Developers

Design, prototype, and implement compelling user experiences from scratch.

Elvis Canziba

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781788626699
• eBook ISBN: 9781788624299
• Edition: 1
• Topic: Computer Science
• Subtopic: Open Source Programming
• Index: Computer Science

Learn every step you need for product design and development

Key Features

• Explore all the tools that you need to be a complete UX designer
• Code the product designs you've created to become a full-stack designer
• Build an amazing portfolio with real-world projects

Book Description

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.

What you will learn

• What UX is and what a UX designer does
• Explore the UX Process and science of making products user-friendly
• Create user interfaces and learn which tools to use
• Understand how your design works in the real world
• Create UI interaction, animation, wireframes, and prototypes
• Design a product with users in mind
• Develop a personal portfolio and be well-prepared to join the UX world

Who this book is for

Hands-On UX/UI Design for Developers is for web designers who have knowledge of basic UX design principles.

Frontend UI Implementation and Process

It has been a long journey till now. This is the last stage we need to finish before our product moves to the development stage.

Here, we will have to do the development, but our main focus is on the development of the UI, not including backend functionalities, servers, or databases.

In this chapter, we will start explaining the process of how to hand over the product design to the frontend development team, what kind of assets should be provided to them, and what kind of tool we can use to make the process easier for both sides, that is, for design and frontend development.

After that, we will explain the frontend development discipline—what languages and tools they use, and what areas of development they cover.

We will cover the following topics in this chapter:

• UI handover process
• Tools that make the handover process easier
• Frontend development process
• Overview of CSS layouts such as float, flex, and grid
• CSS preprocessors and postprocessors
• CSS methodologies for maintaining code
• CSS frontend frameworks
• JavaScript role in UI development

UI Design handover

Similar to the UI Design process, where we needed information such as client requirements, clear planning documentation, research, user personas, wireframes, and prototyping for building user interfaces, when it comes to frontend development, developers need to know how you think the user interface that you designed will work, alongside the assets that are included on your user interface design, layout, grids, and UI components and all other required documentation, so that they can start the user interface development process.

The best way to provide all the required assets and data to developers is by having a proper handover process from the design stage to development stage, and to achieve that we need to involve the development team in the design process from the beginning.

Before I move on and explain the steps for handing-off the UI design, let me first explain the product development process in a classic way; a simple product development process involves the following three stages:

• Design Stage: Where we do the complete UX research; build wireframes, user personas and prototypes; and design user interfaces
• Frontend Stage: The stage where we convert UI designs into code and connect the design with backend services
• Backend Stage: All the functionalities of the product are built here, including the data that gets stored on the database, the services provided to the frontend team so that they can interact with them, server configurations, and everything that is happening behind the scenes with product functionalities:

The frontend is the part that connects the designing and the coding sides of our project. To get good results for the final product, frontend developers need to be involved on both sides, the design and backend, from the beginning, so that when it comes to connecting these two areas, their expectations will be clear:

We will discuss details for the frontend in the next section of this chapter—I just wanted to give you a clear idea of what a frontend developer's job is.

To have good results for UI implementation on the frontend side, there needs to be great collaboration between the design team and the frontend team.

In the preceding chapter, we explained the process of designing the user interface, and now we need to hand over these designs to frontend developers so that they can start implementing and coding these screens.

To make the process of handing over the designs to frontend developers smooth, you need to follow these steps:

• Start communicating with the frontend team from the early stage a of design
• Explain to the developer how you expect the design to work
• Share the mock-up/user interface that you designed
• Share the prototype
• Share the design specification, assets, and the design system
• Status checklist

Communicating with the frontend team on the early stages of design

Right from the first stage where you start planning, it's good to involve the developers as well, because they will be the ones who will bring your idea to life through their coding skills.

Having a frontend developer involved from the early stages of the design process will help you understand what can be done in the coding stage and what not to do in the UI design that you will now create.

Moreover, both designers and developers will better understand the ins and outs of the product, which will allow them to avoid mistakes that could happen through the product design and development stages.

Getting insights into the product from the early stages will give frontend developers time to research different kinds of frameworks that they can use through the development process, such as Bootstrap, Skeleton, Material Design, or Foundation. They can also easily prepare the workspace for the development process by deciding on different tools, such as CSS, preprocessors such as Sass or Less, automation tools such as gulp or grunt, and even JavaScript frameworks such as Angular, React, or Vue.

So, always involve the developers from the beginning stage of the product design to achieve better results and avoid mistakes that could happen later on the development side.

Explaining to the developer how you expect the design to work

It's best to explain to the developer how you expect your design to work, not just when you finalize the user interface design, but from the time when you do the wireframes or even sketches on paper.

This will help you get a better idea of whether the specific design or animation that you are trying to achieve is doable in the development stage or not and whether it will take too much time for the developer to achieve it or not.

Moreover, developers can easily explain the good and bad things to do for a specific design, so they can help you improve it.

Involving the developers at this stage in the design process will make them understand the user goals better, and they ca...

Table of contents

• Title Page
• Copyright and Credits
• www.packtpub.com
• Contributors
• Preface
• What is UX?
• UX Design Process
• User Behavior Basics and User Research
• Getting to Know Your Users
• User Personas
• Designing Behavior
• Visual Design Principles and Processes
• Wireframes and Prototyping
• UI Design and Implementation
• Frontend UI Implementation and Process
• Post-launching UX Activities
• Designing for Big Data
• Other Books You May Enjoy