enavu webdevmania tutsvalley psdestination
visit the enavu network
No Comments Article Title Overlay Article Title

How to plan out a new website – Definitive Guide

When you start a new website there are certain steps you want to take to ensure the quality of your creation. This is a guide that will explain the process step by step.


Being around quite a couple web developers, i have seen almost all the types of ways you can start sketching out a website. [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

When you start a new website there are certain steps you want to take to ensure the quality of your creation. This is a guide that will explain the process step by step.

Blue Print Introduction


Being around quite a couple web developers, i have seen almost all the types of ways you can start sketching out a website. I think there is a natural progression to the method, for example a few years ago it was pretty hot to draw your designs on some special dotted paper and then start making it work on a computer, but now a days there are more computerized ways of accomplishing the task. There are different approaches to starting a website, are you going to create the front page then figure out what other pages are necessary or are you going to create a site map and start adding the pages in. At any rate this process does not have to be scary should you chose to use any of the methods i will outline here and what are their benefits and down sides.

Getting Started

Getting Started

The first and most important thing, that i personally believe is of utmost importance, you have to start the visualization process in advance to the moment of putting it on paper/file. Here is how my visualization process looks like, i will use the WebDevMania as an example.

What am i trying to convey with this website what do i want people to get out of it and what’s the best way to do that?
>>WebDevMania is a blog, which means that the most important thing is for people to be able to read the articles as easily as possible. The biggest thing on the page should be the articles, and the menu should be apparent.

What is my audience, what is their screen size?
>>My audience is web developers, most will have huge monitors with a high resolution so i should find a way to not punish their huge screens but also there will be people browsing with smaller monitors so they shouldn’t be punished either. Since the articles are the most important thing they should be fluid so if you have a huge screen you get to see more articles on one screen.

What colors and images should i use?
>>I want people to be able to easily view the articles not having to wait for the page to load. So i will keep the website graphic-less, the less images the faster it will load, so i only used 2 images to create the website. There are two reasons why newspapers are black and white, first to save money on printing, secondly to make sure if there are graphics in the articles they stand out. So i will use simple colors, black white and gray are really nice to the eye and let you read your articles in peace.

Besides the regular Contact and RSS feed what other features do i want to add to the website?
>>Since this is a website for beginners, besides the comments in articles i should let people have another way to communicate, hence a forum will allow people to discuss anything that interests them in the forum, also they can suggest articles for me to write.

So once i have answered the questions, which can vary depending on the website, i usually sleep on the answers. Once i have a solid picture of what i want the website to look like i go to the next step.

Paper pencil

Putting it down on paper/file

Back in the day, and even today, people buy some nice notepads to sketch down what they want to have in a website. What i like to call the wire frame. The wire frame will address the functionality of the website and the arrangement of elements. Personally i like to dive into the design and use that as my wire frame. I have also attempted to start coding first and add the styling later, this has turned out to be the worst approach (at times luckily it comes out ok). So figure out what works for you, there is plenty of software out there that will let you create pretty wire frame designs which you can show to your clients. For more advanced websites (facebook type) you will probably need to create an extensive paperwork outlining the features and functionality of the website before you can really get down and dirty with the design, especially if you are working with multiple partners. But you should definitely first come up with a rough draft of what you imagine the website will be like.

User Testing

Self testing, or beta testing

Once you come up with a simple design, if you do not know other designers that are willing to help you figure out what might work and what might now, sit down in front of the website. You can save it as an image and paste it into an html file just so you view it in the browser. Sit down and look at the website, look for things that will attract the users attention first (usually brighter colors, or just color intensive graphics) also know that a human will almost always start looking from the top left of the page. Starting from the top left of the page their eyes will likely move to the graphically intensive areas first. Personally to attract attention to text i like to use graphics, because it’s like an introduction to the text. What i’m saying is definitely have content in a website, but make it easier for the user to know what they are looking at and why.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Web Application Interface Design Guide
  2. 7 Design Elements and Techniques that will make your Website stand OUT!
  3. SEO – The Complete Comprehensive Guide
  4. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites
  5. Typography in Web Design – Complete Guide

Did you absolutely LOVE this article... share it!


Leave your own!


freedcamp free project management

Popular Articles

fzilla file hosting