October 1, 2019
Mocking up landing pages with Adobe Xd
In this article:
The world of user experience is ever changing with new practices and new tools. In days past Photoshop reigned supreme as the only tool of choice for web design, not any longer.These days other tools like Sketch and Figma have stepped up to challenge Photoshop in the world of web design. These tools provide a more streamlined solution to the web development and responsive workflow. Photoshop is more than just a web design tool (it's a general design tool), so in response Adobe has developed Adobe Xd (or 'Xd') to integrate some of the rapid prototyping and responsive capabilities these new tools offer without having to massively rework the Photoshop product.Xd is a productivity tool to help non-designer and non-developers bring together their ideas for a digital interface(like a website) into an easy to use package. It can be an invaluable tool for Digital Marketers if you have responsibility for managing a website, or helping with it's construction. It can also be used to augment your Photoshop designs through an import capability that brings through all the editable Photoshop layers for you to use in Xd.To help you get up to speed, this article will be a quick introduction to Xd and some instruction on how to mock up landing pages, and make them look great.This will hopefully save you time, and make you productive more quickly.- Why would you create a mock-up?
- What Adobe Xd can do?
- What do you need?
- Key Xd concepts
- Getting productive faster
- Keeping it real with wire-frames
Example output
Here is an example of the kind of landing page mock-up you can create easily with Xd, and some quick tips:
Why would you create a mock-up?
If you have a multidisciplinary team working with you on your website and digital marketing, it can be a great asset to be able to quickly communicate a your thoughts about what you need created on your site in a form that others can see and provide feedback upon.Your wire-frame can include:- Potential marketing messages
- Imagery requirements
- Length and complexity of the page
- Content requirements for the site
What can Adobe Xd do for you
1. Build responsive website wire-framesYou can create different mock-ups. Including mobile, tablet and desktop variations.2. Create dynamic prototypesYou can create clickable hot spots in your mock-up that when clicked navigate to another page, simulating the web site experience. This is great to troubleshoot longer interactive workflows.3. Share mock-ups with others, and share in a collaborative digital spaceXd has a builtin sharing system where you can invite others to view and comment on your creation.4. Preview your mock-ups on your target device.There's nothing better than seeing your designs on the actual device. There can sometimes be a disconnect between the design on a desktop and how it actually looks on the smaller resolution of a device. Specifically in relation to the size of the elements and overcrowding.What do you need?
- Adobe Xd - Free
- A wire-frame kit- like Platforma - Website Wireframe Kit - Cost <$100 [Optional]
Key Xd concepts
Xd is a pretty simple tool, but there are a couple of things that are important to know before you get started.Artboards
The artboard is the name of your working space. In order to start working on a page mock-up, you need to decide what sized artboard you want to work on. It will look something like this:
Components and modules
Xd considers components to be atomic elements that make up a module. So this could be a button, a piece of text, or an input field.A module is a collection of elements that make up a discrete package of information. A module usually takes the form of a horizontal strip. The development of responsive interfaces has pushed web design down the path where this is a commonly used practice for structuring information.Wire-frame kits provide you with both components and modules. But for the most part, you will be working with the modules for productivity.Keyboard shortcuts
The difference between a bumpy start and a smooth start to using Xd, is quickly getting across some keyboard short cut. Being able to seamlessly glide through your screens takes a bit of the edge from the learning curve.There are a million shortcuts in Xd, but I find the following useful:- Hold Alt + Mouse scroll = Zoom in or out
- Hold Space + Click & Drag = Move the canvas relative to you
- Shift + Mouse click = Add to a selection
- Ctrl + 3 = Zoom to the selected element
- Ctrl + 0 = Zoom to whole of project
- V - Select the select tool
- T - Select the text tool
Getting productive, faster!
I'll say it again, the wire-frame kits are invaluable for being productive in putting together a quick mock-up. The Platforma website wire-frame kit is particularly handy as it comes with a set of 173 different module designs for desktop, tablet and mobile (for each!).The library includes:- Headers
- Left content, right content
- Covers
- Centers
- Grids
- Forms
- Pricing
- Customers
- Menu Footers

- Zoom in - you will start very far out (Alt + Mouse wheel)
- Get used to movement - Hold Space key + click & drag
- Find a module that you like in the wireframe kit
- Copy the item (make sure the select rectangle is around the whole module)
- Flip to your blank Xd artboard and paste in the module
- Click and drag to place the elements where you want
- Desktop - 1440px
- Tablet - 1024px
- Mobile - 320px
Mobile first
A really great thing about Xd is that it can be much easier to focus on mobile first. Use this as an opportunity to change your thinking about mobile at the definition stage. Not as an after thought.Common Xd actions
You will have to do a couple of things commonly as part of this process- Add art-board - Click on the icon above the search icon on the left, then click a space outside of the active art board. You can place art-boards almost anywhere.
- Increasing the height of the art-board - just click on an empty part of the art-board, which will show a selection box which you can extend downwards.
- Update text - Switch to the text tool (keyboard - 'T') find the element you want to update. Keep clicking until the text you want is selected. This can take a few turns.
- Prototyping -> Link to another page
- Prototyping -> Preview
Remember it's a mock-up, not a design
One of the great things about Platforma is that is provides you with a ready to go library of modules. However, beyond top level items, it can be tricky to get in and really tweak specific aspects of the module.If you need to go granular, just make sure it's going to be worth the effort. Work on getting people on the same page as to what you are trying to reflect in your landing page rather than show them exactly how things will look.Making a quick prototype
Putting together a prototype is super simple and allows you to view the customer journey through your target device.To preview on mobile, click the mobile icon slightly to the left of the 'Play' on the right hand corner.Keeping it real with wire-frames
Your mock-up should provide an indication of- The range of pages you are planned to create
- The desired sequencing of the pages
- The arrangement and prioritisation
- People can fail to understand that the wire-frame is a more like a blue print and not the actual design - make this clear.
- Try to limit feedback to balancing perspectives and use cases.
- Some people can get stuck on how things look - stop these conversations before people get too involved.
- If many people are involved, make sure there is a final decision maker. Design by consensus produces bad results.
Additional resources for creating mock-ups
There are zillions of resources online that can help you improve your mock-up ability. Tell us what you think! If you would like to talk to us about this article, drop us a line on [email protected].Let's grow your business together.
Get design inspiration, practical takeaways and free resources to help you find and delight clients.