WordPress Backend Design Study

Good software includes an intuitive and accessible User Interface(UI) with a user-friendly design. I’ve been thinking about the WordPress back-end UI lately and come to the conclusion: this can be done better! So I turned on Photoshop and created a new Dashboard for WordPress.

preview

Prologue

WP Version 1.0 / 2.0 / 3.2
WP Version 1.0 / 2.0 / 3.2

The WordPress back-end has experienced a number of redesigns in the past, and significant ones sometimes. These days, however, redesigning the back-end seems sort of out-fashioned. Why is that?

First and foremost, I think, it is because the current UI has proven itself to be reliable and user-friendly; secondly, it might relate on a dramatically increased number of WordPress users.
A new UI design always challenges users to embrace the unfamiliar. Humans are creatures of habit and for most people accustoming themselves to something new is challenging.

Does the effort pay off?

Getting used to something new can be less pain for when the new actually makes the existing more accessible and intuitive. As users we want to experience the advantage.

WordPress 3.8 will hit the ground in December, changing the design of the backend once more. Awesome! Isn’t it?

I can already hear developers cry: “Waste of time! Let’s rather work on performance and improve core!”. In one way, they may be right. However, I think it is important to refresh a design every 2-3 years and even implement a couple of possibly daring, yet useful innovations.

Prominent examples of a complete UI redesign are Microsoft with Windows 8 and Apple with iOS 7.
Windows and Apple are of course two big examples. In both cases users were surprised, in a shocked or charmed way. There haven’t been any two products from the same segment that have been discussed and analyzed to a comparable degree.

It is exciting to look at that development. Let’s see what the future has to offer.

WordPress a.k.a. 3.8 MP6

WordPress has a working group named “Make WordPress UI” working specifically on the back-end. Their blog is a wonderful place to watch UI development unfold and discuss new contributions.

I’ve been running the prototype of the new design on a test system for a couple of weeks now. With the new design, I can say, my workflows have improved a little. Just a little? Yes, because the new UI is more or less “only” a fine-tuning.

The contrast of the sidebar is a lot higher than before. The sidebar now comes in a dark gray with gray icons and a white font. To me it is lacking harmony a little. The contrast between background and white font is just too much. It should be a little softer and more pleasant for the eye.
In the content area contrasts have also been changed as well as some specific colors and fonts.

All in all I still feel at home in the back-end. What bothers me personally, however, is that the back-end still (or even more) looks kind of frumpy.

WP Version 3.6 / 3.8 / Case study
WP Version 3.6 / 3.8 / Case study

Why frumpy? Margins are way too small for my eye. Writings are partially too gray, too bold and too small. The entire font style just seems old fashioned. Icons look disproportionately large compared to copy. Everything somehow looks locked up and old.

Alternative WordPress back-end UI

The idea of an alternative UI design for WordPress isn’t new, of course. Many dedicated developers have created new designs and made those accessible to the public via a plugin.

Unfortunately, developing your own back-end design and integrating it with WordPress isn’t that easy. The only way is writing a plugin which then even might interfere with WordPress itself or other plugins.

Nevertheless, here are two nice alternative UI designs for WordPress written by other developers: the beautiful Retina Press and the DP Dashboards Plugin.

The implementation of my design

Since I love working with Photoshop, HTML & CSS and know something about responsive web design and mobile user behavior, I thought to myself, let’s make it better!

So I wedged myself behind the computer and rocked Photoshop. After six hours I had something tangible that might have a lot potential to be worked on, given an appropriate amount would be dedicated. At least it should be sufficient as a first prototype.

At first, I looked at the proportions and orientations of individual elements to optimize their alignments without changing the UI significantly. The user should find those elements in their usual place.

After alignment, I went into individual elements and asked myself how they could be designed a little more “modern” and clear. I implemented a few things I’d also love to see in WordPress: a bigger sidebar, more padding for each menu item, a clear font and font-icons.

The content

The dashboard is the least used and yet most needed page in the back-end. Why?

Maybe because we hardly find any relevant elements on that page? I for once would stop by more often in the Dashboard and stay longer if I’d find some well-updated statistics here that would also be visualized in a way pleasing to the eye. Or if Quickpress would allow me to also create new pages or posts in custom post types.

Generally, I’d like to see a certain prioritization in the Dashboard:

  1. Sidebar
  2. Info/event widgets (Quickpress, statistics)
  3. News widgets and warnings
WordPress backend case study
WordPress backend case study

It’s just a raw concept. I hope that I can inspire you with it. Feel free to use it as a source for other exciting projects. I appreciate your feedback!

The future of the WordPress back-end

Watching the steps currently taken by WordPress developers you can already see some evidence that the back-end will more and more move into the background and most of the changes will take place in the front end. I for once am very excited to see more of that!

Bonus

This is how it could look in a mobile version:

WordPress UI case study on mobile devices
WordPress UI case study on mobile devices

Post Sharing

Author Avatar

Nick Jantschke is the artdirector and proprietor of the MarketPress GmbH and Stil-Etage GmbH. He likes to drink Hot chocolate in his spare time, next to fixing bicycles and experiencing everything that has to do with music. Nick is excited and passionated about every Design themed topic.

Also Interesting

woocommerce designs

WooCommerce can be this chic: 11 examples of successful shop design

by Michael Firnkes

Whether playful or minimalist, traditional or more off-beat: There are many options for designing an online shop. We're presenting 11 very special design v ...

Read more

Adventskalender Day 18 – Amazing cool WordPress Wallpapers

by Nick

We live and we love WordPress! WordPress is open-source. It is a give and take, and today we give something back! Is your desk lame? Once again, nothing ...

Read more

Flat statt Platt - An Interview with our theme developers

by Manuel Schmutte

There is a new shop theme in the WordPress ecosystem, and it carries an auspicious name: Hamburg. We spoke with the two theme authors Nick Jantschke and Ca ...

Read more

Comments

18 Comments

  1. #1

    Nick thanks for taking the time to do this post, I love the mockup, it’s bar far the best WP backend design I have seen proposed. Good example of how good design is more than just eye candy. Your proposal provides a clear and quick-to-read action area. Are you turning this into a plugin?

  2. #5

    Thanks for creating this mockup for the WordPress backend, expecially the Dashboard. I do agree with the sizing of some of the elements, and I have found they can be too close together.

    What I really do like, is the tiled layout for the Dashboard. The idea of having 3 columns plus the sidebar navigation, but also the ability to make the widgets span multiple columns like you showed for Quick Stats and Quick Press, with other widgets only being 1 column wide.

    It would be great if someone could mock this up as a plugin like MP6, because I am pretty sure I would be using it over the current design.

  3. #7

    Hi Nick, thanks for taking the time to write this up. Great looking design!
    You wrote:
    “I implemented a few things I’d also love to see in WordPress: a bigger sidebar, more padding for each menu item, a clear font and font-icons.”
    In fact, the new dashboard uses open-sans, and the icons are done with Dashicons, an icon font built specifically for the WP back end by me, Mel Choyce and the rest of the mp6 design team.

  4. #8

    Hi Nick,
    Thanks for creating a beautiful design for WP Admin. I myself is using MP6 for my experimental blog but not very comfortable with it.

    The UI may have improved, but it has a very high contrast ratio which makes it very hard for eyes and creates eye strain. I think MP6 has to be improved further to ship with 3.8.

    Your sidebar is lot more soothing than the WP one. Keep the good work going.

  5. #9

    @Mikkel Breum
    Thank you very much. I currently have few resources at disposal for a plugin. It should provide the time but I will strive 🙂

    @Andrew B
    Thank you! As already mentioned above. I have currently no time. As soon as there is the forth time I’ll try to develop it.

    @Ben Dunkle
    Thank you for taking the time to read my post. I think it’s great that your right and important steps comes to the design needs of today’s match. It is the tip of your uses the open-sans a new design and have also developed their own font icons. However, I would appreciate a little softer contrasts and colors in the backend. If you still are a little more space in the sidebar and the menu options and makes the icons a little smaller it would be perfect 🙂 Good work!

    @ Ejaz
    Thank you!
    I am sure that the team continues mp6 stay tuned and will improve many things. I would also be very happy if they let the community share a little with it.

  6. #10

    Yeah, this design is more useful and more attractive. I do not like too compact arrangement of menu items. With margins it looks much better.

  7. #12

    It looks great. Very clean and great use of negative space. I’ve been testing MP6 and I agree completely with you. I hope they refine it by the time WordPress3.8 will launch.

  8. #13

    I think your design is not bad, at least I like these colours. From my idea if we can remove top bar, that’s better. 🙂

  9. #14

    Yeah, this design is more useful and more attractive.

  10. #16

    I love this design, i think it works really well. Are there any plans on implementing this as an admin theme?

  11. #17

    Status update?

  12. #18

    Hey there!

    Those of you who like the back-end design study, might want to take a look at our new theme Düsseldorf. The theme is based on this study and has been developed for both, blogs and WooCommerce-powered stores

    Check it out! 😉

    https://marketpress.com/product/duesseldorf/

    Thanks!
    Nick

6 pingbacks

  1. WordPress Backend Design Study – An Alternative to MP6? |
  2. Beta Sites Galore | WordPress Backend Design Study – An Alternative to MP6?
  3. WordPress Backend Design Study – An Alternative to MP6? | WPress4.ME
  4. WordPress Backend Design Study – An Alternative to MP6? - Abstract PHP
  5. Weekly Roundup: WPEngine Branding and the State of Podcasting
  6. Every Day A Post of WordPress Tipps and Tricks until Christmas! |

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">