Design Handoffs

Your constantly-updated definition of Design Handoffs and collection of topical content and literature

What are Design Handoffs?

Design handoff is the process of handing over a finished design for implementation. It involves transferring a designer’s intent, knowledge and specifications for a design, and can include visual elements, user flows, interaction, animation, copy, responsive breakpoints, accessibility and data validations.

Apart from the specifications (the “what”) of the design decisions and changes, the design handoff may also include problem statements and business logic (the “why”) that enable software developers to better understand the design context.

The design handoff bridges a designer’s vision and the final product built by software developers. A poorly implemented design leads to a broken user experience. As Szymon Adamiak, the Co-founder of Hype4 Mobile, explains in this video, a smooth handoff and a tight collaboration between designers and developers is crucial for a good end-user experience.

Show Hide video transcript
  1. Transcript loading...

What Should You Include in a Design Handoff?

Most teams continually iterate and improve their products to stay ahead of the competition. Every improvement or new feature you design will involve a design handoff. What you include in the handoff depends on the type of project you’re working on, the stage of product development, and the nature of design changes you need to communicate to the developers. 

If the changes are primarily visual (say, changes in the screen layout), your design software’s built-in specifications (e.g., inspect, developer mode) should provide all the technical information the developer needs. In this case, you only need to inform the developer that the design has been updated. Most design tools now allow you to add comments and tag users directly in the design file to direct your team members’ attention to the design changes.

If the changes are more complex, for example, changes in the underlying user flow and business logic, you will need to add that information to the designs you share.

Screenshot of IxDF Figma design file.
© Interaction Design Foundation, CC BY-SA 3.0
  1. Visual design elements: These include the color palette, typography, layout, images and icons.

    • In most design tools, developers can easily extract this information without much input from the designer.

    • For images and icons, check with the developers about the type of files they need (file extensions, image resolutions, naming conventions and file size restrictions). Relying on vector-based icons (for example, .svg file formats) is often the easiest for designers and developers.

  2. Interactive elements: Include notes about what happens when users interact with elements such as buttons and inputs. For example, what do disabled buttons look like? What happens if the user hovers over a clickable icon?

  3. Form elements and data validations: In the case of forms, remember to include rules such as minimum character count, whether an input is mandatory or optional, and the format of input to be expected (email, phone number, etc.).

  4. Error states: Define what will happen in case of user errors. These include the style and placement of error messages on form fields and the dedicated 404 pages.

    IxDF's 404 page.
    © Interaction Design Foundation, CC BY-SA 3.0
  5. Loading and empty states: How will a page look while the content is being loaded? What if there isn’t any data available to show on an interface?

  6. Animations: Use prototypes or gifs to show how you’d like transitions and other moving elements to appear on your interface. Some tools will also allow you to export the motion to code that developers can tweak and use directly in the application.

  7. Copy: Always use realistic (or as close to final as possible) copy in your mockups. Real copy looks different than “lorem ipsum” and will help you visualize what the end user will see.

  8. Flows: Use flowcharts, wire flows and prototypes to show the developers what happens when a user clicks/taps on a specific part of the user interface. Flows help developers understand how obscure screens are connected with the rest of the application.

    Prototype of the Teacher Toolkit in action.
    © Interaction Design Foundation, CC BY-SA 3.0
  9. Accessibility information: Accessibility is often an invisible aspect of interface design. Remember to include information such as tap target size and image alt text. Define what different elements will look like when the user navigates the interface with a keyboard—which elements are focusable, and what the outline will look like when the element is in focus.

  10. Responsive design breakpoints: Since users can access your content on different devices, you must provide information on how the design will elegantly “break down” as the screen size reduces.

    • It is best to provide three resolutions for your designs (mobile, tablet and desktop). At the very least, include two resolutions (mobile and desktop).

    • Include information on how the layout differs from one resolution to the next. Which elements are removed? Do the images get replaced? Do the layout and order of elements change?

Interaction instruction: On mobile devices, upon scroll, the minimized version of the sticky bar will remain fixed at the bottom of the screen.
© Interaction Design Foundation, CC BY-SA 3.0

Learn More about Design Handoffs

What goes into the making of a successful software interface? Dive into the world of interface design with the specialized course, UI Design Patterns for Successful Software:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

Product designer Chloe Sanderson explores different approaches to creating specifications in this guide:
https://uxdesign.cc/creating-the-perfect-design-handover-8d617c42d23

Literature on Design Handoffs

Here’s the entire UX literature on Design Handoffs by the Interaction Design Foundation, collated in one place:

Learn more about Design Handoffs

Take a deep dive into Design Handoffs with our course User Experience: The Beginner’s Guide .

If you’ve heard the term user experience design and been overwhelmed by all the jargon, then you’re not alone. In fact, most practicing UX designers struggle to explain what they do!

“[User experience] is used by people to say, ‘I’m a user experience designer, I design websites,’ or ‘I design apps.’ […] and they think the experience is that simple device, the website, or the app, or who knows what. No! It’s everything — it’s the way you experience the world, it’s the way you experience your life, it’s the way you experience the service. Or, yeah, an app or a computer system. But it’s a system that’s everything.”

— Don Norman, pioneer and inventor of the term “user experience,” in an interview with NNGroup

As indicated by Don Norman, User Experience is an umbrella term that covers several areas. When you work with user experience, it’s crucial to understand what those areas are so that you know how best to apply the tools available to you.

In this course, you will gain an introduction to the breadth of UX design and understand why it matters. You’ll also learn the roles and responsibilities of a UX designer, how to confidently talk about UX and practical methods that you can apply to your work immediately.

You will learn to identify the overlaps and differences between different fields and adapt your existing skills to UX design. Once you understand the lay of the land, you’ll be able to chart your journey into a career in UX design. You’ll hear from practicing UX designers from within the IxDF community — people who come from diverse backgrounds, have taught themselves design, learned on the job, and are enjoying successful careers.

If you are new to the Interaction Design Foundation, this course is a great place to start because it brings together materials from many of our other courses. This provides you with both an excellent introduction to user experience and a preview of the courses we have to offer to help you develop your future career. After each lesson, we will introduce you to the courses you can take if a specific topic has caught your attention. That way, you’ll find it easy to continue your learning journey.

In the first lesson, you’ll learn what user experience design is and what a UX designer does. You’ll also learn about the importance of portfolios and what hiring managers look for in them.

In the second lesson, you’ll learn how to think like a UX designer. This lesson also introduces you to the very first exercise for you to dip your toes into the cool waters of user experience. 

In the third and the fourth lessons, you’ll learn about the most common UX design tools and methods. You’ll also practice each of the methods through tailor-made exercises that walk you through the different stages of the design process.

In the final lesson, you’ll step outside the classroom and into the real world. You’ll understand the role of a UX designer within an organization and what it takes to overcome common challenges at the workplace. You’ll also learn how to leverage your existing skills to successfully transition to and thrive in a new career in UX.   

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are:

  • Alan Dix, Director of the Computational Foundry at Swansea University, author of Statistics for HCI: Making Sense of Quantitative Data

  • Ann Blandford, Professor of Human-Computer Interaction at University College London

  • Frank Spillers, Service Designer, Founder and CEO of Experience Dynamics

  • Laura Klein, Product Management Expert, Principal at Users Know, Author of Build Better Products and UX for Lean Startups

  • Michal Malewicz, Designer and Creative Director / CEO of Hype4 Mobile

  • Mike Rohde, Experience and Interface Designer, Author of The Sketchnote Handbook: The Illustrated Guide to Visual Note Taking

  • Szymon Adamiak, Software Engineer and Co-founder of Hype4 Mobile

  • William Hudson, User Experience Strategist and Founder of Syntagm

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can start applying what you learn in your everyday practice.

You’ll find a series of exercises that will help you get hands-on experience with the methods you learn. Whether you’re a newcomer to design considering a career switch, an experienced practitioner looking to brush up on the basics, or work closely with designers and are curious to know what your colleagues are up to, you will benefit from the learning materials and practical exercises in this course.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, LinkedIn profile or website.

All Literature

Please check the value and try again.