Category:

Guide

Duration: 5:40

24,376 views

198

Learn what wireframing is and how to use it in your web design projects. And why not make your life easy by using these ready-made wireframing UI kits: https://elements.envato.com/graphic-templates/ux-and-ui-kits/wireframe?utm_campaign=yt_tutsplus_-4Ngcx0gFcQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.

Think of a website wireframe like an architectural blueprint; you need to see it in two-dimensional black and white diagrams before you understand how to build the actual house. Similarly for a screen design, you can’t start building components in Figma or Sketch, or writing blocks of code, without knowing where the information is going to go.

At a deeper level, a wireframe is also very useful in determining how the user interacts with the interface. For example, wireframes can contain various states of button or menu behaviors.
a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Learn more about wireframing and how to use it in this video, or by reading the accompanying written tutorial: https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399?utm_campaign=yt_tutsplus_-4Ngcx0gFcQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_-4Ngcx0gFcQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_-4Ngcx0gFcQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -