Slighty new to web design.

A

aaronjunited

Member
Hi all, new to the site and looking some guidance and knowledge of web design.

I have dreamweaver and photoshop at my disposal, been learning HTML and some CSS.
I can continue learning these languages to master them.

At the minute I have some curiousity about web design. I see sites that I like the look of and wonder how they were designed and what process was undertaken to end up the finished piece.

What I mean is Im looking for suggestions and parts that are involved in designing the layout.
For instance, banner, buttons, menu bar, the different features that are on the home page when you load it.

Im looking for a list basically, what types of things do you go through to build a page.
What programs are used also.

Just after some knowledge so I can eventually build each part of a page using the lists that you all suggest.

Hope im making sense.
Thanks.

Aaron.
 
A

Absolution

New Member
I am not sure if any of us have a coherent process for it lol. Drupal is an easy way to do it, but not everyone is happy with a bunch of pre-packaged codes.

What I do is I decide what sections I want on each page (header, body, footer normally). This allows me to decide how many div tags I want. Then in each div tag I decide which fonts I want to use and how I will use the images within the div, so that allows me to decide on my CSS. Then after that it is fine tuning.

For graphics suggestions, jpeg still seems to be the best way to go (I prefer svg but browsers are slow to implement it). Also learn the color wheel and why certain colors look better together.

Pastel colors tend to be easy choices. That is choose a solid color you like, and desaturate it. Make it lighter if you are using a bright background, make it darker if you are using a dark background. This is all done to enhance the text which should be black on white backgrounds and white on black backgrounds. Your images should be darker on a dark background to enhance the white text and vice-verse.

Also try to do the page with divs instead of tables. The idea is only use tables when you actually have a table, like a table of prices and products, not for the layout of the page.
 
A

aaronjunited

Member
Kate Thanks for the suggestion on Drupal, but I definately dont fancy precoded stuff.
I would like to learn from scratch.

Thanks for that absolution. If you dont mind me asking you to explain what you mean by your selections.

After you decided your footer, header and body, this allows you to select which divs to use. How is this so? What contradictions are there before the divs are done?

Same for CSS, how does selecting your divs allow for the selection of your CSS.

jpg is my favourite format for pictures or png.

Like the idea of pastel colors and blending colors to make reading text easier.

Table websites annoy me to be honest. Hate the thought of building a site with tables. CSS tables are more precise and exact and pleasing to the eye, ive learned. Also css tables are made with divs yea???

Thanks for the help.
 
D

DesignerBill

Member
A couple of suggestions:

1. Be careful using the JPG format for images, unless you have actual photographs or need precise colors. JPG images take longer to load than GIF images, so you may want to use GIF for simpler images like a logo. GIF is limited to only 256 colors though. PNG also supports full color and is probably better for small images or those with large areas of uniform color.

2. Be aware that your site visitors may be using any browser or OS, so don't assume that your favorite fonts will be available on all browsers (now known generally as user agents). This is why CSS allows you to specify several font names and a fallback, generic name like serif or sans-serif. Be sure and test your design using all available browsers. You will want to use more than one font, but don't go wild with too many. Sans-serif fonts look better on the screen.
 
A

Absolution

New Member
For example, if I know I want a header, main area, and footer, I would immediately write

<div id="header">
</div>

<div id="mainarea">
</div>

<div id="footer">
</div>

Then with CSS I can style each of them up how I want. But most importantly I got the sections of my html page already divided out in a nice way :)
 
You must log in or register to reply here.
Top