What Are Wireframes?3:42 with Hope Armstrong
Whether you're a designer or not, wireframing is an important skill to have in your toolkit. Wireframes are a valuable tool for visualizing user experiences, iterating on ideas, and sharing ideas with others.
- Wireframing: A drawing which visualizes the elements of a website or mobile app
- Creating User Experiences course - Recommended for students new to the design process. This course teaches you how to make design decisions with users in mind.
[MUSIC] 0:00 Hi, I'm Hope. 0:09 Let's learn about wireframes. 0:11 Whether you're a designer or 0:13 not, wireframing is an important skill to have in your toolset. 0:14 It's beneficial for product managers, marketers or anyone else with ideas for 0:18 a website or mobile app. 0:23 Wireframes are a valuable tool for 0:25 visualizing user experiences, iterating on ideas and sharing ideas with others. 0:27 A wireframe is a drawing which visualizes the elements of a website or mobile app. 0:33 Wireframe fidelity ranges from rough pencil sketches to polished renderings, 0:38 but all wireframes share a common goal. 0:42 They focus on the structure and 0:45 functionality of a web page instead of the visual design. 0:46 This is what makes them particular useful in the early stages of a project. 0:50 They allow you to focus on the concepts and quickly iterate through your ideas. 0:54 Generating several rough ideas is important because your first idea is 0:59 usually not your best idea. 1:03 And you want to get feedback before sprinting in the wrong direction. 1:05 It's best to quickly generate low effort wireframes, decide on a direction, 1:09 and then flesh out the chosen wireframe into a polished mockup. 1:14 The first important concept to grasp with wireframing is that the initial focus 1:18 should be on the core structure and functionality. 1:23 When you start to imagine your design, you may get carried with how it'll look. 1:25 Instead of focusing on the visual design, 1:30 this is the point where I encourage you to sketch wireframes. 1:33 Let's imagine a scenario. 1:36 Imagine you're ready to build your dream home. 1:38 Overflowing with enthusiasm, you construct several vision boards filled with 1:41 fabric swatches, color chips, and inspirational magazine clippings. 1:45 When you take this stack of ideas to the builder, 1:49 they direct you to begin the planning with an architect. 1:52 The architect initially disregards her inspiration folder. 1:55 She begins planning the core structure of the home, starting with the floor plan. 1:58 The floor plan is drawn and shared with you for 2:03 feedback, in the form of a blueprint. 2:05 The blueprint can be changed and 2:07 finalized without first deciding on the curtain fabric or the paint colors. 2:09 Think of wireframes as the blueprint of your website or mobile app. 2:14 All the visual details, all the stuff on your vision board 2:18 will come later once you have a solid foundation. 2:21 Now that you have a general understanding of wireframes, let's see how they look. 2:25 Here's a wireframe I created in Sketch when I was working on a refresh of 2:30 the Treehouse home page. 2:33 A wireframe is essentially a drawing of a user interface that's devoid of color, 2:35 graphics, and styling. 2:40 It communicates the major components of a screen, such as sections, 2:42 buttons, text, videos, and any custom modules. 2:47 It's predominantly comprised of simple shapes, such as rectangles, 2:51 which represents sections of content and serve as placeholders for images. 2:55 Rectangles can also represent blocks of text. 2:59 Visualizing the major components helps define the layout and 3:03 determine the available functionalities on any given screen. 3:06 Seeing the layout in this way helps clarify the hierarchy of content so 3:11 the users can navigate the information easily. 3:15 Figuring out what functions will be available to the user on each screen 3:18 is also helpful for your team to define early on. 3:23 Here's a wireframe I drew on paper. 3:27 This drawing was for a landing page. 3:29 I was designing a widget that allows expiration of the library content to 3:31 perspective students. 3:35 These are just a couple examples. 3:37 Later, you'll learn about other types of wireframes, too. 3:39
You need to sign up for Treehouse in order to download course files.Sign up