Design tips

Some people can get carried away with discussions of proportion and symmetry (see the new Pepsi logo pitch), but if we strip out the crazy, there’s still some important lessons here. Consider the new Twitter logo as an example: Here circles aren’t used to convince you of some strange cosmic tale that makes no sense, they’re simply used as a guide to create a well balanced logo with consistent curves and arcs. Despite the fact that the bite seems to violate the symmetry of the Apple logo above, if we dig deeper we can see that there was still a lot of through put into proportion and symmetry here (image source):

Along the same vein as a double entendre is the age-old trick of utilizing the negative space in a logo in some clever way. The industry standard example of this technique is the FedEx logo and its hidden arrow. Don’t see it yet? Keep looking, it’s there. That’s what I love about this logo, the use of negative space is so subtle. Most people in the U.S. see the FedEx logo daily or weekly for years as it drives by on the side of countless trucks and they never even notice the arrow. Logopond is chock full of great logo designs that utilize negative space in a cool way. Check out the example below, which blends together the idea of bull horns and a wine glass.

One interesting facet of logo design that I’ve been considering a lot lately is the concept of instilling motion or a sense of activity into a logo. This isn’t always appropriate (such as with the Apple logo), but sometimes it can really give a logo the boost it needs, both from a visual and conceptual standpoint. As an example, let’s look again to the Twitter logo. Way back in the early days, the bird went from sitting perched and passive to becoming active and taking flight. In the most recent iteration, they took this concept even further by pointing the bird in an upward direction to indicate that it’s climbing into the air rather than floating along the same old trajectory. A sense of motion is especially important when it comes to logos with mascots. The image of the marlin below doesn’t depict the fish merely lying still, instead, it’s leaping into the air in a victorious pose. This concept even extends to typically inanimate objects. Consider how much better the logo below portrays the concept of “rough house” by instilling a sense of motion.

It’s great when you as a designer can show a client how much thought and reasoning went into the logo that you produced for them. Every good logo has a story. Far beyond simply a pretty sketch, strong logos are filled with meaning, both obvious and hidden. We discussed this in several cases above. The FedEx logo’s arrow indicates moving forward and making deliveries, the Apple logo has a “byte” missing, and the Twitter bird is flying in an upward trajectory. Half the time I wonder if logo designers don’t come up with the meaning after the logo is already produced, but regardless, it’s great when you as a designer can show a client how much thought and reasoning went into the logo that you produced for them. Clients might think that all they want is something fresh and cool, but if you instead provide a logo that ties into the company’s core values and mission, you’ll blow their minds and they’ll love you for it. If you’re into hidden logo meanings, check out our post titled “Five Fascinating Things You Didn’t Know About Famous Car Logos.”

Above all else, you have to know who your users are—inside and out. That means knowing all the demographic data your analytics app(s) can pull, yes. But more importantly, it means knowing what they need, and what stands in the way of them achieving their goals. Getting to that level of empathy requires more than careful analysis of stats. It requires getting to know the people who use your website. It means speaking with them face to face, watching them use your product (and maybe others), and asking them questions that go deeper than, "What do you think of this design?" What are their goals? What stands in the way of them achieving those goals? How can a website help them overcome or work around those challenges? Don't stop at knowing what your users want. Dig deeper and find out what they need. After all, desires are just outgrowths of needs. If you can address a user's deep-seated need, you'll address their wants while also fulfilling more fundamental requirements. The insights you'll uncover from analyzing data and speaking with users will inform every decision you make, from how people use your interface to what types of content you’ll highlight within that interface.

Before you design your interface, you need to define how people will use it. With the increasing prevalence of touch-based devices, it’s a more pivotal concern than you might think. Just look at Tinder: the app’s user experience is literally defined by the ease and impulsivity of a simple swipe. People use websites and apps in two ways: directly (by interacting with the interface elements of the product) and indirectly (by interacting with ui elements external to the product).

In the real world, the environment gives us feedback. We speak, and others respond (usually). We scratch a cat, and it purrs or hisses (depending on its moodiness and how much we suck at cat scratching). All too often, digital interfaces fail to give much back, leaving us wondering whether we should reload the page, restart the laptop, or just fling it out the nearest available window. So give me that loading animation. Make that button pop and snap back when I tap it—but not too much. And give me a virtual high-five when I do something you and I agree is awesome. (Thanks, MailChimp.) Just make sure it all happens fast. Usability.gov defines any delay over 1 second as an interruption. Over 10 seconds, a disruption. And the latter’s generous: for about half the U.S. population, 3 seconds is enough to cause a bounce. If a page will load in under 5 seconds, don’t display a progress bar, as it’ll actually make the loading time seem longer. Instead, use a visualization that doesn’t imply progress, like Mac’s infamous “pinwheel of death.” But not that. If you do use progress bars on your site, consider trying some visual tricks to make the load seem faster.

Fitts’ Law, a fundamental principle of human-computer interaction (HCI), states that: The time to acquire a target is a function of the distance to and size of the target. In other words: the closer and/or bigger something is, the faster you can put your cursor (or finger) on it. This obviously has all kinds of implications for interaction and user interface design techniques, but three of the most important are: Make buttons and other “click targets” (like icons and text links) big enough to easily see and click. This is especially important with typography, menus, and other link lists, as insufficient space will leave people clicking the wrong links again and again. Make the buttons for the most common actions larger and more prominent. Place navigation (and other common interactive visual elements, like search bars) on the edges or corners of the screen. This last might seem counterintuitive, but it works because it lessens the need for accuracy: a user doesn’t need to worry about overshooting their click target. While you’re thinking about element placing and size, always keep your interaction model in mind. If your site requires horizontal scrolling rather than vertical scrolling, you’ll need to consider where and how to cue users to this unusual interaction type.

Being highly creative types, designers tend to love to reinvent things—but it’s not always the best idea. Why? Because a revamped version of a familiar interaction or interface adds “cognitive load”: it makes people think again about a process they’ve already learned. Obviously, you can reinvent the wheel all you want—but only if it actually improves the design. This rule of thumb explains why Google Docs’ menu bar features almost all the same options as Microsoft Word’s before Vista: ‍ It also explains why Pocket had to change the placement of the archive button in their Android app a few years back. Up till fall 2013, the archive button was at the top left of the screen—right where Android design specs said the “Up” button should be. Pocket wanted to focus people on the reading experience, and not duplicate an existing hardware control, but the inconsistent placement caused new users to accidentally close and archive the article they were reading, rather than simply returning to their reading list as expected. That tiny change "increased the likelihood [new users] would continue using Pocket from this point onwards by 23%."