Brand Colors

BrandColors.net Screen ShootA lovely online source of brand colors complete with color numbers—no guessing. Includes colors from Adobe, Airbnb, Amazon, AOL, Basecamp, Behance, Better Business Bureau (they have colors?), Bing, bitly, Boeing, Digg, Dribbble, Drupal, Ebay,  Firefox (a big palette), Freshbooks (very fresh), Google, HootSuite, Kickstarter, Klout, Microsoft, and many more. Memorable address BrandColors.net.

Has a search function to find one quickly.

Click on the colors to see the color number.

You can download the whole set in several file formats including swatches to import into Photoshop, and I suspect other programs as well but I probably haven’t ever heard of them.

My favorite for color storage is still Color Schemer. It amazing. I couldn’t do without it.

Free Icons

iconsSketchAtive

A collection of free icons created by “Aegean K” from SketchActive.

360 outline and 360 matching solid vector and bitmap formats. Transparent individual files in 60px & 120px for Coding. JPG files for overview and detail revealing. Sketch files for Editing, fully scalable and adjustable. You can use these icons in tab bar, navigation bar and table row for both iOS and Android apps. Also in web design, branding, stickers, presentations and prints. Anywhere you want.

Very fine icons. Highly recommended.

The Art of Hand Lettering

Handlettered word "Bravo" by Neil Secretario
By Neil Secretario

The Art of Hand Lettering is a fabulous archive of hand lettering for logos, signs, murals, stationery, etc. A new site so the examples are only from 2013-2014. A wide range of styles in black and white and full color, all beautiful and mesmerizing. This “Bravo” example is by Neil Secretario and was done  using a Pentel Pigment Ink Brush Pen, which I am ready to run out and buy.

Neil is a freelance designer and letterer in California who specializes in custom lettering, graphic design, and branding. HIs site is a bit of a tease since he includes only sections of nine examples of his work. They are still worth a look.

The newsletter is sometimes a single image but often shows a series of photographs of a work in progress. One series of nine photos from August 2013 shows Bryan Patrick Todd in a cherry picker preparing and painting a very big mural on a very big wall in Louisville, “Our City, Our Home”. A more extensive series of photos is on Bryan’s website.

The branding exercise by Tobias Hall is a mind-boggling example of precision and complexity. There are similar examples on his website.

Tobias Hall Handlettered Branding TobiasHall-2 TobiasHall-3 TobiasHall-4 TobiasHall-5 TobiasHall-6 TobiasHall-7

 

 

Typography: Modular Scale

Typecast Logo

Modular Scale sponsored by Typecast is a handy tool for converting type sizes from pixels to ems and beyond. Enter the size of your text in pixels and translate it using one of almost a dozen perfect ratios and the pixels will be translated into ems, ems@16 and %of 13. If you are using rems, this makes it a lot easier.

If you don’t understand any of this, you probably don’t need to. If you want an explanation, please don’t ask me. I have to look up the reasons every time I scale fonts. It’s complicated, arcane, and only of value if you code CSS.

Modular Scale by Tim Brown, Type Manager for TypeKit.

Infographics from Visual.ly

The graphic design company Visual.ly specializes in  “visual content,” information conveyed using a combination of images and language—infographics, videos, interactives, presentations. They pull together storytellers, number crunchers, designers, and animators.

Their Infographics start at $999 and are worth every penny. They are delightful and elegant and effective—the magic word.

Their front page is a continuous scroll of their work, which is amazing: Visual.ly. I classified this as fabulously beautiful, partly because it is and partly because it is so unexpected and well-done. An inspiration.

The blog entries explain data visualization: Visual.ly Blog.

Three examples   of staff picks:

English Grammar Verbs

Grammar: Verbs at Visually.
A Beginner

The Beginner’s Guide to Wine from  Visual.ly.
All Sci-Fi Spaceships Known to Man

All Sci-Fi Spaceships Known to Man at Visually.

 

Simple Design, Short Names, No Ads

Triple Threat Websites are simple, and becoming simpler. It takes time to learn to leave out what people don’t really need to know, but we’re getting there.

Simplifying the Internet

Today’s examples of simple are from a post by  on the BuzzFeed FWD website. It includes examples of simple design sites and the new attitude: “Welcome To The New Internet: Simple Design, Short Names, No Ads”

These examples are publishing platforms directed at simplifying and redesigning blogs. John Herrman writes:

In recent months, at least four of the most interesting new startups — all either from or backed by people with deep roots in the current internet, including Twitter cofounders and many of the most prominent VCs in Silicon Valley — have been launched to, in some way, replace the internet. Not add to it, or change some part. These sites want to fix the whole thing: to remake comments, content, and updates with little to no encumbrance from the current web.

Simple Blogging Websites

Smashing Magazine

Smashing Magazine LogoSmashing Magazine is simply smashing. Articles on coding, design, graphics, and WordPress and other CMS programs and software.

Beautiful, helpful, indispensable. An essential email newsletter, a library, workshops, job board, etc. More than I can ever remember.

Typography Tools Online

Nice Web Type is a list typography tools online:  tips, utilities, and resources available on the Web assembled by Tim Brown Type Manager for Adobe Typekit. Includes a video of his talk about fonts, the web, typesetting, layout, the tools we use, the information we gather, and the value of graphic design.

Animated History of Typography

Photo of Ben Barrett-Forest
Ben Barrett-Forest

This animated history of typography as succinct and clear as possible. Also an animation wonder in that it doesn’t use computer graphics, just simple paper cutouts and a camera. And time.

It took: 291 Paper Letters. 2,454 Photographs. 140 hours of work.

Five minutes. Well-worth the time. If you know little about letters or what a serif is, you will have a more appreciation of all things in print. If you know the history, you will enjoy the animation. And probably learn at least something.

On Vimeo and YouTube

YouTube also has many other videos on typography. When you view this video, look to the right for a list.

Book Design

Joel's SignatureThe Book Designer is another wonderful resource available on the web, free to everyone. I was referred to it by Jackie Urbanovic when I asked about alternatives to Adobe’s InDesign. The new edition is only available via the “Cloud” and is very expensive for those of us who do not use it everyday. Something like $50 a month.

Her short answer on InDesign was “no,”but she referred me to The Book Designer by Joel Friedlander, a very useful website for anyone considering publishing a book or designing text. The site also has a free 24 page booklet on self-publishing, 10 Things You Need to Know About Self-Publishing.

Tons of resources here. Many links to other well-selected sites on design and publishing. Topics include writing, book design, planning a book, understanding fonts and typography, print choices, ebooks and ebook readers, and marketing.

Best Book Designer Posts Include:

Understanding Fonts & Typography with nine links to specific topics, including elements of a book page, what goes on the title page with two examples, 5 layout mistakes, and book page layout. One of the nice things about the site is that Friedlander doesn’t overwhelm you with information. He gives from 2-10 examples and moves on. But you can trust those examples.

Five Favorite Fonts for Interior Book Design takes the guessing out of which font to use to make work look professional.

The site also has great comments—don’t miss them.

And don’t miss this site if you are planning on self-publishing anything.

I used his signature as an image because his header is rather undistinguished. The design of the site doesn’t match the quality of the information or the examples given.

Optimum Line Length

In addition to letter spacing and line height, optimum line length, the number of characters per line, affects readability and user experience. A long line of text produces fatigue and a short line of text can be distracting. Seventy-five characters per line, including spaces, is usually the maximum for a block of text with 50-60 being the optimum range. Unless a line is short for effect, such as emphasizing relationships between words as in poetry, readers begin to skip words as their eyes move down the page instead of moving from left to right, because quick side-to-side movements fatigue the eyes.

Responsive vs. Fixed Website Design

Since line length is so important as a fatigue factor, the traditional advice is that web pages should be set to a fixed width rather than being liquid, which means they are allowed to contract and expand.  On a desktop computer, a fixed width remains a fixed width even when the window if much wider. With liquid layouts too narrow to read comfortably, readers can become fatigued and stop reading for reasons that have nothing to do with your content.  However, since so many people are reading on so many different sized devices now, the new advice is that responsive is a plus.

Designers generally don’t like responsive page design because it prevents controlling the look of the page. It allows graphics to move around and headlines to end up on two lines with word breaks that can change comprehension. A compromise is to have two layouts, one responsive for mobile devices and tablets and one fixed for desktops. (This is almost twice the work.)

The Golden Ration Typography Calculator

A narrow text will require smaller type in order to maintain a line width that is conducive to being read. If you are designing specifically for a device with known measurements, like an iPad, you can adjust type size and line height accordingly.

For calculating the relationship between text size and line length, you can use the Golden Ratio Typography Calculator by Chris Pearson of Pearsonified (Yes, that is the right spelling.)

Golden Ratio Typography Calculator

The Golden Ratio Typography Calculator addresses one of the most difficult aspects of designing a text: to layout type in such a way that it is most readable and attractive. Most typographers and graphic designers have had years of visual experience that allows them to choose the most attractive and readable font sizes, widths, and line lengths intuitively. Even with comparable experience, however, doing this on the web can be a challenge. Chris Pearson of Pearsonified has designed a calculator that produces several optimal sizes and proportions given your preferences or the requirement of a specific project.

Calculating Sizes, Heights, and Widths

The calculator will (1) calculate the appropriate font size, line height, content width, and characters per line, and paragraph spacing; and (2) allow you to choose a font that is set to these numbers in a block of text. It will show you the optimum settings for a given content width, number of characters per line, for your chosen font and size, etc.

For 16pt type, for example, in Hoefler Text the optimum settings are:

Font Size: 16, Line Height: 25, Content Width: 600, Approx.92, Characters Per Line: 85.

In Verdana, these settings are:

Font Size: 16, Line Height: 25, Content Width: 600, Approx. CPL: 74

If you click on the font size, a box will open giving you the optimum settings for headline and primary and secondary text sizes.

You may not agree with the settings Chris finds optimal, but it is an excellent place to start.