1. Have a Clear DirectionIf your website is going to accomplish anything for you, you must have a clear goal for what you want it to accomplish. As you work on the design, this goal needs to be in your head at all times, guiding your every action. It’s not enough to just put up some text that says what you do, and then add a few photos; you need a more targeted approach. Whether you like to think of it like this or not, you’re selling something. You may or may not be taking money, but you’re selling something: a product, a service, yourself, or maybe just your ideas. If you’re going to sell these things effectively, you need to know:
- What kind of customers you’re targeting
- Exactly what you want them to do when they get to your website
2. KISSNo, don’t kiss your users. It’s an old acronym for “Keep it simple, stupid.” Crude wording aside, it’s a perfect principle: Once you have your goals set up for visitors to your website, you need to remove every conceivable obstacle that might be in their way. Many people have the regrettable habit of adding complexity to a situation (or a website) when things look “too simple,” “too easy,” or even just “too empty.” Resist that urge. Your first instinct should be to cut out things in a design that you don’t need, rather than to add bits, bobs, and details for no reason. Let’s say you want to sell a pair of shoes. How much information does the customer really need? The backstory of the designer’s cousin? A story about the hours spent deciding on one kind of polyester over another? That’s all great information if you’re making a documentary. If you’re trying to sell the shoes online, you just need pictures, the available sizes, the available colors, and the price. Amazon takes it a bit further by offering information on the materials used (which is not a bad idea). There’s more information (such as reviews) below, but the part of the page where the actual sale is made, that is kept real simple. You get the basic info, and a button to make your purchase.
3. Prioritize Function Over FormAll designers strive toward creating something beautiful, and that is good. It would be rather odd if they didn’t. The thing to remember, though, is that beauty is an entirely subjective concept. Far more important than beauty in web design is whether or not your website works at all. And by “works,” I mean “meets the needs of the user.” Look at Craigslist. It’s still going because it meets the needs of the people who use it, and has done so in a way that few other websites have been able to emulate with comparable success. Specifically, it provides the functionality that users expect of a classifieds service, and puts all the information where they can easily see it. The interactive parts of the user interface, while very basic, are nonetheless feature-complete and intuitive. Everything is more or less where you expect it to be, and need it to be. To this day, though other classifieds websites do exist, Craigslist is still going strong. It’s effective, but few would say that it’s “beautiful.” This is hardly an insult, when you consider the money they must be making. Every user is looking for something when they browse the internet. They might be looking for a new car, a movie review, or a few seconds of distraction. The website that meets their needs first and fastest will get their business. Meet your visitors’ needs, and beauty is a secondary concern at best.
4. Focus on AccessibilityAccessibility is a sneaky concept. It conjures images of wheelchair ramps, handicapped parking spots, and long canes with brightly colored bits at the end. Well, who you might not be thinking of is the guy who can mostly see, but that darned small type gives him a massive headache. You might not imagine the woman with arthritis so bad that even thumb-typing on a phone is excruciating. Accessibility is about catering to all these potential situations as best you can. These sorts of everyday difficulties can severely limit the time and effort some people can spend on browsing the web in general. Failing to account for this means you could lose visitors because you are literally making their lives that much harder. From a moral standpoint, it could be argued that we’re obligated to be as inclusive and accommodating as we can reasonably manage. From a business standpoint, losing customers unnecessarily is never a good thing. The good news is that accessibility, while it can occasionally get complicated, is mostly based on simple principles. HTML and CSS are designed to be pretty accessible, so you have a good foundation there. The main points to keep in mind are:
- Don’t make your text and interactive elements (like buttons and links) too small. This is good practice both for people with visual impairments, and anyone on a touchscreen. There’s no reason your main body text should be any smaller than 16px (12pt).
- Use the alt attribute on any images that have essential information in them. If you’ve put the price of a product in an image for some reason, make sure that same information is in the HTML somewhere a screen reader can find it.
- Make text links look like links. Links should always be underlined. They don’t always have to be blue, but they do have to be underlined.
- Use lots of light/dark contrast. On some screens, subtle color and shade differences will be entirely lost, and the same goes for people with vision problems ranging from poor eyesight to color blindness. For example: light-grey text on white = bad. The text you’re seeing here = good.
- Use elements besides color to create contrast. Color blindness is actually a pretty common problem which can lead to people having a hard time seeing the difference between, say red and green buttons. Use more dramatic differences, such as a button with a full blue background, and another button with a white background and a blue outline.
- Use size for contrast, too, especially to indicate importance and hierarchy. Headings should be bigger than body text. The buttons you most want people to click should be bigger than the other ones.
5. Take Advantage of Conventions and ExpectationsThink fast: if you needed one button that said “Stop!”, and another that said “Go!”, what colors would you make them? Well, if you’re in a Western country, you’d probably pick red for “Stop!”, and green for “Go!”, right? That’s because people in Western countries associate those specific colors with those specific commands. It’s almost built into our DNA. When browsing websites, we’ve gotten used to certain things. Logos are at the top, on the left or in the center. It’s the same for navigation, though navigation can also be on the upper right, occasionally in a sidebar on the left, and in very rare cases, in a sidebar on the right. (The right is usually reserved for secondary navigation.) Also, we read things from left to right, so we scan webpages the same way, in a sort of F-shaped pattern. Remember I mentioned above how text links need to be underlined? We have learned these behaviors, and we expect these things. Adhering to these conventions makes it easier for visitors to get to the important bits of your website faster. This is not to say that you can never break from convention. You can, and it can help you stand out. But sometimes, it can just be confusing. If you suspect that your visitors are in a hurry, and they often will be, then don’t confuse them. In general, navigation should be where they will find it quickly, buttons should look like buttons, and the mouse cursor should always change to a little hand icon when they hover over a link. Green is good, red is a warning, and dark blue means serious business for some reason. I didn’t make these guidelines up; I just generally try to follow them.
6. Make Your Website Run Like Usain BoltWhen websites take too long to load, visitors go elsewhere. It really is as simple as that. Your website needs to be fast (as in the actual performance and load time of the website) and it needs to feel fast (we call this “perceived performance”). The simplest way to manage that is as follows: Keep your website small. More specifically…
- Optimize your images. Keep their file size small when you have the option, and perhaps use SVG graphics wherever possible.
- Cache your website. CMS options like WordPress have plugins which will do this for you.
- Keep fancy effects and animation to a minimum. Sure, it looks pretty, but those fancy effects take a bit to load, and can be very slow for users with older mobile devices.
7. Design for IterationThe only constant is change, and your website is no exception. You’ll have to make minor edits, massive overhauls, and everything in between at one point or another. Sure, redesigning your entire website is always an option, but that’s the nuclear option. To make things simple for yourself, you should put some serious thought into making different parts of your website modular, so you can change bits and pieces of it as necessary. For example, making a change to the way your blog posts look shouldn’t necessarily affect how the text on your “About Us” page looks, and so on. For the best effect, this sort of modular thinking should be embraced right from the beginning of your project. If you’re using a website builder like Wix, you’re in luck. Website builders tend to use at least a semi-modular approach to design already, because it works well with drag-and-drop web design software. If you’re still looking for a website builder and want to consider Wix, check out our Wix expert review.
8. Always Tell Them the Next StepYour website’s visitors should never be left wondering, “Well what do I do now?” At every step on their journey through your website, you should be letting them know what the next step is. For example, you could have a big “Buy Now” button on your home page, sure, but what if they want to look through the features first? Have another big “Buy Now” button waiting for them when they’re done. Basically, every page on your website should have some sort of call to action, whether it’s to buy the product, sign up to your newsletter, or to reach any other goals you may have defined. Users generally don’t mind scrolling much, but why make them scroll all the way back to the top of a blog post so they can keep browsing your website? Offer them a path of least resistance, and they’re more likely to stick around and see where it goes. If you want to know how to design an effective call to action, read our article about how to create an effective CTA for your landing page. Or just keep scrolling for examples. Right after every article, you can further interact with the website by “Clapping,” commenting, or signing up for the Website Planet newsletter.
9. Ask the Right QuestionsPeople often start their research into web design tools and platforms by asking a question like, “What is the best CMS?” or “What is the best site builder?” These are the wrong questions because they’re a bit too vague. Oh don’t get me wrong, there are some options that are just plain better than others, but among the best… some are better for blogs (like WordPress), others for business sites (like Wix, or Squarespace), and others for building communities (like uCoz). Simply put, there is no “magic bullet.” There is only the tool that’s right for you. When picking a design app, a coding environment, a CSS framework, or a content management system, there’s no “perfect solution” for all your problems. There’s only the best choice for the job at hand. And you’ll have to make that choice for yourself. That said, if you want reviews for just about every web tool under the sun, we have all of that right here on Website Planet. Check out the website builder reviews here, if you haven’t already.
Now Go Get Into Some TroubleYou know, in a good way. There’s always more to learn about web design, but armed with these nine principles, you’re on the right path. I haven’t provided technical advice here because technical advice is temporary. The technology we use to build websites now is going to change, but the basic principles will last you a lot longer. Effective web design is all about remembering that the people who come to your website are not just robots programmed to buy things and read blog posts. They have lives, goals, dreams, and other things to do with their day. They’ve got full hands, full schedules, and they very often have bad eyes. They do not exist to open their wallets for you, or their hearts to you, for that matter. But if you give them something they want, they’ll give you what you want. If you give it to them faster and with less hassle than the competition, they’ll love you for it. Just keep your mind open, keep learning, and let us know how it goes!