For my client project, I plan on using a completely new software to create the main design for the website. The software that I am going to be using is Adobe’s new software “Adobe Xd” short for Adobe Experience Design. It is a piece of software designed mainly for the creation of user interface and user experience design and is soon meant to be the replacement for Photoshop for web designers, however, it is currently in BETA.
In this post, I am going to be following the tutorial that Adobe have set up, to try to get to grips with the software before I begin using it for the project.
Step 1 of the tutorial is basically an introduction to the tutorial, telling you what you will be creating in the process of the tutorial.
As shown above, I have followed step 2, and created an artboard using the artboard tool (the arrow to the left), clicked into the canvas (the middle arrow) and then filled the canvas with a colour using the fill tool (right arrow).
Step 3 shows how to add an image, in what is called a clipping mask inside Adobe Xd, by dragging and dropping an image on top of a shape, it automatically then snaps to that shape, and confines itself to the space.
Step 4 shows how to create a repeating grid, by only creating one of the boxes for the blog, and then choosing a repeat grid option that comes up on the right side of the screen, and then allows you to drag the grid down, to make the same box repeat, as far down on the screen as you want it to.
It also shows how to add different images to the blog posts in the grid, by dragging and dropping 3 images at the same time onto one of the images, this then adds all 3 of the images to the grid in a random order.
Step 5 is where we create a scrolling effect, to give the design some interactive features. To do this, I had to select the artboard by clicking its name at the top and then selecting “Vertical” from the scrolling drop-down on the right side of the screen. Then to add the scroll, I pulled the artboard down to be behind the rest of the design, which you can see divided by the dotted lines.
Step 6 is also about creating interactivity within the design, this time by switching over to the prototype panel at the top left of the screen, shown by an arrow, and then selecting an icon on the screen, in this case I used the button at the bottom of step 5 to show the artboard in step 6, and then the back arrow on step 6 to go back to step 5.
That is the end of the tutorial.