1. Stop using Photoshop for web design

The fact that people use photo-manipulation software for designing websites never ceases to amaze me. Adobe Indesign provides much more relevant functionality, but, more importantly, it’s vector-based. This means no layers (which are completely irrelevant to web design) and easy access to any object on the page. Objects can also be copied into Illustrator and then exported as PNGs with transparent background.

Actually, I’m going to stop there, because I believe that ditching Photoshop and picking up Indesign will make you much more productive. Alternatives to Indesign include Illustrator and Fireworks, but Indesign is much more powerful in my opinion.

What were your studies? CS or programming, right?

Phase 1 is made by visual designers, based on the work of the interaction designers. Those two jobs have nothing to do with programming.

Phase 2 is closer to programming (even if HTML and CSS are not programming languages). For simple static websites, it will indeed take most of the time. For web applications, on the other hand, it will be only a minor fraction of the project.

So, what can you do now?

1. Find a web designer. If you were never learnt to do web design, chances are that your work will be of a not very high quality, and you’ll spend days doing something a web designer can do in minutes. If for some reason you can’t work with a web designer, then learn it yourself. Be ready to spend at least five years full-time learning all the stuff: designer’s work require lots of things to know and a lot of practice. Note that interaction design and visual design are two different jobs, both being extremely important for a successful project.

   Note that user experience encompasses interaction design side by side with visual design, usability and information architecture. That’s why interaction design is essential but not sufficient for a web application.

2. If having a designer or spending five years in college is an overkill for the project you’re working on, then at least invest in learning how to use existent software to accelerate your work. If you’re working on websites, and not on web applications, why not using WYSIWYG editors instead of writing code by hand? Those editors would generate crappy code, but does it matter in a context of a small website?

3. If you’re curious, discover other steps required to accomplish a project. In any large project, visual design and programming (i.e. all you do right now) is the easiest and shortest step (10 to 20% of time). What takes much longer is to set up correct communication between project participants, chose standards to follow, gather requirements, test, do architecture and design, write documentation, do security audits, consider legal aspects, prepare deployment process and dozens of other tasks which are more or less unrelated to programming itself.

Deskilling effect

The introduction of new, productivity-enhancing technology sometimes enable less-skilled members of the trade to perform nearly as well as its more-skilled members. This may or may not be the intended consequences of the proponents of the new technology. If it is intended, it may bring enormous profits to its proprietors, because the enlargement of candidate pool means the supply of labor is increased, which results in lower wage, and thus brings savings to companies that hire this new technology.

This has been happening ever since the industrial revolution. Please pick up any history-of-science book, or take a short course in a nearby college.

There are a lot of productivity-enhancing technology in web development; there are many client-side and server-side libraries that shorten development time. In some cases it enabled a small team to deliver applications that traditionally would have required a much bigger team.

This is not to imply that web-based or CSS-based program require any less skill in development – the demand for skill simply shift from algorithmic knowledge to visual aesthetics and interaction design, as suggested in MainMa’s answer.

Obsolescence

In other cases, the new technology simply made some older, less efficient technology obsolete. Thus, skilled labors who cannot transfer their knowledge to the newer technology will lose their competitive advantage, or even lose their usefulness entirely.

A recent example of obsolescence is desktop software development. It is being gradually replaced by web-based systems. There are great economic advantages in moving to the latter: it shortens the product release cycles from years down to virtually zero.

Structural change

Jobs that are eliminated from deskilling effect or obsolescence, or from global competition, will usually not bounce back to its historical levels.

Knowledge workers

Software development is one of the trades known to require a never-ending, life-long continuous learning effort.

It is possible to identify engaging challenges and rooms for improvements in an otherwise repetitive or passive day job. Perhaps you can learn visual design and electronic commerce in your personal time, and bring more value to your employer. Simply seeing the bigger picture would have helped you find a career path. The imperative is on you to either find a more intellectually challenging job, or to make your current job more interesting.

I noticed that the corresponding phase (phase 4) takes the less time and effort in all the process, and all the hard work and effort is focused on design and specially on converting this design to html/css, Don’t you notice the same ? Have i any problems on my way to work?

It really depends on the kind of website you are developing.

Most static-only websites (means that you can pretty much just use HTML/CSS) will take you more time to design rather than to put online.

The same does not apply to dynamic websites (something like a social network, SE, any user-based websites) which requires a lot of database and server side programming compared to just designing the skeleton of the application.

Also taking a look at your workflow you seems to be using Dreamweaver or programs just like it. I feel the need to warn you: using such programs may produce code that is either non-w3c-valid, inefficient or not compatible with most modern browsers.

All the hard work and effort is focused on design and specially on converting this design to html/css, Don’t you notice the same ? Have i any problems on my way to work ?

It Depends

The phases and approach will depend on the size of the project.
For small, static websites putting up html/css and graphics takes the most time. However, you may use free templates to have something to start with and adjust it for your project needs.

For bigger projects, preparation to the software development phase is the longest. It also plays critical role in defining later progress and success/failure of the project.

Planning

Well planning daily work/tasks before the actual implementation is very important to start with. Understanding the scope and objective of each individual tasks always shortens your development time, and raises questions to clear out unknowns. Thus, it is very important to invest time in learning/understanding the scope of the task before starting it .

Iterative approach

In today’s fast phase and very competitive environment, it is very hard to get complete requirements of the project before starting the development, and traditional waterfall development process does not work well.

Thus, most projects get their requirements piece by piece from project owners and use Iterative development approach in their software development process.

The basic idea behind this method is to develop a system through repeated cycles (iterative) and in smaller portions at a time (incremental), allowing software developers to take advantage of what was learned during development of earlier parts or versions of the system. Learning comes from both the development and use of the system, where possible key steps in the process start with a simple implementation of a subset of the software requirements and iteratively enhance the evolving versions until the full system is implemented. At each iteration, design modifications are made and new functional capabilities are added.