But today I don’t want to start with the basics. Today I want to discuss what you start looking at before you look at and learn code. In the BVIS program we need to create a website as a final project, and while I have done this before, and have a feel for the beginning process, I realized not a lot of online material teaches the process before the code.
What am I Making?
We just established we want to build a website, but you can have more then one type of website. For my purposes I will be creating a portfolio website. But maybe you are making a website to advertise a business, to sell a product, to share news, fashion or general information. Regardless of what you make this is where you start to brainstorm about your needs, your audience and functionality.
Once you develop a general understanding of your needs, you can lay out a Site Map. A Site Map allows the designer (or programmer) to understand the relationship of each of the pages. Below you can see my site map for the portfolio website I plan to create. The Home page will have a navigation bar which will link to four pages, 3 internal and one external link( ‘BLOG’ ) . The sitemap is supposed to allow for visualization of depth of within your website.
Do you have a website you want to look at to understand this better? Try xml-sitemaps.com. I was able to generate a sitemap for the site where my future website will be posted. This program generates a list of the pages and the subsequent directories with each page inside ( starting from the root of a site). Some people may understand this text list more then then above box method. Which ever way you lay out the information, make sure you understand how one page will relate to another. This is important before setting up links within your site.
Most likely you thought about functionality before setting up your site map, but double check it. Before you set up your wire frame make sure you know what each page is going to be doing. How do you get to it? Is it located within the correct hierarchical format? Look at what groups of information have together. Do you have too much grouped together, if so spread it out and create more pages. Do you have too little grouped together, try condensing your information? Do you need more information, less information?
Now you can start to visually layout the site. Over all you want all of the pages to fit the same layout to make sure they flow, and your audience ( the user ) always intuitively knows where they are. There is no style at this point, just some spacing and understanding of where functional things go ( buttons) and where content will be places ( Main Tout and Side Tout).
The second wire frame has a little more detail to show the relation of how a subsequent page will follow the basic wire frame.
Once you have created your wireframe, you may realize that your site map has to much or to little information, or maybe there is something that you need to change. Don’t be afraid to go back and REVISE!
You Have Done It!
I am sure you are anxious to build you site, and while you are one step closer, you will probably want to think about design next. What type of color scheme do you want to use? What font? Do you want any borders or patterns, and textures. But we will save that for later.
(Side note: While it is good to plan everything out (functionality and design), you could technically take the time now to build the over all site structure. Use W3Schools and other resources to create your site structure. When you build a site you will code the structure first and style second anyway. . . Yeah I know, I just contradicted myself. This process is difficult to make linear.)
There are other resources out there for planning the design of your website. Some of these links will ask more questions that may help to improve the functionality of your site:
- How to plan your website
- Beginner’s Guide to HTML5 &CSS3 (even though I said you shouldn’t just jump right in… I know some of you will be rebellious)
- WebsitePlanning (These are videos to help you plan, & it is free to register and watch)
This process is very much trial and error, definitely take the time to plan out your website. And save your process. Once you build your website you may realize you need to change a part of your site map. But don’t get discouraged, that is all a part of the learning process!
Good Luck & Happy Planning!