How can you learn to design nice looking websites? [closed]

Question

I am a moderately capable web developer. I can put stuff where I want it to go and put some JQuery stuff in there if I need to. However, if I am making my own website (which I am starting to do) I have no idea how to design it. If someone was to sit next to me a point to the screen and say "put this picture there, text there" I can do that quite easily. But designing my own site with my choice of colours and text will look like a toddler has invented it.

Does anyone know any websites/books I can look at or has anyone got any tips on the basics of non-toddler web design?

Answer 1

You have a few things to do.

Tips:

Learn to use Photoshop. (In particular, layer styles are excellent. Just note that they can be difficult effects to reimplement in CSS2) It goes a long way towards making good mockups.

Look at professionally designed sites. What sites have you been to that look nice to you?

Find sites that bother you and consider what could make it better. Look at product advertisements as well. Food packaging. Newspaper ads. You name it.

Also, once you start getting the hang of it, practice, practice, practice. Graphics takes time to develop as a skill, especially from a programmer who has coding to consider. (Gradients vs "tileability")

Tools:

(Photoshop is a personal favorite. Paint.NET is a good Windows alternative, but is not quite as powerful.)

Nathan Smith's 960 grid system. It has templates for many of the mainstream graphics programs. Check it out.

References:

Look at some of these sites: (I've seen more, I'll try to add as I come across them)

• A List Apart
• John McCain
• BarackObama.com
• Hayon2010.com (Okay, I made this one, but I think that it's nice. edit: I'd appreciate comments on it too. ;-D)

Answer 2

The Practical Side

There is definitely some practical step-by-step aspects of design that are important to learn. Not everything is subjective.

   •  Web Design Tutorials: http://webdesign.tutsplus.com/

   •  Photoshop Tutorials: http://psd.tutsplus.com/

   •  Tons of Tutorials: Lynda

Inspiration

   •  Website: Unmatched Style

   •  Website: Abduzeedo

   •  Book: Guidelines for Online Success

   •  Website: Smashing Magazine

Design Skills

General Design

   •  Book: Graphic Design: The New Basics

   •  Book: Graphic Design, Referenced

   •  PDF: The Big Four: Contrast, Repetition, Alignment, Proximity

Typography

   •  Book: Thinking with Type

   •  Book: The Elements of Typographic Style

   •  Article: http://en.wikipedia.org/wiki/Typography

   •  Article: http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

Layout

   •  Book: Layout Workbook

Color

   •  Book: Color Design Workbook

   •  Book: Color Harmony Workbook

Philosophy of Design

"The dumbest mistake is viewing design as something you do at the end of the process to ‘tidy up’ the mess, as opposed to understanding it’s a ‘day one’ issue and part of everything." -Tom Peters

 

"Good design keeps the user happy, the manufacturer in the black and the aesthete unoffended." -Raymond Loewy

 

"Truly elegant design incorporates top-notch functionality into a simple, uncluttered form." -David Lewis

"Good design is good business." -Thomas J. Watson Jr.

More Quotes

Answer 3

This might be slightly off topic, but I do remember Jeff Atwood strongly recommending the book Don't Make Me Think. It describes how you should design your website for the best user experience.

Answer 4

Ogilvy on Advertising: this book covers some basics of graphic design as well as a lot of common sense in making any kind of flyer, ad, etc. even if it was written way before the www era.

More generally, browse books and magazines on graphic design, fine art, interior decoration, filmmaking - there are a lot of common design principles for making something visually attractive and making information or other content appealing. Kind of like how electromagnetism is common to electronics, planetary science, chemistry, nuclear and other fields of physics and engineering.

Answer 5

Another good book in this space would be The Design of Everday Things. It covers a lot of the practical ideas like favoring designs that lend themselves to easy usage by taking advantage of how people naturally approach a new thing. The book isn't specifically about UI or web design, but does cover that a bit, I believe.

An early example in the book is doors. He talks about how doors with a knob or handle on one side and visible hinges are intuitive, because you know the door the will open by pushing or pulling on that side. Fancy doors with hidden hinges, push bars across the whole door, or centered knobs are tricky and require a moment of experimentation because they're operation isn't intuitive.

Answer 6

One tool I find invaluable in design is Color Scheme Designer. I typically pick a color I'd like to base the design around and then use the "Analogic" scheme to get a nice set of matching colors. To me, getting the colors right is the worst part, so after that the rest is just getting a nice layout and applying the limited palette of colors.