Blog - Design for Hackers

Design for Hackers: Learn Web Design

A book that helps developers & programmers learn web design. It’s a best-seller (#18 on all of Amazon). by @kadavy

Apple’s San Francisco Font

October 19, 2015

Anyone who has upgraded to iOS 9, or OS X El Capitan has probably noticed the system font has changed to Apple’s San Francisco Font. This font quietly shipped with the Apple Watch, in WatchOS, and will also be in the new tvOS on Apple TV.
keep on reading »

Design is the most important factor in establishing credibility

September 08, 2015

Think back to the last time you searched for an app to do something.

You downloaded it, tapped the icon, and GAH! Suddenly, you felt sick to your stomach. keep on reading »

How to Learn Web Design (for reasonable humans who aren’t robots)

September 02, 2015

Learning anything – especially learning web design – requires two things:

  1. You have to be aware of what you need to learn.
  2. You have to motivate yourself to actually do the work required to learn those things.

Web design is so complicated, though, that once you find out what you need to learn, you’re too frustrated to be motivated.

Once you see how much work is required, you find yourself paralyzed. Next thing you know, you’re tooling around on Facebook, and not making any progress.

That’s why I want to help you with this quandary. I can’t teach you all of web design in a single post, but I can get you started with a sustainable system of discovery and motivation, so you can teach yourself web design. keep on reading »

What Font is the New Google Logo?

September 01, 2015

Google announced a new logo redesign today (September 1, 2015), citing that the platforms on which we interact with their products are now more diverse.

Today we’re introducing a new logo and identity family that reflects this reality and shows you when the Google magic is working for you, even on the tiniest screens.

Given the conflict that little pixels can sometimes have with subtle forms, like those in Garamond, this move to a sans-serif typeface makes sense for “tiny screens.”

At first glance, the logo looks to be set in Futura, a common go-to which was designed by Paul Renner in 1927.

google-new-logo

But, if you look closely, you can see that it’s NOT exactly Futura.

google-new-logo-if-futura

Futura is about as “Geometric” as a typeface gets. It gives it a mathematically precise look to the point that it can even be a little stale.

But, Google made some subtle but powerful changes to the typeface to suit the image they were looking for.

By examining these, you can gain an better understanding of the common logo-design practice of tweaking a typeface.

How is Google’s new logo different from Futura?

Below, you can see the subtle differences between Google’s new logo, and what that logo would look like if it were purely set in Futura. (The new logo is in bold colors, while the lighter colors are pure Futura.)

google-new-logo-futura-comparison

The most important tweak is to the big “G,” which is now the basis of Google’s favicon, and will appear throughout their properties.

google-new-logo-G-comparison

Note the following changes:

  1. The crossbar in the G is slightly higher, and longer. This opens the counters in the letter, which makes it feel a bit more like a “grin.” This more open counter also will be more readable at smaller sizes.
  2. The “aperture” of the G is more open (note the top stroke ends sooner). Again this makes the forms more friendly-looking, and makes it read better at smaller sizes.

 

google-new-logo-e-comparison

Next, the small “e” has similar changes. The crossbar is slanted up, which is typical of most “Humanist” typefaces, and is a throwback to hand-scribed letterforms that predate printing.

You’ll notice that the “e” also has a larger aperture. If you imagined them as faces, Futura would have a devious grin, while Google’s “e” is laughing hysterically.

google-new-logo-g-comparison-05

Finally, the lowercase “g” doesn’t descend as far below the baseline. This is probably to balance out the logo (you have that luxury when you know what word you’re typesetting), but also notice that terminal of the stroke in the descender slants out a bit. This, once again, makes it more readable at smaller size, while carrying the more “friendly” theme.

The final difference you’ll notice is that the “l” is slightly shorter. This is, once again, likely a balance issue.

Google’s New Logo is Based Upon Their Custom Font, Product Sans

Many people are wondering “what font is the new Google logo?”

To be perfectly accurate, Google’s new logo isn’t in any one particular font. It’s a logo, and usually logos (at least for a big company like Google) have some customizations to them. This is one of those rare cases where you know exactly what letters will be displayed, so the designer can balance the letters how they see fit.

So, no, there is no one “Google logo font.” But, Google’s new logo is based on their new font, “Product Sans.”

In case you’re wondering, no, you can’t use Product Sans yourself. As this thread points out, the license for Product Sans states:

Google offers many fonts on open source terms. This is not one of them. Please see www.google.com/fonts.

Fair enough. Google has made many fonts available, so they’re entitled to their own.

Product Sans is clearly heavily influenced by Futura, which was designed by Paul Renner in 1927.

The biggest difference you’ll see between Futura and Product Sans is the double-story “a,” which is a common feature of more Humanist typefaces. This choice was made to avoid “redundancy in product lockups,” which I assume means “too many damn circles.”

google-logo-font-product-sans-lowercase-a

Source: Google’s Product Sans Specimen PDF

 

There is no “a” in “Google,” however, there is one glaring difference between Product Sans and Google’s logo: it’s that slanted “e” again.

google-logo-product-sans-e

What Other Fonts Look Like Google’s Logo?

There’s hardly such thing as a totally original font, so naturally, there are other fonts that resemble the Google logo. Here’s a comparison:

google-logo-fonts-relish-comic-sans-futura

Aside from Futura, Google’s logo resembles Relish Pro, (although, Relish Pro has a notably smaller x-height).

Some have also said that Google’s new logos resembles the hated Comic Sans. But, I disagree.

Windlesham Pro is also a close cousin, minus that funky descender on the lowecase “f.”

Want to learn more about picking fonts? Take my free design course.

What Font is the New Google Logo? http://t.co/e9aOc1dPSW pic.twitter.com/wg9DCNDwUK

— David Kadavy (@kadavy) September 5, 2015

Design Pitfalls: a new free email course to learn design

May 12, 2015

I’ve seen the same things over and over again, and I’m going to help you avoid them.

Since the debut of Design for Hackers, I’ve traveled all over the world, mentoring entrepreneurs and other people using design to do their jobs better.

While Design for Hackers breaks down all aspects of design, I realized that there were a few simple tips that could keep people from falling into the traps that make learning design so frustrating.

After all, there’s no point in expecting to be the greatest designer in the world within a matter of weeks.

But, if you can just avoid a few of the top mistakes that beginning designers make, you’ll quickly be doing at least halfway-decent design. This can help you:

Now, if your ultimate goal IS to become the greatest designer in the world, I still have things that can help you with that. But, for now, let’s concentrate on fundamentals.

Introducing “Design Pitfalls:” A new free email course on design

A few years ago, I created a course called “Summer of Design,” which really broke down every aspect of design. It was great for getting an understanding of the framework behind design decisions.

But I still saw my students making the same mistakes over and over. I realized that if I could prevent a few of these mistakes, it would have a dramatic effect on the quality of design they produced.

So, starting today, new sign-ups at designforhackers.com (and everyone who has finished the now-retired 12-week email course that once was “Summer of Design”) will get a new free course called “Design Pitfalls.”

It’s full of tips that can keep you from making the most common mistakes n00b designers make.

Sign up for Design Pitfalls over here >>
(if you’re already on the Design for Hackers list, and have completed the 12-week email course, you’re already signed up)

Enrollment ends at midnight GMT on May 22nd, and the first lesson goes out May 26th. Don’t miss the deadline, or you’ll be on a long waitlist!

I'm launching a new (free) email course to teach you design. Learn to avoid design pitfalls: http://t.co/AJyKNgE2bs

— David Kadavy (@kadavy) May 12, 2015

7 of the Best Books to Learn Web Design

April 29, 2015

Anyone can design a website. Right? It’s better to say anyone can learn to design a website. Good web design involves myriad skills, that all have to work together.

Some things you just have to learn from someone who knows. You can take formal classes, or enroll in online courses, or sit and watch someone who knows what they’re doing, but one of the best ways to learn web design (aside from our free email course) is from books.

After all, it’s how I learned most of web design myself: just sitting down with a book, and plowing through what examples and tutorials there were inside.

Since publishing Design For Hackers, I’ve been asked many times “what’s the best web design book?”

The thing is, there is no single best web design book for learning web design. However, there are many great bookS for learning web design. If you want to teach yourself web design, there are a few books that stand out as excellent for beginners. Many of these are even used as textbooks for college classes. Here’s my seven best books for learning web design. keep on reading »

Designing for Credibility: David Kadavy’s Mixergy Master Class

January 17, 2015

Prospects judge you by your landing page. And the design will determine whether they’ll continue engaging with your site and eventually buy.

In his Mixergy course, David shows you simple ways to build credibility with design, even if you’re terrible at web design.

This Master Class is available for free just for Design for Hackers readers. Check out the course cheat sheet if you’re looking for a summary.

10-Minute Redesign: Hacker News

January 17, 2015

There have been plenty of proposed redesigns of the infamously ugly HN, but what about just nudging around the existing code? See what kind of changes can be made just by eliminating some elements, and changing sizing and white space – all in about 10 minutes.

Never worry about font sizes again! (Just use these)

September 25, 2014

One of the best ways to establish a clear visual hierarchy, and create a design that converts, is to change the sizes of the fonts you use.

Big fonts look more important, smaller fonts look less important. Simple, right?

The problem is, you waste time and mental energy worrying about what font size to use. 13px? 14px? 15px?

If you stop wasting your time and energy worrying about font sizes, you can start worrying about all of the other important aspects of a clear visual hierarchy. Best of all, you can be sure the proportions you’re using are always right on-point.

I explain more in this video:

Together, we can save humanity years of useless font size meddling. Retweet to spread the word:

Never worry about font sizes again! (Just use these) More here –> http://t.co/nRbOldHHF0 pic.twitter.com/tCAZ0a27Sl

— David Kadavy (@kadavy) August 11, 2015

Outline-itis: be careful with those outlined fonts!

September 18, 2014

outline-itis-posterframeSomething about that “outline” function is so enticing to amateur designers. Sometimes type is on a busy background, the colors don’t contrast enough, or they just think it looks cool to outline type.

But this can be a big mistake! Poorly-considered outlines are a dead giveaway of design n00bism.

The main problem is, many software programs apply outlines in a way that makes the outlines intrude on the letterforms. They get distorted, and lose all of their character – no pun intended.

Find out how to avoid Outline-itis in this video:

Older Posts »

5 Essential Type Tips

What you must know to design like a pro

I reject this free offer