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 »
Learning anything – especially learning web design – requires two things:
You have to be aware of what you need to learn.
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 »
At first glance, the logo looks to be set in Futura, a common go-to which was designed by Paul Renner in 1927.
But, if you look closely, you can see that it’s NOT exactly 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.)
The most important tweak is to the big “G,” which is now the basis of Google’s favicon, and will appear throughout their properties.
Note the following changes:
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.
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.
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.
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.
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.”
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:
Make adjustments to that template you’re using – so your site doesn’t look just like everyone else’s.
Make a few quick changes to your project, without having to bug your designer, delay your project, or spend more valuable hours getting it done.
Value-add design services for client projects where there isn’t budget for a dedicated designer.
Communicate more clearly with the designer on your team. Your design meetings will go more smoothly.
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.
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 »
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.
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: