I
n today’s technological landscape, there is very little that cannot be done on the web. Everyone from mega corporations to boutique coffee shops have a presence on the web, in some shape or form. Websites give us access to manage our money, allow us to order a coffee to beat the lines and even make shopping for large purchases like vehicles and homes easier to accomplish. Websites take shape in many different forms, from complex web applications, to simple landing pages. In this guide, learn how to use Adobe XD to design a simple landing page for a digital real estate company.
Designing an effective landing page
To achieve an effective design, it is important to know what the goal of the design should be. In this case, the goal will be to direct visitors to browse available properties through the fictional online realty service, homey.
Depending on the product or service, a website may have several different landing pages to capture audiences from various email or search campaigns. Most frequently, the homepage of the website is the main landing page, though there can be many more.
Getting started
Before starting any design, it is a good idea to wireframe your concepts and ideas and test them to ensure that the design is achieving the intended goals. For the sake of simplicity, this guide will walk through the design of the finished product, assuming wireframes have been completed.
When getting started on a page layout like this, leveraging Adobe XD’s guides and grids is a great way to ensure alignment and precise positioning of elements across the page. This guide on designing for websites in Adobe XD will provide a good understanding of how to use guides and grids, which can be applied to this project.
To jump right into this tutorial, download the starter file here.
Page navigation
The navigation section typically sits at the top of the landing page, providing access to pages with additional information such as pricing details, feature overviews and calls to action like signing up or contacting an agent. In this landing page, the menu will reflect options for exploring the housing inventory, selling your own home and contacting an agent to get started.
The navigation section is laid out to be about 60px in height and will include a logo to the left, menu links to the right and a call to action button to log in. In this design the background colour of the navigation is transparent to appear as part of the hero section and will scroll with the page.
Adding the logo
To start, add the logo to the menu bar. If you’re following along in the sample file, the logo is available as a reusable component in the Libraries panel on the left, called homey logo. Using the guides on the page, position the logo against the left guide and vertically centred within the top space. The positioning can be fine tuned later once additional navigation elements are included.
Navigation links
The navigation links will be set up on the right side of the navigation bar to create balance with the page and follow standard conventions. Using the text tool, click to add the first navigation item labelled Browse Inventory. Set the text alignment to be right aligned.
Next, make a group out of the text box. Making this a group will allow a Stack to be enabled enabling easier duplication and rearrangement of menu items. Once the stack is enabled, double click into the group and select the text box. Copy and paste the first text box until there are three text boxes stacked horizontally.
Now, edit the other two text boxes with the text Sell Your Home and Contact an Agent. Select all three to adjust the text style to an appropriate size for the menu item; 14-16px often provides appropriate legibility.
Log In button
Finally, create the log in button by drawing out a rectangle about 46px in height and adding the text Log In on top. Using the alignment tools, centre the text vertically and horizontally in the button. Group the two elements together and enable Padding to ensure that the button spacing is maintained as the text changes.
Since this button will be used elsewhere in the design, convert it to a component for easy reuse by using the right click menu and selecting Make Component.
Next, cut the button (using command/ctrl + x) and double click into the menu stack to paste it into the stack. The button should appear at the end or to the right of all the other menu items. If it does not, simply click and drag it into position, the other items will rearrange accordingly.
You now have a dynamic menu that can be reordered. As menu and button labels change, the entire menu will adjust to accommodate the new text. Since each item is text aligned right, the menu will grow and resize to the left, maintaining the alignment to the right hand side of the page boundaries.
Hero section
The hero section is the main focal point when a visitor lands on this page, whether directly or via a search engine result. Typically it contains a heading known as the H1, a subtitle or introductory text, a call to action and then an image in some form. The hero section for this page will leverage illustrations from the Undraw plugin to compliment the text title on the left.
Illustrations are a common way of representing the topic of a page and adding character without sourcing photography for the page, which can become very expensive. The Undraw plugin is an open source set of customisable illustrations that provide great options for a landing page like this.
Title and call to action
To start, the title section will be defined. To keep it simple, this hero layout uses an approximate 50% split between the illustration and the copy.
Using the text tool, add a text box with the title Search thousands of homes handpicked for you. This will be the main title, so set the text box style to auto-height to allow the text box to resize vertically. Set the font size to 34px and make the type bold so that it really stands out and carries weight.
Next, add another text box above the title that says Find the perfect homey. This is the subtext, which may often appear below the H1 depending on the style and the emphasis of the message. In this case it fits above the heading as a prelude to the core message.
Finally, the call to action will be added under the heading, prompting visitors to take the next step in their journey. In many cases this is a primary button with a descriptive, actionable label. Since a button component was already created, it can be dragged out of the components window and placed on our hero design.
Next, the label should be updated to reflect the action visitors should take. Modify the text label to say Browse 23,000 homes, an indication that there is a large inventory to choose from. Then, modify the background colour and text so the button stands out.
Undraw illustrations
Leveraging the undraw plugin, an illustration can be added on the right to add visual support to the title and call to action. Since this is a house finding service, the illustration should represent the goals of the customer in finding their dream home.
Once installed, open the Undraw plugin in the plugins panel in Adobe XD. Using the search functionality, search for home. In the results, simply click the desired illustration to copy it to the clipboard and then paste it on the canvas.
Position the illustration in the right half of the hero and resize it to fill an appropriate weighting of the page, not too large, but not too small, it should feel balanced with the title of the page. Each illustration is fully editable vector shapes making it easy to edit and adjust to fit the branding colours selected for the site. Click into the illustration to select individual shapes and edit them.
To tie everything together, use the pen tool to add some land in front of the home, like a rolling hill.
Listings preview
The next section of the page supports the main hero section by providing further information or incentive to proceed into the listings page. This is a chance to provide a snippet of the listings available to provide visual hooks for prospective buyers.
To create the title, copy and paste the heading and subcaption combination from the hero section and adjust the title to be about 24px. Change the fill of both text boxes to white and position along the left guide.
The cards will be created using a repeat grid to duplicate them out and sync layout changes across all. Start by defining the first card. Use the rectangle tool to draw out a background shape and then again to create a placeholder for the image. Group both layers together once in position. It is helpful to make the image placeholder fill slightly darker to distinguish the different layers.
Next, add text boxes for each of the label, address and price sections, adjusting colour and text size accordingly.
Using the Repeat Grid tool in the property inspector, drag the green handle to the right until three cards are visible. Adjust the inner spacing until all three cards fit within the left and right guidelines.
The text and imagery on each card can now be set independently of the others, but any changes to layout and positioning will stay in sync across the row. To add images, drag them, in bulk, from the file browser on your computer or from a library in XD. Text can be edited by double clicking into the cards and selecting the text to edit.
Finally, to add the call to action, drag another copy of the button component onto the canvas and modify the label once again to match the desired action, in this case Discover More.
Testimonials
The final content section on the page is the testimonial section. This can be as simple or complex as desired, but in this case a simple quote with attribution will be used to show positive feedback for the service.
Once again the title and subtitle can be reuse and centred into the content section, since the quote here will be centre justified. Modify the header colour to black so that it stands out against the light background.
Next, using a larger bold font add a quote below the title and subtitle. This should be in italics to emphasise that it is speech, but can also be styled as desired to match the brand of the site.
Add an attribution by drawing out an ellipse and adding text fields for both the reviewer’s name and location. Left align the text so it is next to the photo and give some colour to the location field to differentiate it from the name. Using plugins like UI Faces here makes it easy to populate the image shape with random faces.
Footer
Finally to round out the page, the footer will be added to provide further navigation options, contact information and links to terms of service and privacy policies.
A footer does not have to be complex and is often a collection of navigation links (typically the most important pages or sections on your site) with a logo, copyright information and legal links.
Start by adding the logo component once again to the left side of the footer, aligning it to the left hand guide so it is even with the navigation logo.
Next, add the first navigation section Products with its accompanying navigation links. It is helpful to put these links into a Stack so that they can be rearranged easily and added or removed.
Repeat the process with the other two sections and group all of them into one group with Stacks enabled. Doing so will allow you to rearrange and adjust spacing more effectively.
Finally, add in the fine print information at the bottom using left aligned text for the copyright information and right aligned text for the terms of service and privacy policy.
With all your sections in place you have now successfully designed a landing page in Adobe XD. Thanks to the built in Prototype mode, these static designs can now be taken to the next level with interactions and page transitions. Learn how to bring your designs to life with this prototyping guide.
