8 Design Best Practices Every WordPress Developer Should Use

In a perfect world, every WordPress developer would have access to their own crack team of battle-tested designers and front-end wizards, leaving them free to get their hands dirty with the code they love.

However, if you’re working on your own and your platform of choice is WordPress, most clients will see you as a one-man army. You’ll frequently be expected to make design choices you might not be comfortable with tackling.

Like it or loathe it, design is a crucial aspect of every web development project. It doesn’t matter how elegant your code is if your layout makes users wince.

In this article, we’ll take an in-depth look at eight design best practices you can use as a developer to up your design game and expand your overall marketable skillset.

1. Keep up with Current Design Trends

This isn’t Vogue, so we’re not going to devote thousands of words to analyzing the in-and-outs of every current design trend. You’re probably already unconsciously familiar with what’s hot purely by virtue of general web browsing. However, it’s well worth your while taking the extra effort to deliberately investigate major trends in order to stay current.

Topping the “Most Used” list these days is parallax scrolling: a simple but effective motion design technique where foreground images move faster than those in the background. This creates an eye-catching effect, is easy to implement and lends depth and visual interest to the design of pages. You’ll see this effect employed quite often to make headlines really pop and draw readers in.

Parallax is just a single trend highlighting the overarching scroll-heavy focus of much of today’s design. Infinite scrolling is another popular, though mildly controversial, technique.

Scrolling techniques in action at I Hate Tomatoes.

Another current trend that rewards close study is material design: Google’s attempt to create a cohesive visual language across their products and services. Material design is focused on providing a seamless design experiences regardless of platform, with a mobile-first mindset.

Android’s homepage keeps up with material design trends.

Moving along, we come to card-based design (of which Pinterest is a classic example), a technique with an emphasis on the elegant visual display of condensed information.

These trends are so popular because they create visual engagement by following a simple set of good design rules. We’ll touch on many of these rules as we go through the rest of our list. Getting familiar with current trends, like the ones we’ve highlighted, is a great way of turbo-charging your learning and almost instantly improving your overall design sensibility.

2. Commit to Responsive Design

Responsive design in action on an iPad view of Smashing Magazine.

Responsive design simply involves the ability to appropriately adjust to every user’s screen size, device orientation and platform. In a mobile-first world, it’s an absolute requirement for modern sites on the front end but can often feel like a duct-taped nightmare of media queries and assorted hacks under the covers.

There’s no getting away from it though: users rightly expect websites and apps to display and function flawlessly across myriad devices. As a developer, you know that a seamless experience across platforms requires a lot of testing and fixing, but that’s no excuse to slack off.

To underline how important this is, overlooking this crucial design element means you could be kissing goodbye to a third of website traffic.

Implementing responsive design needn’t be a daunting task however, and developers these days have it much easier than even a couple of years ago in this regard. Make sure you’re getting this right and not sabotaging your designs for a considerable part of your audience.

3. Make Content Easily Accessible

Bounce rates vary wildly across websites, but one of the uncomfortable truths of online design is that a large number of people will be hitting your carefully constructed content and heading straight for the virtual door.

People make astonishingly quick decisions about whether to stay on a site or not, and your job as a designer is to make it as appealing as possible for them to linger and look around. Poor layout choices, lack of search options and plain old irrelevant or low-quality content are all things that will send visitors packing.

From a design standpoint, you want users to be able to quickly determine which part of your website holds the information they seek. Keep the navigation friendly and label everything clearly to avoid confusion.

4. Remember That White Space Is Your Friend

Cultured Code is a great example of good white space use.

By the nature of their work, developers are an organized bunch most of the time. More often than not, however, they are optimizing for efficiency rather than aesthetics. This is why they often tend to treat websites like old-timey newspapers – filled to the brim with information, but a nightmare for users to actually consume.

You want users to be naturally visually drawn to the most important information in any section of your website. Effective use of white space is one of the most elegant and time-tested ways of doing this.

Not only does white space serve to highlight important information, it also improves reading comprehension and makes your overall design look substantially sleeker. Add it to your arsenal of design tricks and your sites will instantly start looking more polished.

5. Understand the Importance of Fonts

Image by Olga Milagros / shutterstock.com

In design terms, fonts are a very big deal indeed. There’s a reason designers don’t just slap everything up in Comic Sans or Courier and call it a day. Unless you’re running a gallery-based portfolio, the chances are that the vast majority of the content of your projects will be in text form.

In the bad old days, you could only choose from a limited set of fonts while doing web design, but those days are thankfully gone. Browser support for web fonts means that you’re now only limited by how much time you want to spend finding the perfect font fit for your site.

An ideal font will not take attention away from the content itself, or look out of place in the overall design. Choosing fonts and font pairings is a design decision that rewards careful thought.

Begin with a simple typographic primer, such as Matthew Butterick’s Typography for Lawyers, and you’ll feel those design muscles starting to flex straightaway.

6. Don’t Make Forms Difficult

Nobody likes filling in forms. Whether online or offline, they’re a chore. There’s no getting around them in web design though; they’re the main way users interact with your site: registrations, lost password recoveries, contact pages, submissions – the list goes on.

Taking a little bit of extra time and effort to actually make your forms intuitively usable, friendly and stylishly presented instantly raises the overall design profile of your pages.

You’ve got a slight advantage as a developer here as well. Many designers instinctively shy away from the technical side of implementing forms, but it should be relatively trivial compared to some of the other problems you’re used to wrestling with daily.

7. Provide Friendly 404 Pages

Reddit’s error page design, simple and informative.

Every website breaks or goes down eventually, even if only for short periods of time. While that’s to be expected, regular users often take this as a sign that your website shouldn’t be trusted, so why not take a bit of extra time in order to build a unique error page to reassure them?

Anything looks better than a default server error message on a white page. A well-designed error page reassures visitors and gives the impression that everything is under control and things will be back to normal soon.

When using WordPress, there are a lot of great plugins that can help you set up a custom 404 page with little effort. You’ll find a great breakdown of these in our article on the 7 Best 404 Plugins for WordPress.

8. Accept That Small Details Are Important

So far we’ve covered basic design trends, responsiveness, accessibility, using white space to your advantage, typography, forms and 404 page designs, but we’re still only scratching the surface of all the elements you could consider in terms of raising your design game.

If you take away nothing else from our article, remember this: design is all about detail.

Considered in isolation, all these small points don’t amount to much but, as they are all piled on top of each other, they form a cohesive whole that people instinctively recognize as good design.

As a developer, you’re used to focusing on details in a very different context, but they’re equally important in this arena. Recognizing that truth goes a long way towards making you a better designer.

Summary

Allied to great content, all of the points we’ve discussed lay the foundation for solid design. Using them will considerably improve the look and feel of any sites you happen to be working on. Let’s run through the list one more time:

1. Keep up with current design trends.
2. Commit to responsive design.
3. Make content easily accessible.
4. Remember that white space is your friend.
5. Understand the importance of fonts.
6. Don’t make forms difficult.
7. Provide friendly 404 pages.
8. Accept that small details are important.

Adding basic design literacy to your skillset as a developer using the techniques we’ve discussed will not just delight your end users, it will also considerably increase your marketability as a developer.

Do you have any favorite tips for learning design skills as a developer? Or is there a particular area you struggle with? Let us know in the comments.

Article thumbnail image by Sentavio / shutterstock.com