32

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?

Improve this question
4
  • 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, 2010 at 21:35
  • 1
    This seems a bit off topic to me. Perhaps more suitable for webmasters?
    – Phil Mander
    Dec 8, 2010 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, 2010 at 2:03
  • 1
    @Phil - Webmasters do not design websites. Definitely not appropriate for that site.
    – Charles Boyung
    Jan 4, 2011 at 18:47

6 Answers 6

Reset to default
10

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)

Improve this answer
6
  • @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, 2010 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, 2010 at 14:20
  • As a free alternative to Photoshop you could try GIMP, see tutorials at: tuxradar.com/gimp
    – kasterma
    Dec 8, 2010 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, 2010 at 23:14
  • 960 grid rocks!
    – JP Alioto
    Dec 30, 2010 at 0:52
10

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

Improve this answer
1
  • save this comment
    – Lanaru
    May 13, 2013 at 21:49
6

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.

Improve this answer
3
  • Excellent point. UX is very important.
    – Moshe
    Sep 2, 2010 at 21:42
  • 7
    DMMT is, as I understand it, more of a usability book than a web design book.
    – Fishtoaster
    Sep 2, 2010 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, 2010 at 1:28
1

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.

Improve this answer
1

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.

Improve this answer
1
  • This book was key reading material in my Human-Computer Interaction course at Uni.
    – Richard
    Feb 7, 2012 at 10:41
1

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.

Improve this answer
0

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