1. Website Planet
  2. >
  3. Blog
  4. >
  5. 9 Fundamental Concepts For Effective Web Design (2019 UPDATE)

9 Fundamental Concepts For Effective Web Design (2019 UPDATE)

Ezequiel Bruni
Ezequiel Bruni
19
July 29, 2019

Maybe you’re getting started with your first website, and you want to make sure everything turns out right. Maybe you’ve already got one, and you feel it could be better. After all, there are so many things to do: grab the user’s attention, keep the user’s attention, make sure the website looks good on desktops and mobile phones, write valuable content, and did I mention make the sale??

As you can imagine, web design is kind of a huge topic. It’s so huge that attempting to define “all” the principles behind doing it right is too much for any one designer, and I’ve been doing this for over a decade.

The beauty of not being a career web designer is that you don’t need to know everything. You just need to know enough to get you into trou… *ahem* enough to get started. These nine principles are what I personally try to keep in mind on every project. They are my foundation, and now they can be yours, too.

I’m going to focus on some of the things you need to know to not just attract visitors, but keep them around awhile. We don’t just want them to be able to use your website, we want them to like it. The principles you find here will help you leave your visitors feeling content with their experience, and feeling good about interacting with your business.

1. Have a Clear Direction

If 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:

  1. What kind of customers you’re targeting
  2. Exactly what you want them to do when they get to your website

For the first point, you can fill in these blanks:

“My product is for people who believe ___. I will focus on people who want ___. I promise that engaging with what I make, will help you get ___.”

This template comes from an interview with Seth Godin, and is designed to help you define exactly whom you want to work with, and whom you should be designing for.

For the second point, you need to have a path you want your visitors to follow. You must define whether the end goal is for them to buy a product online, contact you directly, follow your blog, or even just sign up for a newsletter.

You can have more than one goal, but I recommend not hitting their attention spans with more than three at a time. And there always needs to be a primary goal that takes precedence over the others.

2. KISS

No, 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.

9-Fundamental-Concepts-For-Effective-Web-Design-image1

3. Prioritize Function Over Form

All 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.

9-Fundamental-Concepts-For-Effective-Web-Design-image2

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.

9-Fundamental-Concepts-For-Effective-Web-Design-image3

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 Accessibility

Accessibility 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 Expectations

Think 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 Bolt

When 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.

For more information, see this article here on Website Planet: 6 Cool Tricks to Speed Up Your Website in 2019.

7. Design for Iteration

The 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 Step

Your 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 Questions

People 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 Trouble

You 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!


Source:

https://medium.com/@owltastic/new-year-new-website-7065afa64057

19 claps
Clap for the post if you found it useful!

Related posts

Show more related posts

Any comments?

0 out of minimum 100 characters
Required Field Maximal length of comment is equal 80000 chars Minimal length of comment is equal 100 chars

We check all user comments within 48 hours to make sure they are from real people like you. We're glad you found this article useful - we would appreciate it if you let more people know about it.

Share this blog post with friends and co-workers right now:

We check all comments within 48 hours to make sure they're from real users like you.

Once a month you will receive interesting, insightful tips, tricks, and advice to improve your website performance and reach your digital marketing goals!

So happy you liked it!

Share it with your friends!