Design Palette Pro is Your Key to a Professional Genesis Website

If you’ve never heard of Design Palette Pro and you’re a Genesis user, you’re in for a treat. The most common support request for Genesis child themes is how to change the default styles – in particular, changing colors and fonts. Most StudioPress child themes include a few color scheme options, but what if they don’t “fit” your blog or business brand?

If you aren’t familiar with CSS, or editing theme files, making relatively simple design changes can be overwhelming and thoroughly frustrating experience.

Creating a professional looking design for your website can be simple, and easily achieved using Design Palette Pro.

In this post I’ll give you a brief overview of the plugin, and offer some tips for creating a beautiful and cohesive design that fits your brand.

Choose the Right “Theme”

Design Palette Pro currently supports almost all of the StudioPress Pro themes, and eventually will include all StudioPress themes, plus any future additions. The first and most important step is to choose a theme with a layout that fits the website goals.

Think of the theme as the foundation, and Design Palette Pro as the finishing touch. Take the time to evaluate themes, and chose the right one. No amount of styling will make a theme what it is not intended to be.

[Tweet “No amount of styling will make a theme what it’s not intended to be”]

A little tip…

Familiarize yourself with the theme setup documentation, and set it up like the demo. This is important because a supported theme in Design Palette Pro is developed based on the demo.

For example, if a widget section on the front page uses the Genesis Featured Post widget, then the settings for that section in Design Palette Pro will style the Genesis Featured Post. This may seem like a limitation, but it’s not a plugin that does all things. It is designed to style the default theme – so being sure to follow the initial setup instructions from StudioPress will make the settings in the plugin make sense, and save you loads of time.

How Design Palette Pro Works

The settings are organized by each section in the theme:

• General Body
• Header Area
• Navigation
• Content Area
• Content Extras
• Sidebar
• Footer Widgets
• Footer
• Support
• Settings

A supported theme will also include a section for any custom widget areas added to the theme, such as any front page widget areas.

Each section includes sliders for padding and margins, a color picker, and drop down menu for various font styling. The interface includes a live preview panel which is great for previewing the setting changes before they are saved.

When settings are saved, the plugin generates a custom stylesheet. Each time an edit is saved, the custom stylesheet is updated. The separate stylesheet is awesome because it means no inline styling, and no modification of the theme files – so there is absolutely no worry about messing anything up.

Nothing is permanent!

If you don’t like the changes you’ve made you can either re-edit, or reset the settings, which removes the custom generated stylesheet. Absolutely no harm done.

The plugin offers a buffet of style edits at your fingertips, and it’s tempting to jump in and edit every single setting. Remember just because you can doesn’t mean you should, but do it anyho! Play around and get it out of your system. This is a great way to get a feel for how the plugin works. When you’re done, reset the settings ( under the Settings menu), and start fresh.

With that out of the way, let’s dig into the making deliberate style decisions. Every choice should have supporting rationale behind it. Simplicity often has the largest impact in design.

Be a Minimalist when Selecting Fonts

By default, Design Palette Pro loads a small selection of fonts to choose from in the drop down menu. Want more font options to choose from? There is a free add-on available for the plugin – Google Webfonts. When installed, this extension will add up to 62 of the most popular Google web fonts into the drop down menu.

There are also options to edit and fine tune the font styles, which include the font size, font weight, text appearance ( eg. uppercase or lowercase), and font style ( italics ). This allows you to create different variations of the chosen font.

Right: default fonts – Left: Google Webfonts activated

Fonts have an important purpose in a website design. Choosing the right font combination will create hierarchy, and display the content in a clear and readable way that will engage your audience. Using too many fonts can create a cluttered appearance, which can distract the audience from reading the content. Instead choose 1-2 ( 3 at the very most) fonts total, and create variations by adding font weights and italics.

Things to consider when font pairing:

• Create contrast by choosing complementary fonts that are different from one another but work well together – such as a serif and san-serif.
• Avoid conflict by using different fonts that are similar to one another – such as 2 serif or 2 san-serif fonts.

Font pairing is a subject all its own, and it would be impossible to cover all things font related in this post. To give you a jump start, here are a few beautiful font pairings to consider ( note: you will need to install the Google Web fonts extension for Design Palette Pro):

• Roboto Slab + Roboto
• Dosis + Open Sans
• Montserrat + Playfair Display
• Open Sans + Lora
• Oswald + Merriweather
• Raleway + Roboto

Note: You can download the Design Palette Pro Google Font plugin here (it is required that DPP is installed for the font add-on to work).

Create a Color Palette

A well thought out color palette will make a website stand out and look professional. Design Palette Pro has a color picker to choose colors for backgrounds, text, and link color (and button styles if used in the supported theme). The color possibilities are endless! In reality you can use any color you want. No limits at all!

Curating the perfect color scheme can be challenging when trying to choose colors directly from the color picker – endless color choices make it difficult to nail down a combination that works. There are a few great websites dedicated to creating color palettes that I highly recommend. What’s great about these tools is they not only create a palette, but generate the hex code which you can then add directly into the Design Palette Pro color settings.

• Colour Lovers
• Adobe Kuler

A well thought out color palette will emphasize branding, make a website visually consistent, and navigate the viewer to take certain actions ( think call to action buttons and links).

Let it Breathe

Slider settings are used to edit padding and margins – these are used for the general widget area and single widget areas. Padding refers the area between the content and the element border. Think of a box with content – padding affects all areas around the content within the box, whereas margins affect the space around the box.

The biggest mistake DIY designers make is cramming a ton of content into one space, and then proceeding to “tighten” up the white space. Don’t do that! White space is good! It allows the content to breathe and enhances readability. Avoid making large changes to padding and margins, and adjust the padding and margins sparingly. StudioPress themes tend to be very well designed and clean. They definitely know their stuff, so I find there is very little to edit in this aspect. Adding or subtracting excessive padding and margins will throw the balance of the layout off. A visitors attention span is very low, so you need to do everything you can to create a comfortable experience that encourages them to stay.

Think Mobile Responsive Design

We’ve talked about the importance of a mobile-responsive design in the past. It’s no different when using DPP.

The Design Palette Pro interface has a toolbar to the left of the preview panel. The first 3 settings are different screen sizes that can be previewed – Mobile ( 320px), Tablet ( 768px) and desktop. These are the default resolutions for a lot of popular mobile devices so it’s a good starting point to make sure your site looks good on mobile.

It’s great to see how the changes you have made affect how the website displays. In most supported themes (some, but not all), there isn’t a separate setting for media, so an edit made may need to accommodate desktop, tablet, and mobile. Check all changes with the different previews to ensure that the website displays well on smaller screen sizes.

Extensions

Need extra style options? Then the free add-ons may be what you are looking for. These add-ons are not included by default because having too many options often overwhelms the average user, who doesn’t need all the bells and whistles. By having these extensions outside the plugin, the user can choose to add what functionality they wish to have.

The available add-ons:

• Google Webfonts – Includes 62 of the most popular fonts.
• Entry Content Style – Edit headings, paragraphs, and list items.
• Freeform Style – Creates a new section to add custom CSS snippets.
• eNews Widget – Customize the Genesis eNews Extended form.
• CSS Export – Export the custom generated stylesheet as a raw CSS file.

Conclusion

Design Palette Pro is not a replacement for a custom design. It is not a page builder, and it will not create a new layout. However, it is a great tool for taking an existing theme and customizing it to your own liking. Want to give it a try? No problem. The fine folks at Design Palette Pro have created a demo for you to try out – so go! Take it for a spin, and then come back and let us know what you think!