There are way too many things to keep in mind when designing a website. With all the developer details, architecture changes, and project managers carping about deadlines, we sometimes need a little no-tech inspiration on how to make websites look awesome. What follows are five ways to do just that.
Rather than get bogged down in a discussion of HTML5, CSS3, PHP, jQuery, and sick Photoshop actions, I’m going to share some easy-to-integrate design hacks that don’t require you to open up Murach’s 656-page guide to CSS.
Sometimes the best design breakthroughs are those that are lowest on the techy totem pole. To take a line from Singyin Lee’s stop-and-think article, “the best solutions need not be technology-reliant.”
Lee was writing about pencils and paper clips. I’m writing about web design. But the same principle applies. Going low-tech is good. Here’s are five ways to up your website design skills.
1. Use lots of white space.
White space, also known as negative space, is one of the most powerful weapons in your design arsenal. And the cool thing about it is that you don’t need any HTML ninja superpowers to pull off some sweet white space. White space is about not doing anything, just as much as it’s about doing something.
Getting your head around white space.
The definition of white space is exactly what you’d expect — the amount of space between various elements of the website. What’s in the space? Well, nothing, sort of. It’s just space. It could be white, it might contain a background image. Whatever the case, it’s the strategic use of the absence of overt design elements.
Kristina Zmaic has one of the best quotes on whitespace.
Adda Birnir, CEO of Skillcrush spins it another way: “When in doubt, give it space.”
White space is a subtle and understated design move that creates a website that is enjoyable to look at, easy to navigate, and striking in its appearance.
Here’s an example of a site that does not use white space.
(Image courtesy of globalwebfx.com)
With this site, you have no freaking idea what you’re looking at, because your eyes and mind simultaneously exploded. This is quite possibly the world’s worst website.
For the polar opposite of this nightmare, look at the world’s most popular website.
This study in contrasts is a helpful perspective of what white space is. There was a whopping total of twenty-one words on Google.com when I accessed it, and took the above screen shot. Google.com doesn’t turn heads with its innovative design, but it is simple, functional, and brilliantly beautiful.
Let’s check out a few more good whitespace examples.
Si Digital uses whitespace to draw your attention to their tagline and the copy.
There is nothing incredible complex about the design itself, but the copious amounts of white space make the website pop with this I’ve-got-to-read-it sort of intensity.
One of the starkest uses of negative space that I’ve seen comes from the website of Jointlondon.com. Below, behold their home page. Visit the site yourself. That, dear readers, is a call to action that you simply can’t ignore. The reason why it’s so compelling is that it is 95% negative space.
The blaring simplicity of the site doesn’t quit, even when I dive deeper in:
The mother of all white space usage is probably Apple. As I write this on my Macbook pro, I’m grateful that Steve’s passion for simplicity kept stickers, weld joints, snapping parts, and little buttons from cluttering up the svelte aluminum unibody.
But beyond my juvenile and geeky infatuation with my Macbook, I admire Apple.com for the use of white space in their website.
Look and learn.
Cluttered this is not. White space in both its micro and macro iterations helps the entire site flow smoothly. White space is especially important in a commerce environment, where it subtly frees up the viewers visual processing bandwidth, thus allowing the shopper to focus on the product.
In a CIO article, Paola Vidali, a marketing strategist for DragonSearch explained, “It’s very easy these days to be visually overloaded with images, to the point where our brains stop processing information when confronted with too many options.”
The solution is to reduce the options, remove the clutter, and create white space.
This is exactly what Apple does with their iPad page:
They’re selling something called “iPad Air.” Obviously, the site needs to have a sense of airiness about it. Whitespace accomplishes this design goal.
37Signals.com uses macro white space in the surrounding of their landing page, and then uses micro white space to fill out the icons for each of their products — Basecamp, Highrise, and Campfire.
In the examples above, the whitespace is truly white — as in the color white. However, white space is more accurately termed “negative space,” which better captures the idea
Negative space lets you see what you need to see. More importantly, negative space pushes back the intrusion of design, so you can do what you need to do on a website.
A Word on Simplicity and Whitespace
Another way to look at whitespace is through the lens of simplicity. If you check out the screenshots above again, you’ll notice that each one of them has a sense of simplicity.
Jony Ive, senior vice president of industrial design at Apple, made the following statement at the introduction of iOS7: “There is a profound and enduring beauty in simplicity…True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.”
Simplicity, then, is about organizing your website, about making it coherent. This pursuit begins in your mind, as the designer.
2. Make UXD your BFF.
First, let’s unpack the acronyms.
- UXD stands for User Experience Design. It’s also known as UX. The idea behind UXD is making your website design match the people who are using it. The term sounds high-tech, but it’s really about something very simple. It’s about designing a website with the user’s experience in mind.
- And BFF? That stands for Best Friends Forever. But you already knew that.
So, as you design your site, you want to be BFFs with UXD. Here’s how it happens.
So, how does this actually look? What do you actually do? In order to understand UXD, it’s helpful to see it in context. Let’s look at some examples:
- The project management software example. Let’s say you’re designing a website for a company that sells project management software. What’s the first question you ask? Color scheme? Parallax? No. The first question you ask is, “Who’s using the site?” You begin with the user in mind. In this case, the user is a project manager or senior manager of a tech company or startup. They’re tech-savvy, tight on cash, and intent on saving time. So, you design a site that answers their questions upfront and easily. Bam. You’ve just done user experience design.
- The helicopter hobbyist example. Now, let’s move into a different field. You’ve been asked to create a website that features and sells model helicopters. In order to carry out UXD, you’ve got to understand the world of radio controlled helicopters. You need to understand that these hobbyists love to see specs, videos, and brands like Walkera, Dynam, or Esky. They want to know at a glance that a copter for sale is a 2.4Ghz LAMA V4 RTF Coaxial Remote. The user dictates the design. You, as the designer, carry out these dictates.
Using UXD is about knowing your user.
UXD may very well be your most powerful low-tech design technique. After all, it requires zero coding knowledge, at least on the front. Second, a true understanding of the user will influence the entire design of the site — color scheme, layout, imagery, order forms, payment methods, conversion action…everything!
Once you understand the user, you’ve won half the battle of design.
Mary Muckerman, in a Fast Co. Design article wrote, “User experience is the heart of any company.” She states that the word “useful” must be top of mind when designing a website or creating a product.
As a designer, you are bringing technology to bear upon the experience of an individual person. This transformative point of contact will only be a success if you understand what that individual needs and wants.
Will it be useful?
Here’s what you need to understand about UX and design. Designing a website is more than just making something that looks sweet and works well. It’s about creating an experience that is crafted for a specific group of people. Ask yourself if it’s useful. Ask them if it’s useful. Usefulness trumps every other aesthetic trick.
UXD the best starting point for your design. And it’s remarkably low tech.
3. Try big graphics; they’re like magic.
Big graphics make for great websites. Today’s design trend is hero graphics. This is a good trend for more reasons than “it looks cool.”
In actuality, it is cool, because larger image size increases conversions. In an Econsultancy study, larger graphics caused conversions to increase by 329%. In this particular study, the website simply increased product graphics by 28%.
Dell.com increased their graphic sizes on this page. The original graphics were modest, but not big.
And so they used bigger ones:
(Images from whichtestwon.com)
The big graphics caused bounce rates to go down (27%) and conversion rates to go up (by 36%). Both good things.
Big graphics win. It doesn’t matter what you’re featuring or selling; big graphics are clutch.
Pottery Barn Kids has a site that explodes with visual power, because of the large graphics:
New York’s Bryant Park Hotel website hits you with a huge hero graphic.
Costata, an upscale restaurant, does exactly what it’s supposed to do with its website — make me want to eat expensive food. They pull off this sadistic trick with a simple technique: Fat Graphics.
Another restaurant, Marea, produces an exhilarating spread with bigtime images:
The website of pro-foods.com puts a huge picture of a beverage bottle directly in the line of sight, which helps to develop thirst.
Thanks, obnoxiously large graphics.
RalphLauren blasts huge graphics over their entire landing page.
Big graphics can make the difference between a crappy little website and a jaw-dropping website. The surprising thing about this technique is that it requires very little in the way of technical skills. Sure, there are some semi-techy design elements that need to be dealt with, but for the most part, you simply let the image do its thing.
Need a place to find images? Check out our list of 25 sites to get free images.
4. Think different.
I’ve seen way too many designers get stuck in a rut. They do the same thing, the same way on site after site after I’m-tired-of-it site. If you’ve seen one of their websites, you’ve seen all of them.
“Oh, yeah, that’s the same template you used on, uh, this site, right? And this one? Heh, heh. Looks nice….again.”
Obviously, every designer has his or her style, but there’s a point where you’ve got to break molds in order to be a rockstar designer. The hardest mold to break is your own.
I can’t give you any instructions on how to “think different.” Genius design is an exercise in arbitrariness. It’s imagination unleashed. It’s structured rebellion. It’s design anarchy.
If you think about it, epochal moments in history were moments at which something new happened — something different.
- Copernicus said that the sun was the center, not the earth. Paradigm: blown to smithereens.
- Gutenberg decided to move around the type on an old piece of technology. Renaissance: begin.
- Edison decided that light bulbs were meant for living rooms and office lamps. Light bulb: moment.
- Steve Jobs decided that you should put a thousand songs in your pocket.
So maybe you’re not pulling a Copernicus with a website design, but you can accomplish small repeats of historical epochs by trying something totally new, totally different, totally uncalled for.
Here are some examples of designs who are doing it differently.
DuJour decided they should make a website home page into a magazine cover. They won a webby. (By the way, I’m putting in a plug for white space here.)
Here’s a webby award for best navigation/structure. They did something differently. Go to the site www.cloudsovercuba.com, and see how it’s different. Hint: move your mouse around the screen.
Often, the best creativity comes in the form of other creatives — like this site for a musician.
In this example, a creative agency puts their best foot forward. This is different.
Humans of New York unleashes a bold design style that pushes content to the forefront of the viewer’s minds. This is an outstanding example of allowing the content to speak, and letting killer design slip into the back seat.
Being different isn’t about being anticultural, negative, or weird. You can overcome archetypes by creating new ones.
5. Be nice.
Being nice is a personality characteristic, not a website design element, right?
Right, but I told you that this was going to be low-tech design advice.
Being nice in website design requires a new way of viewing the whole design endeavor. Normally, as you design, you’re thinking — how can I bring all the elements of this site, making them work well, look nice, and be useful?
“Being nice” takes all those things, but pushes them a step further.
Smashing Magazine — in one of the best articles I’ve read on the topic of emotion and design — outlines four goals in web design. The website design should be…
- Appealing – Grab the user’s attention and influence their perception.
- Effective – Guide the user’s attention and make sure they find what they are looking for.
- Pleasurable – Allow the user to appreciate your website and have fun.
- Memorable – Build a relationship with the user and ensure a positive memory of you.
The first two elements — appealing and effective — have to do with the visual aesthetics of your site. But the third and fourth points have more to do with layout, structure, functionality, and overall feel. It’s about being courteous, respectful, and kind to the viewers.
There are several ways you can achieve this:
Use simplicity. Above, we discussed the importance of simplicity. Users who are not familiar with the site need to navigate your website with comfort and ease. You can make the experience easier by making the website simpler. A good website design never makes someone feel stupid.
Apply humor. Appropriately-placed humor is important to creating a sense of connection and goodwill with the user. Humor-based sites are among the most popular on the Internet, for the very reason that they connect with people on an emotional level. These sites have rock-bottom bounce rates and incredible high interaction rates. No surprises there.
When someone is browsing a site, they’re looking for a tingle of human connection. Whatever it is — a lighthearted comment, or a bit of whimsy — do what it takes to communicate true humanness.
Unleash content. Great web design is about letting the content shine. In the end, people are there to interact with content. Design your website in such a way that people can soak up that content. As sad as it may be for you as the designer, you’ve got to realize that most people aren’t visiting websites to admire the design. They’re going to websites do get stuff done, read content, or perform tasks. Thus, your task as a designer is to allow them to do just that.
The New Yorker has a design that lacks panache, but lets viewers do what they want to do.
Techi.com, despite its lack of images, dishes up content. The readers of Techi go there to get top tech stories.
Content still rules, so let the content speak.
When you pull the technical back from the practice of website design, you’re left with the real essentials of the trade.
Technical operations and complex coding tricks — whether you’re developing or designing — are critical. But that’s just frosting.
There is something more substantial to web design. These may not be glaringly obvious, but they are undeniably essential.
- Using negative design is the difference between heart-stopping aggravation and an enjoyable experience.
- By placing UXD at the forefront of your mind, you will be able to deliver a website that completely pleases the people who really matter.
- Bigger graphics mean higher rates of readership, results, and real happiness.
- Creating a website that is different means that you can unleash a torrent of creativity and maybe even a webby.
- In the end, it’s about connecting with people in a meaningful way. Be nice. Even in your design.