Website designing approaches

[Azmisov]

So, usually when I start a website, I just map out the layout on paper, then start coding. I'll usually get half way through all the coding and layout stuff before I completely redo all the CSS. Then, once I finish the site, I usually go back in and make some more CSS themes if I have time.

I've seen a lot of people actually draw out what they want the actual website to look like in an image editing software first. Then, once they have the design and graphics ready, they start coding and laying out. I was thinking of trying this approach and seeing how well it goes. What design approaches to you guys take? Opinions, suggestions?

[mlseim]

I like to see the page as it should look ... as a PDF file,
and then determine how I will do the layout based on how it looks.

It's important to know how wide the page will be (fluid or fixed),
and how the various areas (or sections) of the page will grow with text/content.

Knowing the changes in content will determine how to handle any background
images or color ... in some cases, it will require the design to change. A good thing
to catch right away, as it can save a lot of time.

Try doing it that way ...
Make an actual mock-page with graphics and text and then look at it side-by-side
with CSS layouts like these: http://layouts.ironmyers.com/

See if you can match a particular CSS layout with your design. Break apart any
necessary background images and work with fluid (or changing content). You
might find that designing your own CSS templates, themes, and layouts will be
much easier to do.

[salonline]

I usually prefer designing in photoshop the complete page. And then start coding.This way i know before hand how the outcome should look.

[MadRukus]

I also design the comp in photoshop then code as well. Prior I usually do some rough pen sketchs on paper to get an idea before diving into photoshop.

[diddy]

I play with mockups in photoshop, until the client is satisfied with the design, then I code it up. No slicing btw - hand coding all the way, with Notepad++. Dreamweaver is overrated.

This way, I do a quick design, thus not wasting unnecsssary time on the coding, which I find is the more time-consuming part.

[joomlads07]

I just focus on these e key elements :

- pages should load quickly and provide something to read almost instantly;
- pages should be well laid out and easy to assess i.e. work out what they are about;
- pages should be static i.e. they do not jump about as images load;
- pages should be"search engine friendly";
- pages should be easy to navigate so that you can find what you want;
- and most importantly, the content is useful and worthwhile.

[diddy]

I just focus on these e key elements :

- pages should load quickly and provide something to read almost instantly;
- pages should be well laid out and easy to assess i.e. work out what they are about;
- pages should be static i.e. they do not jump about as images load;
- pages should be"search engine friendly";
- pages should be easy to navigate so that you can find what you want;
- and most importantly, the content is useful and worthwhile.

Some great advice!

[aeroweb99]

Dreamweaver is overrated.

Diddy, don't get me started!

[diddy]

Diddy, don't get me started!

....on how DreamWeaver is overrated, or are you against me too? :-D

I'm a strict code-it-by-hand person, and then simply go to the browser and hit "refresh". I have absolutely no need for a WYSIWYG editor, so Notepad++ works absoltuely fine for me. Plus it can write all kinds of stuff from html and css to php, asp, java, python etc. It's great. (and it's free! )

[aeroweb99]

I'm for DW. But this thread will get out of control if we start that debate.

In a nutshell:

- You can still hand code in DW.
- The CSS features alone will save you tons of time, and it's all semantic, w3c and all that.
- It has a great ftp
- I don't have to worry about typo's, which can lead to very valuable time to find
- Link and file updating across pages are very handy
- The wysiwyg is actually pretty darn accurate
- It highlights your div boxes so you can see exactly where they are, which is handy for positioning
- You can work with the css file without having to switch pages or programs, it's all in one view
- Drag from an href link to a file in the files pane, takes literally 1 second, so no time to type and no typos

I could go on. However, I don't use it for any backend coding, which I would imagine may be a whole different story.