Optimizing Collaboration: Best Practices for Communication between UX/UI Designers and Developers.
Nowadays coordination between UX/UI designers and developers is paramount for the optimization of production resources. Although each one plays a specific role, it is important that both UX/UI designers and developers work towards a clear communication. Many times, the design of high-fidelity wireframes and the development of its prototype are made by the same person, but when that is not the case, there are tools that help to organize the information. There are several software options with wonderful features to deal with this task but Adobe Xd, which is Adobe´s vector design application for web and mobile apps, stands out for its easy adaptation and organization of material.
Adobe Xd has the classic interface of other Adobe programs such as Illustrator or Photoshop, making it easy for first time users to understand its tools and shortcuts. Adobe programs encourage designers and developers to work separately but under a unified standard for the organization of materials and documentation, simplifying the understanding between the involved parts and avoiding re-work.
This article explores some Abobe Xd tools that allow you to organize the documentation of prototypes for Hand Off to the development team.
Components and states
Designing components for high fidelity prototyping requires not only thinking about every element that will be part of the project, but also designing the different states in which components will be shown. The most common states are: Default, Hover, Focused and Disabled.
A simple example of a state change in a component would be a rectangular “OK” button which has a blue background with white text in its Default state and that changes its background color on mouse hover (:hover). To achieve this Hover effect and for it to be reflected in the prototype we will send to developers you should perform these steps in Adobe XD:
1 — First design the button in its Default state and convert it into a component (by right clicking on the grouped object and choosing “Create Component” or with “Ctr+K” / “Cmd+K” shortcut).
2 — With the component selected, in the Properties Inspector (on the right side of the screen) we will see the Default state of the component and a plus sign that allows us to add another state (Adobe XD comes with two default states, hover and toggle, but allows us to create new states if needed and modify their interaction from the prototyping window). For this example, we will choose Hover State which has the default interaction to modify when hovering over the component.
3 — Next, on the left side of the screen, in the Design panel, we will design how the button will look in the created (hover) state. In this case the background color will be changed so that users get a visual cue when hovering over it. Note: The design changes made in this component’s state will only be visible when the component is in this state.
4 — Finally, by clicking the “play” button on the upper right side of the screen you will be able to interact with the button and see how the states that we designed look and behave.
5 — To create another state for the same component, select it and click the plus sign in the component panel again. See how to create and design the Disabled state of the previously created button in the following example.
This is a clear way to show the behavior of elements in different states so that they can be coded as they were planned and designed.
As the master/initial components are created, they will be saved in the project library for quick access and modification along with their derived components.
Clear and transferable organization
Keeping layers organized and properly named is always helpful. A good practice when organizing layers in Adobe XD is to think how they are going to be implemented when coding and work accordingly. That is to say, to know that the elements in our workspace should be inside containers. The same way as tags in our code follow a parent-child relationship, containers and elements must follow the same logic. This will group our Adobe XD layers into sections and make their position relative to other components as it is in code, instead of having isolated elements floating around the artboard.
Adobe Xd allows you to define borders and padding for components which may help to define the position of the elements inside their parent container and avoids leaving this type of design decisions to the developer.
Naming the containers and elements as if they were HTML tags is another useful way to clarify communication, since from the very beginning it proposes the consistency of terms.
Here’s an example to understand the benefits of this practice: If text hierarchies are named as HTML “heading” tags (h1/h2/h3…) instead of having random names, it will be much easier for the developer to implement those text hierarchies in the code, since he/she will only need to declare the values assigned to the tags in the stylesheet and apply those tags as they were used in the prototype.
An Adobe XD tool we need to keep consistent throughout a project is the Library. The Library allows us to organize typographic hierarchies and save colors and character styles for reutilization. From the Library we can also mass edit the components we´ve already created, saving time with multiple changes to the parent elements which also affect their respective children.
At the same time, the Library will allow us to provide organized documentation to developers to carry out their work. A good practice here would be to consider typographical styles as HTML classes or tags in the same way that we think of layers as divs. This way, as mentioned in the headings example above, the documentation will be organized into tags or classes ready to be implemented when sharing wireframes with developers.
Sharing with developers
To share projects with developers, go to the Share tab (usually found on the top panel of the interface). Then on the panel that pops up on the right give the project a name, select “Development” in the View Setting dropdown and click the Create Link button. Once it is created (the first time) or updated (after making changes) the link can be shared.
In the provided URL, developers will be able to inspect each element on the screen and see their position, their distance in relation to other objects, sizes, states, typography, colors and other information in the properties panel making the documentation given more dynamic and understandable. Also, you will be able to see the library with the colors, typographic styles, components or videos used in the project.
Adobe XD provides CSS code ready for development. It can be found in the properties panel on the right. Even if it is not convenient to use it exactly the way the program renders it, since it creates variables for each attribute, it will deliver definitions for the character styles created in the design organized as classes, saving developers hours of coding. You will be able to find the classes that were defined for the fonts in the library during the design stage with specifications for font family, size, weight, color, spacing and line height.
These are some of the features that Adobe XD offers to stay organized and consistent throughout a project. The use of these practices will save time with major improvements to high fidelity wireframes and guarantee clear documentation is delivered to developers, making communication between areas easier and thus maximizing team resources.
Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com
