I'm in the process of learning how to design my website. I've been reading a lot of design theory but now that I'm about to start learning how to use the tools, I'm stuck!

What tool shall I use? There are so many!

Photoshop? InDesign? Illustrator?

Can anyone explain me what should I use and what's the best way to learn?


  • It depends what kind of website. You can make a website using a text editor. – delete Feb 23 '11 at 11:42

Photoshop is primarily used for designing the graphical template.

The technique commonly used is to design in Photoshop exactly what you want the front page to look like. Then, you can make slices or just copy / paste parts (E.g. the header or banner) and use them in the background of the respective element.

If you want to learn some cool techniques to use, look at free website templates. If you see some feature that you like, look at the source code and figure out how to do it, then incorporate it into your design. Over time you can accumulate several little tricks that will make your work truly unique.


For the overall design, I prefer Fireworks. To me, it's simpler, and easier to use for adjusting locations, sizes, and other attributes for various elements. Photoshop for full page design just seems very clunky, since you can't re-size or otherwise change things as easily as in Fireworks.

Not to say that Photoshop can't be used at all - it is still useful for creating specific elements, such as banners, buttons, etc, and then bringing those into Fireworks to integrate into the overall design.

Fireworks works because it is primarily vector, and is just works for web page design. It's also possible to Illustrator, which is also vector, to do page design, though it's not as optimized for that use.


The best way to learn is to actually use it. If you enjoy drawing and graphic design, then it'll be no problem for you to pick up a new program and become proficient in it after 2-3 months. If you don't enjoy graphic design, and you're not designing stuff for fun in your free time, then it'll be impossible to get good at graphic design, even if you take a paid course.

Of the Adobe CS suite programs, Fireworks is the one that is specifically for web design, but Photoshop can work as well. Illustrator is a vector program that is more suited for creating logos and vector illustrations. InDesign is a layout program that is more suitable for typography-intensive projects like print design.

Edit: However, many people do use Illustrator and InDesign (in place of apps like OmniGraffle, Axure or Balsamiq) for wireframing as you can easily lay out premade UI widgets to design your UIs. There are many such wireframe kits available for download for both of these programs.)

  • I have a background in CS, I have no knowledge in design but I do not believe that one cannot learn unless he has done that "in the free time". My goal is to learn how to create a Apple-style site, such as instantshift.com/2010/01/30/… . If possible, I'd like tips in how to start doing that. There are few tutorials for that. – donald Feb 23 '11 at 13:14
  • 1
    How do you expect to "learn" if you don't practice? – Lèse majesté Feb 23 '11 at 13:26
  • 1
    brain injection. All the good web developers are doing it these days to get good at new skills without having to learn, train, or practice. – XOPJ Feb 23 '11 at 16:48

I have done full sites using Illustrator or Fireworks (the graphic template, that is), but I usually prefer just Photoshop (even if some graphics might be done originally in a vector software) and doing my HTML/CSS in a plain text editor (but a good one: Notepad++ comes to mind). And to be true, done a bunch of sites this way, through the years.

Some people just use the Fireworks and Dreamweaver combo (since some years Dreamweaver's coding mode does respect your code, not like other WYSIWYG editors), and imho that is ok, too, though not my cup of tea.


Being fully conversant in some graphics software is a fantastic skill to have. However the program you choose really depends on the kind of work you would like to produce and your personal style as a designer.

Analyse your work and try to match your style to the main features of the different software. Watch some tutorials (www.lynda.com) and see if any of the processes suit your work.

However, I would suggest that this is only the first stage of learning web design. As mentioned above these graphics packages are for designing static elements which doesnt particularly suit the real world.

Instead I would recommend using these tools to design Style Guides (http://www.creativebloq.com/design/create-website-style-guide-6123030) to create a generic look for your websites. After you have these finalised you can move straight into developing the site in a text editor and browser. Then use your style guide as a template to create your structure, navigation and content.


There are so much software products available today that it is getting easier and easier to get lost... I personally have been using exclusively Corel Photo Paint for making any kind of graphics, both for websites and for 2D games, since 2001 or so. For writing HTML I have been using Notepad, but its limitations finally were unacceptable for me and I downloaded the free version of Coffee Cup HTML Editor, that makes the work much easier for writing HTML, CSS, Javascript, PHP and surely many more. Also note that recycling is a very important part of this job; I rarely have to start anything from scratch.

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