What Is Wireframing? (A UI Design Tutorial)
Summary
TLDRIn 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
📐 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.
🔍 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.
Mindmap
Keywords
💡Wireframing
💡UI Design
💡Blueprint
💡Stakeholders
💡User Flows
💡Low Fidelity
💡Medium Fidelity
💡High Fidelity
💡Responsive Design
💡UI Elements
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
Ver Más Videos Relacionados
5.0 / 5 (0 votes)