Learn the Basics of Design This Weekend

Last weekend we looked at resources to teach you how to code, but writing your app is only half the battle. It needs to look good, too. Here are resources to help you learn the basics of design this weekend.

The Basics

To get started, you're going to need two things: a basic understanding of design and Adobe Photoshop. Of course, not everyone wants to drop hundreds of dollars on Photoshop (or the entire Adobe Creative Suite), so check out these alternatives (or these) if Photoshop is too expensive for your taste. As for the knowledge portion, here are the main things you want to learn:

• Get to know the elements of design, such as points and lines, shapes, space, andmore.
• How color works, the details of the color wheel, and the impact it has on people

Be sure you know how to use the software you've chosen as well. If it's Photoshop, there are excellent classes on lynda.com. If you'd rather go the free route, you can find plenty of stuff online. These tutorials provide plenty of good exercises to try so you can get acquainted with your toolset. You Suck at Photoshop is probably the most entertaining way to learn. We also post a few Photoshop tutorials here and there as well. If you want to learn specific, undoubtedly there is someone online who has posted some kind of help (likely in video form) which you can find with a quick web search.

Inspiration

Inspiration is what's going to help you find your style. Understanding how things work and what has worked in the past is important in most fields, but it's very important when it comes to design. That's not to say you should learn the rules and follow them with rigidly, but that it's extremely useful to know 1) what you like, 2) why you like it, and 3) how to create the designs you find most compelling. Once you've got those three things down, experimentation will come naturally.

So where do you find inspiration? One option is the design blog Web Design Ledger(WDL). They post tons of great examples of design elements to help you keep an eye on what's working and giving you a source of inspiration. Here are a few good posts to get you started:

• 35 New Clean & Minimalist Websites to Inspire You
• 30 Examples of Excellent Website Navigation
• 50 Inspiring Examples of Texture in Web Design
• 40 Excellent Examples of Single Page Websites
• 35 Creative 404 Error Pages
• 25 Fresh and Useful Icon Sets
• 30 Inspiring Design Agency Websites
• Web Design Trends in 2011

Another great option is the design community Forrst. While the community is member-only, anyone can apply. It's a wonderful place to find other good design work and get feedback on your own to help you progress. A less-exclusive option is Ember, which is a similar type of site but was designed to work with some specific apps meant for clipping.

Once you start to find people you like, however, keep and eye on what they're doing and who they like so you can explore more points of inspiration. For example, Tina Roth Eisenberg (a.k.a. Swissmiss, designer of TeuxDeux) plays a very active role in promoting design she likes and sharing relevant designs resources on her blog.

Fonts

No designer is without his or her fonts, and there are numerous free options to choose from. Font Park will start you off with over 70,000 to choose from. Da Font is a smaller, more curated collection with tons of great options. There are plenty of other free font tools and resources, but it's more important to first understand typography. WDL offers upseven free typography ebooks to get you started. If you want additional portability, you can download the Typography Manual iPhone app. One you've got a basic understanding of typography, take a look at mastering font combinations. Rarely will you stick with a single typeface in a design, so understanding the principles of combining fonts can save you a lot of frustration.

What's the font in all the images? If you don't recognize it, head on over to the League of Movable type to download their wonderful font League Gothic.

Web Design

If you're looking to learn design, chances are you're planning on doing it for the web. Even if you're not going to learn how to code as well, you're still going to need to pass yourself off as a developer from time to time. Here are a few great resources to help cut development corners and get some really stunning functionality into your web designs without a ton of work:

• 10 Useful jQuery Plug-ins for Images
• CSS 3.0 Generator can help you generate some really stunning, fairly complex CSS styles.
• Pure CSS Progress Bar
• New Options for Web Fonts
• 3 Advanced CSS3 Techniques You Should Learn
• How to Become a JavaScript Badass

Got any other great design resources you like? Share 'em in the comments!