Now that you’ve finished installing a WordPress website you’re ready to start crafting your design. These next concepts are at the foundation of creating a good website regardless of the platform you use to power your content. Good design is invisible, which is to say there’s a subtle art form to balancing white space, color, text, and images. Getting these basics right can make or break a website.
No pressure. 🙂
When designing for the web you need to account for the vast array of devices that will be accessing your website, from laptops to phones. This is called responsive web design, and it’s 100% necessary. You just can’t make a website that isn’t easily viewed on phones and tablets without losing the majority of internet browsers in 2019.
Good content is the most important part of a website, but your content will mean much less if it’s a chore to read. Balancing white space, color, and typography helps make your content easy for readers to absorb.
Your choice of color is one of the most important decisions you can make in your branding, and translating those colors to a website can sometimes be difficult.
You want to choose high contrasting colors for text and background. Dark text on a light background offers the best legibility which is why you don’t see a lot of dark background/light text websites.
If you have a lot of colors in your brand style, keep your website colors very simple so your content, photos, and graphics can show off the rest of the color scheme.
Use pops of color for links and buttons, but keep the rest of the colors you use neutral so that your content can shine.
Black & white schemes are popular for this reason. You can add your own touch by adding a bit of blue to your black or using an almost-white variation of one of your colors or light gray instead of stark white. Just make sure to choose a text color that has enough contrast to match.
Fonts & typography
Your main font size should be absolutely no less than 16px, although I recommend 18px or 20px to further increase the legibility of your website.
Use between 1-2 typefaces, and utilize font weights and styles (like italic) for variation between headings and paragraphs.
More than 2 typefaces are usually too many for any design project, but especially on the web where you also have to consider the external resources loaded to display web fonts. The absolute max you should use is 3 but use the third sparingly. I like to use a handwritten or script font as an accent in addition to my heading and body fonts.
Pop ups that block your content suck
Pop ups suck and I don’t care if they’re the highest converting thing in the world, or which guru told you it was a great idea. Most of your visitors hate taking the extra effort to “x” out of your offer and tricking them into thinking they have to subscribe before they access your content is no way to make friends or happy website users.
There are plenty of other high-converting placements for your lead magnets and opt-in forms, ones that don’t make your visitors flinch and click away. There’s a reason why they don’t let the aggressive perfume lady hit you at the entrance, you might turn around and leave. Especially if you weren’t even coming in to buy perfume.
Popups feel way better when they only pop after a delay, or better yet – on exit intent so you can catch people before they go. Bombarding a visitor with one as soon as they hit your site is just a bad experience in general.
Choosing a strong theme
When it comes to choosing your theme, I suggest choosing a generalized theme rather than a specialized one. Themes that are too niche tend to end up forgotten and unmaintained, which is a major security risk. With a generalized theme, you can largely replicate the different pieces (headers, footers, posts, etc) that make up any style of website you like.
OceanWP is a free general theme with excellent features and support
OceanWP has the most extensive options included in the free version of the theme of all the popular general themes right now. It also includes options and styles for popular plugins like WooCommerce and LifterLMS. Their support is speedy and friendly, and updates are regularly released with fixes and new features. Adding in their core extension bundle unlocks features like sticky headers and extra Elementor widgets.
Runners Up: Generate Press and Astra are both well-developed, free with premium upgrades, general themes.
Use a child theme to protect your changes
No matter which theme you choose, if you plan on making any changes at all you need to set up a child theme first. This can be done manually, or with a plugin. It’s a simple, but crucial step in designing for WordPress. When you use a child theme you can safely customize the theme while maintaining the ability to update the parent theme without losing any of your work.
Choosing a page builder
Even with the new Gutenberg editor that WordPress introduced in 2018, page builders still have a major place in my standard WordPress websites.
Elementor is a powerful free page builder
Like themes, there is an overwhelming amount of options when picking which page builder to use. I’ve tried all the popular ones like Beaver Builder, Thrive Architect, and Visual Composer but my favorite one remains Elementor, especially with the premium Elementor Pro upgrade.
Plus, OceanWP, Generate Press, and Astra all work great with Elementor.
Elementor Pro users can also opt to use a blank theme like Hello Elementor alongside the Theme Builder to create totally custom, responsive websites.
Keep visitors moving towards the goal
When you’re designing your pages, keep the next step of the user journey in mind.
There should be a clear Call To Action on every page, a button or link that moves the user to complete the action. Whether you want to make a sale or get someone on your list, always have a “next step” to keep the visitor engaged and on your website.