Different Strokes: Best Practices for Designing Dashed and Dotted Lines
You can now easily define dashed and dotted lines with a variety of stroke options in the latest update of Adobe XD, a frequently requested feature that has many uses and associations that need to be considered.
For example, dashed or dotted lines traditionally denote something that can be traced or cut out. Digitally, they have been associated with placeholder or incomplete content, and can also indicate a file upload space and drag-and-drop areas. They can also be used when visualizing and communicating with data, and, of course, they’re also a popular aesthetic choice. Now, it’s very easy to create these design elements right in Adobe XD, or for more sophisticated designs, import your dashed and dotted lines into XD from Adobe Illustrator.
Creative uses of dashed and dotted lines
“My team often uses dashed or dotted lines in our designs,” says Cecilia Farooqi, director of digital design for fitness brand Equinox. “They’re great as a visual device when data is the content, for example recapping activity and performance, or data in the actual experience — classes that leverage performance data. Since visualizing data can rely heavily on vector artwork, dashed and dotted lines provide variation to the graphics. It can also visually represent a preliminary state of a sequence, when data or content has yet to populate.”
The example on the left was a 2014 collaboration with RGA for a gamified studio cycling class. The visual direction called for clean and bold graphics with a limited color palette. The variation in weights and dashes denotes intensity of the riders throughout the game. The screen shows the results recapped in the member’s activity section of the app.
Cecilia explains that the team has sometimes encountered legibility issues when the stroke weight is too small or fine, especially when used over imagery, but that XD is making a big difference.
“Enhanced stroke capabilities in XD eliminate the extra step of creating vector elements in a different application and pasting them in,” she says. “For complex vectors, being able to adjust the dashes and gaps once pasted into XD is also a huge gain. The addition of these features continues to make XD our go-to design tool for digital work.”
Timothy Salter-Hewitt, a UI designer who regularly publishes UX and XD tutorials on YouTube, agrees, and points out the benefit of using the word “border” in XD instead of “stroke.” “One of the essential parts of being able to work fast and efficiently in product teams is speaking the same language, and this is a great example of that,” he says.
Defining dash and gap size in Illustrator, importing into XD
While Adobe XD’s latest update allows you to create dashed and dotted lines right in the tool, our latest update also allows you to create more advanced vector graphics with Adobe Illustrator and import them into XD. This helps you avoid the common pitfall of dealing with a fixed dash and gap size, which often results in your design not fitting its path perfectly.
Illustrator can use dash and gap sizes as a guide, and adjust them to fit the path length (there’s a “dashed lines” button in the Stroke panel), and then you can easily import these preferences into your Adobe XD prototypes. To do this, users copy the line to the clipboard, and click paste appearance, bringing them over as editable lines.
In some cases, if the line’s attributes are not applicable to XD’s stroke options, it will come over as an editable .svg graphic when you copy and paste it into Adobe XD. As you’re defining your dash and gap sizes, Illustrator will also decide what is a corner.
“Using that method, corners try to always have half a dash in them. It looks a lot nicer,” said Marc Edwards, founder and designer at Bjango, which produces apps like iStat Menus and Skala Color. Below, you can see Illustrator switching between a continuous dashed line to a corner in this GIF from Illustrator:
Tim explains that there are a few things to consider when using borders in general, be that solid, dashed, or dotted:
- Context: Borders can add emphasis to a specific element, such as a form field or button, but they can also be used decoratively. “Consider what you’re trying to achieve,” Tim suggests. “If it’s to grab the user’s attention, how does that balance with the rest of the design, and how much of their attention do you want? This will inform later decisions.”
- Consistency: Has a border been used elsewhere? Was it dashed, dotted, or solid, and what color was it? “Consistent use of visual elements improves usability and avoids confusion,” Tim says.
- Design: If you wanted to highlight that a user has successfully filled in a required form field, for example, you could use a dotted or dashed border with a smaller gap size and heavier weight. This will add more emphasis to the field element but isn’t as powerful as a solid border.
Further reading
For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.