To all the web designers here...

[zpivat]

When you design a website/template/layout, what are your thought process? I'm interested to know how you'd go about doing it?
For example, do you first create a storyboard on paper, and then translate everything into Photoshop, then slice the image using the slice tool, and then do the rest of the customised coding?
Or do you create the HTML code on the fly, right on Notepad/Dreamweaver?

Cheers

[kthdsn]

I open a text editor and a browser window, and type the information I want on the homepage in xhtml, nice semantic markup, no thoughts about what it is going to look like. When I have the information on the page, I start a style sheet and make it up as I go along.

In my opinion, the information contained on a page is far more important than the design, and that's where I focus my attention.

I use dreamweaver as part of my day job, and I can't stand it. I would never use it through choice. I much prefer working with raw files in Gedit.

[trekr5]

Hi

I've got Dreamweaver and am using it to develop websites. I don't have any ideas about design though. Is it better to just use templates and then as I gain experience branch out to devlope my own "look"?

[kthdsn]

Originally Posted by trekr5

Is it better to just use templates and then as I gain experience branch out to devlope my own "look"?

I would suggest browsing around and paying attention to the design of sites you see. Notice what you like about the designs and what you don't like. Borrow inspiration and just design something. Take it from there. Using pre-built templates is unlikely to help you in a creative sense. Learn by trying.

[elainevdw]

Originally Posted by zpivat

When you design a website/template/layout, what are your thought process? I'm interested to know how you'd go about doing it?
For example, do you first create a storyboard on paper, and then translate everything into Photoshop, then slice the image using the slice tool, and then do the rest of the customised coding?
Or do you create the HTML code on the fly, right on Notepad/Dreamweaver?

I've done both, depending on whether I want an artsy-fartsy design or a fast, usable design. Most of my Web sites are for personal pages or small businesses, so I haven't had to deal with large repositories of frequently updated corporate information. I'm starting to get into that a little bit, though, with a nonprofit I'm a member of.

I've recently started taking a third route that's also better for bigger installations: full open-source packages. Moveable Type, Joomla, phpBB, etc. Really fun! It's amazing what you can find out there.

And on a side note, CSS Zen Garden is the most fabulous Web site ever.

Edit: On another side note, I'm not sure Moveable Type is open source anymore. Now that it's been acquired by SixApart (great company!), it's not free, either.

[Sadhana]

Originally Posted by zpivat

When you design a website/template/layout, what are your thought process? I'm interested to know how you'd go about doing it?
For example, do you first create a storyboard on paper, and then translate everything into Photoshop, then slice the image using the slice tool, and then do the rest of the customised coding?
Or do you create the HTML code on the fly, right on Notepad/Dreamweaver?

Cheers

I typically start by drawing undecipherable sketches on the paper (usually during my bus rides to and from home) and then go on to type in the xhtml markup, followed by the css markup. Interspersed in the css markup phase is the Photoshop "image creation" phase, where I create the necessary graphics.

These days, though, I'm moving more towards first creating a Photoshop mockup and then creating the xhtml/css markup, just because it's a lot easier to make changes to Photoshop mockups than it is to the xhtml/css markup.

It really depends on the size of the project.

[kthdsn]

I deal with the corporate content and daily updates at work where I'm part of the web team for a local council website. We have a site in dreamweaver, and we are trying to replace it with a cms. The cms is absolutely terrible, and it's really put me off anything but hand coding.

I am about to start a new website for my children's school, and I will be doing that in a text editor, with the help of a friend and some nice php. I just prefer having complete control over the code and the freedom to create what I want, not what some software package allows me to have.

[TechnoGuyRob]

My method is very similar to kthdsn's. I have never been a strikingly consummate visual design artist. Don't get me wrong, I have an operational (and, in my humble opinion, fairly strong) understanding and knowledge of CSS. I have mastered HTML since I was 11 (yes, pshaw, it's only a markup language), and JavaScript since I was 13. I'm proficient at PHP, Perl, and Python to name a few. As you can see, my talents rest with programmatic design, rather than visual layouts. Thus, when I create a website, webpage, or web-oriented tool, I usually start with a plain text version (but nicely organized and semanticized/tagged), with some scrap CSS from old designs/stylesheets. When I am satisfied with the extent of the content, I usually work on the stylesheet. I believe in dynamic programming (and modularization) to extravagant extrema, so oftentimes I make sure that the stylesheet, HTML, JavaScript, PHP (or other server-side code) are all fully 100% independent. This means the HTML is often bland and linear, and my progressively ornamental stylesheet provides any desired visual aesthetics (a la CSSZenGarden).

Web design is wonderful, truly!

[andrew]

It depends if I'm doing a site in Flash or xhtml & css. But I usually start a mockup in Photoshop and go from there, unless it's going to be a crazy actionscript-based project, then I start there and then go to design.

I really like TextMate for OS X. I find it the fastest, nicest, and most powerfull text editer. Anyone else a fan?

[htmljenn]

I've tried a number of different methods for building Web sites, but here's the process I've found works best for me:

1. Imagine a basic site layout in my head - if it's really complex I might draw a wireframe on paper, but usually not.
2. Determine the basic site layout elements, and put them in as DIVs. I edit in HomeSite.
3. Write the CSS to generate the layout I'm looking for, again in HomeSite, but sometimes with help from TopStyle Pro.
4. Add some content so that I can determine where I should replace the divs. For example, if the header div is just an image with text, I might change that to <h1>
5. Convert the navigation to an unordered list and style that.
6. Test the initial design with my friends. They will generally hate it, but be too kind to tell me. So I like to show it to them when I can see their faces. Ie, I don't send them a URL to look at, but force them to look at my design when they are coming over for dinner or something. heh!
7. Throw it all out and start over at 1.

Once I've iterated through 3-5 designs, I usually find some that I don't hate and my friends don't cringe when they look at them. Then I take it to the customer. And start over from 1. :-)

[Light]

My method is just to draw a few sketches on paper and pick the one I like most. Then I take it to photoshop and flesh out the design. I make the images required for the design real quick and then simply start plugging away in Notepad.

[Griff]

I usually begin by organizing the content using a mind mapping program like MindManager. Once I have my content organized, I'll look around for a CSS layout that I like, usually from Open Source Web Design (www.oswd.org). Once I have a CSS template, I'll fire up Visual Studio or Dreamweaver (depending on what language I'm writing in) and start translating content over to the layout. I'll tweak the colors and images as needed, and add any logic code to the layout for database processing. So in order I have:

• Organize Content
• Find CSS Layout
• Add content to layout
• Add logic and database code
• Tweak colors, fonts, and images

Hope this helps.

[Yynatago]

I think website Griff meant to link to is the dot org version: Open Source Web Design - Download and upload free web designs.

[Griff]

Opps...I mistakenly linked to .com instead of .org. Thanks for the catch Yynatago. I fixed the previous post so it should link correctly now.

[flashlight]

You might get something from a series I wrote a couple of months ago: http://www.theblogstudio.com/index.p...1_an_overview/

The article is about blog design, but it applies to all web design.

[Indifferent]

Hello, first of all do you mean just a website simply to try layouts or that your actually going to put online?

If you are going to put it online you need to ask yourself questions about content, style, etc, etc before you do anything!

When I'm just testing layouts I just use a text editor and open up firefox then go from there. But I do view other sites for ideas, never a bad thing as long as you don't copy.

[Sean.M.Connelly]

1. Get a basic idea of what I'm looking for in my head. Nothing specific. Very general idea.

2. Go to templatemonster.com to get ideas.

3. Open up Paint Shop Pro and draw the main layout, as I want it to appear when someone visits.

4. Cut up the image and layer it correctly, using XHTML and CSS as correctly as possible.

5. Convert it to PHP to allow for dynamic content.

~Sean

[Light]

A place I like to go for inspiration is Styleboost™ - showcasing outstanding websites since 2001

[birger]

Originally Posted by zpivat

When you design a website/template/layout, what are your thought process? I'm interested to know how you'd go about doing it?
For example, do you first create a storyboard on paper, and then translate everything into Photoshop, then slice the image using the slice tool, and then do the rest of the customised coding?
Or do you create the HTML code on the fly, right on Notepad/Dreamweaver?

I usually get an idea about some design element, and just work from that directly in Photoshop. Sometimes I may use a pen and paper just to draw the basic layout, other times not (I suck at drawing). When the design is ready in photoshop I start building the basic page based on some basic HTML templates. I usually just use a text editor (VIM), I don't feel 100% comfortable with Dreamweaver.

[Phil Newton]

I start with paper, and then write down what I'm trying to achieve with the site and what feel I want it to have. After that, I'll sketch a tonne of designs for the front page, noting where all the important elements should go. Once I'm done on paper, I'll head to Notepad and start typing until I've got something that looks decent.

Then I'll look at a CSS gallery and be upset that my site sucks

[SenorKaffee]

Scribbling, Photoshop, Dreamweaver.
I can write HTML in a text editor, but it´s much less work using DW and just checking the code later.