Why You Must Always Start Your Website With a Sketch

Brad Hussey
A free video tutorial from Brad Hussey
Marketing Consultant at FreelancingFreedom.com
4.5 instructor rating • 11 courses • 490,339 students

Lecture description

Any professional web designer or developer knows the importance of starting a project with a simple sketch. The technical term for this is "Wireframing". In this lecture, we dive into what wireframing is and how to properly get started.

- - -

Please note:

You may be wondering why it seems you've skipped a few lectures based on the Lecture # of this video and the previous video — Don't worry, those lectures have been moved to the very end of the course. Why? They're not entirely important for learning how to code WordPress websites. This new arrangement just lets you get into the goods quicker!

Learn more from the full course

WordPress Theme Development with Bootstrap

Learn how to confidently develop custom & profitable Responsive WordPress Themes and Websites with no prior experience.

12:02:51 of on-demand video • Updated July 2016

  • Have the skills to start making money on the side, as a casual freelancer, or full time as a work-from-home freelancer
  • Easily create a beautiful HTML & CSS website with Bootstrap (that doesn't look like generic Bootstrap websites!)
  • Convert any static HTML & CSS website into a Custom WordPress Theme
  • Have a thorough understanding of utilizing PHP to create WordPress websites & themes
  • Feel comfortable with the process of turning static websites into dynamic WordPress websites
  • Fully understand how to use Custom Post Types and Advanced Custom Fields in WordPress
  • Allow your clients to update their websites by themselves by creating user accounts
English Hey everybody. Welcome back to Boost Your Income with Bootstrap To WordPress. We're in an brand new section now called Information Architecture where we focus a little bit more on the specific blue printing details of web design and development. This specific lecture is called why you must always start your web design with a sketch. [MUSIC] All right, so let's talk about sketching or, more specifically, let's use the proper term, wireframing. Wireframing is an important step in web design, and it's often overlooked. Think of wireframing as the blueprints of web design. Let's use a different sort of analogy here. When you are building a house, you don't just start taking wood and just hammering it together. If you have house building experience, you know that's not right. You don't just do that. Because you overlook things like where's the electrical going to go, where are we going to put the plumbing. How is the plumbing gonna run through the house? Where are the doors? How are the doors gonna open? Which direction? Does that door get in the way of this? Or is there something blocking that entrance? What about windows? Where are the windows gonna be? Electrical outlets? Things like that have been very important steps. The layout of the house needs to be blueprinted and sketched out. Before you even pick up a hammer and a nail, the same goes for web design. The blueprint, or the wireframe, needs to be laid out and sketched out. Before you start opening Photoshop or writing a line of code. The reason why is, it lets you work out all the details before you get too far into the project. So, if you just jump into designing and you don't even think like, this is where we're going to put the carousel. This is we're gonna put the contact page, content, it's fine over here. We'll throw a sidebar there. Lots of websites have that. Great, we're good. You don't even think about usability. You don't think about the architecture. You don't think about important elements because your head is somewhere else. You're in a creative process. This is a more logical process. You need to see the steps, you need to see the outline, and you can work out details before you even get farther into the project. The reason why is because you're just looking at the black and white boxes and lines that you sketched out on pen and paper or in Photoshop. You're just sketching out just a rough draft, and it's easy to say, scrap that, that doesn't look good. Let's try this layout. Let's discuss that with the client. What are we putting a sidebar there? What kind of content goes there? Where should we put this? Where should we put that? It's easy to modify a wireframe, cuz you're just sketching something out on pen and paper or in Photoshop. It's just, it's really easy to hash out the details. A few of the reasons why it's important to wireframe is because usability becomes important. You focus on where the links are, the navigation structure. Certain elements. What is more important? Why is that placed on the page? Let's think about the usability a little bit more. And that's what wieframing lets you do. The design process also becomes a bit more easy because you're just sketching out your layouts and your design elements on paper or on Photoshop. And once you've kind of worked through the perfect layout, you can then jump into Photoshop and you'll already know what you're designing. You're not just thinking of something off the top of your head as you are adding colors and fonts and background images, and all this and all that. So basically, it's an important process that's often overlooked, because people think of it as boring, or not important. But it works. Whenever I sketch a website layout out, I can see, oh, that doesn't make sense. Why am I doing that? Or maybe this needs to be in a more important spot or that's not gonna work. Or it's easy to have an iterative process with your team members or with your client and without jumping into a full design and having your client say I don't like that. What if we switch something up here? Then you're putting way more work in than you need to. If you just have boxes and lines. You can drag and drop stuff around no problem. Because you're just sketching stuff out. It's easy. It's a very easy and simple process that is fundamental in the success of your project. So now that we've covered that, let's jump into the next lecture. I'm gonna show you a couple resources that you can use to wireframe. That professional web designers and developers use to wireframe. I'll see you there. [MUSIC]