Mocking up landing pages with Adobe Xd
- 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 outputHere 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 you1. 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?others you can download online.
Key Xd conceptsXd is a pretty simple tool, but there are a couple of things that are important to know before you get started.
ArtboardsThe 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:We now live in a mobile world. I would suggest you consider getting in the habit of starting off with a mobile artboard, as this focuses your attention on the critical elements your landing page needs. But you can add a range of art board sized into a project.When you first start a project, you will be presented with a relatively small sized canvas with nothing on it. If you don't use a wireframe kit, it can be a lot of work to draw out the screens that you want.
Components and modulesXd 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 shortcutsThe 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:
- Left content, right content
- 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 firstA 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 actionsYou 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 designOne 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 prototypePutting together a prototype is super simple and allows you to view the customer journey through your target device.
Keeping it real with wire-framesYour 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-upsThere are zillions of resources online that can help you improve your mock-up ability.[email protected].
Let's grow your business together.
Get design inspiration, practical takeaways and free resources to help you find and delight clients.