Website design workflow course

I do not believe there is a signal course on treehouse that goes over all of those topics, but I know that all of those topics are covered here at treehouse. The closest your are going to get is the "Build a Basic Website" course Nick Petit did. With that course though the design work is already done.

As far as Photoshop/Illustrator goes, a lot of web people are trying to remove full blown mockups from the workflow. Some people argue that this saves time and prevents client from getting unrealistic expectations regarding how their site will look ( unless you take the time to do designs for all screen sizes).

I get the feeling from your question that you might be having a problem that I had when I first started, which was how to go from a mockup to a website. I found that the best method for me was to chunk things, and by that I mean break things into chunks and work on one chunk at a time. I usually break sites down into 3 big chunks, header section, content section, and footer section ( I work almost exclusively with WordPress and Drupal so that's why I use those chunks). From there I break each chunk down into smaller chunks and start coding those chunks. For example, if I am working on the header section of a site, I will look at the different UI elements in that chunk ( Logo, menu, search box, login), code (html, css, and JS) each of those element individually, and then bring them all together and position them on the page. Once I finish with all the smaller chunks in either the header, content, or footer I move on.

Now, as far as design work in IL/PS goes I wish I could be more help. I do some design work at my company, but not a lot. I also don't consider myself a designer, but i will tell you my work flow for mocking up a website. So when I design I start small and go big, meaning I start designing UI elements ( buttons, forms, menus, links, h1-h6 tags, page titles, etc.) and decide their shape, color, font size, padding, and so forth. Once I finish with the element, which I get from the features list, I move on to placing those elements into the header, content, or footer sections on my art board (yes I use Illustrator to do my mockups and photoshop for edit images). This part of the process take a while since I'm just moving thing around the art board until I like where they are at and I believe their position will be usable by the end user. Once I have everything where I want it I start adding design elements to the page ( background color/images and such).