This is my Weekly Design Inspiration, this is a space where I share some design work that has either inspired me or caught my attention for its execution or concept. The things I feature on here can include (but not limited to) branding, web design, app design, illustration, typography, video games or anything that shows creativity in a unique way.
Over the past year or so I have transitioned from using Photoshop and Illustrator for website design to using the likes of InVision and Adobe Xd. I made this shift as it seemed like the logical thing to do as these are purpose built programmes for website and app design, with the functionality of being able to link pages together and present a user journey. This functionality alone makes these programmes instantly valuable to a designer as you can clearly map out a user journey for your developers, which is a lot easier than explaining with Photoshop files.
In this article I’d like to discuss some of the features that have completely changed my workflow and improved my efficiency in web design thanks to these new tools, specifically when using Adobe Xd.
Prototyping
I have already mentioned it but the ability to link pages together is what makes these tools super useful. You don’t realise how much it helps with UI and UX until you have to think about the user journey yourself. In the past when using Photoshop for web design I would often chuck a ‘Find out more’ button on a page and not even think about where that button goes, which is terrible practice. With the ability to give that button functionality and make it go somewhere you are encouraged to make sure that all your links and buttons make sense and go somewhere in your site.
Being able to link up all your pages is not only good for your own understanding but also for your client or user. I remember presenting many Photoshop produced jpgs to clients and jumping between files to try and emulate the user journey and as a result experiencing blank expressions and confusion from the clients. I will talk more about the review abilities that are on offer with Adobe Xd later, but just know that having a purpose built system for this is so much more effective.
Advanced Prototyping
Linking pages is one thing but with the complex functionality that can be achieved through web now-a-days you need more tools in able to emulate these. Lightboxes, dropdowns, tabs, hover effects etc are all things that can be easily prototyped in Adobe Xd using the Overlay functionality. In creating additional artboards with just the content you want to be overlaid on the page you can link up this artboard with an existing page and have it be overlaid, rather than having to have a completely different page to represent what would happen when you click a dropdown.
This functionality has endless possibilities, the freedom to produce a really engaging and true representation of a finished product is right there. As well as giving these endless opportunities it also creates a more streamlined and efficient workflow. Where in the past I would have created a Photoshop file with multiple folders of overlays that I would then turn the visibility on and off to represent overlays you can now have this activated by a click, more in line with what the finished product will be like. And instead of having to potentially have multiple folders of the same dropdown menu throughout your page you can instead create one single artboard with the dropdown content in and reuse this element as many times as you need to across the whole website, all within the same document. This is unbelievably efficient compared to my original workflow of coping content across from multiple documents.
Animation/Transitions
If there is something that separates high quality web design from average web design it’s attention to detail in animation and transitions. Websites now have the potential to do some crazy things using animation and movement and when designing a website with Photoshop you are limited to static images, which now feels dated in an age of motion design. Adobe XD is constantly improving and adding features to its animation and transition options, with recent additions including auto-animate the scope of what can be animated is getting much larger.
With enough time (and workarounds) you can begin to get some complex and realistic animations/transitions that can rival that of an After Effects produced mockup. Although an After Effects produced mockup will always have more accuracy than what can be produced in Adobe Xd what the After Effect mockup lacks is the ability to use it as a prototype, something the client can actually click around and use as a working prototype is monumentality more useful when it comes to reviewing a website.
As previously mentioned, Adobe are continuously adding animation features to Xd and I foresee many more options and abilities being added that will make having to spend hours in After Effects creating mockups redundant.
Asset Management
When it comes to UI and UX it is really important to maintain consistency and clarity in your designs. This can often be achieved by producing a UI kit or style guide. Adobe Xd has some nifty features that make this process much more unified and easy to use than previously available when using Photoshop. Options like creating Symbols that maintain changes globally, and Colour/Character Styles that act like a style guide are features you didn’t realise would be as useful as they are.
Imagine creating a 50+ page website document with links, buttons, logos and everything in place and the client decides they don’t like the button style you’ve used. Imagine this happening on a Photoshop produced project, the time to go back through and update all those buttons would be collosual, where as in Xd, if you set the button up as a symbol at the start of the project all you would need to do is edit that symbol and all the copies of it across the document will update accordingly, amazing. Adobe are currently working on additions to this feature and as I understand it there will be the ability to update symbols across multiple documents as well as the local document.
These quality of life workflow changes have massively improved my efficiency and made me respect style guides much more as a result. In using symbols, character style and colour management you achieve a much more unified project that can easily be amended or updated.
Share For Review/Development
Something that I was always ignorant to or not so aware of is the disconnect between a design and the development process. In the past I would create a Photoshop document and send it off to a developer and hope for the best. But as previously mentioned, without links there can be a disconnect between what the designer had in mind and what the developer produces.
A feature Xd has, which I have only began using recently, is ‘Share for development’. This feature allows you to share a link with your developer where they can view your document and see all the stuff they need. There are options for colour values, character style, page layout/sizing, asset management/downloads and interactions. All of these things are extremely useful to a developer to have all in one place and allows them to create something much more accurate to the original design. I can’t explain how beneficial this has been to the efficiency at work and the way in which projects are produced.
As well as share for development there is also the option to ‘Share for review’, this allows you to send a link to clients (or anyone) to view the website with all of its interactions, links, overlays and animations. They also have the option to leave comments, like marking up a pdf. This is really useful as the client can get hands one with the website before hours have been spent building a website only for the client to then ask for big changes because something wasn’t fully understood. This extra step of giving the client a prototype can have huge benefits in the long term as it can help iron out any navigation or UX changes in the early stages before a developer has even touched it.
Third Party Support
I haven’t dived into the third party and plug in community for Xd that much but I have used Zeplin. Zeplin is a programme that essentially does the same thing as ‘Share for development’ but with a few more bells and whistles, like having the CSS code available. It also has a handy style guide section for each project where you can go in and add colours, character styles and ‘Components’. All of these features are similar to what’s available in Xd’s ‘Share for development’ and there are workarounds to achieve similar results but I can definitely see the value in a programme like Zeplin.
The fact that Xd has this third party support as well as compatibility not only with Adobe software like Photoshop, Illustrator and After Effects but with Sketch, Dribbble, Slack and more is astounding and makes the future of this programme very bright.
So I guess the take away from this article is that Adobe Xd has massively improved my workflow and I think that if you spend a lot of time designing websites or apps then you owe it to yourself to at least try Xd. The interface and usability of Xd is really intuitive and has clean easy to learn tools which, if you are used to Photoshop or Illustrator, you’ll pick up in no time. I see the future of web design and web development blurring together more and more with more tools like Xd coming out and being supported by the community the way it has been so far. I’m excited for further updates and strongly encourage any aspiring web designers to give it a go.
What I've Been Listening to This Week
Newton Faulkner - The Very Best of Newton Faulkner ...So Far
I've been looking forward to this album for a while now and now that it's out it doesn't disappoint. All of Newtons best tracks are here as well as a bunch of amazing covers, from Queen to Dua Lipa. It is defiantly worth a listen to anyone who has enjoyed Newtons work!
Honorable Mentions
As part of my Weekly Design Inspiration I also like to share some bits and pieces that I have seen which have inspired me in the last week. I have captioned each image with some info and relevant links so you can find out more.
WePresent is a website by WeTransfer that collects a bunch of articles, art, design, stories and just about anything tat is interesting. The website itself is nicely presented and it's definitely worth checking out next time you are sending a file via WeTransfer.
Moleskine and Creative Cloud have teamed up to create a paper tablet. This device works by recognising what you have drawn in the book via the fancy pen and then can import the drawing into Illustrator as a ready to use vector. I'm not 100% sure how useable this would be in a professional scene but it's certainly an interesting concept.
Comments