First Step The Style Guide
Build a Style Guide
Change the color scheme
Set the color palette
Chose the font pairing
Deal with Accessibility
The Style Guide should be the first consideration when you’re going to redo a website. Even if you’re not redoing a website and you’re starting from scratch, you should create a Style Guide. This takes into consideration all the elements that will give you the effect you wish to have for the website.
There is no perfect style, there’s only the style based on preference.
As you start the process you’ll be able to figure out what you like and what you don’t like.
Which Style is Best?
There isn’t one that is better than another. Styles come and go. What doesn’t change is the way the style should not interfere with the content.
In the Design section of every module in the Divi Theme there are options to create good styles. It’s a matter of balance when it comes to styles. If there’s too much style it’s a distraction. With all the design elements built into the Divi Theme, and other Themes, you can overdo styling.
Colors have meaning and when they’re combined with other colors they either clash or match. Colors also bring an emotional response. Think about how some colors are soothing and other colors provoke action.
Interesting Fact:
“Research reveals people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone. “Source: CCICOLOR – Institute for Color Research
Color communicates and is an important element throughout the style of the website. If there is an existing color incorporate the same logo colors. Unless you want to redesign the logo. Depending on how well your company is known by it’s logo will help you make this decision.
Color helps focus attention but it should never be distracting or too bright as to hurt the eyes. Many people are color blind and don’t see true colors.
There is no perfect color that will be good for everything. Using only one color is uninteresting and the content will be ignored.
The Color Wheel
Most useful tool to use when making sure you get just the right kind of color tone and hue. The software used for this process is Affinity Designer. All of the softwares have the color wheel tool. You will find color charts built into note taking applications. All the time on a website you are looking at a combination of text and color.
What I like about a color wheel is when you drag the small circle and you will see the color change in the selected image or shape.
The Default Color Palette
The Divi Theme comes with the ability to change the Default Color Palette and is located in the Theme Options area. Here you can set the colors. When you set this Color Palette those colors will be used throughout the site.
All colors come with a specific RGB, or CYMK, or #and a number setting. You can put your curser anywhere in the square and the color setting will change giving you the number of that color.
The Right Font
Which font is the right font? There isn’t one. There are six-hundred Google Fonts to choose from so how do you know which one you should use.
Fonts are tricky. They need to be readable. Sounds obvious, but when you look at the many styles of Fonts available you find some are much easier to read than others.
Chose an easy to read Font. You do not want to give the person visiting your website eye fatigue.
You want to be sure you have clean open spaces and readable content. We do so much more reading than we used to do. We are constantly reading text on different sized screens.
For a comparison of how a font looks with color this article The Ultimate Collection of Google Font Pairing gives examples and shows the different sets of font pairing. You do not have to use those exact font pairings.
The choice of fonts is a matter of preference. You will find some fonts appeal to you and others don’t.
Accessibility
Your website must be accessible to someone with a disability. We don’t always remember there are people that are color blind, or handicapped in some way. Their online interaction is going to be different and it’s necessary to take into consideration accessibility.
In this blog post Quickly Build a Website in Divi on my other website RealTime Paradigm, I show an example of how using a flip module is a great effect, but it’s not obvious you need to mouse over the text to see the other side. This could be faulted as being inaccessible.
Animation and moving parts on a web page is now “in style.”
The best practice with animation; use it sparingly. You want to eliminate any barriers to prevent interaction.
The World Wide Web Consortium has an Introduction to Web Accessibility article for further reading.
One common error is an overly complicated navigation system with too many items in a menu that folds out into a sub menu. This can cause confusion as to where you are in the website.
People have visual disabilities. Make sure the text size is not too small, or too light. It’s the perfect way to get someone off your website if they can’t read the text.
A website has to be functional, accessible, operable, and this takes thinking through how you are going to redo the website.
You don’t have to have the website done by a designer. In fact, the best person to design a website is you. Of course you might need some help to do this as website software is now more sophisticated.
The Divi Theme is a robust theme with all the options available including AI generation for images and text.
Follow These Steps
Build a Style Guide
Change the Color Scheme
Set the Color Palette
Choose the Font Pairing
Deal with Accessibility
All of these steps will take you on a journey to redo your website. The context of a website is complex but when you approach it from this angle you’ll get the results you want when you redo a website in Divi.
