How to Wireframe a Website
Hey, Pixels! In this week’s video, we’re going to get naked, well not in that way. In this week’s video, I’m going to show you how to wireframe a website from a list of common items and elements found on popular video-sharing websites, like YouTube and Netflix. In this video, I’ll also show you how to design a wireframe for both desktop and mobile. Whether you’re an expert designer or just a beginner, it’s important to understand that all great website and app designs start somewhere. Often, it’s from a very basic, stripped-down wireframe.
What You’ll Need
Below you’ll find common items found on most sites like YouTube and Netflix. Feel free to add your own!
|Movies||Comedy||Terms & Conditions|
Before we start designing the wireframe, it’s important to organize where all the items in the list should appear on the website. For this tutorial, I’m going to keep things simple by explaining my thought process:
Based on my experience, Home, Search, User Account, Language, Global Navigation, and the Site Logo, are all found within the header of most websites. Now that we know that these items all belong within the header, it’s important to understand further website anatomy in detail. This will help us get a sense of where all these items will be placed within the header.
There is a common section found on many websites called Utility navigation. Utility navigation usually contains secondary tools and actions that strongly affect the overall user experience. These tools and features include search, language switchers, user account, etc. The Utility Navigation is also commonly found in the top-right corner of a website. The Search, Language are all items that would be great to place in the Utility navigation.
Global navigation is where users should instantly grasp what a website has to offer. Given that this is a video-sharing/media streaming website, I think the following items would allow visitors to really grasp our website offerings: Home, TV Shows, Movies, Music, Recently Added, and My List.
The content area is where all videos will be located. From the items list, Action, Adventure, and Comedy are all movie genres. Netflix has done a really great job organizing all their media, so I’m going to similarly structure these genres and the different titles in the main content of the website.
Now that we’ve organized all the items found on the media-sharing website, we can finally design the wireframes for both desktop and mobile.
In Adobe XD, we’re going to set up two artboards, (1) Web 1280 and (2) iPhone X/XS. Since the purpose of wireframes is to design the structure of the website, we’re going to keep the color palette greyscale. I’m also going to turn on the layout grid that’s 12 columns with a gutter width of 16.
First, I’m going to draw a grey rectangle (1280px x 133px). I like to start by adding the site logo. For the search, I really want it to be prominent (494px x 42px). This is a media website with a lot of content, so I want users to allow users to easily search this website. I’m going to design a wide search bar in the center of the header.
Now, I’m going to design the language switcher. I’ll add a down arrow to indicate that it’s a dropdown menu that would reveal a list of different languages users can choose from. Lastly, I’ll just grab this user icon found in my XD components library which represents the user account menu. This account menu would reveal different pages and controls associated with each user account—similar to what’s found on YouTube and Netflix.
Global navigation is very easy to design—I’ll simply grab the type tool and write out all the global nav items that we organized during the navigation design.
Main Content Design
Grab the type tool to write the first movie genre in the main content area. Now, I’m going to draw a grey rectangle to represent the cover image for the media titles. With the cover image selected, hit command + R to activate Adobe XD’s infamous repeat grid. Make sure the column padding is the same as the layout grid gutter—16 px. Lastly, I’m going to add the right arrow to indicate that this section is an interactive carousel. Now, duplicate to create the two other genre sections.
The footer is very simple to design, we’ve already established the items we’ll place in the footer. I really like when footer items are organized using headings, so I’m going to organize each footer item under three headings; (1) About, (2) Support, (3) Legal. You might notice the color is slightly lighter for the actual text links, this is done by reducing the opacity of the text object. You can do this by selecting numbers 0 through 9 on your keyboard in XD.
Designing the mobile version of any desktop website is easy once you get the hang of it. When designing for mobile, I like to think of the KonMari Method™ and ask the question “What elements spark joy on a smaller mobile interface?”. Some elements can be kept, while others can be either discarded or transformed from text into an icon.
On the mobile site, you’ll notice that I converted some text links on the desktop site into icons on the mobile site. That’s an easy way to save screen real estate while still maintaining a good user experience. Some of the text links that were in the global navigation have now been placed within a tab bar on the mobile site—a user-friendly way for users to explore the website.
With the site items listed above, how would you design a wireframe for a video-sharing website? Share your work with me on Twitter and/or Instagram using the hashtag #XOPIXELPerfect!