Design for Screen - Adobe XD software skills development

Adobe XD
'Go from concept to prototype faster with Adobe XD, the all-in-one UX/UI solution for designing websites, mobile apps, and more. With smooth, powerful performance, it's easy to deliver experiences that work and feel as good as they look on any screen.'

Adobe XD is used by UX/UI designers who need the intuitive tools in order to deliver precision and performance to their users, making their everyday tasks feel effortless. 

The repeat grid feature and flexible art boards are all timesaving features that allow designers to create wireframes and also fully interactive prototypes for any size screen. This will be a software that I use to draw up my wireframes and then design my final app on as I will be able to link it all together in order for me to demonstrate how the app will work for the user. 

A feature that will be of use to me is the ability to switch from static layouts to interactive prototypes, allowing me to see exactly how the designs work on screen to scale. This will allow me to get feedback on the app design instantly and in context ready for it to be developed appropriately. 

Learning how to use Adobe Xd:

As Adobe XD is a software that I have not yet used, I found some tutorials to help me learn how to do the basics in order for me to begin my wire framing. I referred to the adobe tutorials about the software so that I could figure out exactly how to do the things I needed to as I went along. Below shows the processes that I initially did when starting up on the software, referring to these tutorials and also googling when necessary. 

Repeat Grid

- selecting the two elements to set up a repeat grid that can then be dragged down to duplicate it as many times as needed
- using the 'repeat grid' command to duplicate the 
- dragging and dropping a group of images onto the 'repeat grid' to fill where the image had been planned to go (this will save a lot of time when placing a large number of images onto the art board)
- lengthening the art board to create a scroll on the screen of the phone

UI Templates

- by downloading the iOS UI elements, I was able to access the UI elements for an iPhone which will help me with sizing, proportions and positioning of the app so that I can see how it looks in comparison
- placed the keyboard on the art board to see about the positioning of the email and password boxes


Prototyping and linking

- once the art boards of the articles section had been wire framed, they needed to be linked up so that I could test to see if it worked in the way 
- I found this feature really useful to help me make sure that I had included all of the correct buttons and pages for the app to work fluently