7 Step Preparation Website design

To compensate for the popularity of the field of website design in 2011, then it's good preparation for me to write about whatever we need to do before designing a website.

Maybe a lot of friends who are not yet familiar with the workings of designing websites, as familiar with print design (as I did).

In website design, we as designers are not required to make the design program we have created. But of course it would be better if we could as well make our own design program, but if in a sense made ​​the program a website is hard work, we better focus on the interface and design concepts first.

What should we know is the way programmers think, for the design that we make plausible to the embodied in the code. For example, one way programmers work is to create the background first, because it is the design that we make must be arranged neatly in a folder (Photoshop) specific.

Okay, let's start a preparatory step to design the website.

1. Website Objectives

 Each design must have clear objectives and goals to achieve what you want on the website. If it's portfolio website, determine its purpose, whether to get a new project? , doing personal branding or to become a kind of online catalog results of our work?

With a clear goal then we will easily find the concept and design style that fits. Avoid goals to 'look cool' at the beginning of thought, because the design which we think is cool it may only survive in a period of 1 month only, so that in a short time we feel the need to redesign our website. "Cool" is only "skin"her, the most important is the function and purpose of the website.

2. Sitemap. 

Sitemaps is a very vital, because it will become clear picture of the flow of information about the websites that we will create. Define the navigation and features in need at this stage and remove features that are not effective.

If the purpose of the website is clear, then we can focus on that goal and not incorporate features that are less important, such as the chat box or banner advertising space for example (it's odd that if the portfolio of existing web banner ads).

3. Wireframe. 

In order not to get lost in a blank Photoshop canvas, it is better to design first on paper. This step is necessary to avoid double work in Photoshop. Can imagine the time wasted when a background or button looks luminous and very web 2.0!, but it is less precise location and size.

This stage is very necessary, especially if we deal with websites that have a complex flow of information. With the sketch we can create a variety of possible layouts quickly. And if we work with clients, they are more happy when we start the project and show the results of our sketches before moving to the stage finishing in Photoshop. This could be a way to involve clients actively in the project without making us upset (due to change only need to remove the sketch only).

4. Resolution & RGB Color. 

72 dpi is the standard resolution for display on the monitor (do not ever make a website design at a resolution of 100 dpi though, because its original size would be great too). And use the RGB colors that are in dedicated to the monitor.

Well, this step is a basic step that should not be broken, so do not forget a friend:)

5. Max Width are 960px. 

As great as any design that you create, keep the area of ​​content (text, photos, etc.) that do not exceed 960 pixels wide. This is because the standard monitor laymen still ranged in resolution of 1024 x 768. For the background image might need to exceed 960 pixels wide with the goal so that the background looks neat and not cut off if the monitor is wide open at like 1360 x 768 pixels or more.

6. Use Grid System. 

Grid is not a restriction of creativity to the design. Grid created to facilitate us to maintain consistency in layout from one page to another page. Also gird also help programmers who will design our menslicing in photoshop.

I used to use the 960 Grid System, because it is in today's standards. If you do not want to use the existing grid, please use your own grid. The most important content area width should not exceed 960 pixels.

7. Manage Your Layer Folder & Photoshop Tools.

Get used to create a folder on the important parts of a website, for example, the folder header, body folder, folders sidebar, footer folder. Actually its folder name can up to you, which is important in the call and each layer that is included in one section / section in the united into a single folder.

Do not forget to call every layer, so it will be easier if we want to edit our designs and of course this will be helpful programmers who work with us.

Conclusion. 
7 steps above is the first step so we are accustomed to designing in a state that is organized (particularly web design). Because we know that sometimes we can not finish a project alone, in this case maybe we need a programmer friend, so that code that produced too neatly, we as designers must also provide "raw files" are neat.

It's ready to move into a web designer? Or maybe there are steps that left behind? Come share your opinions in the comments! : D