Today, I’m going to be talking about UX sketching. It’s a technique that I use for sketching out basic wireframes for websites. I’m going to show you a beginner’s approach because I feel like there’s so many tools out there on the internet that are very useful when it comes to wireframing and drawing out the page layout structure for your website, but I don’t want you to get caught up in the tools.
Personally, I am a tool geek. I go online looking up Sketch vs Illustrator and these other tools you can use, whether they’re high fidelity or low fidelity. However, whether you’re just getting started or a seasoned designer, it really helps to just bring out the old pencil and paper. It helps to just get away from the computer and take the time to just sketch your page out. I’m not the best artist, but as you get practice, you can get better at doing your wireframes.
Watch the video:
How can you use UX Sketching to plan out your website or web page?
I’m going to show you a wireframe that I have sketched out for my website, DannyJLiu.com.
In my sketch, I’ve got the homepage on the left. In it, I’ve got a little hero image and some text to describe who I am and what I’m about. Below that, I’ve got 3 Xs to signify where I could maybe put some of the 3 topics that I cover or some background on my offer.
The offer will be on a ribbon on the home page. Essentially, it will be a call to action, like signing up for my newsletter. As of this post, I have an opt in offer on my homepage for a download on how to create your website and launch it fast.
On my sketch, I have an arrow pointing to the opt in form from my homepage. This is a click model. The form pops up on the screen when someone clicks on the offer. On the opt in form, it will ask for the subscriber’s name and email, and then, it’ll have the Submit button. There may be an image here, maybe an image for a website or my own personal image if I’m looking to really put my brand out there.
Next, I’ve also got a sketch for my About page. I have a link in my homepage right before the footer links going to my About page. I’ve got a synopsis of who I am in a few sentences and an image. Then my About page has the style that I want for each of my pages and posts. I have a hero background image and an avatar overlay for my picture with some text at the bottom and another call to action.
What should you include when UX Sketching for your website?
You want to make sure that every page has a call to action. Every visitor is a potential subscriber. You don’t want to just leave your audience after they’ve read your page. So, you want to have a call to action in every page.
In my sketch for my pages, I’ve got several calls to action. I’ve got the offer on my homepage and then the link to go to my About page. The social links can also be considered calls to action, albeit subtler, because I’m not telling visitors to click on them specifically. You can include that text in your design, if you would like. The important thing is that you have a call to action in every page.
This is just a very simple wireframe. These things can get very complex, but this is just a rough draft of what I currently have.
Why should you use UX Sketching when planning your website?
Your sketch is a rough draft of what you would like to have in your website. The elements that you have in your sketch can get remixed, just like what I’ve done in my website. I have now added a lot more pages that are part of the primary navigation in my homepage that were not initially part of the wireframe.
This is why wireframing is important because you don’t want to get caught up in the tool.
A lot of people get caught up in the tools they’re using, like page builders or WordPress. They don’t make a lot of progress because they got stuck on how to position an element or the CSS for a picture.
These things are important when you get to the UI phase of your website and designing the appropriate branding. However, we’re talking about approaching this in a lean UX and design approach. This means not wasting any time and being agile. This means putting out the information architecture and the page flow of what each individual user is going to touch on based on the interactions that they make on your page.
This is just an overview of what you can do with wireframing. If you’re setting up a new website or just getting started, I highly recommend that you use wireframing techniques. Step away from your computer and think about the page structure that you want to create. Take 3 to 5 websites that you really like, look at their homepage, and just start there. Sketch out how you would like your homepage to look like from a rough level.
I hope this has helped you in getting started with planning for your website. If you have any questions or thoughts regarding UX sketching, leave them in the comments below.