While developing web applications and doing every part of it myself(design, coding, everything), I have noticed that I design my web apps in three stages: 1. I

While developing web applications and doing every part of it myself(design, coding, everything), I have noticed that I design my web apps in three stages: 1. Interaction Design: In this stage I design my web app's UX - mainly wireframes. The focus is on usability and not on look and feel. For this the only useful tools are paper, pen, whiteboard and an open, creative mind. Knowledge of html,css,js will help you in determining what is feasible and what is not. 2. Illustration(optional):In this stage I take wireframes as input and create a design that will look exactly like final desired product. I use vector graphics tools to create design and then export it into png files. If some heavy graphics is needed I also use raster graphics programs. Tools recommended: 1. Vector : Adobe Illustrator or Inkscape(open source) 2. Raster : Adobe Photoshop or GIMP(open source) I don't use anything else. 3. Web Design : In this stage, I do actual front end development. I take png mockups created in previous stage and make webpages by coding html,css,js in my editor. Tools used : a good editor(vim/emacs) css reset(http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/) jquery library(and some plugins) Browser(Chrome/firefox for development/testing. IE8+ and Safari for testing) Some browser plugins - Firebug, Color Pick, Resolution Test, etc. Some sites - 0to255.com, kuler.adobe.com, ui-patterns.com, smashingmagazine.com That's it. Anything else isn't really necessary. One more advice. Get inspired. Find sites that inspire you, sites with good design. Learn from those designs. Keep learning. Keep improving and keep designing. Some recommended sites : http://www.cssmania.com/ http://www.cssmania.com/ http://dribbble.com/ http://dribbble.com/ http://www.awwwards.coam/ http://www.awwwards.coam/ http://themeforest.net/ http://themeforest.net/