Hello All,

 

I am currently doing a course in web design and I am finding it really exciting!

At the moment we are on a 2 week break from the course and I have a few sites I need to create for assignments.

 

The help I need is what is the logical order to creating a site? This might sound simple but it hasn't been covered.

 

For example I know that at first you must collect all the data about the site (target audience, functionality, etc.. etc...)

 

Then the next step I took was to scribble on some paper how I see the site being laid out. Scribble scribble scribble!

 

Now here is where i am sort of at a block... I know how i want it to look and colours etc... but where do I start?

 

I plan on using CSS tables to handle the "laying out" but what comes first on the development part? do I create a mock up in photoshop and use the slice tool to break my site up into blocks then code it accordingly?

 

help!! lol thanks in advance

mock it up in photoshop, then use that as a template to make your pages with html. Though I wouldn't use the slice tool personally. But yes coding should be the last piece of the puzzle.

Initial Brief

Research - who, what, why, when? What other sites are doing well, what they aren't doing well, Design Similarities within the target industry etc.

 

Requirements brief

 

Design Concepts

 

Design Feedback

 

Final Design

 

Design Feedback

 

Template production - slice and dice, create the skin, html/css)

 

Site production - fit the 'spine', cmf/cms, back end code, whatever takes your fancy)

 

This is where i add my JS interactivity, however most people prefer to do it during the template production.

 

Usability & Accessibility testing - WAI Level II compliance as standard (legal requirement set out the the 1999 DDA act). Last figures i saw showed 80% of websites in breach of this, you can be sued for non compliance; http://www.contenu.nu/socog.html (the man who successfully sued the Sydney Olympics for their inaccessible website)

 

Site Feedback

 

Ongoing analysis, it's rare to get everything perfect first time round, maybe moving the call to action increases conversion, maybe revising the copy decreases bounce rate etc.

 

Their are more steps that can be added, but generally those are the steps i take and in roughly that order. Bear in mind that projects tend to vary alot, you may get creative control, you may not. You may get to work with identity development, you may not. Steps should be added to suit.

My take...

 

Your content is the single most important factor in any site. Unless you know what type of content you have, and how it's best presented, you can't really start on any sort of "design". All too often people start with a design then end up trying to shoehorn the content in - not the right way to go!

My take...

 

Your content is the single most important factor in any site. Unless you know what type of content you have, and how it's best presented, you can't really start on any sort of "design". All too often people start with a design then end up trying to shoehorn the content in - not the right way to go!

 

Yes, I agree.

Without good content your website may look fantastic but you will get no visitors and if selling no sales.

Without good content, Search Engines won't find the site.

 

Regards

My 2 pennies:

 

1. Design the look in photoshop.

2. Look at it and work out the structure of the layout. (eg; this is my header, this a side bar, etc.)

3. Cut out your images and/or anything you cant do with CSS.

4. Create the page structure in HTML with Div tags.

5. Add the content.

6. Style the page using CSS.

7. Add any functionality.

8. Make it work in IE.

 

gl&hf.

~evu.

Yes, I agree.

Without good content your website may look fantastic but you will get no visitors and if selling no sales.

Without good content, Search Engines won't find the site.

 

Regards

It isn't about search engines finding it or using the right words to convert to sales at the initial design stage, you can refine that later. But you do need a reasonable idea of the content to base your design around.

 

For example, will it be very wordy or with fewer words and some pictures, will there be bits and pieces that want to go in boxes, a sidebar for updates or special items, wide things or things that may go best in two columns...

 

Going back to what BlueDreamer says, it can be very difficult to decide what to do with a design if you haven't a clue what's going to go in it.

Wow thank you all for responding!

 

I have a fair idea of whats going into the site as it is a "re-vamp" of an existing site.

 

Now what we have been taught in class is using CSS with absolute, relative and floating positioning. I like to broaden my reading besides what the teacher tells us in class and from what I have read CSS Tables is the "easy" way to handle positioning... Here is my issue though, I have only ever done abs,rel and floating so im not sure how tables are going to handle things? Coming from people who actually work in this field are they practical?

 

What I am trying to wrap my head around is, When I create

 

#navigation{

display: table-cell;

}

 

That basically will take the minimum amount of space in my current <div id="navigation"> and create it into a tabular box correct?.... but what if I have this for example as my displayed navigation ( use imagination with pretty buttons/rollovers etc...)

-------------------------|

* Home--------------|

<-- white space->|

* About---------------|

<--white space- >|

Contact--------------|

-------------------------|

 

will my Background colour/image for the site come through the white space in between the buttons/links? or if i had a watermarked image would it just put a great dirty block over top of it ruining the continuity?

 

Thank you guys for your help

I find it a strange approach using CSS tables for presentation. Tables by their nature are for tabular data and not for presentational purposes. Yes you can use CSS tables for layout but that defeats the whole object of CSS - CSS tables are for tabular data, just the same as the HTML TABLE tag, it's just another way of defining them - see http://www.w3.org/TR/CSS2/tables.html for the W3C explaination.

 

For your navigation example use an unordered list like so...

 

<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

 

You don't have to wrap a div around the list unless you need it

Dont define the structure of your page with tables, tables are like Blue said, for tabular data. Use Divs to structure your page. You have to think semanticly(?). A nav bar is just a list of links, so it makes sense to put it in an <ul> list.

 

You should try to design your site with no CSS in mind, so that if for whatever reason the user doesn't have CSS enabled or it's read by a screen reader or some sort, then it still makes sense.

 

~evu.

 

eD: To add; the only reason people used tables to structure their page in yeaster years was because they had no choice, that was the only deacent option. Now we have CSS for presentation