Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question

closed as off topic by Mark Trapp, bigown Dec 31 '10 at 15:19

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1  
Look at the code produced on sites that have good design. You should be able see their style sheets and get some idea of how they were put together from the HTML. –  ChrisF Sep 2 '10 at 21:35
1  
This seems a bit off topic to me. Perhaps more suitable for webmasters? –  Phil Mander Dec 8 '10 at 22:12
9  
ChrisF, he asks about design and you suggest looking at the code? Let me guess, your a programmer. –  Craig Dec 30 '10 at 2:03
1  
@Phil - Webmasters do not design websites. Definitely not appropriate for that site. –  Charles Boyung Jan 4 '11 at 18:47
add comment

6 Answers 6

up vote 8 down vote accepted

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)

share|improve this answer
1  
+1 for A List Apart - Awesome site. –  Brandon Sep 8 '10 at 20:06
    
@Moshe - Since you asked for comments on your site - looks really great, only problem I have from a quick glance is the red color; it's just a little too jarring for me. –  Edan Maor Sep 8 '10 at 23:20
    
@Edan Maor - Thank you for looking. I hear your bit about the red. I made it that bright because it fits the political color scheme of red white an blue. I it were darker, it would bed up more like maroon, which doesn't belong there. Thanks for the input! I appreciate it. –  Moshe Sep 12 '10 at 14:20
    
As a free alternative to Photoshop you could try GIMP, see tutorials at: tuxradar.com/gimp –  kasterma Dec 8 '10 at 21:43
    
@Kasterma - Yes, GIMP works too, but Photoshop is an industry standard. GIMP is overly complicated. I've used that too. –  Moshe Dec 8 '10 at 23:14
show 2 more comments

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

share|improve this answer
    
save this comment –  Lanaru May 13 '13 at 21:49
add comment

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.

share|improve this answer
    
Excellent point. UX is very important. –  Moshe Sep 2 '10 at 21:42
7  
DMMT is, as I understand it, more of a usability book than a web design book. –  Fishtoaster Sep 2 '10 at 22:41
3  
@Fishtoaster yes but Usability and design are interlinked, as in good usability defines the design of the website. –  Darknight Dec 30 '10 at 1:28
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
This book was key reading material in my Human-Computer Interaction course at Uni. –  Richard Feb 7 '12 at 10:41
add comment

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.

share|improve this answer
add comment

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