The Tech for Social Change Baltimore Meetup Message Board Meeting Logistics, Details, and Notes › 2012 June - Ben Kutil - Introduction to Design

2012 June - Ben Kutil - Introduction to Design

Kate B.
Harrogate, GB
Post #: 23
Ben Kutil of Make Things Studio gave us an overview of some of the rules designers follow. In particular, he looked at three areas: type, images, and grids.

Typography is the most important aspect of design.
  • Measure
    Measure is the length of a line of type. Aim to fit two alphabets, or 52-78 characters, on one line. If you have fewer characters on a line, it becomes too abrupt. If you have more characters, people lose track of what they're reading. Either way, text is harder to read. If you must have a longer line length, increase the line height and leading. This isolates the lines and makes them easier to read. If you must have a shorter line length, decrease the line height.
  • Hierarchy
    Hierarchy is how items are organized on a page and whether they are above, below, or part of another item. For example, a page may have headings, subheadings, and paragraphs. Treating each of these slightly differently makes your text more approachable and easier to scan.
  • Font Families
    Fonts belong to families, or a group of fonts with similiar characteristics. To decide what family a font belongs to, you need to look at its type (sans serif, serif, slab serif, script, blackletter, mono, hand, and decorative) and its other properties (weight, width, x-height, contrast, and upper or lower numbers).
Type Tips
  • Justify text carefully. Justified text works best in narrow columns or with large fonts. Don't justify text if it creates "rivers of white" between words or letters. This is distracting to readers.
  • Use real small capitals, if possible. Fake small capitals are not reduced proportionally and aren't as easy to read.
  • Don't center all of the text on a page.
  • Pay attention to licensing restrictions for fonts.
  • Use the right characters: ' is feet, " is inches, “” are quotation marks, and ʼ is an apostrophe mark.
  • Don't waste time creating something that doesn't get your message across and that people can't read. Look for fonts that are readable. Usually, this means the font's x-height will be larger, and it will have a good contrast.
  • Use restraint when picking fonts for flyers. Think about using a font superfamily.
  • Find out why a font was created. For example, Arial was commissioned for Microsoft products and has become ubiquitous. If you are looking for a font that signals you are unique, you probably don't want to use Arial.
  • Think about where you'll use the font. Different fonts are better for headlines than paragraphs and vice versa. Also, a good font for an invitation to a small child's birthday party isn't necessarily a good font for a business letter.
  • Use a lot of bullets and white space for mobile sites because people are semi-distracted, and this will make reading the site much easier. Otherwise, picking the right font for a mobile site doesn't have a lot of different considerations from picking a font for a non-mobile site.
Type ResourcesImages
Nonprofit organizations often struggle to find good images to use on their websites. A few tools to help:
  • Compfight - A search tool for Flickr. You can filter by size and licensing.
  • Icon Finder - A search engine for icons. Use this tool to avoid bad clip art.
  • Google Image Search - A great tool, but you need to be careful with licensing.
When taking pictures, follow the rule of thirds. Divide the image into nine quadrants and align the major items in the picture on the vertices. Also, make certain to balance and frame the picture. (Framing is using natural elements to force a viewer's eye in a particular direction.) Lastly, pay attention to the background. Blurring it out or putting foliage in the background makes your picture more focused and easier to cut out, if necessary.

You'll need to edit your photos, especially to crop the image, or focus on the main item. This will make it more compelling and remove noise. When you are editing your photos, do not scale up. For example, don't go from 100 percent to 150 percent of the photo's size. Also, scale proportionally, not just horizontally or vertically.

A couple of online tools for image editing.
  • Pixlr - An online image editor that allows several file types, including PNG, JPG, TIFF.
  • Acorn - A image editing tool that must be installed.
If you are going to print images, you should aim for 150 dots per inch (DPI), or between 600 and 900 pixels for a 4" by 6" image. This should work for both digital and offset printing. A 5 megapixel or higher camera should be able to produce this type of image but pay attention to lighting.

Another large component of design is about making things line up. Following the golden ratio, a mathematical ratio that appears in nature, is a common strategy. In particular, the golden ratio (1:1.618) makes a pleasing rectangle at 10" by 16.18" or another multiple. In book design, this ratio is often seen as variant of the Fibonacci sequence or 1:1:2:3. This means that an 8.5" by 11" page would have a one-inch left margin, a one-inch top margin, a two-inch right margin, and a three-inch bottom margin. (You can still have call outs or page numbers outside the margins.)
Kate B.
Harrogate, GB
Post #: 24
When you are laying items out on the page, you'll need to use a grid; 4 by 4 and 3 by 3 grids are pretty standard. If you are laying out a single page, you can also treat it like an image and use the rule of thirds. Common website grids are 960 Grid System and Blueprint.

Invest in good software. Adobe InDesign is an excellent investment if you do a lot of multi-page documents. You can also use Adobe Illustrator, Microsoft Publisher, or even Microsoft PowerPoint.

Questions and Answers
  • How do you make black and white flyers look better? Ben suggested increasing the contrast on images so that there are not as many shades of gray and trying an angle grid like what was used in Russian Constructivism posters, which use 1 or 2 colors and are designed on an angle.
  • What are some resources for learning more? Try, nettuts+, psdtuts+, or the You Suck at Photoshop series.
  • What are current trends? Ben is seeing a lot of minifads, such as vertical scrolling (Nike Better World). Also he is seeing a move away from Web 2.0, which included a lot of gradients and rounded corners, to a flatter design with squares, rectangles, and more simplicity (Svpply). Fonts In Use is a good place to find quality trends.
Materials from this session are available online: Introduction to Design.
Powered by mvnForum

Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy