What is the normal web development workflow (including tools, techniques and deliverables)?

Base on my understanding, the normal web development workflow is like this:
1. the product manger designs the wireframe using a wire-framing tool (what is the best tool for wire-framing?)
2. the UI designer designs the PSD (Photoshop document) based on the wireframe (Is Photoshop the only tool to do this?)
3. the front end developer cuts the elements from the PSD and make it into web pages with HTML, CSS and JavaScript

Is my understanding correct? Please advise
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

I really like A Website Designed by SimpleSquare. That said, there are many different processes and different teams will choose different processes. The key is to follow a methodology which you and your clients understand and which helps ensure you cover all the bases.

Wireframing tools: Balsamiq, Gliffy, Visio, iPlotz, MockFlow
Photoshop: You can also use InDesign (also Adobe), but those two are probably the best you can buy (and you can get the full Adobe Creative Suite on a subscription and you get a big bag of design goodies for $50/month). Photoshop offers tools to cut the elements from the PSD, so Item 3 and Item 2 in your list might actually be one tiem.
condor888Author Commented:
Hi MlandaT,

Thanks for the great comments. Have you used the wireframing tools that you mentioned? How do you compare them?
I have worked with Gliffy, Visio, iPlotz. My preference is also on that order. Some colleagues have used Balsamiq and they like that more. I think it mostly boils down to individual preferences. They are all quite nice. I found that I use Visio a lot, because of the rich image library. But that's really more when I need to do process flows and architecture diagrams which the others don't really do so well. You should try them out. You might find using a combination of helps to get the best in different scenarios
Prasadh BaapaatWeb Designer & DeveloperCommented:
I Agree with MlandaT, But would like to chip in with my experience as well...

I work as a Freelancer and most (60%) of my work/clients is my direct contact. so In that case I am the one who does all 3 steps and I personally am a great fan of the old school method of simply using a pad and a pen to draw a rough sketch before I start working in Photoshop and then in Dreamweaver.

Many times I sketch when I am discussing with client... its just like jotting down points for me... like a reference point.....here is a sample of what I sketch...
A simple sketchThis is ONLY useful when I am working alone on the project & and I don't need to discuss the wireframe stage with other members or client again.

I also do some work which is offloaded to me by some web design companies... mostly Joomla sites... here I use tools like Balsamic or Gliffy. I feel the wireframing Tools are excellent when you need to brainstorm with others on the wireframe stage.

One more experience I got from offloaded work (mostly I do the part AFTER the PSD is done) is that I request the design in PSD to be shown tto me BEFORE it is shown to client...

means at times I had to bang my head to fit the exact things and make page same design in Joomla and making the site responsive... a Designer might take liberties which become a headache for the Developer.

The tool I use for developing a site or cutting it up from PSD to HTML template is PS + Dreamweaver which is a very good WYSIWYG tool. I have also used IDE like Eclipse but I again shifted to Dreamweaver because I am using it for last 12 years.

so as per me the 3 steps you mentioned are the way to go, but may involve a single person OR Many people as a team.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.