Wireframes
Apply design frameworks to create low-fidelity wireframe deliverables.
Start
Key Concepts
Review core concepts you need to learn to master this subject
Wireframe
Information Architecture
Wireframe Elements
User Workflows
Sketching
Stakeholder Communication
Digital Tools
Wireframe
Wireframe
A wireframe is a low-fidelity representation of a digital interface that defines the content layout and page elements.
Wireframes
Lesson 1 of 1
- 1Wait a second… information architecture?! Didn’t I click on the wireframes lesson? Yup, you sure did! Welcome to our Wireframes Lesson! Here we will discover what wireframes are, why wireframes …
- 2For one moment, let’s imagine the most elegant website ever created. The website has a font that’s oh-so-perfect, has intuitive and accessible navigation, and has a world-class interface design. Pa…
- 3Before constructing a house, an architect creates a detailed blueprint. Builders then use that detailed blueprint as a guiding reference during the construction process. Without the blueprint, buil…
- 4A wireframe is constructed with simple, low-fidelity wireframe elements that can help communicate ideas during the wireframing process. Low-fidelity wireframe elements act as placeholders for hig…
- 5As a reminder, we know that through effective user research, we can have a better understanding of: * User goals and tasks for the application * User pain points, behaviors, and desires * Current …
- 6We have discovered that sketching can be an excellent method toward establishing content layout in a fast, efficient, and iterative manner. Sketching can be achieved through pen and paper and is pr…
- 7Wireframing is a foundational skill for UI designers across all levels of experience. Now that we are equipped with the knowledge and skills associated with wireframing and understand the role of w…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory