#ADOBE XD PROTOTYPE TUTORIAL HOW TO#
#ADOBE XD PROTOTYPE TUTORIAL FREE#

Under the logo text, you can use the Text tool again to write out your brand’s tagline.Īdobe XD offers many standard formatting choices for your text. Of course, you can also import a logo image in the same way as we imported our background image. For our logo text, I’m starting below the middle but you can move it around as desired by clicking and dragging. Select the Text tool from the pane on the left and click anywhere you want on the first artboard to start writing. If your image is larger than the art board, press and hold on it, and drag it around to find a position you like.Ĭontinuing our minimalistic aesthetic, we are going to keep our text short and clean–just the brand name (or the logo), a tagline, and a navigation bar. Once you have decided on an image you want to use, select File > Import (alternatively, hit Cmd + Shift + I) to locate that image on your disk and import it onto your canvas. It will turn blue to show that this is the landing or starter page for your experience. Tip: You can let Adobe XD know an artboard is your home page by selecting the whole artboard and clicking the gray tag that appears on its top-left side. We will choose one large image to be our entire background. Placing Images and Adding Textįor our home page, we are going to do something that’s quite popular with websites in the fashion and retail industry. You can, alternatively, also click the first artboard to select it and choose Edit > Duplicate. Rename each one by double tapping the default titles (visible at the top-left of every artboard). We will also need artboards for a drop-down menu, as well as a pop-up showing more details for a selected product (the “lightbox” effect) but we can create those later.įor now, create three more artboards by choosing the artboard function from the left pane and clicking anywhere next to your first artboard.

the About page (which has a bit of information about the brand).

the Cart (showing items the customer has added for checkout).We will be mocking up four standard pages for an online store: Once you make your selection, you will be welcomed by the XD workspace, in the Design view by default, and a clean white canvas (“artboard”) in the size of your choice. The default for web is Web 1920 (1920 X 1080 px) but you can also pick one of the other options ( Web 1280 or Web 1366) or choose a custom size. The first thing Adobe XD asks you is to pick a screen size. Once you’re ready to begin developing a visual and interactive mockup, you can move to the next step. Just don’t assume the process outlined here is the entirety of an actual UX design process! Of course, if you just want to try out Adobe XD and use this tutorial to learn the basics for designing a prototype, you can do that as well.

#ADOBE XD PROTOTYPE TUTORIAL HOW TO#

UX Research: How to Build an Interview Guide.As a designer, you will have done your user research, designed or established the brand identity, and spent a good amount of time wireframing and revising. If you’re a business, that means you already know who your customer is and what kind of web experience would be the best fit for them. This tutorial assumes that you’ve already done your homework.

#ADOBE XD PROTOTYPE TUTORIAL FREE#

Follow along to learn, and feel free to modify and experiment with the results if you’re using this tutorial to design your own store.

We’ll be designing a website for a simple online apparel store a fictitious brand called “Lo-Key”, that sells a line of urban-themed basics. This time round I’ll share how you can design a visual mockup and prototype.Īdobe XD can be used to design for both web and mobile, and it offers a streamlined workspace to design your experience whilst including simple interactivity that can then be sent to a developer or presented to a client.

In my last tutorial, we looked at how Adobe XD can be used to wireframe a mobile app.

Adobe xd prototype tutorial