To continue the conversation started in this course, with Drew and other user experience professionals, join Drew's Practical UX: Lessons from the Trenches LinkedIn group.
Skill Level Intermediate
- When it comes to getting an idea off of a piece of paper or out of your head, wireframing can be a great skill to have. Wireframing is essentially a blueprint. This blueprint can be visualized through a basic structure of boxes, lines, and different shapes. The goal of a wireframe is to have quick way of representing a webpage's information architecture in a rough layout design so that your team can quickly understand how you're approaching the overall structure of the page. In this episode, I'll show you how I approach wireframing and some tips I've learned along the way.
But let's first look at the benefits you can have by adding this step to your process. Helps your product and engineering partners visualize what could be on the page, helps you catch mistakes and issues earlier, helps you try out more than just one solution, helps you focus less on visual design and more on information architecture, which is very important when you're early in the project. Helps you plan better for responsive web products. If you haven't seen my video on box studies, then I'd suggest watching it after this one to get some more great tips on wireframing responsive web products.
These are just a few, but it's important to know that the planning you do up front can save you in the long run. Visual design is incredibly fun, but if your product doesn't have sound structural hierarchy, then your customers will suffer. Wireframes enable you to test this earlier and more often. It's easier to change the location of your navigation or how the content will flow down the page when you're dealing with boxes and shapes, but not so much when you have to move all your visual work along the way.
It can be very costly for you and your organization. Now let's jump into an example of a past wireframe I created and break it down. Then we'll walk through how simple it can be to start creating wireframes for your next project. Let's create a wireframe for a new webpage. In this example, it's for a new portfolio site I need to create for myself. I'd recommend watching Designing a Responsive Web Product to help assist you with the rest of the responsive design process. But for this example, I'm going to assume a few things.
We know that for a portfolio website, I'm going to need a section that says who I am. I'll also need a place where I can show my past work and my design process. And finally, a section about how to get in touch with me. So with this general sense of what I want to include in my design, as well as the content I want to include, I can begin. I'm going to take this time to sketch out two to three different concepts of what I could do. Now that I have my concepts sketched out, I can jump into Sketch App.
I created a wireframing template that you can download in the exercise files that can help kickstart you. It has basic grayscale tones and shapes that you can use. A pro tip: when designing wire frames, use a grayscale spectrum to represent visual hierarchy and more important details. You can also tell a lot about a wireframe by the use of gray tones. Now let's begin to recreate what we sketched out on paper. As I begin, I'll first draw out the containers that match my concepts.
Think as if you were an engineer and you needed to have three div containers that would hold this HTML. Now that I have the containers, I'll start to add more shapes that symbolize other types of objects. For example, I'll use a circle with a darker shade of gray for an image, and then I'll use rounded rectangles to symbolize content. Since I planned ahead of time and thought through the content of the page and started sketching, I don't have to sit and stare at my computer and try to play guesswork.
I can just build and let my designer instincts kick in to start building this. I want to let you in on one more little pro tip. When you design your wireframe, consider designing it on your existing gradient for your product. This will help you design at true scale and will save you countless hours of having to rebuild your site structure when you get to high fidelity. I've seen designers not design at scale, then have to recreate all their elements again. This is waste of time, and I'd highly recommend just wireframing on your grid.
After I create the wireframe, I would then share it with my engineer and product parnters to gain alignment and come to a shared perspective of how we'd like to move forward. This process happens very quickly. Sometimes this could be a few iterations and it's time to move forward, or it could be a month of work because you have 30 to 40 screens you have to work through on four different platforms. After I iterate on the concept, I'll get plenty of feedback. I move forward to the next phase of bringing this design to life through using color, real content, and graphics.
The truth about wireframes is anybody can learn how to create them. I've seen engineers and product managers sell their ideas through a basic wireframe. So try not to count out your peers from helping share their thoughts through a method like this. The key is for this process to be quick. It's also important to make sure that you get your engineers involved early on these wireframes so they can give you feedback. If you'd like to continue the conversation or have more questions about wireframing, then I'd love to discuss them with you.
Find me on Instagram at abridewell, tweet at me at abridewell, or you can post the question on our Practical UX Weekly LinkedIn group. Thanks for watching, and I wish you the best in your next wireframing exercise. See you next time.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Q. Where can I ask the author questions about practical UX?
A. To continue the conversation started in Practical UX Weekly with Drew and other user experience professionals, join the LinkedIn group at https://www.linkedin.com/