I tried out Yahoo! Answers a few days ago, the result, it’s quite addictive. But that’s not what I like to share right now. While trying to answer some questions, I found a graphic designer asking for some tips to design websites.

Designing a website….graphically not with programming languages?

what should i know?
what size should i be working on?
im already photoshop, illustrator. flash literate.

what kind of resolution i should be aimed at?

And here is my answer:

First of all, I suggest you to keep working with photoshop, you don’t need to jump directly to a new program to design a website. I believe you already have experience in graphic design, either hard copy, soft copy or even both. Then, what you need to know is the Main Concern in designing a website compare to other graphic design.

1. Decide the dimension type of your website.

   • a fix size (fix width and fix height; in this mode, website will have a specified size for its width and height. So if the content need more space, the visitors will have scroll function inside the fix size) — most of the sites using this is full flash site. Check http://www.ferrariworld.com/ for an example.

   • a fix width (fix width and dynamic height; in this mode, website will have only a specified width. So the height will shrink/grow depends on the content) — site that currently using this is http://www.yahoo.com and http://www.msn.com, the width will stay the same even if you resize your browser, but the height adjust the content.

   • a dynamic size (dynamic width and dynamic height; in this mode, website usually adjust it’s width depends on the browser width. The most common use for this is using percentage (example, 100% size will fully fit browser’s width and 80% size will fit 80% of browser’s width) — site that currently using this is http://www.google.com/ig, the width will adjust itself when you resize your browser.

2. Decide the size of your website

   After deciding the dimension type, it’s time to decide the size of your website

   • Size will depend on targeted monitor resolution

   • Do a little research for targeted website visitors, find what monitor resolution size is mostly use by those targeted website visitor. The most popular option now is 800×600 or 1024×768, make your choice.

   • for fix size, you need to have smaller size (at least 10px smaller width and 100px smaller height) from your chosen resolution

   • for fix width, you need to have smaller width (at least 10px smaller from your chosen resolution

   • for dynamic size, you only need to decide the width size at least 10 px smaller from your chosen resolution for design guide only

3. Decide the website position in browser

   • for example, if you decide to use fix width for 800×600 resolution, you can use 780px width for the website. But when view it in 1024×768, the website will look smaller and you need to decide wheter it will be align to the left, center or right side of the browser.

   • you can skip this step IF you choose dynamic size with 100% width (since the web will always fully fill the browser regarding the resolution)

Continue Reading (^_^)