Like many web design agencies, we’ve been stuck in the past for quite a while. That sounds bad, but let me explain...
The standard way of designing and supplying website visuals is still through Adobe Photoshop (layered PSDs) but this is all about to change. Photoshop was never created for website design, it just happened to be the most viable tool for the job over the last 5-10 years. However, since responsive layouts (and more complex page interactions) has become the norm, Photoshop is struggling to deliver the tools designers, clients and developers need to create viable website visuals.
Developers still prefer to be supplied with PSD files, but this is more because that’s the current ‘norm’ rather than they’re the best things to work with. Clients are increasingly becoming confused with looking at multiple visuals per responsive layout and having to imagine how the page will change depending on browser width or device.
‘Pixel perfect’ has long been the buzzword web designers hail as the goal of great web design - but in these days of retina screens, fluid design and scaleable graphics, is ‘pixel perfect’ even that relevant any more?
Adobe themselves have known a change was needed for a while, Edge Reflow was their first major foray into creating a responsive friendly web design tool, however much like Edge Animate, it failed to really take over the web design crown, requiring whole new ways of working without really offering enough to move the majority away from Photoshop.
Then along came a new challenger - Sketch. Shock - a non Adobe product that was actually really good! Sketch promised (and has started to deliver) a major change away from pixel based layouts - and offers a work-flow far better suited to modern web / UI design.
Everything is vector based (although it can still work with images of course, but it’s certainly not an image editing tool like Photoshop). You can place multiple pages and responsive layouts on the same artboard area - allowing you to create an entire website or app UI within a single project - rather than page by page.
It’s also much faster to use - because it’s so much more streamlined that Photoshop, it’s a breeze to create multi-page layouts all on the same area. Layer handling is more intelligent too and the smart guides and objects make updating UI elements so much easier. Even better, it’s finally allowed UX and UI to be created within the same tool. And all of this for the (currently) bargain price of $99 - a massive saving compared to the monthly cost of the full Adobe CC package.
I know of some teams who have moved over lock, stock and barrel from other UX and design tools to Sketch. It isn’t perfect though, and Adobe have been working hard to create something they consider far superior - code named ‘Project Comet’. After ‘owning’ the design space for almost a decade, they’re obviously worried about losing on market share to this new contender.
Well, after much talk and fanfar, an initial beta (or ‘Preview’) has just been released and we’ve been eager to see how it shapes up. Firstly, it has a catchy new name: Adobe XD - Experience Design.
Right from the off, we can see that it shares almost nothing with it’s big design cousins: Illustrator and Photoshop. The user interface is almost shockingly clean and minimal - and similar in many ways to Sketch.
Again, similar to Sketch - responsive site visuals are created independently (rather than integrated into the same page like Edge Reflow). Annoyingly, there doesn’t (yet) seem to be the facility to create linked or smart objects, so we can’t yet modify something once and automatically update everywhere.
Our favourite feature (at least so far) has to be the ‘grid’ option where a content block is created (ie. image, title, intro para, call to action link) - this can then be repeated as many times as required vertically and/or horizontally across the page - a real time saver!
Another plus is the ease of creating interactive prototypes - just highlight the button in question, drag to the next screen and tell it how you want to animate there when clicked. Just hitting the ‘share’ button uploads this so you can then share a working demo with your team or clients. You can also create video walkthroughs which is a nice touch. This is a huge advantage over Sketch where separate tools such as InVision are required to create working prototypes.
On the negative side, apart from the noted lack of smart objects, bizarrely, Adobe XD has almost no support for importing Photoshop or Illustrator files - instead relying on Copy / Paste. This seems like a glaring omission, but we can work around it for now. No support for gradients (as yet), limited layer control are also missing but are promised to be on the way.
Also, currently Adobe XD is only available for the Mac (sorry Windows users!) – but, then, so is Sketch. Adobe have promised a Windows friendly version sometime in the future.
Overall then, it’s very limited and some of the assumed advantages of using an Adobe product are still not there. But, it’s still early days for Adobe’s ‘killer’ app - this is a ‘preview’ after all. We fully expect to see features added as time goes on and we get closer to the full launch. We’ll definitely be trialling this over the next few months. It’s not quite ready for us to ditch Photoshop, but the fact that it already offers certain advantages over Sketch does mean that the new ‘norm’ for UI design could well be about to change.