I have begun doing a lot of javascript development recently, mostly front-end but also using node.js. As I am currently in the transition from large company to startup, they expect me as a front end developer to know how to produce semi decent designs (Which I cannot)

I am looking for a book (or set of screencasts) to give me some good well rounded advice on design. I know CSS, but my design are always awful looking, I also know nothing about Photoshop (and am on Linux and have no access to it)

What are your picks? I am not looking to be a full time designer I would just like to be able to contribute.

This question appears to be off-topic. The users who voted to close gave this specific reason:

"Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Programmers as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – gnat, MichaelT, Bart van Ingen Schenau, GlenH7, Jim G.

5 Answers
5

The folks at Smashing deserve their own answer. They started strong with a website devoted to web and print design covering graphics, CSS, typography, color, and more. Equally matched with these visual aspects of design are their articles and how-tos on coding - specific HTML/CSS techniques and such. I've often called on Smashing advice to determine the 'right way' to handle a some aspect of code and cross-browser trickery.

Since you are heavy into JavaScript, start with what they have tagged in that category. You may pick up some immediately useful tips as well as discover their broader range of content through tertiary links.

It doesn't stop there...the Smashing Network is vast and beautiful. They just published their second book (Smashing Books #1 and #2). While you can probably find all the book content on the site somewhere, it's certainly succinctly collected in book form. Finally, they have a new and growing book series (Amazon search) on HTML, CSS, jQuery, WordPress, and more.

For an excellent set of examples of what NOT to do (and therefore learn from other people's mistakes) ... GUI Bloopers is the book to read.

If you are interested in not just improving the look and feel, but to substantially improve how people experience your site (and learn from numerous well designed sites on the web), Jakob Neilsen book E-Commerce User Experience is the bees knees!

It sounds like you want a design for the web type of resource. Something to help you on the front-end, user interaction side of things. Recommendations follow, but I need to mention design isn't all about fancy CSS and Photoshop. Appealing visuals are important, but the overall experience, flow and facilitation of a user's experience on your site (or in your webapp) is also key. I'm talking about User Interface and User Experience design.

Don't Make Me Think by Steve Krug is a great (and popular) book on how people user and interact with websites. It's a relatively small book, easy to finish and you'll find many lessons are obvious now that you know.

Speaking of...Designing The Obvious by Robert Hoekman is another solid book on web software design. Among other lessons, it'll remind you of the value in helpful error handling.

I second About Face, but I'd also highly recommend his other book: "The inmates are running the asylum" for a treatize on not the "how" of interfaces" but the "why". Ie how to think about design not from a visual standpoint but from a actually wanting to solve problems and provide good user experience

Web design may sometimes seem like a "mirage". You are tempted to believe that the only way to achieve a pretty design is with complex CSS3/Photoshop tricks but almost 80% of websites look nice with a simple and lean design. Learn how to build a 'useful' layout for all devices, read about nice colors, pretty fonts.

A relevant example is right in front of your eyes - www.google.com . Do a search, navigate through the menus and you'll see that without any fancy quirks you have a very pleasant user experience (which in the end is the main goal for all web developers).

Then a very good place to start is Twitter Bootstrap which will help you produce the decent design that you're after.

The more advanced stuff (Canvas/Photoshop etc.) you should leave to the real pros (the ones that don't write Node.js backend code).