Guest Post: 4 Tips for Getting Started with Web Graphics – Kate Monson

Kate Monson



About the author: Kate Monson is a media strategist and designer who works with progressive nonprofits, businesses and campaigns. She is now blogging at Visualize Progress and would love to meet you on Twitter.



(Reblogged from Visualize Progress.)

Making eye-catching graphics for your site or page can be easier than you think. Here are four tips on how to get started:

1. Get inspired through research.

While you don’t want to go hog-wild on the latest design trend–it is a trend, after all–there’s no reason not to check out how other brands in your industry are conveying their message visually. A big trend you may notice (some might say too big) is flat design, which has gotten lots of brands to focus on a clean, minimalist look. What’s most important is to figure out what speaks to your desired audience and design in a way that supports and enhances your brand.

2. Sketch first.

It’s tempting to jump right into a design program and start drawing, but moving shapes around a screen without first having a clear sense of what you want to accomplish can be frustrating and inefficient. Instead, start with a pencil and paper sketch. It’s okay if your sketch is ugly–no one has to see it! Using graph paper can help you be more precise. Draw enough to show what you want to include, how the parts will be arranged and what colors you’ll use. If you really, really want to sketch on a screen, try Paper (for iPad) – it’s very simple and lets you email or post your sketches and create notebooks to keep them organized.

3. Choose the right software.

When you’re ready to translate your design to the screen, make sure you have the right tools for the job. Most pros use Adobe Photoshop, Illustrator and/or InDesign, which used to be rather expensive.  Now with Adobe Creative Cloud, you can subscribe to one of these programs for $20/month or all of them for $50/month, and there’s a one-month free trial. Excellent free alternatives include Inkscape and GIMP (for Mac or Windows) and (for Windows only).

4. Pick a great typeface or two. (But not 6.)

A unique typeface can add just the right flavor to your graphic. Two typefaces can work together to create interesting contrast. Using too many typefaces, however, is a surefire way to complicate your project and muddle your message. You should also avoid overly decorative typefaces: no matter how thematic a typeface may seem, it’ll only work if your audience can read it! There’s a reason why so many big companies choose classic typefaces like Helvetica for their logos and graphics.

(What’s the difference between a typeface and a font, you ask? A typeface is the overall appearance of your text, and a font is the delivery mechanism–i.e. a file filled with a set of characters–that gives you the typeface.)

I encourage you to invest in quality fonts made by the many hardworking type designers out there. But if you aren’t ready to buy, there are thousands of free fonts available on FontSquirrel, Dafont and Google Fonts. When using a free font, make sure the license allows commercial use. Some free fonts lack punctuation or other characters, so be sure you have everything you need up front. And since some free fonts can cause crashes, always use a font manager such as Font Book (included on Macs) or NexusFont (for Windows or Mac).

By starting small and using some of these resources, you’ll be well on your way to making great graphics for your site. If you have questions or want more suggestions, I’d love to hear from you on Twitter.