If you have been designing websites for more than five years then you will probably remember a time when user interface design software wasn’t a thing. Back in the day, when creating websites, I designed each web page on a single photoshop file. When responsive websites then became a thing I would then have to design each breakpoint on individual files. A ten page website would result in about fifty .psd files.
Adobe made life a little easier when they introduced artboards in 2015. I could now have those fifty designs in one file but often that file would be at least 2GB! My laptop would be pushed to the max on a daily basis.
Around 2014 I tried my hand at Sketch. Sketch was created for web designers to do just that, design websites. It’s a great app and has a huge user base. Before Photoshop introduced artboards it was my design tool of choice. However I didn’t find it particularly intuitive and my version appeared to be very buggy. I once lost an entire project after the file corrupted.
The best thing about Sketch was that it made Adobe wake up and realise they needed to offer web designers something similar otherwise they were going to lose a big user base!
For over a year now I have been working in Adobe Experience Design (Beta). The best way to describe it is to imagine Photoshop and Illustrator making sweet love and producing a beautiful lightweight, intuitive, prototyping baby. It has been in Beta for a long time now but I think that’s because Adobe are looking to get this offering just right. They have a big community base where users can vote on features and report bugs. Usually once a month they release an update so it shows they are listening to the feedback.
When you first open XD you notice how stripped back it is, the tool bar contains just eight tools and the properties tool on the right is hardly imposing. Yet with only this tiny toolset the software is extremely flexible. If you have used Adobe products in the past then you will be flying within minutes, the product is super intuitive to use. It has a layer’s system much like photoshop or illustrator but you can just point and click any element to access it, this really speeds up your workflow.
Stand out features
You’ve created a website design at mobile breakpoint but next you need to make the desktop designs. You can simply scale your mobile elements up to fit. You will still need to mess about with padding but it’s a great step forward.
Designing a table or a gallery? Isn’t it really dull when you have to copy and paste elements over and over to create a repeating element. Isn’t it super annoying when you realise that the table you’ve been building for the past half hour needs another column so you need to start all over again?! With the repeat grid function you can create one item, hit the repeat grid button and then repeat it however you see fit, have three columns and fifty rows in seconds and set the margins in between with ease. You can also make adjustments to individual elements or global changes within the repeat grid. It’s a really simple concept that makes for a fantastic time saver.
Artboards, prototyping and exporting
Nothing particularly new with the concept of artboards but in XD they are really easy to use but also very clever. If you use a preset artboard such as the iPhone 6 artboard then it shows you where your fold line is. It has a great preview function which displays the artboard within the device boundaries but allows you to scroll to see the rest of your design. This gives you a great feel for how your design will look when live. You can also preview your designs on a device by downloading and connecting the Adobe XD app.
Now for the clever bit. You can now show a journey to your team by connecting the artboards. Simply click on a button in your design from one artboard and link it to another artboard and the connection is made. With this feature you can spec out entire journeys for your team to help further explain what you want to happen.
Wait it gets better. The people you share it with don’t have to have XD installed on their computers to view it. You can export the prototype out of XD and into Adobe’s magical asset cloud. Then send anyone a link and they can view it and interact with it in their browser, they can even feedback to you via the comment system.
Importing & exporting assets
We live in an era of SVG’s, they are fantastic - lightweight, vector sharp, scalable and animatable. They were however an arse to package up. I use to have to build them in illustrator then place them in the design in photoshop then scale them back in illustrator and export. In XD it’s a vector based program so anything you design can be pushed out SVG web ready. You can also select as many elements as you’d like and export them at once. XD will output them each separately however you have requested be it SVG, PNG @1x or @2x.
Importing elements is easy too. Be it a bitmap image or vector just copy it from another piece of software or browser and paste it in. Any imported vector files instantly becoming editable within the software. XD has taken all the faff out of using and creating elements so you can focus your time on pure design.
I could have a file with 30 artboards littered with vectors and images and the files size wouldn’t go past 30mb. The average size of my XD files is about 3mb. No idea how the clever developers do it but I love them for it! The program itself never seems to put much stress on my machine it’s always very fast and responsive.
End of part 1
That’s it for this post. As you can tell I’m pretty enamoured with Adobe XD. But like any relationship there are those areas that need work. In the next post I will talk about what are the current issues with XD and how they could be improved.