XD is already different from everything Adobe has ever done before: it’s free, built in public, and has an open API for developers to build new features right on top of it. With that, this is a hands on guide for how you can put XD to good use as a UX/UI designer. Here’s what we’ll cover:
1. Why we needed new tools: The progression from print to the screen design, and why we saw an explosion of new tools.
2. Low to Mid-fi Prototyping Tips with XD: How XD helps us prototype in low to mid-fidelity, and tips and tricks to get you started.
3. Collaboration and Handoff: A look into working as a team with XD.
4. Moving to High Fidelity: A look into XD's Prototyping mode, and how it works with more interactive tools such as ProtoPie.
5. Prototypr Opinion: Our verdict, and what to expect next from Adobe XD.
We’ll not only take a look at the different features available, but show why and how they’re useful to the changing role of the designer today.
[Part 1] Why we need new tools
It’s well known that Adobe has a range of tools available in their Creative Cloud for different purposes. Photoshop and Illustrator have always been popular tools for graphic designers, especially when their role focused predominantly around print.
With the arrival of apps and the web, however, the same tools used for print were naturally adopted to design for digital environments. It wasn’t unusual to see web layouts designed in Photoshop and handed over to a developer to be coded. Whilst this worked to a certain extent, these tools were never actually built for screen design.
The digital medium is a completely different one to print. The web is:
- Interactive: there are interactive touch points that users can press
- Dynamic: elements can move and animate depending on interactions
- Stateful: an interface can contain different states depending on the data provided
- Responsive: the size of elements can change depending on screen or window size
Therefore, unlike print, pixel-perfect mockups can’t really exist. Layouts can completely change in response to user interactions, or depending on the device being used. Whilst Photoshop is still great for photo editing and print, it’s clear that a different type of tool is needed when designing for the screen, and for the UX design process in general.
Different tools for different needs
Today’s designers not only create mockups but also focus on testing and iterating on designs to ensure the right problem is being solved. Therefore, prototyping becomes an essential part of a designer’s workflow, with multiple versions of a solution produced, at different levels of fidelity in order to guide the direction of the product.
Failing fast and early is therefore beneficial, and generating feedback often through low-fidelity prototyping saves a lot of rework time. After paper and pencil, XD is a great tool for this:
Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. ~ Nick Babich
Speed is key when prototyping, as we’re looking to explore multiple ideas quickly to find out what works best. Unlike other Adobe tools, XD has been built around this very purpose, enabling you to design and test multiple ideas as fast as possible. XD doesn’t replace Photoshop or Illustrator, but solves different needs. Features and integrations tailored specifically for prototyping, collaboration, and user testing are at the forefront.
Building the right features
Furthermore, every feature in XD has been built from the ground up with the feedback of their users through a program called Adobe Uservoice. Uservoice provides a way for the XD team to collect feedback and ideas from active users, ensuring only the most useful ones are added to the core product:
For features that aren’t included, XD has recently opened up an API to enable 3rd party developers to build their own plugins for custom needs:
Now we’ve looked at why and how XD is being made, let’s explore how the features and integrations available make our jobs as UX designers easier.
[Part 2] Low to Mid-fi Prototyping Tips with XD
When prototyping, you don’t need photo editing features, or even advanced animation. Early on, it’s perfectly fine to create something rough that may not even look the best. The aim of your low-fidelity prototype is to ensure your design works well — it’s not about how pretty your interface looks.
XD has been built for this process, coming only with the essential tools needed for screen design. Compared to Photoshop, the interface is less cluttered, making it simpler to create what you want, quickly. Access basic shapes, text, and artboards form the left menu. Find alignment, borders, and more features such as ‘Repeat Grid’ on the right.
These simple tools alone are enough for iterating on early stage wireframes, they enable you to put together a rough screen in seconds:
Whilst using simple shapes are great a way to get started, there are more ways that XD that can help you move even faster. Following are 4 methods that you can use prototype in low to mid-fidelity, showing how the XD is tailored to help you:
1. 🎨 Switch color palettes to grayscale
Color plays an important role in your product for a number of reasons: you can use color to draw a user’s attention to a particular element on a screen, make your product more recognisable, add extra meaning, and much more.
Despite their usefulness though, colors can be distracting for low-fidelity prototypes. When the purpose is to gain feedback on something functional, there’s a danger that you’ll get suggestions on the look of your app. That’s not the type of feedback you need, so here’s how you can use XD’s color panel feature to quickly switch your design to grayscale:
Setting up your color panel
1. Click the assets icon in the bottom left to show the color panel
2. Add colors simply by selecting any colored element in your prototype, and clicking the plus icon next to ‘colors’
3. Repeat this with a few colors from your design to build up a neat color pallette.
Switching to grayscale
1. Simply right click on any color in the panel, and change the Hex value.
2. This updates every element with that colour, for every screen of your prototype.
This is not only useful for low-fidelity prototyping, but also very useful when experimenting with different palettes in high-fidelity prototypes too. Either way, this will let you play with color at any stage — because who doesn’t like to experiment!
2. ⚛️ Reuse and update common elements with ‘Symbols’
It’s often necessary to make changes to elements that appear numerous times in different screens of your prototype. For instance, you might have 10 screens, and a common icon appearing on each. In XD, you can update that element on every single screen at once, using using symbols.
Symbols enable you to save design elements such as icons or buttons, and then reuse them anywhere in your prototypes. Whenever you make changes to your symbol element going forward, every single screen and element that uses that symbol updates automatically:
Going a bit further, Adobe more introduced ‘Swap Symbols’ this summer 2018, make Symbols even more powerful. With Swap Symbols, you can replace any symbol used in your prototypes with a new one. This is a really powerful prototyping feature — just by dragging and dropping a new symbol over an existing one, all instances of it are updated across your entire project. Here’s an example of replacing one button symbol with another:
3.1 📱Make use of the UI Kits
Another way to speed up your design process is to make use of the various UI Kits available in XD. In most apps or websites these days, there are guidelines and layouts recommended for creating experiences on a given platform. For instance, iOS mobile apps have a range of native elements such as:
- Bars: Navigation, search, status, tab and tool bars.
- Views: Alerts, maps, pages, popovers, tables, and more.
- Controls: Buttons, labels, pickers, switches, sliders, and more.
Using the UI Kits provided in XD can help you create accurate designs possibly faster than sketching. It’s as quick as opening up a UI Kit, selecting an artboard with the controls you need, and then copy-pasting it (along with elements within it) into your own project.
There are a range of UI Kits too — from Apple iOS to Google’s Material Design. All of them are accessible right from the File Menu.
UI Kits aren’t only good for native elements, but they also speed up font styling. Here’s an example with the Apple UI Kit:
3.2 👌 Using Character Styles from UI Kits
UI Kits often come with a range of font guides, which we can use to keep our own designs consistent, accessible and fast to update without much effort. XD also has a ‘Character Styles’ panel, which becomes very powerful when used in combination with a UI Kit. Here’s how to do it:
Copying Character Styles
1. Open the UI Kit and select a set of fonts you’d like to use
2. Copy and paste them to your own project
3. Next, with the fonts still selected, click the plus icon in the Character Styles panel to add all of them to your Character Styles panel
Here’s an animated gif to demonstrate:
As you can see, all the chosen fonts from the UI Kit are added to the Character Style Panel on the left of your own project. This is great for reuse, but it’s also very powerful.
For instance, if we were to now update a Character Style, it would also update everywhere in our design. Here’s an example of changing the text color of a Character Style:
To go a step further, you may have noticed above that we’ve updated our text color with one from our Colors panel. Therefore, the text now updates with changes from the Colors panel. You can see this handy trick below (watch the ‘Large Title’ header change with the color palette). 👇
4. 🔁 Repeat Grid
Repeat Grid is another unique feature of XD that takes the pain out of repetitive tasks, speeding up your workflow.
Many layouts can contain a set of repeating data — for example, your prototype may contain a list view of friends, or phone book of contacts. Instead of editing each individual list element in isolation, the Repeat Grid feature enables you to duplicate elements just by clicking and dragging:
Source link https://blog.prototypr.io/hands-on-with-adobe-xd-f82be12f405f?source=rss—-eb297ea1161a—4