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.
-
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.
-
-
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
-
-
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)
-
One thought on “Web Design Tips for Graphic Designer (part 1)”