Tips and resources for beginning designers

Question

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?

Answer 1

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

• Smashing Magazine
• PSD Tuts
• Abuzeedo
• UX Booth
• I love typography
• Jason Santa Maria

Answer 2

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.

Answer 3

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:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - hosts the portfolios of a lot of world-class designers to draw inspiration from

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

Learn a lot about typography.

From the classics …

^{Jan Tschichold}

Not the clowns …

^{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}

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

^{Grid Systems in Graphic Design, Brockmann}

Answer 8

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

Answer 9

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.

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

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.

3. 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

   2. Its (future) users
   3. The intended experience for its users/visitors
   4. 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.

Answer 10

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.

Answer 11

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

• Design For Hackers (printed book)
• Principles of User Interface Design (site)
• Step by Step UI Design (ebook)
• The Shape Of Design (free online version)

Answer 12

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

Answer 13

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.

Answer 14

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.

Answer 15

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