Daily Tips & Tricks for Web Enthusiasts

Design

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!

Only Break Rules You Understand

If you’re tempted to break a rule, convention, default, or best practice (as we all are, from time to time), make sure you understand the spirit behind the rule first. There are often important motivations behind every rule, and you’ll need to take those into account when bending or breaking them.

A great example is the temptation to remove the default outline styles most web browsers apply to focused elements. These outlines are visually distinct, and you may not like the way they look. Removing them may seem like a harmless design decision, but those default styles are there for an important reason. If you don’t know the motivation behind those default style rules, and don’t take the consequences into account when you override them, your choices will have unforeseen consequences for people visiting your site.

There are times when breaking rules is the right decision, but a deep understanding of those rules is required to keep you from making things worse.

Perfection

Perfection works very well as a guiding light, but you should never expect to arrive there. The desire to attain perfection can be overwhelming, but it’s vital that you keep that temptation in check. As you get closer to perfection, the effort and time required to make meaningful progress rises exponentially. If you’re getting close to perfection, take it as a warning that you’re wasting time. The same resources required to bring a project from 90% to 95% can often bring a different project from 0% to 80%. Is that extra 5% really worth it?

It’s important to periodically take a step back from your work and ask yourself if what you’re working on is good enough. It can be painful to ship something that’s just good enough, especially when you know it has the potential to be better, but getting your work out the door is often the best course of action.

Keeping something to yourself while you futilely pursue perfection benefits no one. Releasing something that’s good enough helps the people you made it for, and it helps you. The reactions of others, once your work is set free, will give you clarity and perspective that you simply can’t get anywhere else.

Remember, good enough really is good enough.

Great Design Seems Obvious

One of the most difficult things about great design is recognizing it once you achieve it.

Something that is designed well will often appear simple and obvious, which can be counterintuitive when you’re the one doing the designing. You pour a huge amount of time and effort into creating something only to have it all culminate in something that other people would look at and say, “Oh, yeah, of course.” It can be demoralizing and distressing. Worst of all, it can make it seem like you’re not done yet.

One of the worst mistakes a designer can make is deciding that something seems too simple or too obvious, and then making it worse by trying to fix something that isn’t broken. The best design is often the design that people don’t notice.

If you find yourself working on something and you reach a point where it’s simple, functional, and intuitive you should probably stop right there. Great design isn’t about showcasing the work you put in, it’s about being the best solution to the problem you originally set out to solve.

Design is How it Works

For the first Design tip on this site I can think of nothing better than this quote:

“Most people make the mistake of thinking design is what it looks like,” says Steve Jobs, Apple’s C.E.O. “People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

That’s from a New York Times story, The Guts of a New Machine, which was published at the end of November in 2003. The article is about the iPod, which I didn’t remember until I researched the source of the quote. The article didn’t stick with me, but the quote did, especially that last bit: “Design is how it works.” I can’t count the number of times that quote has surfaced in my mind and kept me from making bad design decisions.

One of the most difficult challenges I had when making this Tips & Tricks site was coming up with an icon for the Design category. Most icons that attempt to represent design use a paint brush, or a pencil, or something like that. I could have created something similar, but this quote kept coming back to me. I didn’t want to reenforce the misconception that design is a coat of paint. Design really isn’t how it looks, it’s not about the veneer, it’s not superficial.

Until I realized this, until I believed this, I was not good at design.

I’ve used this belief as a core guiding principal for years, and it’s served me incredibly well. So, today’s tip is this: Remember that design is, indeed, how it works.