Transcription
How to blend a website structure behind is a partly simplistic question. Actually, lies the success or failure of a website creation project. So, stay tuned if you want to make a website creation project. This will close.
Hello, I'm your host, Casey. No, I'm a digital alchemist, and today we're going to see how to plan a website structure so that your website creation project can actually be completed. Maybe not all, but many roads lead to Rome. So, this is not the only way to do it. With a few years of experience, I'm sharing with you a simple yet effective way to tackle the task. But before we hop on the computer, let's see what's at stake.
One, why is the website structure important? Planning is crucial when it comes to creating a website, especially if you're charging for it. But even if you don't, you need to know what you're going to have to build in order to know the resources that you should allocate to the project. And we're talking about human resources, but finances also. And it all starts with a plan. Now, would you consider building a house without having some kind of plan? Well, it's the same for a website. The more time you spend outlining how the website will be structured, the less surprises you will get when it's actually time to create the website. Now, once again, if you're building a website for yourself, you may lose this time, but if you're charging for it, you will lose money and possibly a lot of money and time also.
Two, which tools do you need? Now, you can use pen and paper if you wish. Or, if you prefer to do it on the computer, you can use free tools such as Notepad on Windows or TextEdit on the Mac. Now, if you want dedicated tools, there are plenty. But to be honest, I prefer to use something like Photoshop or even better, Affinity Designer, which I've already talked about a lot on this channel because I love Affinity products and I'm not being paid to say that. Let's be clear about that. Now, if you don't have any of these tools, you can still use the, which is completely free.
Three, the brief. Identify the needs. The brief is very important because this is where the outline of the website starts. You can make it as long and complicated as you wish, but I like to keep things simple. So, basically, what you need is: First, gather two stakeholders. Now, if it's just you, then you're already there. But if there are several people that have their say, make sure you plan a meeting ahead of time. Next, when the meeting comes, start brainstorming. For example, what type of content is absolutely crucial on the website? What type of content would be nice to have, while not essential? What actions do you want the users to perform? Now, if possible, interview the people from the company, but also customers or potential customers. Also, make sure that you think about the user experience, and you see what I mean in a moment.
Four, check the competition. Once you've got the initial brief, make sure that you Google the keywords for which the company wants to be found. And I'm talking about long-tail keywords. Now, let's take an example. Let's say that you'll be building a website for a co-working space. So, you type something like "co-working space plus the name of the city" and possibly even more keywords. Now, look for the top websites and start analyzing the content and the structure that they have. If they're ranking on the first page of Google, they must be doing something right. Now, SEO is much more than that, and that's beyond the scope of today's video, but it's important to take it into consideration. But also from a user experience and logical point of view, it may give you a different perspective than what came on from the initial brainstorming session. Compare the results of your analysis to the website structure that initially came out of the brainstorming session and make the necessary amends. If your client does not understand why you want to change the initial structure, the competitors' analysis will bring objective points to the table in the interests of the client. Now, I'm not talking about a long and detailed analysis, but you should definitely take the time to study the competition if you're creating the website for a company. At this stage, you will know exactly what the website will be about, and it will help you evaluate the costs and the time frame of the project.
Five, reorganize the structure with the end user in mind. Now, you should try to limit clutter as much as possible. And in that perspective, try to organize the navigation of the website so that the first level has no more than seven elements. No, well, because our short-term memory apparently feels better when there are less than seven elements. Now, if you know me, you know that I like to teach with concrete examples. So, let's build on our co-working space example. Let's imagine that the client is a new co-working space called CoWork, and they want us to create their very first website. Let's take a look.
So, the initial brainstorming session is done. And I went into Google and looked for "co-working space London," for example. So, I found a few websites. And one of these is this one here. And I matched that with the initial brainstorming session. So, for example, they have locations because they have multiple locations. And in our example, it's actually the same thing. And during the brainstorming session, they didn't really think of separating the pages, but then they wanted to put everything on the same page. Now, we look at this website. It's actually better for SEO to have several locations. So, that's one of the ideas you could match in the final draft.
So, if we take a look, I'm using Affinity Designer, but as I said, you can use Notepad, TextEdit, Photoshop, whatever you want. Anything you want, basically. And I have a list of the pages that I need. So, what was supposed to be initially like five pages, you know, like most clients will will come and say, "Yeah, just one easy website, very simple, five pages." But then it becomes more like 20 pages. So, we have Home, Contacts, About, Team, Locations (which is the page where all the locations can be clicked on), then we have Location One, Location Two, Location Three (for example, let's say we have three locations), and we have the Rates, then we have the Call to Action with the Offer page. We'll talk about that in a moment. We have the Blog. Then for a blog, we need categories, single posts, of course, Privacy Policy, Cookie Policy, Terms & Conditions, Legal, Sitemap, Search Results, and 404 page. More or less, that's all we need in a nutshell, but I'm sure I left some of it out.
Now, as I mentioned earlier, you need to take into account that it should be a maximum of seven elements on the first level of navigation because you don't want people to be overwhelmed when they come to your website. Now, if you don't believe me, take a look at this. Let's imagine that that is the navigation of the website because this is all the pages that we need, except for the 404 page, the search results, the categories, and a single post. If you don't know what a 404 page is, basically, it's when you try to reach an address that doesn't exist or doesn't exist anymore. So, it's an in-between page that can redirect you and tells you that you are lost.
Now, back to what we were talking about. Just imagine that you land on the website and this is the navigation that you see on top. Well, that's way too much. I mean, I don't know about you, but my brain is like, you know, where do I look? So, that's what I meant when I said we need to take the end-user into consideration. We need to reorganize the structure. So, I took all of those pages, it's a big soup, and I changed it to that. So, we have our header and our footer. And basically, what people will see is those five elements and the sixth one here. Now, I said you can go up to seven elements. You don't have to go up to seven elements. If I could have four elements, it'd be even better. But let's say that I need those five here and the call to action here. So, basically, I've set up my home page. And then I decided to have a top navigation called CoWork, which is the name of the fictional company, client company. So, with CoWork, and within CoWork, we have About, we have the Team page, and the Contact page. Now, there could be a controversy for the contact page because most people are used to having the contact page either on the right-hand side on the top or in the footer. Now, in most cases, I would say, "Yeah, of course, I would put it there." In this case, imagine thinking me about a real-life project where I had a customer, he didn't want people to keep on calling and contacting because he didn't have enough staff and they were on the phone all day long. He wanted people to fill in a form and actually people to come in in the showroom where he was. It was not a co-working space, but he had a showroom. So, that's where this idea came from. Otherwise, just put the contact there. So, contact is here. Then we have the Locations page, and then you can go to each location right away. Then you have the Blog. Then you have the Rates. And then we have the "Try Free Offer." And basically, that's why I just explained. The "Try Free Offer" is a page with a form. And basically, for this example, it could be that people can get a couple of hours free in the co-working space or a full day free. So, it's like a discovery offer. And when they click here, they will land on that page.
Next, we have our footer where we would have the legal page. Then we have a privacy submenu, and when people click on the landing page, where they can see the Privacy Policy, the Cookie Policy, and the Terms and Conditions. And then we have the Sitemap, which is quite important for SEO purposes. Okay, so this is what it looks like in text. Now, if you want to go one step further, you don't have to do that, but I finally help. Oftentimes, I go into something a bit more visual. Now, this is not completely accurate because when you look at the navigation, Home is at the same level than the other pages. But basically, the way I do it is that, of course, Home is always the main page. And then you have the pages that you can reach straight from Home. So, this is the first level in the navigation, as you can see here. And then we have the sub-pages. And in the navigation, if we go back, Blog is only Blog, right? It's only one page. But the truth is, you have the Blog. Then on the Blog, when you land, you get in this example, we should be able to click on different categories. It could be events, it could be, I don't know, classes, many things that the company would want to show. And then within the categories, you have the posts. Then we have our Rates. And the rest of the navigation. And once again, here we have a Thank You page. Now, you don't have to have a Thank You page, but for tracking purposes, it can be interesting to send to the Thank You page. So, basically, the Thank You page would not appear in the navigation, but it's there. And then we have other pages that are not accessible right away from the navigation, like the 404 page that I mentioned earlier, Search Results (if there was a search function, which in our fictional case would be the case), then we have the Legal, Privacy Policy, Cookie, and Terms and Conditions that we saw in the footer.
Now, in real life, how does it translate? So, this is how it would look. This is just a wireframe prototype, so it's not a final design. But we have the Home page here. Then you have the CoWork top level. Then we have About, Team, and Contact. Then we have Locations. Then we have our Blog. Then we have our Rates. And we have a Call to Action. Of course, in a real-life scenario, you want to have enough contrast so that the Call to Action is visible and supportable. So, basically, the idea is that it must be very simple for people to find the information. If you want to know the pricing, you see that Rates is in the top-level navigation. It could be labeled Pricing or Rates, it depends. Blog, because let's say that for our client, it's important because they have a content strategy, so they want people to also click on the Blog if they don't land there from Google. The Locations is very important because if you're going to be a customer in a co-working space, you want to be sure that the co-working space is where geographically you want to actually go. So, that's very important. And then things like About Us, of course, it's important. But because we want to have less than seven elements, it was important to group some of the topics under sub-navigation. So, here we have About, Team, and the Contact. And I explained why we put a contact there before.
Now, if you go to the bottom of the page right here, it's very small, but let me make that bigger. We have the name of the company. Then we have the link to the legal page, leading to the privacy top page, and to the sitemap. And if we take it to the next step and look at the design, this is how it would look, for example. So, we have a Call to Action visible. Then we have another Call to Action here. And basically, the idea is to make this very simple so that people actually stay on the website and they can easily spot and find the info that they need.
So, I hope that this video showed you how to plan a website structure and that it will help you for your projects. Now, if there are other web design and website creation topics that you'd like me to cover, please let me know in the comments. And by the way, you'll find the companion blog post on my website, casenow.com, and of course, the direct link is in the description of this video. Now, if you enjoyed this video, please like it, as it really, really, really helps growing this channel. And if you know someone that could benefit from it, please share it. Now, if you're not a subscriber yet, don't forget to subscribe to my channel and smash the notification bar so that you don't miss anything. Now, if you want to brand, market, and grow your business in the digital age, then make sure you subscribe to my email newsletter so that you never miss this share of digital alchemy, as well as tips, tools, services, and case studies that can help you grow your business online. So, that's it for this video. I hope to see you in the next one. And in the meantime, don't forget to invest in your success.
[Music]
[Music]