UX Design Process: How To Sketch Wireframes—Web Design Pt 1

This is the page that takes unknown people and transforms them into known users, and we at future. We have a ton of these pages and we’re going to be honest. They all stock. When I first stood our website up in the future, I needed to get things up and running really really quickly within a matter of weeks, so I customized the stock beam that I bought online and threw up a really really quick before it press website.

Now, over time, the site has been added on to it’s been patched, it’s been fixed, it’s been broken and, to be honest, it’s really time to pay this site some some attention, it’s time to show our digital homes love. Basically, what it boils down to is. We have outgrown what we have so we’re going to cover this overhaul. This complete site overhaul, really in-depth on this blog, but but before we get to that, I am revamping all of our inbound marketing stuff and the first thing on the list is to revamp our download pages.

So I’m going to take you guys through my process of redesigning a single web page. This process is quick, it’s easy! It’s down-to-earth and you guys can take my tactics and my approach and apply it to your work pretty much immediately. This is going to be a multi-part series, but today I want to cover basic user experience, design and wire framing there’s a lot of different ways to skin this cat. There’s there’s a lot of different ways to design user experiences, but every single time I always start off in the sketchbook.

Now before drawing anything, I like to figure out a few things. I just write a simple list on one side of the page and I look for answers to four prompts now. These prompts are our goals, the user goals, questions to answer and emotions to invoke now to answer these prompts I just jot down three or four bullet points under each one. This does not have to be fancy, especially if this is your first pass at the page.

I always say that the first asset at a website is always an educated guess, it’s okay to guess, just make it an educated guess. Once I have all my bullet points mapped out, I start sketching a basic wireframe. The question always comes up. What comes first? Well, the thing that comes first is an intersecting goal. If you have a goal that both your users need to accomplish, and your website needs to accomplish from a business perspective or the site owners perspective, that intersecting goal should always be represented.

First, on a website, in our case, the goal is to get a download. The users are coming to this page because they want to download something for free and we want to drive those conversions. So I’m going to prioritize the form above everything else and that’s the first thing that goes on the page. I also want to make sure that there’s an easy-to-read summary on the page, just in case there are those people out there who don’t read.

I don’t know you’re out there now once that first goal is accomplished, I want to start filling in content that fills in and answers the rest of the questions and the rest of the goals. In our case, this is educating the users you guys on what this download is and what you get. We also want to make sure that we’re answering all of the users questions or what we’re guessing the user would ask. It’s also really helpful to make sure that you keep in mind what assets you have at your disposal now.

Assets are images, articles illustrations, the creative things that make the website pop, and I know that we just finished shooting a promotional trailer for this download. By the way, this download is the first meeting worksheet it’s a fantastic resource to send magenta for that. First meeting with the client, which I got who’s, the link go check that out so because I know that we shot that article.

I know that I need to use it. I wan na make sure that I have space for that article on the page. Now. Remember you can put anything you want on this wireframe anything any idea that bubbles up in your head, but you want to make sure that you remember that somebody has to make this stuff. You know throwing 97 images on a webpage might not be the most effective use of your time. So you want to keep that in mind, make sure that you have those assets kind of in your head as you’re putting them down on the paper now.

I know that I have this article, but I also know that I want to do a couple of new mock-ups for this template and so I’m going to make space for those images in that article. I also know that I want to make this diagram. That shows the process of making a sale and where this kind of fits in in the process. So because I know that I want to make that stuff, I want to make sure that the page long story short don’t go crazy with photos and articles.

If you don’t have them make sure that you’re using the assets that you have or that you can make my life is dying here now there are you symbols that I use all the time larger headers are written out. If I can think or brainstorm of a really catchy title smaller headers are there these like narrow, rectangles that are really wide and short, and then text is usually just straight lines that are grouped together.

Articles looks like a box with a play button inside it’s pretty self-explanatory and then images it’s another box, except this time it has a big X across it. I mean you guys get the idea. You can kind of see the site come together in the sketch. You just want to make sure that you’re using the same symbols so that later on down the road when you’re looking at this thing four months later and somebody asks you hey well, what’s supposed to go there, you actually have an answer once I have all the Content mapped out on the page.

I go back to my list and I make sure that every goal and question has been answered. I literally go through and start checking things off and labeling these sections on my wireframe. This doesn’t have to be pretty. This is not a showcase of your sketching abilities. This is just a rough sketch, the wireframe of a potential webpage that you’re redesigning so just work fast and efficient, and get your thoughts on paper as quickly as you can.

That’s why I love starting in the sketchbook because of the sketchbook. This is where creativity is born and you just don’t get that same feeling that same vibe that same freedom from working on a computer and I’ve done it a whole bunch of different ways. With those wire framing kids throwing my own wireframe, I use the mobile apps for wire framing and nothing compares to pencil and paper. So once I’m happy with the basic wire frame in a sketchbook now it’s time to take it over to the computer next time we’re going to cover how to create a digital wire frame in a program like Adobe XD.

If you have any questions or want me to do a deeper dive of anything that I covered in this article, please let me know in the comments section below I cannot to read that stuff. I love when you guys, interact and I’ll be stocking the comments for a few weeks months, hours days as always guys. I want you to go out there and crush it. You got this like subscribe. We love you we’ll see you next time, oh and by the way, by the way, turn on that little Bell notification: this is a new blog and I don’t want you guys to miss any part of this series so make sure that you’re subscribed make sure that You hit that Bell so that way you get notified when new articles pop up – and you don’t miss a second of this thrilling website, we’ll see you next time.

Web Design
SEO Service
Google Citation Service
Contact us Today
559.300.9101