Web Design Tips for Graphic Designer (part 2)

Back to Starting Point (^_^)

4. Use browser UI

   Best website design strategy is to print screen your browser in targeted resolution, and paste it in your photoshop. Do all the design above this layer. This will help you with good perspective of your design in a browser

5. Begin with the end in Mind (It’s important to know your target before you start working)

   • The one thing you should always keep in mind is you will cut your design to pieces in the Final step

   • Why? because in website design, image total size and quantity is very important (one big image will seems to load longer than if we cut it into 3 smaller images, because with 3 images the browser will show the image one by one, and it’ll be faster then having to wait one big image fully downloaded)

   • Use repeated pattern. If you can, try to have repeated pattern for background. You can have a smaller cut and set it as background image (it could be repeated horizontally, vertically or both). It will save total image size compare to having the whole image

   • However, if you’re very sure that your targeted website visitors won’t have any problem such as low bandwidth (low internet speed), skip this step

6. What are you waiting for? start designing your website now. Look around for good designs to inspire you.

7. Once you’re done, all you need is transforming the design to a web template. This will also include cutting the image to important pieces. This step will surely be different for each web application. For example, transforming the design for wordpress based web or joomla based web will be a totally different experience. So you can have two final choice,

   • seek someone expert to do this,

   • or learn the specific steps yourself. Of course the main basic knowledge you need to have first is html and css. Since you’re already familiar with adobe (and formerly macromedia) tools, I suggest you to use Adobe Dreamweaver for this.

I hope this help you, good luck!