The secret to create great web design is in the structure. Wireframing is the first step of the design process to define the main structure and content placement of your website.
Are you working on your next web design project? This tutorial will guide you through the main steps to create a functional Adobe XD wireframe.
In This Wireframes for Web Design in Adobe XD Tutorial We’ll Cover:
- What is Adobe XD?
- What is a Wireframe?
- What Sections Must a Good Web Design Include?
- How to Start Wireframing From Scratch
- How to Create Wireframes in Adobe XD
- How to Choose the Best Adobe XD Wireframe Template For My Website
1. What is Adobe XD?
First things first. If you’re new to the web design world and tools, it’s important for you to understand what Adobe XD is, as well as its main features. Adobe XD is a vector based UI/UX design tool. You can use XD to design apps all the way to websites.
Check out this quick video by Adi Purdila and get an overview of Adobe XD:
2. What Is a Wireframe?
The simplest definition given by Google describes a wireframe as an “outline or a sketch of a product of a screen”. In other words, wireframes are the skeleton of a web design. Through lines, boxes, and shapes, wireframes indicate the position of different kinds of content in your design layout.
3. What Sections Must a Good Web Design Include?
Before wireframing, it’s a good idea to create a list of the sections and content your website will feature. Sections in an Adobe wireframe vary from different types of website, but these are the main ones to consider:
- Header: this area usually includes the logo, navigation links and sometimes a hero image.
- Above the fold: this is the first thing your user sees when entering your website. This must be the most impactful section of your website.
- Below the fold: thisis where you place more information for the user to keep exploring.
- Footer: this is the bottom part of a website. It usually features credits, social media links, terms and conditions, etc.
For this tutorial I’ll be creating wireframes for a creative portfolio website. This type of website is usually directed to potential clients and fellow creatives. I’ll be creating wireframes for four sections:
- home page
- portfolio
- project page
- about
4. How to Start Wireframing From Scratch
Before even opening Adobe XD, I suggest you sketch out the general structure of the website you want to create. I’m a pen and paper kind of person, but you could also work with Procreate or Photoshop.
My creative portfolio website will feature four sections, so I sketched out layout ideas and content for each. Your sketch should include elements such as:
- images and video
- navigation
- call to action (buttons)
- image galleries
- headlines
- body of text
You’ll notice I’m using basic visual codes for different types of content such as boxes, lines and circles. Now you have a general idea of the elements you’ll need before getting into detail with spacing, weight, and other technical stuff.
5. How to Create Wireframes in Adobe XD
It’s time to transform our sketches into wireframes. Let’s go ahead and create some low-fidelity wireframes on Adobe XD. Open Adobe XD and create a new Web 1920 x 1080 px artboard.
Step 1: Insert a Grid System
Following the standard grid system that Adobe XD uses is a good place to start.
To activate the grid in your artboards, select one artboard, go to the menu on the right side of your screen and tick on the Grid checkbox. Select the Layout option in the drop down menu. The only adjustment I’m going to make is setting the Gutter Width to 20 px to have a bit more space between elements.
Step 2: Create Artboards
For the creative portfolio website I’m working on, I’ll create four artboards for each of my sections: Home page, Portfolio, Project page and About.
Step 3: Translate Sketch into Shapes
It’s time to get ideas out of your head and into the screen. Start translating your rough sketches into basic shapes such as rectangles, circles and squares. Use the grid to place and space your content.
For example, use a black rectangle at the top as a logo place-holder, narrow rectangles for the main menu, wider rectangles for headlines, big gray boxes crossed with an "x" to indicate images and black rectangles with rounded corners for buttons. Use dark gray to indicate color backgrounds and light gray for images.
It is expected that some areas and sections work differently in digital form, so it’s OK to adjust some of your drawings.
Step 4: Specify Content
Now that you have the general structure, it’s worth going into a bit more detail on your content. Add text to some of your boxes to indicate what kind of content is going to be there, such as logo, navigation links, body text, highlights, etc. This is also helpful to identify the elements you’ll need to consider in your design system.
And there you go! You know how to create a basic structure for Adobe XD wireframes.
6. How to Choose the Best Adobe XD Wireframes Template For My Website
Working with a template can speed up the design process. However, it is always useful to know how wireframes are created to have more customizing tricks under your sleeve. The best part of working with an Adobe XD wireframe templates is that they already come with image and text styles for you to replace them with your content.
When choosing the right wireframes template you should think of the purpose of your website. Are you creating an ecommerce, a furniture store or an online course website? Search for specific templates or an Adobe XD wireframe kit that include the main elements you’d like to feature on your website.
More Adobe XD Inspiration and Resources
Wireframing is a key stage of the design process. It takes a bit practice and a bunch of web design projects to get your wireframing skills to a pro level. It’s also super helpful to look at loads of references and start noticing the elements and structure that makes each design unique.
We’ve selected some articles and tutorials to help you out with your Adobe XD web design inspiration and resources:
