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 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.
Spacing of elements—We can see there are certain inconsistencies with the spacing of the elements. Cleaning this up would help a lot.
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.
Buttons—button variations that change visual style.
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.
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.
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).
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.
Clear visual hierarchy—the menu area is visually separated than the content area. There’s a different background area and colour of the links.
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.
Spacing elements—the consistent use of spacing among elements and inside elements.
Icons—a different design that matches font weight and stroke of the elements on the page. The colour of the icons matches the font.
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.
You can take a look at all page layouts here.
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!