36,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 401
Veröffentlichungsjahr: 2018
Ähnliche
Hands-On UX Design for Developers
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor:Amarabha BanerjeeAcquisition Editor: Noyonika DasContent Development Editor: Jason PereiraTechnical Editor: Rutuja VazeCopy Editor: Safis EditingProject Coordinator: Sheejal ShahProofreader: Safis EditingIndexer: Rekha NairGraphics: Jason MonteiroProduction Coordinator: Nilesh Mohite
First published: July 2018
Production reference: 1310718
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78862-669-9
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Elvis Canziba has over 12 years of digital experience, the bulk of which came from working in the highly competitive industry.
He is a UX designer and frontend developer with a passion for technology and a knack for creating order out of chaos. He previously worked with different companies in the United States and Europe, and has moved to Dubai within the last two years. In that time, he has produced fantastic results in UX design and has managed various companies as Lead Developer, producing a high ROI every time.
About the reviewer
Basil Miller is the co-founder of Devlight and an Ivano-Frankivsk-based leading Android developer. Since 2014, Android developers all over the world have observed his progress and are using free products that he has developed as an open source Android UI widgets provider. Those libraries have reached the top of the popular trend charts. Being a co-founder and developer by nature, Basil is able and willing to collaborate in work on new business projects and startups. Also, it is easy to contact Basil in order to involve him in projects as a mobile development consultant.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Hands-On UX Design for Developers
www.packtpub.com
Why subscribe?
PacktPub.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the color images
Conventions used
Get in touch
Reviews
What is UX?
What is UX design?
UX Design versus UI Design 
Why is UX so important?
Who is a UX designer?
UX design process
Full stack design
Who is a full stack designer?
A roadmap to becoming a successful full stack designer
Summary
UX Design Process
UX design process
Discovery and planning
The planning phase
Project proposals
Project objectives and methodologies
The UX strategy
Understanding the client's business
Understanding our competitors
Understanding our customers
Discovering your own UX strategy framework
UX research
The discover stage
Field study
Diary study
User interviews
Stakeholder interviews
The explore stage
Competitive analysis
Design review
Persona-building
Task analysis
Journey-mapping
Prototype feedback and testing
Writing user stories
Card-sorting
The test stage
Qualitative usability testing
Benchmark testing
Accessibility evaluation
The listening stage
Surveys
Search-log analysis
Usability-bug review
UX analysis
User analysis
Design
Concept, sketching, and flows
Wireframes and prototyping
Visual design and interactions
Documentation
Development
Production
Summary
User Behavior Basics and User Research
User behavior basics
The Gestalt theory
The Proximity law
The Similarity law
The Closure law
The Figure-Ground law
The Common Region law
Things you should know about psychology in UX
Understanding the user's motivation
Extrinsic motivation
Intrinsic motivation
Understanding the user's ability
Understanding what triggers our users
A quick summary of this section
User research
Setting objectives and a brief
Defining the audience
Selecting our research method
Designing and validating your research
Organizing interview
Conducting the research
Analyzing and validating the results
Defining the problems
Market research is not user research
The benefits of user research
Helping to create the right product from the beginning
Increasing conversions and revenues
Avoiding surprises saves time and money
Improving SEO and marketing
Customer retention and loyalty
Providing competitor insights
Development resources
Early design guide
Summary
Getting to Know Your Users
User Research
Grouping customer information
How to conduct user interviews
Preparing for the interview session
Identifying who we want to talk to
Setting up screener surveys for filtering the participants
Conducting the interview
Summary
User Personas
What are user personas?
Creating a persona
Four different perspectives on personas
Goal-directed personas
Role-based personas
Engaging personas
Fictional personas
Benefits of personas
Summary
Designing Behavior
Designing behavior
Five factors/preconditions for users to take actions
Models of behavior change
Behavioral approach for product design
Summary
Visual Design Principles and Processes
Introducing visual design principles and processes
Basics of visual design
Using lines
Using shapes
Types of shapes
Shape usage in visual design
Using colors
Color theory
Color systems
Using the color wheel to understand the meaning of colors
The meaning of each color
Using the appropriate font/typography
Textures
Forms
Design principles
Alignment
Hierarchy
Contrast
Repetition
Proximity
Balance
Space
Visual design tools
Summary
Wireframes and Prototyping
Wireframes and prototyping
What is a wireframe?
How to create wireframes?
Types of wireframes
Low-fidelity wireframes
Medium-fidelity wireframes
High-fidelity wireframes
Wireframing tools
Sketch wireframes
Stenciling and paper cutouts
Wireframing software
Balsamiq mockups
Wireframe.cc
Moqups
InVision
UXPin
Axure
Other wireframing tools
Creating wireframes using graphic design software
What is prototyping?
Prototyping methods
Paper prototyping
Digital prototypes
Coding prototypes
The process of creating prototypes
Planning
Drawing and sketching
Mockup and design
Animations and interactions
Exporting and testing
Prototyping tools
MarvelApp
Origami.Design
Justinmind
Flinto
Principle
Other prototyping tools
Summary
UI Design and Implementation
User interface design
UI design tools
Designing the UI with Sketch
The toolbar
Artboards
Pages
UI components templates
Colors
Typography
Icons and symbols
Exportation
Preview of the UI design
Sketch plugins
Creating the Design System in Sketch
Creating a structure for files and folders
Following the proper naming convention
Choosing the colors and creating the palettes
Choosing fonts/typefaces
Creating and configuring the grid
Designing the UI components
Summary
Frontend UI Implementation and Process
UI Design handover
Communicating with the frontend team on the early stages of design
Explaining to the developer how you expect the design to work
Sharing the mock-up/user interface designs
Sharing the prototype
Sharing the design specification, assets, and the design system
Status checklist
Using a handover design tool
Handing-off UI design using Zeplin
Handing over design using Sympli
Frontend development/UI development
CSS layouts
Float-based layout
Flexbox-based layout
Grid-based layout
CSS preprocessors
Sass
Less
Stylus
CSS postprocessors
CSS methodologies
Object-Oriented CSS (OOCSS)
Scalable and Modular Architecture for CSS (SMACSS)
Block, Element, Modifier (BEM)
Atomic CSS (ACSS)
CSS frameworks
Summary
Post-launching UX Activities
Post-launch UX activities
Collecting the correct user feedback
Customer feedback surveys
Emails and contact forms
Feedback through social media
User accessibility testing (UI testing)
A/B testing
Tracking and recording user UI sessions
Creating and analyzing conversion funnels
Summary 
Designing for Big Data
UX Design with big data
The role of big data in UX design
Data visualization
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
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: https://www.packtpub.com/sites/default/files/downloads/HandsOnUXDesignforDevelopers_ColorImages.pdf.
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 ."
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 www.packtpub.com/submit-errata, 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 authors.packtpub.com.
Reviews
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 packtpub.com.
What is UX?
Simply put, UX means User Experience. In this chapter, we'll explain how to choose the right approach for UX. Then we'll move on to what a UX designer is. We will cover the process of UX design, where we'll give you guidelines and tips on how to become a better UX designer. Finally, we will move on to the main topic of this book: full stack design. Also, we will discuss the processes and tools being used, and areas of design and development that are part of the full stack design process. Finally, we'll discuss how to become a full stack designer.
In this chapter, we will cover the following topics:
UX design and the difference between UI and UX
Who is a UX Designer?
UX designers, their role, and the processes they have to follow
Full stack design and the role of a full stack designer
Becoming a full stack designer
What is UX design?
Just knowing what UX Design stands for is not the same as really understanding the details of what it is. UX design is mainly focused on the overall experience of your product and not just on its look.
When it comes to UX design there is no general definition for it, because UX design covers a lot of different areas inside it, such as designing, branding, research, usability, accessibility, and function.
So, a proper definition of UX design might be the following:
UX Design is the process of designing physical or digital products that are useful, easy to use, and provide a great experience in interacting with them.
In short, it's everything that involves why, what, and howthe product is being used by its users.
We will start with why because it involves the user's desire to use the product. The desire might be to finish a specific task or to add value for themselves by using it. The what explains the things that people will do with the product's functionalities or the features that are provided with it. Finally, how relates to the user's way of accessing the product's functionality through its design or interface.
Think of an app that you use daily, that you love, makes sense when you open it, and provides you with great value when you are using it; that's a good UX. Every app that you have on your devices has a UX, but it may be a good or bad one.
However, a bad UX design has consequences. If your app has a bad UX design, users will have a hard time using it, and they will need training to use the app. As soon as they find a similar, better app that accomplishes the same task, they will move on because no one wants difficulty in completing a simple task.
Losing users means losing revenue. An improved UX design increases revenue because people will pay more for premium services if it makes their life easier. It's really important to understand the difference between what UX design is, and what it is not.
UX Design versus UI Design
Some of you might be confused about what exactly the difference is between UX and UI design. As mentioned earlier, UX looks at the overall experience of the product, whereas UI is focused more on the look and feel, such as fonts, colors, buttons, layout, and spaces.
Let's take an example of a booking website. Let's say that we need to book a flight from India to somewhere in Europe; booking in this case is the main content, the main thing that we want to accomplish; the website itself provides us with an UI with the options of searching the flights and choosing the one that we need. However, the whole process where we interact with the UI, from searching to choosing, and in the end, booking the flight, is the UX process, where the main content, booking in our case, is done.
The following image aims to explain the difference between a UI and UX design:
Although we have mentioned this several times, it is important that we explain this topic further for clarity.
It is really important for UX to be involved from the first phase of the product development; it will reduce the cost, since you can detect issues in the early phase and fix them, rather than doing so later.
UI supports UX, UI extends the UX, and, for sure, UI is the vehicle for UX. UI is the user connection to your application, which needs to be as simple and as clear as possible for your user. It must allow your user to do their work in a pleasing, easy, and efficient manner.
Who is a UX designer?
A UX designer is someone who investigates and analyzes how users feel about the products offered to them. UX designers then apply this knowledge to product development in order to ensure that the user has the best possible experience with that product. UX designers conduct research, analyze their findings, inform other members of the development team about their findings, monitor development projects to ensure that those findings are implemented, and do much more.
People usually presume that product design was simpler in the past. Well, they thought it was simpler because designers or product owners had a particular design in mind and built their products in a way that they thought was good and hoped their clients would like.
However, it was different because online competitions for solving specific problems were not as prominent as they are today, so even if the people didn't like a product much, they were forced to use it because there was no other option available to them. That is the reason why most of products used to be designed without users in mind.
UX increases the chances of a project's success when it finally comes to market, not least because it doesn't gamble on users taking to a product just because it's a brand name.
UX design can be found in a variety of project environments nowadays. The more complicated the project, the more essential its UX design is. Too many features handled the wrong way can deter users like nothing else.
You may not find dedicated UX teams in a start-up, but UX is always part of the objective. High-tech start-ups developing innovative projects need to understand how their users feel even more than established companies do.
The bigger the project is, the more resources it consumes, so UX becomes even more important to deliver a return on the investment.
The main methodology used to guarantee the UX in most projects is user-centered design. Simply put, user-centered design is all about designing with the user's needs and expected behaviors in mind.
We can say that if the heart of UX design is the concept of constant iterative optimization, then the problem is the blood the heart is pumping.
So, the approach for our future customers or users should be to find the problem that they are dealing with and then solve it for them. We have to find the problem and define it–feel the same pain that our users feel–and eliminate it for them. That is the highway to providing a great UX.
To stay on the right path, we will need a lot of analytical and intuitive skills, because one of the trickiest parts with problems is that when we have something that troubles us, it is difficult to define it.
In the past, the role of a UX designer was a bit more difficult, because we always had to prove the value of UX to the company we were working for, and it was a real struggle to explain to companies why UX is important and why they need to start focusing on it. However, nowadays, companies and start-ups have become aware of the importance of UX and take this user-centered design approach seriously.
UX design process
Like most other disciplines, UX design has its own process. UX design follows the user-centered design process, which looks like this:
Discovery and planning
Strategy
UX Research
Analysis
Design
Production
We will go deeper into each one of these in the later chapters of this book, but I will clarify a small point here: what each of this phases includes. To have a successful product result in the end, it is really important to follow all this stages strictly:
Research
:
By research, we mean that a statement of work is delivered to the client, with details such as the project's cost, timeline, and what its end result will be. Also, at this stage,
team-planning
will be included,
so this is the initial preparation before starting the project and going deeper into it.
Strategy
: This
is the first phase, where we define what goal we want to
achieve in this process. It deals with understanding what the benefit of the final product will be.
Discovery and Planning:
This
is usually referred as the
Discovery phase, and
will include a lot of sub-phases inside its life cycle, such as interviews, user research, competition research, observations from users, and different surveys.
Analysis
: Here, you write the insights on the data that you collected from the research phase and then define how UX design can help you with that data.
Design
:
This comes after you define clear goals and flows from the previous three phases and put your product to life by visualizing it and designing all the specific flows, refine them, and
get
input from the users by doing paper prototypes, wireframes, interactions, and UI designs.
Production
:
This phase is where all the visual designs are finished, and you validate the product with stakeholders and go through user testing sessions. In this phase, the
UX design team
has to collaborate a lot with the developers team and guide them to produce a high-quality product.
So, all these six stages of the UX process include the user feedback from the beginning of each stage and during the entire product life cycle.
Full stack design
Since we now understand what UX stands for, it's time to dive deeper into a trending topic that is getting a lot public attention, the full stack design.
As an example, let's look at designing a new logo. Usually, a graphic designer will create a bundle of graphical elements to give a better presentation to their client. For example, they will include the good and bad practices of logo use, negative logos, how it can be used in horizontal, and vertical space, favicons, and so on.
The idea of web frameworks, such as Bootstrap, Foundation even Google's Material Design guidelines, is similar; just like a graphic designer who has to provide all the rules, guides, and best practices of use for a logo that they created, the full stack designer provides web style guides, animations, graphical assets, interactions, and UI elements that will be used across the platform.
Today, a lot of companies, even larger ones, have built their own custom design frameworks to keep track of their product's UI.
So, creating this kind of framework, from A to Z, from the UX Research process to the final UI components that represent the core of your product concepts on many areas, I call this the full stack design process.
Who is a full stack designer?
It is important to clarify that the word full stack doesn't mean to do it all from designing, coding, database or management; it means that a person has developed multiple skills, which allow them to complete a design or a development project on their own. A full stack designer is someone who can work through the entire life cycle/process of the design phase, starting from conception, research, and wireframes to UI design and Visual Design. They will be involved in the prototyping process using specific tools, such as Marvel, InVision, or Sympli, and will finalize the process by providing frontend style guides and UI Prototypes and animations using HTML/CSS, WebFlow, Framer.js, SVG Animation, and so on.
By involving the frontend code, I don't mean that you have to be a great coder like you are on design side, but you should understand how the frontend code works and what technologies are behind it; in the following diagram, I have added the frontend code on both areas, that is, Design and Development:
A good designer does not focus only on the UI or on the Design itself, but also on other things that are connected to it. A designer needs to realize the influence of different factors that can affect the product result. So, the more you are involved in these connected or related areas, the better a full stack designer you will become. And one of the biggest benefits is to involve developers from the beginning stage of UX.
The difference between a regular designer and a full stack designer is the ability to think of the bigger picture, because a full stack designer will be involved in the UX Process, design patterns, critical thinking, coding techniques, and a lot of other tools that will help them to finish the project, while a regular designer is involved in a specific area of design only.
A roadmap to becoming a successful full stack designer
There are tons of things that you can do to become a full stack designer, but I would suggest these five points as a roadmap to becoming successful in a full stack designer career:
Learn the right
skills
Learn the right
tools
Show your work and gain some
experience
Learn how to
network
and get connected with people
Build trust
We also should have the ability to receive different input from informations data, content, product requirements, feature requests, and so on, and develop different series of sketches and wireframes that will follow the best practices of UX design, solve problems, and, more importantly, create user-friendly experiences.
We need to be able to understand wireframes and design and every other UI component around them because this needs to be aligned with our client branding, that is, solving visual problems by providing a complete visual view and presentation of the product. Finally, we will need to be able to take these finalized UI designs and convert them into working prototypes, frontend code, or at least pieces of interactions just to show clearly our thinking for interactivity, functionality, and product look (UI).
Another thing that confuses people a lot about the full stack design field is the separation of frontend tasks. Usually, I prefer to clarify to the full stack developer that their task is to get the product to come to life by filling it with real data and add its interactivity to the backend and database by following the framework that was provided to them by the design team.
Usually, I see a lot of blogs written about the full stack designer as a designer who can code, but the central idea is not coding, but combining the framework, the toolset, and the assets of all the research that has happened on UX process phases into one complete bundle for the full stack developer to follow. Also web frameworks such as Material Design Guidelines, Bootstrap Framework, Animation showcases, and clear actions and functionalities can be also included in this bundle.
The word stack usually refers to the layers of technology in an application. So you can think of this as if you were to stack all design technologies on an application, starting from UX. It would look something like this:
UX design
(Research, Wireframing, and Prototype): Using tools such as Balsamiq, Pen and Paper, and sketching
UI design
(Visual Design, mockups, icons, and assets): Using tools
such as
Photoshop, Illustrator, SketchApp, and Adobe XD Design
Interaction Design
(prototype of UI, animation, human interaction): Using tools
such as
Principle, Adobe After Effect, InVision, and FramerJS
Frontend side
: This includes the following two areas:
HTML and CSS for User Interface Design
JavaScript + Advanced CSS features for Interface Interaction and Animations
So, putting this simply, you can see that a full stack designer is someone who can research, design, implement, prototype, mock up, and code or slice (HTML/CSS). They are knowledgeable about all types of designs starting with graphics, web, mobile, software, or more specific areas of a new product design.
A full stack designer is a designer who has a multi-set of different design skills, and who is able to understand, design, and maintain an awareness for the entire product structure. Also, this kind of designer can customize their list of skills for a specific project.
For example, one project might require their skill on visual design and create interaction examples to solve a specific problem, whereas the other challenge for them might be to think through information data and develop clear UX design flows and solutions. So, this kind of designer will have all the necessary skills for solving both challenges and they choose the right ones for a specific task.
Having this kind of skill makes their process really seamless and allows them to have higher expectations when it comes to finalizing the product. Plus, it can save them a lot of time and money.
If we talk about the difference between a full stack designer and a full stack developer, it is really simple, because full stack developers are more focused on understanding a different range and wide spectrum of technologies so that they can improve on the engineering side. On the other hand, full stack designers are more focused on understanding the process for creating the product so that they will be able to deliver a better design, better UX, and a better product.
So, in being a full stack designer for creating a digital or physical product, it is important to concentrate on the following core aspects:
Usability
: We have to create and provide a clear and really easy-to-use product
Utility
: The product itself needs to provide useful content and solve a user problem
Accessibility
: T
he product needs to be accessible
to
different user categories
Desirability
: T
he product is attractive and creates a good UX
The advantage that you will have by becoming a full stack designer is not about how to make things look beautiful; instead, you will be able to research human behaviors and needs. You will also understand how to structure the information collected by the research so that it makes sense when your team reads it, and you will be involved in prototyping and getting validation from whether real people find value in your product before you build it.
A lot of companies are starting to realize the value of these skills and what they mean to their business, so no matter your job title, if you have these skill in your toolbox, you are highly desired in the market.
However, on the other hand, if you choose not to expand your overall skill set, the end result will be really disappointing for your overall growth potential, which means you are essentially setting yourself up to fail in the long run, as nowadays, in the tech world, designers are expected to do rather more than just design things.
If you really want to become a better designer, you have to stop caring only for the design itself and start checking out the other parts that are connected to it, such as users, technologies, and the product itself.
When you start improving yourself on the other design-related parts, you will realize just how much of the big picture you were missing before, and you will even start understanding the key part of the development process that depends on the design itself.
By this, your work and your product design will become much better because of your overall realization that you've got around different processes that are related to design. This is how the mindset of a full stack designer actually works. Also, in the last few years, full stack designers essentially started to become extremely cross-disciplinary and increased in number at an astounding pace.
The moment that you choose to become a full stack designer is the moment that you decided to help everyone on your team, as well as the users, in creating a specific product.
Besides financial rewards, the biggest benefit of being a full stack designer is the opportunity to expand your skills.
