Color Schemes Contest

Uncategorized

I’m very interested in seeing some alternative color schemes for the WordPress admin, so I thought I’d sponsor a mini-contest here. You don’t have to be a WordPress user or even have it installed to participate. The colors don’t have to match the logo or anything like that, I’m just interested in seeing easy-on-the-eyes color schemes people would enjoy looking at. For people who aren’t running a nightly build or not running WP at all I’ve put up two screenshots that you can use to get an idea of where the colors will go. You don’t have to be a designer to play, just play around with the colors in those images until you find some that you like and then post the results. Winners (I’ll probably pick a couple) will get prominent mention on this site and wordpress.org, a free unlimited-user copy of WordPress, and a small monetary prize via Paypal. So fame and fortune, what more could you ask for?

So to recap the important bits:

What?
Playing with interesting color variations for the WordPress admin sections.
Materials?
Screenshot one, screenshot two, and a HTML dummy page.
How do I enter?
Leave a comment with some way to represent your color scheme, whether it is a screenshot, CSS code, linked post, hex values, whatever you’re comfortable with. You can enter as many times as you want and win multiple times. If you don’t have time to enter, link to this entry and let other people know about it.
Any guidelines?
Be creative! Don’t modify the layout, just the colors.
Deadline?
Friday night, my time. This is a low-impact project, all you need is a color picker and about ten minutes. Submit your entry as soon as possible so no uses your colors before you do. Enter as many times as you want.
Prizes?
Fame, fortune, and that warm fuzzy feeling you get from contributing to open source and having your work in front of thousands of people.

When all is said and done I’ll roll this into a plugin or something so people can enjoy it. You don’t have to be a designer to enter, just put together something you like.

Update: There are a few clarifications and tips in the comments, so you might want to look over those. The big news, however, is that Aaron Epstein has donated a copy of his excellent Color Schemer Studio product to be awarded to the top winner. Downloading a 15-day trial would be a great way to put together a great entry and get a taste of what you might win.

This hasn’t been forgotten, I’m just can’t write the plugin for the winners until 1.3 is finished. Thanks for your patience.

107 thoughts on “Color Schemes Contest”

  7. Ah, thanks Randy. For the entry to be valid you have to specify where the colors go. So if you want ot post hex values say #fb2 for header and #fea for background, etc. Just the hex values without context don’t help much. Basically the entry has to be something I can turn CSS, so I need to know what colors go where. Sorry if that wasn’t clear.

    Reply

  12. I just wanted to poke my head in and say, your sample entry, Matt, is absolutely beautiful.
    A very minor tweak, but it looks oh so good.
    I nominate it, pay yourself XD.

    Reply
  16. Pingback: seriocomic :. rhetoric

  19. Hi there,

    Here’s a colour scheme I have been using myself for a little while now.

    Maybe others will like it. I find when I am writing posts etc I need to ‘turn the lights down’ so to speak and I find these colours to be less confronting.

    Not sure of the best way to show the css so I have placed it here at http://www.os42.com/wp-admin.css so you can grab it and have a look. It’s the one from Mingus 1.2 and has no changes other than colours.

    Hope it works.

    Reply

  25. I like the grayscale look of the interface to tell you the truth. If you do plan to change the style for the admin interface please do keep an option to roll-back to the grayscale scheme 🙂 One thing I would like to see changed is the default WP template. Its dull and unattractive.

    BTW, just looking at the users admin page (for 1.3), can u please change those user level +/- links to a dropdown list. Its more usable!

    Reply

  30. Places to look for color inspiration:

    1. Fashion
    2. Great photographs
    3. Outside
    4. At websites you admire
    5. Paintings
    6. Magazines — everything from Wired to Home & Garden
    7. Flowers
    8. Skin tones
    9. Butterflies
    10. Book covers
    Reply

  32. I realize this isn’t about the layout, but since you’re discussing the admin page I thought I’d ask. One of the reasons I’m still waiting to switch to WordPress is that in Opera the elements are stacked on top of one another. Is anyone working on a fix for that? Or better yet, does someone know how to fix that? I’ve tried and failed miserably.

    Reply

  34. Whee… just for gits and shiggles, I added a “color switcher” to various parts of the page. Now you can mix and match a whole array of colors just by clicking on any of the colored X’s to change the background color of the div it’s in. Click on the O at the end to make it transparent. (I wrote this javascript to help my company’s marketing department choose the colors they like)

    http://yankovic.org/happy/photomatt/

    Reply

  35. Just a couple of questions:

    How strict are you on the “no layout changes”? I’m asking because the images in the footer just don’t look good on dark backgrounds.

    And what should we do with colors for pages we can’t see in the dummy page? Should we just leave them alone and then fix them later if our entries are selected?

    Reply

  48. I couldn’t think of a witty title. It’s definitely inspired by my emotional state over the Ricky Williams retirement fiasco though.

    Reply
  54. Pingback: stuff/things

  55. Re Comment#41 – from Matt Warren…

    How do we compete? We all know Matt (Mr Mullenweg) is partial to his first name, so to have someone with the same first name submit a layout mimicing his (Mullenweg’s) own site…

    Classic…lol

    Reply

  56. IMO, I really think simplifying things is the main key here. I would also match up the representing colors of the WP logo with the interface to tie in the relation (yet keep the majority pretty neutral so there can be an easy color change like in the header to reflect what the person likes). Lets face it, there will be endless color possibilities and everyone will like something or another since everyone’s tastes are different (search color theory). So, I think the WP logo colors/branding would be the most important just for “brand” identity.

    Here’s what I did:
    Example1 (blue)
    Example2 (brown)
    My concentration was on keeping the main parts neutral, cleaning up the page visually (removed unneeded block elements, increased things like “Title” and “Post” to help focus them, etc), and allowed “white space” for a clean design.

    Reply

  59. header bg: #71828C
    the links bar going sideways underneath the header: #E9E4E4
    hover for a link: #CAE1F6
    post section bg: #CEDAE1
    content bg: #fff

    Reply

  65. Aye, I just noticed the “no changes to the layout” rule. *slaps forehead* Just curious, Matt, do I qualify? I know you said not to change the layout, but I only changed the css, no changes to the xhtml was made. Either way, I still had fun doing it.

    Reply

  68. This is a pretty heavy modification, but I like it. I changed some things other than just color values, but the only tomfoolery was with the CSS, which is still basically the same. The layout, or at least the XHTML portion of it, is still intact.

    Matt’s Sharp Sandbox

    (It looks much better in a Mozilla client. Sorry, I couldn’t resist using the border radii. It still looks good in other clients, though.)

    Reply

  77. Ohhh, this is educational! I really liked Matt Warren’s rounded edges, but prefer my colours. Never heard of -moz-border-radius before. So this can’t count because I cheated and looked at Matt’s entry first. Still, here is Raspberry Milkshake.

    Reply

  78. Forgot to say: Raspberry Milkshake is only palatable in Mozilla et al. (otherwise indistinguishable from plain old Raspberry Milk). Second, maybe it’s not a bad idea to give non-IE users a little extra, without penalising IE users. Maybe there’s a little Opera-specific CSS special, too?

    Reply

  85. I really like Alec’s and Mark’s entries.

    I hope I have time before the contest is over to do my own. Unfortunately, I’m at work right now or I’d do one now. 🙂

    Reply

  95. Okay, you can still submit schemes if you want to but after this comment they won’t be able to qualify for a prize. Thanks to everyone who entered! I’ll be judging over the weekend.

    Reply

  100. Well, you don’t have to wait for the plugin to use the .css files. It will just be easier then. All you have to do is to replace wp-admin.css with the css-file of your choice. 😉

    Reply
  104. Pingback: chrysalidesque

SHARE YOUR THOUGHTS