Subscribe to our monthly dose of design. No spamming, we promise.

Back to agilo.co

White space is to be regarded as an active element, not a passive background.—Jan Tschichold

Schiele in Vienna—The Form of a Signature

Array of: Dublin

Type+Vienna, Serving #2

Type+Vienna, Serving #1

Array of: Amsterdam

Time to Give The WordPress Dashboard a Welcome Facelift

Posted by | on

WordPress is a powerful tool we use on a daily basis. However, the WordPress dashboard certainly lacks in terms of a powerful visual presence. Since it has certain limitations we thought it would be creative, fun and practical to try and give it a new lease of life —a facelift to give this tool its much needed visual attributes.

The Dashboard

The WordPress dashboard is almost entirely text information where functionality is the number one priority. This means it requires special care when being shaped so that it can be processed as efficiently and as fast as possible.

There are basic rules we have in mind when designing. Keeping things clean and as simple as possible. Remember simple doesn’t always mean easy. In fact, it can be pretty hard peeling of the complexity. It should be consistent. Consistency really is the key. Using the same components, text sizes etc. reduces the amount of times the user has to rethink. Also shaping text well. If you do a good job styling your text, you don’t need to add much more of any other material.

Taking a look at the current WordPress Dashboard

The current layout of the WordPress dashboard works correctly, it’s pretty basic and neutral, without any greater significant visual presence. The structure is stable and it’ll get the job done. However, there’s always room for improvement.

Type—how type is being handled here is of the greatest importance. Font choice, sizes, spacing, leading, styles, paragraph length etc. seem pretty unpolished.

Dashboard uses 6 different font sizes

Dashboard uses 6 different font sizes

Different shades of gray are used for text (this is redundant since changing text size will increase/decrease text visibility) and multiple link colors

Different shades of gray are used for text (this is redundant since changing text size will increase/decrease text visibility) and multiple link colors

Spacing of elements—We can see there are certain inconsistencies with the spacing of the elements. Cleaning this up would help a lot.

Example of variety among spacing sizes. Blue is for different spacing between elements and green for spacing inside element.

Example of variety among spacing sizes. Blue is for different spacing between elements and green for spacing inside element.

Visual hierarchy with colour—There are a lot of grey areas. Using hues to differentiate elements is not such a great solution. As there are a lot of elements on the page, we should try to build a different visual hierarchy. We think that the visual separation between menu and content area is good like it is because it adds to the functionality. This is something we’ll keep.

Many grey shades of WordPress

Many grey shades of WordPress

Buttons—button variations that change visual style.

Different buttons used in the Dashboard

Too crowded—it feels like design needs more generous whitespace. Having everything spaced so tightly makes processing information harder and slower. Here are some examples of the effect of adding more space.

Adding more space between the lines of the text makes content more breathable

Adding more space between the lines of the text makes content more breathable

Whitespace fixes

The effect of being more generous with spacing between elements

What exactly have we done?

Grid based design—all elements fall into a grid system. This really makes design consistent and solid on all screen sizes.

Grid Based WordPress Dashboard

Grid Based WordPress Dashboard

Font—we’ve chosen a free Google font called Martel which comes both in sans and serif. This way we had another level of differentiation for information architecture. We used serif only where text can be added and/or edited and sans on all other WP Dashboard functionalities. To increase text visibility we used a bigger size or bold/italic and to decrease visibility we used a smaller size, a lighter weight or a lighter shade of grey. We didn’t go for something small and lighter or with too much contrast, but then again it fully depends on the font choice. However, we decided on these sizes and styles and used them consistently (3 max).

Using different styles

Shaping text—the paragraph length is much shorter now (about 60-70 characters per line). The sizes are proportionally related. More leading is added and more whitespace around the text to make design more breathable and far easier on the eyes.

Paragraph style

Paragraph style

Clear visual hierarchy—the menu area is visually separated than the content area. There’s a different background area and colour of the links.

visual hierarchy

Use of colour—we decided not to use shades of grey as a visual separator for the content area but rather focus on the text and element arrangement. Shades of grey tend to make the design seem dull. We wanted a clearer and more refreshing solution.

Element sizes—the same for the same category which constructs information architecture. That way we can decide what to bring to focus and how to separate elements. For example, we have 2 button sizes (different height) and 3 button styles based on priority / focus importance.

button styles

Spacing elements—the consistent use of spacing among elements and inside elements.

spacings

Icons—a different design that matches font weight and stroke of the elements on the page. The colour of the icons matches the font.

New WordPress DashIcons

New WordPress DashIcons

Let it breathe—add more whitespace. By adding more pixels between elements and more generous margins along with reshaping text, we gained a more breathable layout.

Breathable Design

You can take a look at all page layouts here.

1_1_Wpdash_Dash

WordPress Dashboard Layout

1_2_Wp_Posts

All posts page layout

1_3_Wp_Add

Add new page layout

And now it’s over to you. We would love to hear what you think of our brand new WordPress dashboard! If you’ve got some creative design ideas of your own—please let us know!

About Zrinka Buljubasic

Zrinka Buljubasic

Zrinka is a type designer working as a Lead designer at Agilo. Type@Cooper 2015 graduate. Has BA in Visual Communication Design and MA in Type Design from Art Academy of Split, Croatia.

Read all posts by .