-1

To create a website

  • I create Psd Files for the design (Phase 1)
  • I Convert these Psd's to html/css static webpages (Phase 2)
  • I add some javascript to these webpages (Phase 3)
  • I start the IDE "visual web developper" to start developping (Phase 4)

I have studied computer programming for the past five years and now I noticed that the corresponding phase (phase 4) of creating a website takes the least amount time and effort in entire process. All the hard work and effort seems to be focused on the graphical design and especially on converting this design to html/css.

My question is, is this a common case? Do I do something wrong in my development steps ?

|improve this question
  • 1
    Please review the guidelines for asking questions. Is there a pressing software-related question that you want to ask here? For example, maybe you are wondering if there is something wrong (or room for improvement) in the allocation of efforts or the methods and tools used to convert visual design into web design. If so, please edit your question to highlight it, and remove the parts that do not have strong relevance to your question. – rwong Aug 18 '13 at 11:35
  • 1
    You're not programming. You're just designing static content with a bit of code thrown in. Absolutely nothing wrong with that. Programmers don't always make for good designers. – Reactgular Aug 18 '13 at 15:49
5

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.

|improve this answer
  • I am always surprised by how many folks will look at you like you are crazy when you say that Photoshop is a poor tool for modern web design. Perhaps back in the day when everything on the site needed interlaced, stylized, celtic-knot borders, it made sense to do it in Photoshop, but its certainly not the ideal tool for modern, sharp-edged designs now. I'm a Fireworks fan myself, from the Macromedia days. – Graham Aug 20 '13 at 20:20
4

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.

|improve this answer
  • About webdesign you surprised me (at least 5 years full time), you make me thinking of it as a science which is not, i don't know what can someone learn about webdesign, it's an art and just a matter of choice, can you give me any links or ressources that talk about webdesign and how can someone learn it – user2567191 Aug 18 '13 at 19:59
  • other question which i am so curious to know it's answer, what is architectire and design, it must be something i m doing all the time and i don't know it's name, did you mean database model, class diagram or anything like this ? – user2567191 Aug 18 '13 at 20:04
  • @user2567191: For software architecture, see Additional resources on page 57 in Code complete, 2nd edition. For software design, see Additional resources on page 119, same book. For interaction design, the book Alan Cooper, Robert Reimann and David Cronin About Face 3, The Essentials of Interaction Design is unavoidable. For web design, there is no book which would be so excellent that I would recommend it, but you would find lots of them in any library. – Arseni Mourzenko Aug 18 '13 at 20:47
  • @user2567191: the assertion that webdesign is "just a matter of choice" is wrong. There are rules one should follow to become a professional designer and design the successful visual aspect of products. If a website uses yellow text on light green background, it sucks, no matter the taste and personal preferences of the visual designer. If it uses underlined text for anything but hyperlinks, it's a plain mistake of a person who doesn't know anything about web design. – Arseni Mourzenko Aug 18 '13 at 20:52
  • @MainMa what is the difference between an interaction designer and a UX designer? – Songo Aug 20 '13 at 16:21
2

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.

|improve this answer
  • I am wondering what makes you writing such a big comment for free – user2567191 Aug 18 '13 at 20:01
  • At my school, CS and Computer Engineering majors are required to take one course of "Introduction to History of Science" and one course of "Introduction to Cultural Anthropology". (Somehow they are not electives - no substitutions allowed.) The primary reason, as one goes into workforce, is probably to avoid repeating the mistakes. Or to put it in a single word: Enlightenment. – rwong Aug 18 '13 at 21:00
1

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.

|improve this answer
  • I am using notepad, and my websites are not static, and i still work much on html/css rather than developping, may be because i am not skilled enough on html/css – user2567191 Aug 18 '13 at 20:06
1

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.

enter image description here

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.