Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Thanks to the internet, graphic design and programming are becoming increasingly overlapping fields.

As a programmer, I constantly find myself needing basic knowledge of Graphic Design, but have trouble locating thorough yet concise graphic design learning resources, and instead usually find bits and pieces of knowledge applicable to the task at hand.

Can you guys offer some tips or recommend some good books, tutorials, blogs, and websites which provide a beginner level overview of web design that have been, in your experience, effective and high quality learning materials. I'm not looking for tips on how to use image editing tools, but assuming a basic grasp of those, which resources and advice will best help a new designer create professional looking designs?

share|improve this question

12 Answers 12

up vote 107 down vote accepted
  • Stay Simple - Don't try to do anything too fancy or adventurous at first. Get the basics down first, then you can start experimenting. Don't try to emulate the Star Trek computer interface.
  • Be Consistent - A consistent design is part of the foundation of a good design. Keep track of your margins, sizes, and placement and maintain them throughout the design.
  • Remove Clutter - Only include the elements that are necessary to the design. Remove everything else.
  • Prioritize - What is the primary purpose of the design? Emphasize that purpose. Make it obvious.
  • Use Whitespace - Allow for proper margins. Large blocks of text with little or no margins aren't very readable. Ditto for other design elements.
  • Use A Color Palette - You shouldn't use more than 4-5 colors in total. If you're having trouble choosing a color scheme, check my article on choosing a color scheme for your website.
  • Consistent Fonts - Stick to one or two fonts. Use them consistently, usually one for headings, one for paragraph text. Calculate and maintain consistent font-sizes, line-heights, and line-spacing. Do not use Comic Sans unless you can fend off rabid velociraptor zombies.
  • Design First - Design shouldn't be an afterthought; it should be a first-class member of the planning stage. Design will be the way your users interact with your programming and they'll form their opinions first and largely based on your design. Give design its proper importance.

As for resources, you check out any of the following websites:

Edit: I've expanded this answer and turned it into a blog post called Design Basics For Programmers.

share|improve this answer
4  
"Don't try to emulate the Star Trek computer interface." Hahaha, brilliant. :D Thanks for the informative answer. –  Rob Howard Jan 4 '11 at 23:36
5  
+1 for the anti-comic-sans statement –  squillman Jan 12 '11 at 3:27
1  
Check hackdesign.org it's a very good weekly lesson about design for hackers. –  Augustin Riedinger Jun 11 '13 at 10:04
    
PSD Tuts - bad link! –  Dmitri Zaitsev 2 days ago

Jim Krause's design basics index gave me a very good summary of the basics of composition, color and type. I wasn't a huge fan of most of his own examples, but they illustrate his points really well and he touches on a few valuable things I haven't seen mentioned much elsewhere. And perhaps most importantly, reading it made me really excited to go out and experiment with the ideas he was introducing.

share|improve this answer

There's sometimes a slight overlap between web development and web design, but I don't think web developers should try to be full-time designers unless they're willing to put as much effort into it as they did learning to program. It's not something that you can just dabble in on weekends and be good at.

If this is so you can learn to be your own web designer (i.e. do your own web design for all the sites you work on), then I really recommend you get some formal training (even if it's just taking a few college design courses) to learn the fundamentals of visual design and composition. A textbook-style design book like the one Damon posted could help, but you'll have to actually do all the exercises in the book and make sure you understand the material. But most importantly, you need to spend a lot of time looking at (browse online design galleries, flip through magazines and magazine ads, etc.) and creating designs (download some practice design briefs online or enter online design contests).

If it's to help you communicate with the web/graphic designers you work with, then simply getting a book that teaches you the vocabulary (e.g. typography concepts) and focusing on usability, accessibility, and UX design is probably the best use of your time. This way, you can get involved in the creative direction of the project and help design the interfaces, but the designer is the one who creates the "look" or aesthetics of the site.

Virtuosi Media lists a lot of good resources (the Tutsplus network is great in general, and Smashing Magazine is a must-read for any web developer/designer), to which I'd add:

share|improve this answer
1  
I agree with most of your points, and i'm not considering a career change or anything like that :-) At work and if I were to start a really serious personal project obviously professionals do the work. But me and I assume many other programmers like to build little mini projects and can't hire pros for something thats gonna get 4 visits a month. So with these endeavors I design them myself, and the better they look, the better chance they'll take off. I also enjoy the process of trying to create digital art. Its a nice break from coding and a decent result makes it all the more pleasing. –  Andy Groff Jan 5 '11 at 8:06
3  
@Andy Groff: That sounds like a good plan. I was mainly referring to web developers who try to handle design themselves for commercial projects and end up spending 95% of their time on the development part and then try to do the design in the last 3-4 days before the deadline. But I think anyone can get something out of learning new skills and expanding their horizons. It's sorta like how athletes do cross-training, which helps improve their overall performance. –  Calvin Huang Jan 5 '11 at 18:23
    
There's HUGE overlap in terms of roles. Those roles usually aren't handled by the same person, of course. –  DA01 Feb 2 '11 at 15:55

I'm a programmer myself and for me the following books where very helpful for me:

The Non-Designer's Design Book - Robin Williams - This books covers the basics of graphic design.

Drawing on the Right Side of the Brain - Betty Edwards The book for developing your drawing skills.

The Humane Interface - Jef Raskin This book provokes some thoughts about user interface design.

share|improve this answer

Perhaps not relevant to all cases, but for web prgrammers one of the biggest things that stands out to me, which perhaps bridges the gap a little bit, is to learn CSS inside and out, as being able to design well doesn't mean anything if you can't integrate it into your project that you are creating.

share|improve this answer

I found this helpful: http://net.tutsplus.com/articles/lectures/design-for-developers/ It's well worth a watch.

share|improve this answer
5  
A list of the lecture's main points would really improve this answer. –  Steve S Mar 31 '11 at 14:25

In 2004 I found myself halfway between both worlds, as I had been for most of my life -- I'd been doing web since HTML 3.2 in the dot-com days; raised with an Apple //e by parents (a choreographer and an educator) who allowed and encouraged me to spend a lot of time with art. Design is not art, and in fact some of its more algorithmic patterns line up nicely with programming, whether you are doing web or otherwise.

Bookshelf Histogram

  • Bookshelf Histogram -- a print I made in graduate school that's both design-y and developer-y.

But so yeah, 2004: I split the difference when I went to graduate school, where I first got a first-class typographic education, and then the latitude to explore -- during which latter time my geekier proclivities came in handy.

So perhaps consider higher education, or whatever is likewise engaging in an all-consuming fashion for you. Good luck with it either way.

share|improve this answer

A few more:

  1. Glance through inspirational website collections for ideas. A Collection Motherload of Inspirational Website Collections lists quite a few collections. Another two good sites are siiimple.com and minimalsites.com.

  2. Virtuosi Media's 'Remove Clutter' suggestion is a definite ideal, but a site with clutter done by a beginner looks better than a minimalist site done by a beginner. Clutter somewhat camouflages the other poor design elements, distracting with content. The typical business site has way too much clutter, as do nearly all templates, but are still professional enough looking.

    It takes an intimate connection with fonts, contrast, negative space, coloring, density, flow,... to create the truly well-designed, efficient site that breathes well.

  3. If it all becomes a bit overwhelming, consider buying a template.

share|improve this answer

http://www.webtypography.net/

A very detailed adaptation of the essential resource from Robert Bringhurst for application to the web.

share|improve this answer

Just to add a couple more links for people coming from a programming background interested in UI design.

share|improve this answer

In the starting you will face trouble as some things will not in your way. But you will have to be patient and do a lot of practice. When i started designing and look back my 4 years ago work, can't believe that i did that work.

You really need to look for other great designers work. For that you should follow great designers on Dribbble. Also other very very important thing is to regulary watch latest designs on css gallery sites like www.minimalistgallery.com or others.

Wishing all the very best!!!

share|improve this answer
    
Hi, both your posts on this site have linked to the same external site, minimalist gallery. Just so you know, people might think this sort of thing looks a bit spammy. –  user568458 Mar 27 '13 at 20:55
  1. Think critically about designed objects around you

    Nearly everything in the man-made environment has some sort of design behind it, whether it’s a graphic, a website, or a fashion accessory.

    Notice how well the design functions for its intended purpose, as well as how it looks.

  2. Think of design as a way to fill a need or solve a problem

    While it strives to make things look good, design differs from other types of art in that it has a practical application.

    A logo, for instance, is a type of graphic design that helps make a brand or company quickly recognizable.

    An article of clothing serves the purpose of covering the body, in addition to making the wearer look more attractive.

  3. Practice communicating visually.

    Designers need to be able to make drawings or other representations of their designs in order to refine them and explain them to other people, such as design colleagues and manufacturers.

    Drawing is a powerful tool for designers, but don’t worry if you can’t draw photorealistically. Designers’ drawings don’t have to be masterpieces, just a way to quickly capture ideas that will lead to the finished product. Tracing is also totally acceptable.

    In addition to drawings, designers also use things like mock ups, prototypes, and computer imaging to visualize their designs.

  4. Explore how things are made

    When you work as a designer, you not only have to consider what is pleasing to the eye, you always have to consider how your design will be implemented.

    For an object like a cellphone case, industrial designers need to think about what kind of plastic and molding processes will be used, and how each part will be attached together.

  5. Find good sources of information

    In addition to design magazines, look for books about the process, principles, and methods of design.

    Try looking at textbooks and technical videos for things apparel construction, manufacturing methods, and various craft techniques.

    Learning about design goes deeper than reading fashion and decorating magazines, although these are a good resource for current trends.

  6. Developing your design skills

    Study and practice is good, but the thing that will really take your design to the next level is real world experience.

  7. Make mistakes quickly

    you will make lots of mistakes, and the faster you can get through them, the better.

  8. Always be ready to catch ideas.

    Look for inspiration everywhere. Inspiration doesn’t have to come from other designs or design trends--often it can come from nature or things that happen by accident.

Books & materials

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

PSD Tuts

Abuzeedo

UX Booth

share|improve this answer

protected by Matt Jul 1 at 19:16

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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