This transcript was generated from the episode audio and may contain minor errors.
A caller building a website wants to know how to wireframe the website. What does that mean? How you actually wireframe a website without getting lost in the details? Wireframe just refers to kind of the outline of the website. If you want some photos, if you want video, if you want text, what does the navigation of the website look like?
Just kind of thinking through the architecture of it. And when you make a website, especially if you're trying to do it from scratch, it can feel overwhelming. You want to get things right before you start designing. And one of the best ways to make the process easier is to do this, to actually create a wireframe. It gives you a visual blueprint to help you plan the layout and user experience.
Now thankfully these days there are so many tools that just make this process easy. So it's going to be a pretty easy question. Hopefully it can help anybody else out there who wants to make a website. Never done that before or if you want an easier way to make websites than you've used before. Let's talk about why wireframing matters, which tools to use and how to make the process smooth and stress-free.
Those are two good things, right? Stay tuned for the detailed question and my answer. Hi Chris, I'm Liam from Seattle. I'm working on a side hustle building a website for a subscription box business, but I'm stuck on how to structure the site. I've read that wireframing is a good first step, but I don't really know where to start or what tools to use.
How do I create an effective wireframe that helps me design a user-friendly website without getting overwhelmed by the details? Alright Liam, so wireframing is in fact one of the smartest steps you can take when building a website. And of course if you're working with a designer they can help you with this and do it for you. If you're working on your own or using a tool like Squarespace, WordPress, etc, then you might want to understand what a wireframe is and isn't. So in essence it is a basic sketch-like blueprint of your website's layout.
It's not about colors, fonts, or graphics, any of that stuff, it is entirely about structure and functionality. You can think of it like an architectural plan for a house. You're deciding where the walls and doors go before you pick out the furniture, before you make a lot of those other decisions. So a good wireframe helps you visualize the flow of your site, where visitors land, how they navigate, how they take action, like sign up or make a purchase. So to do this, a couple different tools.
Figma is free and paid, I just used the free version, it's been great for me. Adobe XD, also free and paid. And then finally here's a fancy tool, pencil and paper. That's right, if you're feeling overwhelmed by software or an app, sketching your website out by hand, again, not the colors or anything, just thinking about the layout is a great place to start. And then you want to focus on core pages first.
You don't actually need to wireframe every single page, you really want to focus mostly on the home page, like how will visitors navigate, what's the first thing they see, then maybe some product or service pages, like how are you going to showcase your offerings, where does the pricing go and so on. So you just focus on the really basic elements and then this helps you kind of go to the next steps. Maybe you want some feedback, maybe you want to move straight from wireframe to design. If you're working with a designer on Fiverr or Upwork, somebody you've kind of contracted with, you can send them your wireframe and say, I want the website to look like this. And then they can go from there, you might save a step in the process, you might get something closer to what you actually want, as opposed to somebody else's vision.
So it's a step that will take maybe a couple hours, you know, it could take more, of course, but a couple hours should be able to give you a basic version. And I think it can help make a better result in the end. So that's how you do it. Simple tools like Figma or Adobe XD, I'm sure there's others as well. Or you can just sketch it out, pen and paper, pencil and paper or pen, if you prefer.
Take a picture of that, send it to a designer and then go from there. That's it. Listeners, if you have a question, sidehustleschool.com/questions, you can also access the complete archives of 3,000 plus episodes, all for free on sidehustleschool.com, and you can subscribe or follow wherever you get your podcasts to get new episodes, which come out every single day. That's it for now. Thanks for listening.
My name is Chris Guillebeau. This is Side Hustle School.
