How do you start making a website?

[ixy]

Hi everybody, I'm an art student, and I'm learning web design on my own.

I'm making my first full-css site. So far I've done the layout on paper and set it up in css (only the divs, no content yet), and chose the color scheme. But I don't know exactly the details yet.

My question is: Before you start writing the css do you know every single detail (do you first design the site in Photoshop?), or you experiment with css while making the site?
I feel it would be easyer to choose the details directly with css (because of the selectors and the cascade) than it would be in Photoshop, and then decide if I need a backgroud graphic for a box or something like that, and make it in Photoshop. However, I'm not sure if it's the right way, or I'm just lazy, or getting stuck at the Photoshop details.

[tZ]

Its best to comp up what your making before you execute it. This will save you time in the long run.

[CamarotaDesign]

I like to keep Illustrator and photoshop open when I'm hand coding css in notepad. I do the whole layout in illustrator as how I want to appear it in the website, then I start using the crop tool and save for web function. And start butchering it up. If the dimensions to something are slightly off, I just change the cropping a little. It works pretty well for me, but I wonder if there are better ways. I'm sure one of the web pro's will be able to give you a good technique.

also, if you don't know any CSS. www.w3schools.com is about all the training you'll need to make a very well designed css site, it was for me, I know that.

Another great thing to do is to go to sites your really like and see how they did their layout. How they made their background images, how they do their divs, etc. You can bet that big sites like adobe or microsoft do it in the most efficient and professional ways possible.

good luck!

[ixy]

thanks. I'll do it first in Photoshop.
I'n not worried about the css, I just finnished CSS-The Missing Manual, it's a very good book, and there are many online resources, as well.
I think sometimes I find it difficult to create a layout fast, maybe I need more practice. Sometimes I get the inspiration from the start, or on a brainstorming, and sometimes I get the inspiration while working. However, the ideea that a client once accepts something, that's it (you can't, or don't need to improve it after), scares my a little bit.

[CurtisS]

New member here, so "hello" everyone!

When starting a new layout, I suggest mapping out your navigation first. Knowing your site structure will REALLY help you when it comes time to writing the CSS and HTML. Layout and looks come later provided the CSS is well thought out.

Ciao for now!

CurtisS

[Benjamin]

Unless the site is very very simple, you will generally find it quicker to make changes and experiment at the design stage working in an image editing program like Photoshop. But the trick is to keep the structures and constraints of CSS in mind as you design your layout.

[anderson]

Unless the site is very very simple, you will generally find it quicker to make changes and experiment at the design stage working in an image editing program like Photoshop. But the trick is to keep the structures and constraints of CSS in mind as you design your layout.

co-signed....

[Mynock]

Start with some flour, and then add a stick of butter, ooh wait that's cake. Hmmm, I don't know how to make websites.

[DavidLieb]

Always, always, always mock up first! Photoshop is not as good a tool for designing as Illustrator is, by the way.

In the real world, most designers use ImageReady to port a PhotoShop design into Dreamweaver. The code is not as tight, but it takes so much less time. When learning, it's important to build it by hand, though. Have fun!

[EC]

Always, always, always mock up first! Photoshop is not as good a tool for designing as Illustrator is, by the way.

In the real world, most designers use ImageReady to port a PhotoShop design into Dreamweaver. The code is not as tight, but it takes so much less time. When learning, it's important to build it by hand, though. Have fun!

Not in my world. :p

[CurtisS]

Slice and dice images in ImageReady, Photoshop or whatever only if absolutely necessary. Too many images slow things down and very few sites anymore are pieced together with images. That was when most sites used lots and lots of tables.

[ixy]

thanks, in know Photoshop isn't as good as Illustrator when it comes to useing lines for borders and other things, but unfortunnately I don't know Illustrator well enough to actually help me, yet.

I don't want to slice it, unless it's necessary.



When starting a new layout, I suggest mapping out your navigation first. Knowing your site structure will REALLY help you when it comes time to writing the CSS and HTML.

CurtisS

that's what I started with.

[Psygon]

When I'm starting a new site I'll first scribble down my ideas on paper, noting down the navigation and stuff and then I'll use PhotoShop to map out those ideas and my layout. Once I think I've got something that works I move to notepad and begin working on the CSS for the layout. Then I'll move to start turning that into a page (going back to photoshop and cutting out the bits of the design I need - usually just the logo)

Then when I think I'm finished I'll probably curse a lot as IE and firefox handle my CSS differently :)

[chrispyking]

Then when I think I'm finished I'll probably curse a lot as IE and firefox handle my CSS differently :)

Hmmm, ain't that such a treat too....