Bluefish is also free and

What is the best Web development software?

I realise this is a little late to the party but it might help someone else who comes across this thread. The above responses seem to discuss how to code the site but from your question, I think you are just wanting to design your site in the best possible way for the developer/programmer to build.

There are no right or wrong answers to this as every developer is different in how they want/expect the files. Some like the HTML to already be coded, some just want the screenshots. I'll bullet below my own process for this type of workflow.

1. Wireframe / Sitemap

The developer is going to want to know what pages link to where and where everything goes on each page. A sitemap (flow-chart) can give them a visual idea of the structure. Wireframes are an important first step so the developer (or even the project manager who will apporve the work) can see where things go on different pages. Balsamiq can really help with this type of process:

2. Visual mock-up

For this I almost exclusively use Photoshop but I know a lot of other people use Fireworks. I try to make these as pixel perfect as possible so when it comes to slicing up everything is to the correct size. I also try to keep everything in smart objects (Illustrator vectors included) as designs have a habit of changing - a lot!

I would typically do 3 pages to start with - Home, a section landing page and a content page. This should relate to the sitemap you would have issued earlier, especially if you were to include things like breadcrumb menu's and a sub navigation. I would then just JPEG these and send off to the relative people.

Depending on who it is that see's this to approve/build, I may also do an additional step which is to create a mock-functionality PDF in InDesign. These can be very useful for people who are not that web savvy and want a good idea of the function before approving. I basically just place the 3 screens and create buttons in InDesign which link to one of the 2 other pages. This becomes helpful when the process drags on and before you know it, you have designed almost every single page in Photoshop.

3. Approval / Delivery

Slice up all the little pieces the developer would need, but check with them first to be sure you're giving them what they need. Sometimes they want certain images split into 2 or more pieces. This is when I actually do some work in Fireworks. If I have any PNG files, i'll bring them into FW and export as PNG-8 which can drastically reduce the file-size. This won't work for everything, like transparency on curved edges and complex gradients, but I always like to check it first anyway.

Depending on the time, I would then create a small style guide for the site pages detailing colors, fonts, sizes and any specific styling for h1, p or links etc.

Source: forums.adobe.com
SEE ALSO
RELATED VIDEO
The Ultimate Web Development Course 07-01: What is a database?
The Ultimate Web Development Course 07-01: What is a database?
Website School: What is the Best Way to Build a Website?
Website School: What is the Best Way to Build a Website?
What is the Best Open Source Web Development Program?
What is the Best Open Source Web Development Program?
RELATED FACTS
Share this Post

Related posts

Choosing BI Solution: Tibco Spotfire or Tableau?

Choosing BI Solution: Tibco Spotfire or Tableau?

JUNE 29, 2017

Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

Read More
Front End Web development best practices

Front End Web development best practices

JUNE 29, 2017

Tags. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after…

Read More