Hey, im doing a bit of research on how i should be creating my web templates and designs, and i thought it might be beneficial if i found out how everyone else, from start to finish, created their templates, designs, etc.

 

Most people have their own unique way of doing things. Im not looking for anything particularly specific, but just some brief ideas. Like do you start out writing the Css first? Creating images? etc. Just trying to get an idea of what i should be doing.

 

Anything helps...

Thanks

I create a mockup of the design in photoshop first. Then I create the HTML followed by the CSS (CSS starts with the broad IDs and classes going to the smallest, most specific stuff at the end).

if this helps...

 

design.

first on a peice of paper.

 

put it in photoshop..

 

code.

i html the main div elements first.

 

then normally style some of the divs just to see basic heights widths floats.. etc. making them funny colors so that they show up when i preview in browsers and then go from there really.. im still a novice, but i do find it really helpful making divs funny colors so i can see what is going on!

I design in photoshop and slice the images then I use XHTML to make a solid layout that won't break, then I style that layout with the sliced images and put the content in.

 

Make sense?

1. Create the HTML framework/structure

2. Add some content

3. Style it

4. Add decorative images via CSS

Same as JMZ but sometimes a bit back and forward when i decide it's not exactly what i want lol.

And then tweek tweek tweek....

What Rufus said is pure gold, those early brainstorming sessions on paper, banging out ideas can save hours if not days of headaches later.

 

Know what you want before you start writing the html and css and go from there.

Scribble out on paper with some random captions

List features, languages

Little bit of research, "whats the hot new trend" kinda thing

Make in Fireworks

Put it into CSS and HTML

 

Ta~da

 

[And then wack it into my own cms stem]

I'm not a designer but I must be the only one here who actually designs and doesn't draw!

How to create an effective website...

 

0. Understand the business, the client and the market

1. Start with creating or being given the optimal content

2. The content will dictate the site architecture, navigation, SEO, links etc.

3. Markup the finished content with semantic XHTML

4. Sketch-out how best to lay out the content so it works to full effect

5. Add any id's, classes and 'extra divs' to achieve said layout and put in the 'structural' CSS

6. Add whatever functionality the website needs

7. Put in the 'visual' CSS and 'container graphics'

 

Don't fire-up Photoshop before step 4!

 

But what do I know?!

I'd like to echo what Wizely said and give you my abridged version of a development plan.

 

1. Do your research – What is the purpose of this site? Who is it for? etc. Become the website.
   
2. Write your content – Finding a decent copywriter will pay off here.
   
3. Work out the page structure for the website – Basically a sitemap. Knowing the content will help at this stage.
   
4. Code your content in semantic (X)HTML – Don't think about the layout or styling at this point; just content!
   
5. Start brainstorming and sketching layout designs – Knowing the content will help immensely at this stage.
   
6. Modify your (X)HTML to contain any classes, ids and structural elements you may need when writing the CSS.
   
7. Code any behavioural JavaScript elements – It's helpful to do this without any styling on the website at first.
   
8. Code any backend elements in your desired language – PHP, Ruby, etc.
   
9. Code your CSS and insert images – This is where you make the site look how you designed it.
   
10. Go back over anything that is still left – Tweaking and finishing any JavaScript that relied on styling. Finishing backend coding. Adding any structural elements you forgot about.
    
11. Profit!
    

 

I deliberately left out testing and browser compatibility because that should be done at every single stage of coding in the development process.

 

As I mentioned earlier this is a shortened version of the process and for small projects I will probably deviate or stray from it entirely.

I'd like to echo what Wizely said and give you my abridged version of a development plan.

OK, so that's 2 of us and 1 of us is a designer! To take on Dizi's mission.... why on Earth are people in such a hurry to hit Photoshop? Graphics that aren't content are probably the least important part for all but design portfolios and other similar 'graphic-art' orientated sites - certainly not important for most businesses and for highly functional and/or large sites (Google, Amazon etc.).

Effective content, functionality and usability are surely the most critical elements of a website and Photoshop can't do any of that so why start with it - that has to be the last part of design?

• Get the main items the client wants on the site (logo/nav/intro message/news/whatever).
  
• Look at sites like http://cssmania.com for inspiration.
  
• Make a wireframe in photoshop to position items. Show to client.
  
• Turn the one the client likes into a full colour PSD layout.
  
• When the client's happy, start coding it into HTML/CSS while looking at the PSD.
  

Great topic!

 

Really insightful to hear how others work.

Same as wizely