What Is Wireframing? (A UI Design Tutorial)

Summary

In this instructional video, Elisé, an Adobe XD expert, introduces wireframing as a fundamental design stage, essential for structuring UI designs. She explains the concept, its importance, and guides viewers on creating their first wireframe. The video emphasizes wireframing's value in early feedback, cost-effective prototyping, and iterative design. It also covers types of wireframes, from low to high fidelity, and mobile design best practices. Viewers are encouraged to sketch wireframes, even without artistic skills, as a foundation for digital screen design.

Takeaways

• 📚 Wireframing is an essential design stage that lays the foundation for UI design by providing a clear overview of the page's structure and layout.
• 🏗️ Wireframes act as a blueprint for digital products, similar to how architects use blueprints to plan a home, focusing on functionality and user flow rather than aesthetics.
• 🔍 Wireframing allows for early and honest feedback from stakeholders and users, which is crucial for making informed design decisions.
• 🔄 The process of wireframing enables self-critique and iteration, making it easier to spot issues and make changes before becoming too attached to the design.
• 💰 Wireframing is cost-effective and fast; it can be done with basic tools like pen and paper, facilitating quick design testing and adjustments.
• 📉 There are different types of wireframes, ranging from low fidelity, which uses basic shapes and grayscale, to high fidelity, which includes colors, typography, and images.
• 📱 Mobile design best practices emphasize the importance of touch targets, ensuring elements are large enough and spaced properly for easy mobile interaction.
• 🔢 UI elements are categorized into four main types: input controls, navigational components, informational components, and containers, which are the building blocks of apps and websites.
• 🎨 The script encourages sketching wireframes freely, emphasizing that it's a reference point for digital screen design and not a final product, so imperfections are expected.
• 📝 Wireframing is a fundamental habit in the design process, helping designers to visualize and plan before moving on to more detailed stages like colors and typography.
• 👩‍🏫 The video is part of a free UI short course by Career Foundry, offering educational content on wireframing and other aspects of UX/UI design.

Q & A

What is the main topic of the video?

The main topic of the video is an introduction and overview of wireframing in UI design.

Who is the presenter of the video?

Elisé, an Adobe XD instructor and UX/UI professional since 2015, is the presenter of the video.

What is the goal of Elisé's content and speaking engagements?

Elisé's goal is to make design education fun and exciting.

Where can the audience find Elisé's educational content?

Elisé's educational content can be found on Instagram, TikTok, YouTube, and LinkedIn.

What will the audience gain by the end of the video?

By the end of the video, the audience will have a better understanding of wireframing and some sketches to carry on to the next exercise.

How can viewers get more content like this from Career Foundry?

Viewers can subscribe and hit the bell to be notified of new videos from Career Foundry.

What is the role of a wireframe in digital product design?

A wireframe serves as a blueprint for digital products, providing a clear overview of the page's structure, layout, information architecture, user flows, and intended behaviors.

What are the benefits of wireframing?

Wireframing allows for honest feedback, self-critique, and is a cost-effective way to test designs without spending a lot of time and money.

What are the different stages of wireframes mentioned in the video?

The different stages of wireframes are low fidelity, medium fidelity, and high fidelity.

What are the four main categories of UI elements mentioned in the video?

The four main categories of UI elements are input controls, navigational components, informational components, and containers.

What is the advice given for creating the first wireframe?

The advice given for creating the first wireframe includes using a pen or pencil and paper, considering the first impression, sketching everything including titles and button text, and not worrying about making mistakes.

What is the importance of wireframing in the design process?

Wireframing is important as it provides a foundational structure before moving on to more detailed aspects of design such as colors and typography.

What is the next step for viewers after watching this video?

The next step for viewers is to watch the next video where Elisé will detail how to create shapes in Adobe XD, build out the digital framework for a product, and create a logo.

Outlines

00:00

📐 Introduction to Wireframing

In this introductory segment, Elisé, an Adobe XD instructor and UX/UI professional since 2015, presents the concept of wireframing as a fundamental design stage. She explains wireframing as a blueprint for digital products, which helps visualize the structure, layout, and user flows, focusing on core elements without the distraction of aesthetic details like colors and typography. The importance of wireframing is highlighted through its ability to facilitate early feedback, self-critique, and cost-effective design iteration. Elisé encourages viewers to engage with the content and asks for questions in the comments, promoting interaction and learning.

05:07

🔍 The Value of Wireframing

This paragraph delves into the value of wireframing, emphasizing its utility in obtaining early and honest feedback from stakeholders and users, which is crucial for identifying design pain points and making informed decisions during the iterative design process. The segment also touches on the cost-effectiveness and speed of wireframing, noting that it can be done with simple tools like paper and pen. The discussion transitions into the types of wireframes, distinguishing between low, medium, and high fidelity, each serving different purposes and levels of design detail in the development process.

📱 Mobile Design Best Practices

Elisé introduces mobile design best practices, stressing the importance of considering touch targets and ensuring elements are easily tappable on mobile devices. She explains the need for adequate sizing and spacing around interactive elements to prevent accidental taps. This section sets the stage for a deeper dive into UI elements, which are the building blocks of apps and websites, categorized into input controls, navigational components, informational components, and containers. The focus is on creating a user-friendly and accessible design.

🎨 Creating Your First Wireframe

In this creative segment, viewers are guided through the process of creating their first wireframe using a pen and paper. Elisé encourages considering the first impression and key elements such as button size, logo placement, and imagery. She advises making rough sketches without the pressure of perfection, emphasizing that wireframes serve as a reference for digital screen design. The process is meant to be iterative and flexible, allowing for multiple drafts until the designer feels confident with their layout, highlighting the importance of sketching in the design process.

Keywords

💡Wireframing

Wireframing is the process of creating a visual guide that represents the basic layout of a user interface. It is a fundamental design stage that helps visualize the structure and hierarchy of elements in a digital product. In the video, wireframing is used to discuss the early stages of UI design, emphasizing its importance in focusing on core screen elements without the distraction of colors or typography.

💡UI Design

UI, or User Interface Design, refers to the way a product's interface is crafted to ensure it is user-friendly and aesthetically pleasing. The video's theme revolves around the UI design process, with wireframing being a critical step in this journey. The script mentions building the structure of one's first UI design, highlighting the role of wireframes in this process.

💡Blueprint

A blueprint is a detailed plan or design that serves as a guide for creating something. In the context of the video, the term is used metaphorically to describe wireframes as the 'blueprint' for digital products, helping to visualize the layout and structure before adding more detailed design elements.

💡Stakeholders

Stakeholders are individuals or groups who have an interest or concern in a project's outcome. The script discusses the value of wireframing in gathering early feedback from stakeholders, which is crucial for ensuring the design direction aligns with their expectations and requirements.

💡User Flows

User flows represent the paths that users take to complete tasks within a digital product. The video explains that wireframes help illustrate user flows, which is essential for understanding how users will interact with the product and for identifying potential pain points in the design.

💡Low Fidelity

Low fidelity wireframes are basic, often hand-drawn sketches that focus on the layout's fundamental structure without the inclusion of detailed design elements. The script mentions low fidelity as the initial stage of wireframing, using basic shapes and grayscale to establish the hierarchy of elements.

💡Medium Fidelity

Medium fidelity wireframes are more detailed than their low fidelity counterparts, incorporating some design elements like copy and images, but still not including final colors or typography. The video describes this stage as a progression from low fidelity, where designers feel more comfortable with the content's structure and begin to refine their wireframes with digital tools.

💡High Fidelity

High fidelity wireframes are detailed, close-to-final designs that include colors, typography, and images, providing a near-accurate representation of the final product. The script explains that this is the stage where designers add all branded elements after gaining confidence through stakeholder feedback and user testing.

💡Responsive Design

Responsive design is an approach to crafting UIs that ensures they adapt and function well on various devices and screen sizes. The video touches on mobile design best practices within the context of responsive design, emphasizing the importance of considering touch targets and element sizing for ease of use on mobile devices.

💡UI Elements

UI elements are the individual components that make up the user interface of an app or website, such as buttons, dropdowns, and navigation bars. The video categorizes UI elements into input controls, navigational components, informational components, and containers, explaining their roles in guiding the user through the interface.

Highlights

Introduction to wireframing as a crucial design stage in UI design.

Wireframing defined as a blueprint for digital products, focusing on structure and layout.

Elisé, an Adobe XD instructor, presents her goal of making design education engaging.

Wireframing's role in early product life cycle to establish page structure and user flows.

The value of wireframing for obtaining early feedback and making iterative design decisions.

Wireframing allows for self-critique and identification of design flaws before attachment to the design.

The cost-effectiveness and speed of wireframing with basic tools like pen and paper.

Different types of wireframes: low, medium, and high fidelity, each with varying levels of detail.

The progression from basic shapes in low fidelity to detailed, branded elements in high fidelity wireframes.

Mobile design best practices emphasizing ease of use and touch target sizing for mobile interfaces.

Introduction to UI elements as building blocks for apps and websites, categorized into four main types.

The importance of sketching wireframes even with rough drafts to establish a reference for digital design.

Wireframing as a foundational step before moving on to more creative aspects like colors and typography.

Career Foundry's free UI short course and the invitation to sign up for more design education.

The encouragement to engage with the content through likes, subscriptions, and comments for questions.

A preview of the next video's content focusing on creating shapes in Adobe XD and building a digital framework.

Transcripts

Hey in this video i'm going to give  you an introduction and overview of  

one of the most important  design stages wireframing

i'll discuss what wireframing is why it's used and  how you can start building the structure of your  

first ui design i'm Elisé an Adobe XD instructor  and i've been doing UX / UI since 2015. my goal is  

to make design education fun and exciting through  my content and speaking engagements i also make  

fun and educational content on instagram TikTok  youtube and Linkedin by the end of this video  

you'll have a better understanding of wireframing  and you'll also have some sketches that you can  

carry on to the next exercise if you have any  questions on wireframing or anything that we're  

covering in this design series please feel free to  leave it in the comments below and we'll answer as  

soon as possible if you want more content like  this from career foundry just subscribe and hit  

the bell to be notified of new videos this  video is part of career foundry's free ui  

short course if you'd like to follow along  with the lesson plans just go ahead and click  

the free sign up link in the description below  let's dive in and get started so first what is  

a wireframe consider the role of an architect  before they start designing a beautiful home with  

granite countertops and a white picket fence  they need to create a two-dimensional blueprint  

of the structure for the home this blueprint  will help them visualize where the entrance  

and exit points are the direction people will  walk in and how each room will be best utilized  

it's a functional jumping off point for the  rest of the house's design think of a wireframe  

as a blueprint for digital products wireframes  provide a clear overview of the page's structure  

layout information architecture user flows as  well as intended behaviors these are done during  

the early stages of the product's life cycle all  the fancy stuff like colors typography images are  

omitted at this stage so that you can just focus  on the core screen elements and these can be hand  

drawn or created by a digital tool let's talk  about the value of wireframing getting honest  

feedback you can show it to stakeholders to start  getting some feedback really early on and see are  

you going in the right direction or is there  some input that's really critical at this stage  

you can also share this with users as well and  discover some pain points that allow you to make  

some smart decisions when you're iterating upon  your design wireframing allows you to also do  

some self critiques once you start laying things  out on a screen you can be like oh okay maybe this  

is a little too cluttered or maybe i'm missing  some critical key elements on the screen it's  

also cheap and fast if you have a paper and a pen  you can start wireframing without spending a penny  

this is the easiest way to test your designs  without spending a whole lot of time and money  

the further you go along with  your design and the more you  

put into it the more you get attached to it too  the harder it is to make iterations and changes

let's talk about the different types  of wireframes low fidelity is done in  

the very early stages and basic shapes  are more than enough to show the basic  

hierarchy of elements on a screen this can be  done with paper and pen or with a digital tool as  

well these are also typically done in gray scale  so black, white, gray, no colors at this point

the next stage is medium fidelity and this  is when you're feeling pretty comfortable  

with the content's overall structure you'll  definitely be moving on to a digital tool  

at this point and you're going to be a little bit  more detailed in your copy you might be adjusting  

the sizes of the components perhaps adding  a little bit of images at this point as well

the final stage is high fidelity screens and this  is the point where you're feeling really confident  

and good about your designs you've showed it to  stakeholders other team members you may have done  

some user testing as well and this is when you're  going to add the colors typography images all  

those branded elements to make it look like what  it's going to actually feel like when it's live

let's review a little bit of  mobile design best practices  

if you're doing any sort of responsive design i  highly recommend doing your desktop as well as  

mobile at the same time remember that your user is  going to need to tap on a mobile device with ease  

so you want to think about the sizing  of each element each element whether  

it's a button or a drop down needs to be  large enough to accommodate the fingertip  

also there needs to be enough space surrounding  it so that the user is not accidentally tapping  

on something else this is referred to as touch  targets which we'll be reviewing tomorrow  

now let me introduce you to some ui elements ui  elements are the building blocks used to create  

apps and websites they're individual  parts that provide touch points that  

guide the user throughout the different pages  there are four main categories of ui elements  

number one input controls number two navigational  components number three informational components  

and number four containers let's  look at these a little more closely  

input controls allow users to input information  into the system these can be forms buttons  

dropdowns etc navigational components allow  a user to navigate an app or website these  

can include a hamburger menu or a tap bar  informational components share information  

with the user so something like a pop-up box or  a progress bar and containers just hold content

together now it's time for the fun part creating  our first wireframes for this task you'll need  

a pen or pencil and some paper and honestly any  paper is fine as long as you can see your sketches  

clearly when drawing your first wireframe think  about that first impression you want your users  

to have a few things to consider are how big do  you want your buttons and where do you want your  

logo also do you want your imagery to fill  up the whole screen or just half the screen  

make sure you're sketching everything so  title subtitle even the words on the buttons  

and if you mess up don't worry this is the  time to do it go ahead and make as many  

rough sketches as you need in order to  feel confident and happy with your designs  

now it might not look so nice you do  not have to be a great drawer but this  

wire frame will serve as your reference point  when you start designing your digital screens  

once you're done go ahead and put it somewhere  safe maybe take a picture of it and we'll refer  

back to it in tomorrow's video and with that it's  a wrap for day two wireframing may seem really  

simple and basic but we need this structure  before we can move on to some of the more fun  

stuff like colors and typography understanding the  wireframing process is such an important aspect of  

the design process so it's really important to get  into the habit of sketching out your ideas first

so hopefully this video has given you a better  understanding of wireframing and its importance in  

the design process this was lesson two in career  foundry's free ui short course sign up via the  

link in the description below if you've already  signed up for the short course and you're watching  

this in the tutorial pages make sure to keep  reading the tutorial page for this topic you'll  

find more information and tips if you've enjoyed  this video hit the like button and subscribe to  

see more UX UI content like this and if you have  any questions on user interface design or any of  

the video topics please feel free to leave it  in the comments below and we will get back to  

you as soon as possible in the next video i'll  detail how to start creating shapes in Adobe XD  

how to build out the digital framework for our  product and how to create a logo see you then you