For third week I chose designing and prototyping tool — Adobe XD. The intention was to compare the work process with Adobe Photoshop and find out which product is more effective for mobile application design.
For this purpose I utilized mobile application I worked on recently:
- The work in XD is more straightforward and quicker than in Photoshop. The main reason is XD is targeted primarily to designing and prototyping.
- Photoshop has extensive functionality — photo and illustrations creation and editing, 3D graphics designing etc. It makes it much more robust and therefore the work is not so quick and smooth.
Colors and Character Styles
- You can save all colors and character styles by just one click and reuse it consistently on each screen.
- You can also edit colors and character styles. All the changes you’ve made are automatically applied to every object that uses respective color or character style.
- In Photoshop you have to save each color and character style separately and you can’t edit it later, so this is a considerable advance of XD.
- You can save repeated GUI parts (for example buttons, text fields, navigation bars, etc.) as symbols and reuse it consistently on each screen.
- When you edit the symbols later, the change is automatically applied to every place the symbol is used.
- You can also edit the symbols separately (the change will not apply to other symbols) — just by clicking on Ungroup Symbol option in the context menu.
- In Photoshop you can use Smart Objects but you will see the changes after saving the edited object, not in real time like in XD.
- You can use Repeat Grid for repeated objects in your design — for example table rows, thumbnails, etc.). Just define the appearance of the first object and then copy it using the repeated grid functionality.
- You can adjust spacing between all objects just by pulling one space. All the spaces are automatically adjusted.
- You can insert your own images all at once just by drag & drop into placeholder. All the placeholders will be automatically filled with each image.
- Photoshop doesn’t have some similar function like Repeat Grid.
PROTOTYPES — FLOW AND ANIMATIONS SETTINGS
- You can create application flow, set animations between each screen and then preview on desktop or directly on mobile device.
- Photoshop doesn’t have tools for prototyping.
MOBILE PREVIEW AND DESKTOP PREVIEW
- You can preview your design directly on your device or on your desktop.
- When you edit the screens, the preview is automatically updated on desktop preview. Real time mobile preview is currently working only on MAC devices.
- Official Adobe XD mobile application is available only for iPhone 5s and newer devices.
- For you who have iPhone 5 or older, there is an XD Viewer application (not officially Adobe application) but it works similar.
- There was a Device Preview function in Photoshop that was officially removed on October 2017 and is only supported in older versions of the application.
- The work with artboards is really great. You paste the artboards with just one click. Each artboard is pasted with even spaces — that saves time. Unlike Photoshop, XD don’t get slower when you’re adding more artboards.
UI KITS AND WIREFRAMES
- You can download UI Kits and wireframes for XD on these links:
- Apple iOS
- Google Material
- Microsoft Windows
WORKING WITH PNG FILES
- It is not possible to recolor png images directly in XD. You have to edit it in Photoshop and then paste it to XD. It’s unfortunately very time-consuming task — especially when using icons.
- It is definitely worth using Adobe XD for design of the mobile applications. Though the application is very “young” it includes all the tools you need for effective prototypes and final graphic design.