STEP BY STEP TO DESIGNING WEBSITE

To compensate for the popularity of the field of website design in 2010, so it's good preparation for me to write about whatever we need to do before designing a website. Maybe a lot of friends loyal readers Kick The graphics are not that familiar with the workings of designing the website, because it used to print designs (as I did). 

In website design, we as designers are not required can program design we have created. But of course it would be better if we could at the same time to design our own program, but if in a sense to program a website is hard work, we better focus on the interface and design concepts first. We ought to know is how to think of programmers, so we created a design that makes sense for embodied in code. For example, one way programmers work is to make the background first, because it's the design that we make must be arranged neatly in a folder (Photoshop) specific. 

1 goal

Each design must have clear objectives and goals achieved what he wanted in through the website. If that website portfolio, 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 the aim of 'cool' at the beginning of thought, because the design which we think is cool it may only survive within a month, so in a short time we feel the need to redesign our website. "Cool" is just a "skin" her, the most important is the function and purpose of the website. 

2. Sitemap

Sitemap is a very vital, because it would be a clear picture of the flow of information about the websites that we will create. Define the navigation and features that 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 in the web portfolio of no banner ads). 

3. Sketch / Wireframe

In order not to get lost in a blank Photoshop canvas, the better we are designing on paper first. This step is necessary to avoid double work in Photoshop. Can imagine the time wasted when making a background or button looks luminous and web 2.0 really!, But it was 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 72 dpi 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 color that was to specialize in the monitor. Well, this step is a basic step that should not be broken, so do not forget your friends:) 

5. Maximum Width 960 Pixel Website Content

all the designs you create, keep the area of ​​content (text, photos, etc.) not to exceed 960 pixels wide. This is because the standard monitor is a layman is still around in 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. so adjust the field of working with a wide-screen monitor that you have

6. Use the Grid System

Grid is not a restriction of creativity to the design. Grid created to facilitate us to maintain consistency from page one layout to another page. In addition gird also helps programmers who will design our menslicing in photoshop. I used to use the 960 Grid System, because it is standard in today. 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. Folder Management & Layers in Photoshop

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 be up to you, which is important in the call and each layer included in a section / section united into one folder.
Do not forget to name each layer, so it will be easy if we want our design to edit it later and of course this is very helpful programmers who work with us. 

Conclusion

7 steps above are initial steps that we are accustomed to designing in a state-organized (especially website design). Because we know that sometimes we can not finish a project alone, in which case maybe we need a programmer friend, so that code that is generated is also neat, we as designers must also provide the "raw files" is neat.