The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I first start by idea developing, I use a brainstorming method to pretty much put words up on the screen which describes the content of the website I am doing (words scattered about) then based on that I build a mock-up using wireframes to get the feel I want to emit from the design. Once I have this (and speaking with the client of course while doing this process if needed) I will take the wireframe and build it using HTML and CSS. Finally once it looks fine I will add all the functionality that makes the browsing experience much improved. This of course is a VERY basic and general overview but it’s pretty much the standard way to get stuff to screen which I've used for a while.

I first start by idea developing, I use a brainstorming method to pretty much put words up on the screen which describes the content of the website I am doing (words scattered about) then based on that I build a mock-up using wireframes to get the feel I want to emit from the design. Once I have this (and speaking with the client of course while doing this process if needed) I will take the wireframe and build it using HTML and CSS. Finally once it looks fine I will add all the functionality that makes the browsing experience much improved. This of course is a VERY basic and general overview but itís pretty much the standard way to get stuff to screen which I've used for a while.

What do you mean by using wireframes when creating mock-ups, is there a tool you use for "wireframing"

Wireframing is the process of essentially planning your design out with a series of images (frames) and connecting the different elements of that design together (the wire), you draw out components you would like to include, then place them in a document flow you think would best suit the content and design. Finally you take all those separate parts, join them together like a jigsaw, shuffle them about to apply the finishing touches and voila! You have yourself a model of a website you can start creating by using HTML and CSS to structure and style to match the model. Think of it alike to building a model of a building in architecture before you physically start applying the bricks and mortar.

PS: I use pen and paper to do my wireframing however you could always use something like Visio or another "mapping" product for creating schemas.

1. No JPEG or PDF mock ups (these never work), any mock ups are always in the browser,
2. Work out usability and navigation first,
3. Use web standards (XHTML & CSS) - for the mock up and layput,
4. Produce 3 variations of mock up for client to view (based on their needs),
5. Send links to client for approval,
6. Changes are quick and easy to amend when deciding on final design.
7. Add code, database to start population of website as required,
8. Check for validation and accessibility,
9. Send link to client to approve,
10. Website goes live.