 this one's going to be on getting started with wireframes and this call is going to be focused more on the beginning of it on starting with it. It's going to be more for those that are looking to take their design skills and their design thinking to the next level. So what we're going to do is we're just going to focus on three key areas inside this workshop and we're going to keep it short. It's not going to be long. We're going to keep it short and then we're going to open it up for open participation but the key areas we're going to be looking at is first, what are wireframes? We're going to have to identify them. Then the next one is going to be why to use wireframes. So we need to have a good understanding of how wireframes work but also what benefits and value could wireframes give and then the next one is where to start if you are a brand new designer or if you are currently already designing but just want to improve and take it to the next level. That's what we're going to look at. All right. So first one, what are wireframes? So basically a wireframe, it's a blueprint for the website. The wireframe lays down the foundation and the structure for the entire website and the way I like to describe it to clients is that this is like the blueprint to the website. That's it. Pretty simple, right? I know we can go more into that right there but I feel like it's very basic. It's just the outline and the structure to the website and usually this comes right in the very first, one of the first phases of the design process. So let's get into the important part. Why to use wireframes and the wireframes, it has benefits and value to both the clients and to the designer and from my experience, I really feel like it adds more value to the designer especially. Now it improves the design process and it can make the design process go a lot more faster, a lot more streamlined. It's an extra step but sometimes when skipping extra steps could actually cost more time in the long run by taking this extra step, taking this little bit of time and building a wireframe doesn't take that much time. By taking that amount of time to put one together, you can actually save yourself time down the line. It speeds up the workflow. The next one, and this is where it really gave me a whole lot of benefit when I started getting into this process because before I started doing wireframes, I was just doing mockups on Photoshop. I didn't even know about Sketch or anything or I was just trying to build a website off the top of my head. When I started getting into the wireframing and looking at that, it got me to think more strategically and it got me to design more strategically because the wireframe, it outlines the structure but it's not about putting random parts together. It's not about just throwing a banner here, a call to action here, an image here. It's about really thinking strategically because if you think of a blueprint for a building, that blueprint has strategy in it because you got to have the supports in certain places. You got to have the way people are going to go through it, how they're going to navigate through that building and it's the same thing for a website. We're creating the blueprint for it and this is going to help to think about how are we going to navigate traffic through it? What is the purpose of this website? What is the goal to it? We established that when we're talking to the client, we get that part down. Now we got to think strategically how can we map things out and that happens inside the wireframing process and this starts to get into a whole other area of design which is design thinking. See, when I first started off, I thought it was all about making things look good and then of course we talk about goals with a client but what design really does is design is supposed to solve a problem and achieve something. By starting and going down this route, now we're starting to get into design thinking and once you open that can up, once you get to that mind frame, that opens up everything. That opens up something that is, for myself, I haven't been able to close because once you start to open up that thought process that we have to think of how are we going to solve problems and how are we going to achieve objectives with this design, it's not just about the looks anymore, it's about the strategy that goes behind it and with it and then we start to get into the areas of UI, the user interface and the UX because a wireframe, in my opinion, I feel a wireframe is part of the UI process. I believe it's UI because we're not looking at how something's going to look. We're not looking at the styles. We're not looking at trying to make something look really nice. We're looking at how our user is going to go through this, how are we going to strategically place content, how are we going to build funnels and so on. And now when we start to get into the benefits of how this helps the client, this really helps them. For me, I use this as a tool for collecting content as well. Now, I know everybody has their own system of collecting content. It's one of the big challenges in the onboarding process and working with clients. One of the big challenges is getting content because content is not easy. But I found that when I do a wireframe and I structure the content and I could even use examples of where to place the content, it gives the client a visual. It gives them something to work with. You could even leave notes in it. There's a lot we could do with it. But for me, it has really helped with the whole content collection process because also the content I'm not getting from the client is in all over the place or it is in huge paragraphs and essays and things like that. When I use a wireframe and I structure and I structure the content with it and I give that to the client and I allow them to use that for the content. It gives them an idea of what to write about because it was a process. It was a process of learning. But once I got into the design thinking and once I started focusing on UI and I started focusing on content strategy, I could start to see now what should we write about on a website. When I started building websites, I didn't know. I just looked at what other people are doing. By looking at what other people are doing, it's pretty hard because a lot of the times, the majority of the websites, their content just isn't done right. It's not done that well. So it could be looking at a bad example. So imagine a client. Imagine a client that hasn't gone through learning about wireframes, about user interface, about content strategy, about user flows, about building funnels, and about content strategy. How would the client know exactly what to write in what order and how to make the tone of their voice and those kind of things. So this really helps both us and the client with collecting content. Let me move this zoom thing down. And then it also helps explaining to a client why things are the way they are. When we have something like this, it's a lot easier to explain. Sometimes a client, they might look at it just purely aesthetics. They might look at it and they might have a request like, Hey, can we move this up to the very top? But we know by thinking strategically, by thinking on how user or their customer is going to navigate through their site, placing that at the top and moving something way down the bottom or removing something based on requests that we know is needed there in that process could actually harm the performance of their site. It could harm how users interact with their site, which ultimately harms their business. Because that mean a small percentage of a loss and conversion rates could be a large loss in business. So having this wireframe, putting it together, and then understanding the thought behind it and the strategy behind it. This allows us to go to the client and present this first, even before the design like here's a wireframe. Here's why we did what we did. Here's the flow that we're looking to do. We place this here after this element because we feel after they see this when they see this, you know, it'll it'll spark some emotional connection or you know whatever your reasoning is behind it. So the benefits and the value of having this in the process and taking this step is going to add a lot more on both sides for the designer and develop for the designer and the client as far as, you know, the overall value and end results of the project. And the end results also I'm looking at is the client experience. I don't just think about how the website will look, but it's also what is the client's experience through the website, through the whole process, through the whole process of working with you. All right, so where to start. And now some people might be already using design tools here and some might not, which is okay. And I'm pretty sure I'm pretty sure that uh, most people, most designers, even brand new ones are already kind of using wireframes because the best place to start is inside a notepad. It's inside a pen and paper. That is the best place I always start in a pen and paper and I start to doodle and I start to think because when I start drawing it out, let me get out of the screen share. When I start drawing it out, the thoughts and the thinking start to happen. The strategy starts to happen. That's where things start to come together. And then after I, you know, go through the notebook or even a whiteboard, I got a whiteboard back there. Sometimes I'll use that. And if you're working with someone, if you are, you know, lucky enough to be in an area, you might even have clients there. We could even go through the whiteboard with them. But the other one is going to be the big three after, and I call it the big three because these are the three design tools I feel web designers should work with because these are the industry standards right now. That's a sketch, Figma and Adobe XD. And I'm going to go ahead and do another screen share on it because there's a couple of different ways that we could start using it. Starting to use a tool, it takes a little bit of time just like elements or if you're here, you're probably from the elements or group or just like using WordPress, or, you know, any tool when you start to use it, it takes a little bit of time. But building wire frames with these tools is a great place to start because it allows you to get to understand it a little bit better. And it's a lot easier to start with a wireframe than it is with a full out design. So let me go ahead and do another screen share real quick. All right, so you could actually use templates. Sometimes if I'm in a rush, I'll pull out a template. And I will use that or I could use that as a starting point. Don't always have to start from scratch. You can build one from scratch, but I'm going to show you both one from scratch, and one from a template. Now here's like a template that I have right here. This one I got from UI 8. This is just one of the design tools I use because it helps to speed up the process a lot. And with these, what I would do is I just get an open file right here. Let me minimize this window. I'll get an open file right here. And then let me go ahead and start an artboard. You could actually just go in and start to copy and paste from there and kind of build it out because right now we're not doing the design, we're just doing the layout. So maybe I want to use a banner, maybe a banner like this. And then you could just keep going through to the next ones and just keep finding which sections you want to add next. We could go to our features. Maybe that's part of it that I want to add so you could put our features in there. And then you could piece together your flow. And it could be that easy and that quick doing it. And I believe there's free downloads that you could find online as well. What I do is and what I would suggest to do is try to get as many as you can and find the ones that work well with you. Find the ones that work within your workflow. Like I got a library that I use and I kind of dip into it. And I'll see like I got one that's a light version right here. And I'll just like see like, okay, this one could fit within the project. But if you want to start getting more to your own high fidelity ones, and the ones that you create, you could start doing something like this, where creating a wireframe, let me go to the homepage. Some of this was copy and paste. Some of this I just put in the text. And if you look closely, I put in the directions for all the content. So a big part I feel really big part for wireframes that helps out is the content strategy on it. So a client gets this, okay, we know we're going to put a subheader with a keyword up there. So we're also thinking about the SEO as well. We're going to put the tagline up over here. But then we're also going to put another keyword right here. And then I'm also showing how big and how much text. And when I walk the client through this, I walk him through this whole process. So I first show him like, okay, this is why we do this is like, for example, this project was about travel videos right here. So we are going to use like some sort of a map thing, we're going to use some flags right here, we're going to use a pop up. And then I walk him through the text and the content. And I let them have this and I tell them like, so like right here, we just want a simple small paragraph, we don't want a huge paragraph and we want to just write about this. And I'll keep going through and sometimes I'll even write my own content and my own titles inside there. But like right here, if we zoom in, I'll leave instructions, you know, here we could talk about how content is curated. You know, this is something that actually came from the client. I remember on this one, through our discovery, the client kept mentioning curated, that was like one of the key words that he wanted to use. Then also after this, you get the approval from the client. And it makes it a whole lot easier when you go to the design. So what I did with this was I got the approval from the client. We had to go through a couple revisions, but the revisions were so quick and easy to do. They weren't like changing the design or having to be super meticulous. It was more just changing placements and things like that. And then after that, we could go ahead and turn the same thing into the design. And it's the same exact layout throughout everything. And the client gives the content. And then we got an awesome website and a good relationship with the client that really enjoyed it. So let me go ahead and stop the screen share. Wow, that was only 20 minutes, if that awesome. We're getting the time down, guys. We're getting the time down because some of our calls took a long time. And some of us have long days designing and running our web creation business. So with that, we're going to open up the call. So if anybody has any questions, has anything to want to add, I know I just touched on the surface. I know we got some other experienced designers in the call. So it'd be great to hear for me. So that's it for me. I'll go ahead and open it up. Most definitely. Wow, that is a very good point. Very good one. Because sometimes too, the request might be way out there and be on the development and could figure it out before we even get to the designer development stage. Because I don't know if anybody's done this committed to building something that is like near impossible to build because didn't think about it beforehand. So that's an amazing point right there. I know, you know, I like I've done it too. I'm guilty of it. I think, you know, everyone is especially when using elements or but sometimes it comes back to bite me. Sometimes like my skip. Because when I could get a client to commit and approve a wireframe, it makes also the design park go a bit smoother as well. Because it reduces the chances of the client say, well, like being confused or being like, no, that's not what I wanted. Because we could always go back. Well, we went through the wireframe. This is what we're looking at. And yeah, it takes diplomacy. For sure. It takes it takes diplomacy because you get egos involved. You get and as a creative, my ego could get involved too. And it's happened in the past. And what I found is when my ego gets in the way, the person really suffering as a client, you know, we're here to help with the client. Then I started also to look at this as opportunities. So I've been in that battle. I know that battle. I know it all too well. It's, it's a challenging one. But I look at it as opportunity to network as well. So what I started doing is reaching out to them and like, Hey, what's what's talk about it? We'll see because we got a process. You got a process. We'll see how we can make our process work together. And I'll try to like, that's like the diplomacy part. And ultimately what I found is, you know, 95% of the time, they also want the same thing. You know, they want the project to go well, they don't want to look bad to the client. And when you get two vendors clashing, both vendors are going to look bad. You know, it just doesn't look professional. So what I do is when we get to the beginning, so we do like right now we're about to start a project. And, and, and the person starting the project with, he's somebody I clashed with before, but I learned how to work with him. And then we started partnering with projects. But you know, he's SEO. And it's like SEO first, SEO comes first content comes first. And what I do is I actually do the wireframes. I'm like, sure, let me help you out with that. We're going to go ahead and create the wireframes. That way we could place the keywords in the content where they need to go within the design. So I'm going to give you the wireframes first. And I just kind of be diplomatic about it. It's like a give and take. You know, I like I got to be a little bit flexible with my process. But that helps them to be a little bit flexible with theirs. And then throughout time, now like this SEO person I work with, dude is really good. Like him, he is like really good at what he does. And I trust him. He is somebody and with SEO, that's two things that's hard to find. Somebody that's good and that can be trusted. And I found him. So like now I prefer him to clients. He refers me to clients. We network with each other. And then we also give, you know, the 10% commission to each other. So sometimes to get a project, I might not even use and, you know, like, and he throws projects and it's a win-win.