frame

Designing A Website — What To Think First.

Inspiration, Planning Ahead, Web Design

The World Wide Web and web technologies have only been around for a short time ( in comparison to human existence), but they have developed quickly. So it can be a little overwhelming when someone, new to the media, wants to create a web-page. When looking up HTML and CSS, a lot of the information pitches new developments such as HTML5, CSS3 & JavaScript of JQuery functions. All the things a developer ‘needs’ to make the best portfolio they can. While these tools may help, they are not necessary (especially at first). You have to be willing to start with the basics.

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.

 

 

 

Site Map

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.

Laying Out Relationship of Pages

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.

Function

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?

Wire-Frame

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:

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!