User Experience Design Essentials – Adobe XD UI UX Design

In order to learn more about user experience and user interface design I signed up for a Udemy online course called ‘User Experience Design Essentials – Adobe XD UI UX Design‘ which went over basic principles as well as how to use Adobe XD.

The course consisted of a number of videos and exercises. I completed the following videos:

  • What is UX UI design
  • Wireframing Low Fidelity
  • Type, Colour & Icons
  • Prototyping a Website
  • Symbols and Repeat Grids
  • Prototyping an App

I learned about creating persona’s, how the ux/ui industry works and what the differences between the roles are (sometimes people do both or specialise). During the course, I followed along with the instructor and created the below wireframe of a website, and mocked up how a pop-up window would look and work.

Then I went on to start working on a mockup for the app to go with my Contactfull project, as seen below:

Progress on Contactfull App in Adobe XD

I also used Adobe XD in the creation of my screenshots for my Penguin project, however what I didn’t realise is that while it creates the file in vector format – it only exports in a pixel based file. The problem with this is that the image size exported is quite small and not ideal for presenting online and zooming into. Adobe XD has great features for showing how the navigation of a website or app would work but using an Illustrator program is better for creating images that will be zoomed into. Plus I’m not sure I would use Adobe XD to design a website personally. Especially with what we learnt in the Online Portfolio Workshop – you can design and build a website at the same time. I can see how it is an important tool for professional website designers who pass of their designs to developers, but not for personal use.

I do think it is a good tool for testing and demonstrating navigation of apps, and the mobile viewing (when you can see your designs on your mobile and interact with them) – is pretty cool.