In this article, we’re are going to through the process of building digital wireframes for the responsive webiste. Transitioning from low-fidelity paper wireframes to low-fidelity digital wireframes is a big step, so it’s important to ask yourself some key questions before you start:

1. Do you have a clear understanding of the layout of the website? It’s important to carefully consider the homepage layout in the wireframing stage. There are several homepage layouts that you’ve learned about in this course.
2. Have you created a few iterations of your paper wireframes?
3. Have you received any feedback about your paper wireframes that could lead to new insights, and are you ready to incorporate userful insights?
4. Are you ready to start considering various visual elements, like typography, color, and images that will go into later versions of your digital designs?

This checklist helps you make sure that you’re transitioning to digital wireframes at the correct stage of the design process.

This article will focus on the wireframe for the desktop version of the website. The later article will cover how to adapt the digital wireframes from desktop version for smaller screen sizes, like tablets or mobile phones.

Step 1: Open Adobe XD

If you take Google UX Design Certificate, there is a perk for free access to Adobe XD for about six or nine months. You can use Adobe XD with the trial version for 30 days. If you are a college students in the US, you can get a student discount through CollegeBuys. CollegeBuys offers a better price for students both software and hardware. Adobe Creative Suite also has an offer for students and educators too.

The alternative to Adobe XD is Figma. Figma is another tool for UI/UX designers, plus it has both the desktop version and an online version. You can gain full access or the professional feature when sign up for the education plan. Check out this article on creating digital wireframes in Figma.

Then choose Web 1920, which is the most common use screen resolution for the desktop version to create a new file.

Step 2: Create an Artboard

The first step is to create an artboard, a screen that holds all the pages of each app or website you’re designing. To do this, click the Artbord tool on the left, or select it with the shortcut (A). Choose the Web 1920 artboard on the right. This artboard is for the homepage. If you want to create artboards for each page of your website, simply copy and paste the original artboard to create duplicate pages.

Step 3: Study your paper wireframes

Assuming that you completed creating paper wireframes for the desktop version of a responsive website. If you haven’t completed the paper wireframes, you check out this article on creating the paper wireframe.

To help you remember the layout preferences for your digital wireframes, take a picture of your paper wireframes, and then upload the images. You can also drag the images onto the artboard in Adobe XD.

Your paper wireframes were created on grid paper because the grids on the paper help designers to control the spacing and placement of the elements that are part of the layout. You’ll be preparing a digital version of the grid on your artboard in Adobe XD by specifying a layout grid, which will make sure your content is aligned consistently.

The layout grid includes three elements: 1) margins, the distance between the edge of the artboard and layout grid; 2) columns, the vertical bands that are evenly spaced on the grid; and 3) gutters, the space betwen each column.

To specify the layout grid:

1. Navigate to the Grid tab on the lower right side of the screen.
2. Select the Layout option.
3. To customize the columns, choose the fill color, number of columns, and width of the columns in the menu on the lower right corner.
4. The choose the gutter width.
5. For customizing the margins, first, choose the width of the margins (left and right), and then select the Linked left/right margins option.

Step 4: Populate the artboard with placeholders

Now that the grid has been set up, you can start building the outline of the homepage by filling in the space with different sized rectangles, circles, and shapes. Refer back to your paper wireframes and homepage layout plan. You can also check out Adobe XD guides about interface elements.

As you populate the artboard, keep in mind where the fold of the webpage is. The fold is the term used to describe the bottom border of the browser screen. Content that appears above the fold is visible without scrolling, whereas content that appears below the fold refers to any portion contained further down the webpage.

There are no strict rules for how to lay out the page, but common practice is to include the navigation bar and any main calls to action above the fold. That way users are presented with the more important elements immediately upon accessing the webpage. Designing with the fold in mind helps ensure the hierarchy of content is effective.

Step 5: Add text placeholders

Go back to the images of your paper wireframes. All the sections with placeholders containing lines can now be replaced with text that indicates each section. It’s not important to write in all the text for now. Just fill in enough placeholder text as a guide for when you develop high fidelity designs later.

To indicate a section or heading, create a short phrase to remember where to add text later. For body text, use lorem ipsum, Latin placeholder text that you can use to show where content will go and how a page will be laid out, without adding meaningful content. Search online for “lorem ipsum,” then copy and paste the text from there.

Step 6: Repeat steps 2-5 for the other pages of your design

Apply the same process to the rest of your wireframes. Think about how the pages will scale onto smaller devices. This means things will move around, change, or be replaced by elements that are intended to save space. When you’re finished, you should have a full set of wireframes optimized for viewing on a mobile device in addition to your web page wireframes.

Create digital wireframes for additional screen sizes

Next, it is important to create different variation of the wireframes for the project website that accounts for a different screen size. You will be using the digital wireframes you created in Adobe XD above to modify the elements to fit different screen sizes.

Responsive web design means changing the appearance or layout of a website, depending on the device being used to view it and the size of the screen. We will go over how to create a set of wireframes for a new device size so that your website is responsive.

Responsive web design:

• Increases product usability, espcially for smaller devices
• Creates an improved user experience across devices
• Drives mobile traffic
• Saves money and time

Below is an example of responsive design improving usability across a variety of device sizes. The elements with the same colors contain the same information, but the way the information is presented and sized changes depending on the device. Changing a design to work better on different screen sizes improves the user’s ability to easily locate and interact with the content they want. This is how responsive design appears in action.

Create an artboard for a new screen size

Select the Artboard tool by clicking the second icon from the bottom of your toolbar, or pressing the A key. A menu will pop up on the right side of the screen in the Property Inspector with a list of device sizes for you to choose from.

Decide what device you want to design for, then click on the name on the right side of the screen in the Property Inspector. An artboard that matches the device’s dimensions will appear on your canvas. Name your artboard so that you can revisit it as needed.

In responsive designs that require the user to scroll down to view the rest of a page, an artboard might have to be extended beyond the dimensions of the preset device screen size. That’s okay. If this applies to you, begin with the preset artboard size, then click and drag the bottom of the artboard downwards as needed to extend the length of the screen.

Create a responsive homepage for a new screen size

On the newly created artboard, copy and add elements from your desktop wireframes so that your new responsive homepage design matches the paper wireframe version you created. Some of the elements you add may look similar to the desktop version but are different sizes, or different elements together.

You may have to resize, remove, or edit some of the desktop elements so they fit your new screen size. Things like carousels, hamburger menus, and cards are useful ways to save space and make the website accessible on a smaller device. You can refresh your memory on placing responsive elements by revisiting the reading on common elements used in responsive design.

When you’re finished, you should have a completed homepage wireframe that is made for a different screen size than your desktop wireframes.

To learn more about creating digital wireframes in Adobe XD: Wireframing inspiration and tips, Wireframing examples, Layout grids in Adobe XD.

To learn more about creating responsive layouts using columns, grids, and gutters by Google’s Material Design

Good luck!