WordPress Design Tips for a More Modern Website

Author: Jennifer | Date: December 8, 2016 | Categories:

Following our WordPress Design Tips can improve the visual appeal and usability of your website. Modern websites are highly stylized, using visually appealing combinations of text and graphics to keep the reader engaged. It takes a lot of effort to style each web page, as it often requires programming for every stylized page. The text and the images often must fit within a certain area. This can make building a site like this expensive, not just from the initial build, but from the upkeep involved if the content must be changed. This is especially troubling when using WordPress as a content management system. It is no longer easy for just anyone to update a website. A simple text change could throw off the whole design.

Old style WordPress website
Old style WordPress website

There are a few simple things one can do to make a website look more modern without sacrificing ease of use.

5 Steps to a More Modern WordPress Design

1. Tweak the font.

It sounds simple, but it can have a big impact. Many websites employ “modern” fonts in a larger size in conjunction with images. The internet has evolved, and more specialized fonts are available for use on the web. Times New Roman is not the only choice! Changing the font throughout the website can have a similar impact, leaving a website owner free to make updates without having to worry too much about text placement.

Cobalt Security Services' Website - Before Text Changes
Cobalt Security Services’ Website – Before Text Changes
Cobalt Security Services' Website - After Text Changes
Cobalt Security Services’ Website – After Text Changes

2. Change the font color.

It is often overlooked how integral text is as part of a website’s overall design. While it is less important than the font itself, text color can have an impact on design. When using text and graphics together, it is commonplace to change the font color to coordinate with the graphics. Why not use the same principle in the text throughout a website? Changing the color of the font from black to a color that better coordinates with the design can have a big impact on how everything works together.

In the Cobalt Security example above, changing the font itself made a huge difference in the look of the site. The text also went from black to gray. While it was a subtle change, the text works better with the design with the font a softer color.

3. Break up large blocks of text

Areas with large amounts of text have been replaced with smaller chunks of text, much like a magazine layout. When designers pair text and graphics, they will often use background colors to set off sections of the text. One can accomplish a similar feel by using a Horizontal Rule, or HR tag. The background color will remain the same throughout the site, but the content will be broken into smaller chunks, divided by a line that runs the width of the page. This line can be styled in the CSS (style guide) so that it is consistent throughout the site. Other ways to break up large blocks of include banner images and banners of background color.

Champion Drapery Cleaning - Defined Text Areas
Champion Drapery Cleaning – Defined Text Areas

4. Design the site for modern technology.

p>Sites designed in the 90s were all 800 pixels wide out of necessity. Having a narrow site ages a site by decades. Monitors were smaller, and there were no mobile devices to contend with. It is now 2016. New monitors are wide screen. Mobile devices abound. For desktop and laptop viewing, make the site wider to accommodate wide-screen monitors. Likewise, make sure that your site functions well on smaller screens, like tablets and phones.

Mobile & Widescreen  Friendly WordPress Design
Mobile & Widescreen
Friendly WordPress Design

5. Style the H tags.

H tags include all of the headers throughout a website. The most commonly used are H1, H2, and H3. They can each be slightly different in style, size, color, and font to enhance the user experience.

WordPress Website Text Style Guide
WordPress Website Text Style Guide

CourseVector recommends working with a designer for all of the suggestions mentioned here. This way, the website will look cohesive, colors won’t clash, and the CSS (style guide) will be set for the entire site and not just one page.

For suggestions on how to update your WordPress website, please feel free to contact us. CourseVector’s WordPress design experts are happy to offer suggestions on how to make your website look more modern while keeping the benefits of WordPress as a content management system.

Contact Us to Get Started

"Your passport to all things web."

1 Abbey Lane
Camp Hill, PA 17011
Phone: (717) 516-6955

CourseVector Terms & Conditions
Design and hosting by CourseVector. All rights reserved. Copyright 2021.
Sitemap | Locations

To contact us after hours please use the panic button.
Fees may be incurred depending on reason for support.