Your First eCommerce Website Prototype With Adobe XD | How To
In my last tutorial, we looked at how Adobe XD can be used to wireframe a mobile app. This time round I’ll share how you can design a visual mockup and prototype.
Adobe 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.
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. 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.
1. Research Your Users
This tutorial assumes that you’ve already done your homework. 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. 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.
“Qualitative research” is used to explore users’ reasons, opinions, and motivations–building an interview guide is a crucial step in this process. In this…
How do you ask better questions when faced with limited time with your users? And how do we identify and control the sources that might get in the way of us…
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. Just don’t assume the process outlined here is the entirety of an actual UX design process!
Once you’re ready to begin developing a visual and interactive mockup, you can move to the next step.
2. Pick a Screen Size
The first thing Adobe XD asks you is to pick a screen size. 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.
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.
3. Make Duplicates of Your Artboard
We will be mocking up four standard pages for an online store:
- a home page
- a category page (“Shirts”)
- the Cart (showing items the customer has added for checkout)
- the About page (which has a bit of information about the brand)
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.
For now, create three more artboards by choosing the artboard function from the left pane and clicking anywhere next to your first artboard.
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).
4. Placing Images and Adding Text
For our home page, we are going to do something that’s quite popular with websites in the fashion and retail industry. We will choose one large image to be our entire background.
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. It will turn blue to show that this is the landing or starter page for your experience.
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. If your image is larger than the art board, press and hold on it, and drag it around to find a position you like.
Continuing 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.
Select the Text tool from the pane on the left and click anywhere you want on the first artboard to start writing. For our logo text, I’m starting below the middle but you can move it around as desired by clicking and dragging. Of course, you can also import a logo image in the same way as we imported our background image.
Under the logo text, you can use the Text tool again to write out your brand’s tagline.
Adobe XD offers many standard formatting choices for your text. You can select any block of text and change its font, style, color, size and other attributes. The screenshot below shows the formatting for the navigation text on the home page.
The fonts in this example follow a harmonious 1:2 scale which you can learn about in this guide on effective typography for the web:
Possibly the most obvious typographic question in the hands of a designer is “which typefaces should I use?” The second question, one which rarely gets the…
Use what you have learned in this section to add the page titles for the remaining four pages and place the images and body text for the Cart and About pages.
5. Make a Symbol
Let’s turn to the About page.
Find a navigation icon you like (such as found in this set) and lay it out alongside the logo, in the top-left corner, on the About page (or any of the other two pages, besides the Home page).
As you’ll need your icon and logo for the other pages as well, you can turn them into a Symbol. Right-click and select Make Symbol (or hit Cmd + K). You can access any symbols you’ve made by clicking on the Assets icon on the left page. From there, you can drag and drop a symbol to any of your artboards. This way, you won’t have to copy-paste every time.
You can link your Lo-Key symbol to the home page using the method in the next step.
6. Create Your First Link
Switch to Prototype mode from the bar on the top. Zoom into your first art board (Home) and select the About text. A blue arrow will appear next to it. Press down on it and drag it out. A blue wire will follow obediently wherever your cursor goes..
Drag it to your second art board (About) and leave it there. You’ve now created a link between the two pages and, making sure that the Transition tab is selected, you can choose the type of transition and easing using the pop-up that appears when you drop the wire. For now, you can keep the transition to none because we want the About page to immediately replace the home page as soon as the About button is pressed.
You can repeat this method to add links to any other pages.
7. Use Overlays to Add a Drop-Down Menu and Lightbox
Let’s now add our navigation drop-down menu.
Create a new art board, titled Nav, and modify its dimensions to your requirements using the Width and Height controls shown in the right pane. The Nav artboard shown below is 210px X 275px.
Using the Text and, optionally, Line tools in the left pane, design your drop-down menu. This menu will appear when your customer clicks on the hamburger icon.
Back in the Prototype mode, drag a wire from the hamburger menu to the Nav art board. In the box that appears, switch to the Overlay tab. A green box will appear that shows where the overlay will appear. Drag to move it around until it’s under your hamburger menu. Choose None as your transition setting (or experiment with the other options).
Now click the Play icon in the top right window. Your home page will appear in a preview window. Click the About button to go to the About page. Now, click on the hamburger icon. It will bring out your drop-down menu. Click on it again and it will disappear.
You can link the items/page titles in the drop-down to their respective pages using the same method as in Step 6. This will turn it into a working navigation for all the pages in your prototype.
8. Use the “Repeat Grid” Feature to Create Rows and Columns of Objects
For our Shirts page, we need multiple rows of products.
For that, we will be using an XD feature called Repeat Grid. If your design involves repeating elements or content lists, the Repeat Grid feature allows you to do that while still making it a breeze to make changes that update automatically across the entire grid.
Use the Rectangle tool from the left pane to draw a 450px x 300px rectangle and then use the Fill tool from the right pane to color it a light gray to indicate this is an image placeholder.
Now select the rectangle and click on Repeat Grid in the right pane (or Object > Repeat Grid). A green outline and green sliders will appear around your selection, allowing you to extend your content list in any direction (both vertical and horizontal in our case). For now, click and drag long enough to make two rows with three columns each.
Select your repeat grid and then hover on the white spaces between your rectangles. When they turn pink, you can drag up and down to change the padding between cells.
To populate your grid with product images, drag your product photos from a single folder onto your grid in XD. They will fill up the grid automatically.
You can use the same overlay method from Step 7 to create your product lightbox that appears when you click on a shirt/product.
9. Optional Step: Share!
Adobe XD allows you to quickly and easily share anything you’re working on with collaborators and other stakeholders.
If you are working on an app or website for a client, you can share a link to your design project with them by selecting File > Share > Publish Prototype.
You can also publish Design Specs that allow developers (or anyone else for that matter) to view the formatting and other settings for your prototype in a browser. They can also download any assets, such as images or graphics, that you mark for export (go to View > Layers. You can either select any item and click the icon next to it, or, right-click on any item in the list and select Mark for Batch Export).
Conclusion
And we are done! You have now designed a prototype for a simple online store. It can be shared with stakeholders, or picked apart and built by developers. Check out the links below to learn more about Adobe XD!