Daily Tips & Tricks for Web Enthusiasts

Design

Great Design Comes from Deep Understanding

If you asked me to design a traffic light I wouldn’t take the job unless I had years to get up to speed. I drive, I use traffic lights every day, but I don’t have a deep understanding of how they work or their context. Thus, I am ill equipped to design a traffic light well.

The dynamics of traffic flow, connectivity with other systems, the ability for law enforcement to override the signals… I don’t have any idea how any of that works, let alone how to improve it. And that’s just the stuff I have a vague awareness of! There are doubtless significant aspects of traffic light design that I don’t even know about. I don’t know what I don’t know, and that’s an incredible obstacle to designing well.

I could attempt to create a working traffic light right now, but it would be full of flaws. Issues would arise the instant I hit the limit of my current knowledge. I would be forced to make assumptions, and every assumption would be another chance to do things horribly wrong. Bad design is often the product of assumptions, and my traffic light would be full of them.

If you want to design something well you need to start with a deep understanding of the problem you’re trying to solve, the goals you’re trying to accomplish, and the context of it all. Without that, you’re just guessing and rolling the dice.

Failure is a Natural Part of the Process

It’s easy to look around and see success everywhere. Other designers, developers, business owners, companies… they’re all doing great! They’re not screwing things up. They’re making incredible things. How can I possibly do that well? How can I avoid failing?

Here’s the thing: The success you see everywhere is deceptive. People curate what they share. Success is celebrated, but failures are rarely made public. What you see from the outside is everything that went well and nothing that didn’t. You’re only getting part of the story.

That incredible logo? That amazing website? That wonderful copy? Not their first attempt. Probably not even their hundredth. That great work is standing on a foundation of failure, one built out of numerous false starts, prototypes that didn’t work, and countless iterations that transformed the raw material of a vague idea into something wonderful.

Many people have the mistaken impression that the path to success looks like this:

  1. Start.
  2. Succeed.

That’s not how it works. Failure is part of the process. Any successful person, if they’re being candid, will tell you the path looks a lot more like this:

  1. Start.
  2. Fail & learn.
  3. Fail & learn.
  4. Fail & learn.
  5. Fail & learn.
  6. Fail & learn.
  7. Fail & learn.
  8. Fail & learn.
  9. Fail & learn.
  10. Succeed.

(Note: Number of steps may vary!)

Each failure is an opportunity to learn and grow. Each one is literally one step closer to success. Many people, when confronted with their first or second major failure, stop and give up. The choice you make when confronted with failure is one of the key differences between people who succeed and those that don’t.

In order to succeed, we need teachers to show us the way forward. Failure is one of the greatest teachers. Some lessons can only be learned through the act of failing. Don’t lament the absence of success, instead revel in the fact that you know a little more than you did before and are now that much closer to success.

Great Design Serves the Audience

Imagine you made a thing, and that thing is blue. Sometimes the person writing the checks will say something like this when you show it to them:

It’s good, but can you make it green? I like green.

They like green. Okay. They’re paying you to design this thing for them, so it’s your job to make it green, right?

Wrong.

In fact, there are two wrongs here.

The first thing that’s wrong has to do with who you’re designing for. Most of the time you are not designing for the person writing the checks. They are paying you, yes, but your design isn’t for them. Your design is for the target audience, and the person writing the checks is usually not a member of the target audience.

The second thing that’s wrong pertains to your job. As a designer, your job is to communicate well, solve problems, and accomplish goals. If you’re good at your job you made the thing blue for a good reason, not an arbitrary one. Does the person writing the checks have an objective reason for wanting it to be green? A good reason that will have a positive impact on the outcome of the project? Or is it just an arbitrary choice defined by their personal preferences?

It’s probably the latter. That means it’s your job, as the designer, to do two things:

  1. Say no.
  2. Explain why blue is, objectively, the best choice.

Do not be afraid to say no. As a designer it is often your job to say no and explain, politely, why no is the best answer. No is powerful. No can protect the integrity and efficacy of your work. No is critical component of great design.

Remember, design is not about personal preference, what looks nice, or what people who aren’t in the target audience would like to see. Design is about creating something that works, and works well.

If it works better blue, don’t make it green.

You Can’t Please Everyone

When I’m creating something I’ll catch my brain thinking thoughts like, “If try hard enough, I can make everyone love this!” or, “If I did X, Y, and Z no one could possibly dislike this!”

Wrong. Bad brain!

Have you had these thoughts, too? If you catch these sentiments emerging you have to stop and remind yourself why you’re making what you’re making, and more importantly who you’re creating it for. You’re making things for your target audience, not the entire world.

Some people aren’t going to like what you make, and that’s okay. There will always be haters, trolls, and a whole host of other people that have negative thoughts and opinions. If those people are part of your target audience then you need to listen to them. If they’re not part of your target audience you need to actively ignore them. They’re not who you’re making things for, and their input will rarely (if ever) have any kind of positive effect on you or the work you’re doing. You have a responsibility to yourself and to the work you’re doing to actively shut them out.

The more you try to please people outside your target audience the more diluted your work becomes. Would you rather create something that your target audience feels great about, or something that most people feel neutral or okay about? As you try to increase the appeal of your work to encompass more people the more generic and watered-down it gets. On the other hand, the more you focus on specific people, the more you can speak directly to them, forge a deeper connection, and give them the best experience possible.

Select the Right Image Format

There are four major image formats in common use on the web today. Each format its own strengths and weaknesses, and each is better suited to particular situations than others.

JPEG

JPEG is best for photos. JPEG images use something called lossy compression, which means that some of the original image information is thrown away (lost) in order to make the image smaller.

The JPEG format was specifically designed to find and discard information from photos that we humans are unlikely to notice is missing. This process doesn’t work very well on other types of images, like logos, diagrams, or images containing text.

PNG

PNG is best for raster images that are not photos. PNG files are generally a bit larger than JPEG images, but they use lossless compression, meaning no image information is thrown away (there are exceptions to this, like specifying a lower color depth when saving your PNG, but if you stick to the defaults you should be fine).

That means every pixel of a PNG will be rendered in perfect clarity, with none of the fuzziness that JPEG compression adds. This makes PNG images great for text and other fine details.

GIF

GIF is best for small, self-contained animations. GIF is an older, inefficient format. The only thing it has going for it is animation, and even then there are often better choices available. Video files are often higher quality at much smaller file sizes, for example, and adding animation to a website is often better accomplished using CSS and/or JavaScript.

If you have a meme, though, consider GIF.

SVG

SVG is best for vector images. Where raster images are comprised of pixels, math comprises vector images. When you enlarge a raster image you just see a lot of colorful squares, but a vector image can be scaled up or down infinitely because the math that describes its shapes and lines works at any size.

SVG is a great choice for logos, icons, text, diagrams, illustrations, and the like. The other big advantage SVG has is that they look great on all displays regardless of pixel density. Most of the images you see here at Core Assistance are SVG images.

Empathy is Key to Great Design

Design is all about solving problems, but the problems we solve are rarely ours alone. Whenever you’re designing something that will be used by other people it’s important to take their perspective into account. Each person is unique; no two people will experience the same problem in exactly the same way.

Being able to put yourself in the shoes of other people is required to craft great solutions. If you don’t take the time to see things from the perspective of others you’ll end up making assumptions and guesses that will degrade the quality of your work. The more you practice being empathetic, the more you practice being a great designer.

White Space is Your Friend

It can be tempting to fill every nook and cranny of your website with content, images, or just, well, something. Leaving empty space can seem wrong, like you’re leaving things unfinished or wasting space.

It might seem counterintuitive, but white space is a critical element that is useful, powerful, and vital to any visual design.

White space will make your content easier to read by improving legibility. The more visual clutter, the harder people have to to find and focus on what they’re interested in.

In fact, the opposite is also true: The less visual clutter, the easier it is for people to find and focus on what they’re interested in. You can strategically deploy white space to draw more attention where you want it.

A page filled with a dozen different things presents a dozen different choices to your visitor, and each of those choices is another layer of friction, another opportunity for them to go somewhere else entirely. Reducing the number of choices your visitors have to make and focusing their attention with white space is key.

White space is also a critical component of a balanced design. A dense page crammed full of visually distracting elements just feels wrong on a visceral level. It makes people uncomfortable, and that’s the last thing you want your visitors to feel.

White space is an incredibly useful and versatile tool. Don’t be afraid to use it!