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?

15 Answers 15

  • 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.
  • 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:

  • 13
    "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
  • 2
    Check hackdesign.org it's a very good weekly lesson about design for hackers. – Augustin Riedinger Jun 11 '13 at 10:04
  • 1
    PSD Tuts - bad link! – Dmitri Zaitsev Jul 30 '14 at 8:37
  • 1
    I'd add to this list how important the user is, design should be usable first and anything that gets in the way of usability should be dropped – Toni Leigh Jul 16 '15 at 15:56
  • So basically everything you do with code. Stick to either tabs or spaces. Use whitespace. Remove clutter, etc. – Bald Bantha Apr 29 '16 at 20:46

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.


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:

  • 2
    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
  • 4
    @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
  • 1
    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 by Robin Williams: This books covers the basics of graphic design.
  • Drawing on the Right Side of the Brain by Betty Edwards: The book for developing your drawing skills.
  • The Humane Interface by Jef Raskin: This book provokes some thoughts about user interface design.

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.


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.


Learn a lot about typography.

From the classics

The Form of the Book, Tschichold
Jan Tschichold

Not the clowns

The End of Print: The Grafik Design of David Carson
David Carson

Strategic and effective typography is one of the most commonly absent qualities in this field (and always has been).

I can usually recruit a designer based entirely off of their type handling. About 80% of the story is right in the resume set up.

A good (free) start is this detailed adaptation of the essential resource from Robert Bringhurst for application to the web.

The Elements of Typographic Style, Bringhurst
The Elements of Typographic Style, Bringhurst

This is a broader consideration that deals with the interplay of type and layout.

Grid systems in graphic design
Grid Systems in Graphic Design, Brockmann

  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



Smashing Magazine

PSD Tuts


UX Booth


A few points to keep in mind:

  1. Every design solves a problem

Stop thinking about the design in terms of "How do I make this pretty?" and start thinking about it in terms "How do I make this as easy to use as humanly possible?"

When you're making websites, this means that, in the broadest sense, you're solving a business problem.

A website exists to realize a business goal.

The users of a website also come with their own goal in mind—they might want to buy something, compare products, read up on a topic, etc.

It's your job as the designer to help the business by making sure that as many users as possible fulfill the business goal and to help the users navigate the website so that they can fulfill their own goal.

For example, you're designing an e-commerce store: The business goal here would be to sell the products. And the users' goal is to find exactly what they want to buy, as quickly as possible and check out, as quickly as possible.

A great part of the design process goes into figuring out the problem, building a profile of the user, thinking how to realize the business goal, etc.

The colours, fonts, layout, every design decision you make has to be dictated by the goal of the website.

  1. It's repetition that makes things look pretty.

That's what consistency is about.

For example, font pairing. Fonts are paired based on similar traits, on repetition of details.

Here's a match: Farnham and Benton Sans.

Farnham and Benton Sans are a good match

According to this post here 2 these two fonts match because:

[...] the faces are alike in the squatness of their lowercase letters, which have distinctly short ascenders and descenders. [...] The lowercase letters of both are wide.

The repetition of certain traits makes these 2 fonts work well together. You can see them on a web page here 3.

Repetition brings harmony in a design. And harmony makes the design look beautiful.

But, as you can see, Farnham and Benton Sans also contrast—Farnham is a serif font and Benton is sans serif.

Why is there need for contrast? We're looking to introduce similarities in a design, right?

Well, yes, but too much repetition makes your designs dull and hard to use.

The cure is contrast.

  1. Contrast helps the user find their way

It helps them distinguish different elements from one another. It helps them find the key elements like headings, navigation, buttons.

The more important the element, the more it should contrast with its surroundings.

Use repetition to make your designs consistent. Like others have said—2 fonts a limited color palette, etc.

Use contrast when you really need to set apart an element from the rest.

All that's nice to know, but... still doesn't help you design your next website, right?

Well, I have a solution for that, too.

Step 1 to becoming better at web design is to observe and absorb others' work. A lot of it. That's where "inspiration" comes from.

Look at a hundred designs that you like, analyze them and you'll start spotting patterns. Your brain will help you combine these patterns into your own design which will be a variation of all the similar designs that you saw. You don't need to create something "unique".

Summary: Next time you start designing for your side project

Go through a dozen similar websites/web apps and make quick sketches of their designs. Note what workflow they used. Why did they use it? Note what shapes, colors and fonts they used.

Then go through this process to create your own design:

  1. Define the project. Immerse yourself into the project & get to know more about:

    1.Its purpose, intended outcomes

    1. Its (future) users
    2. The intended experience for its users/visitors
    3. The branding behind the project
  2. Acquire the needed resources. Get your hands on (sample) content (borrow from similar sites)
  3. Give shape to the content

    1. Choose a typeface in which to typeset the content (pick one that fits the mood and message of the site)
    2. Choose font size for the body copy
    3. Generate a modular scale(a table of proportional harmonic dimensions) from the font size of the body copy (using Type Scale - A Visual Calculator)
    4. Sketch different layouts based on the project requirements
    5. Build the layout (in HTML&CSS) with the help of the modular scale: column width, line height, heading sizes, bottom margins, columns (if needed)
    6. Apply color according to the brand guideline

You can read more about each step from this process here.


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.


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


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!!!

  • 2
    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

Subscribe to http://sidebar.io/ for daily newsletters. Each article will be helpful in one way or the other. Another great way to self learning about designs is dribbble.


This might be quite a general tip but to me it's something that really tells if someone is a good designer or not:

Whitespaces, margins and alignment.

They are the key to creating slick, professional looking designs. They create 'breathing space' of a sort and can really determine whether your design will look put together or not. Just like with fonts, you want to stick to a certain set margins/whitespaces to keep a layout looking clean.

To keep track of things like this, using a grid or guides to design with can be very useful.


Your question is like "As a designer, I constantly find myself needing basic knowledge of App Programming". They are both vast areas, with supor superimposed regions that needs each other. The good news: you're interested and understanding the importance of them. The bad news: there are no easy way to fully understand what takes to make good design, without a proper course or methodology. BUT for the first steps, this book is somehow a good one to securely start to build visual systems that make sense.

Non Designers Design Book

protected by DᴀʀᴛʜVᴀᴅᴇʀ Jul 1 '14 at 19:16


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