CKEditor 4 Skin Contest Winner!

New CKEditor 4 Skin

We are happy to officially announce the winner of our CKEditor 4 Skin Contest:

Winner:

Moono: Rafal Bromirski

Congratulations to Rafal Bromirski! His design has been selected as the default CKEditor 4 skin and Rafal wins $1000 in prize money!

Runners-up:

Ozone: Simon Sturmer


Congratulations also go to runner-up, Simon Sturmer, for his great looking skin, Ozone, and Aleksander Nowodziński for a solid entry with Silver. We also want to thank all entrants for making so many cool skins! The community will definitely benefit from your work, so don’t hesitate to share your skins.

CKEditor’s New Look

We wanted a professional but neutral toolbar to accommodate the widest range of websites. Of all the entries Moono, Ozone and Silver best offered what we were looking for: a professional, simple, clean skin that didn’t detract from the editing experience. We didn’t set out looking for a monochrome look but the best entries were monochromatic. Of the three, Moono stood out the most.

So here is it, the new CKEditor 4 skin, Moono:

In case you haven’t noticed, the final Moono is a bit different from the initial entry. Rafal complied with our wishes by giving us a lighter variation of his original dark skin, which is as good as the original.

Why Moono?

Making the final decision was tough but Moono barely beat Ozone for the ultimate prize (things will never be the same between the judges). As you can see above, what gave Moono the edge was the professional, clean, spacious look. When testing the entries on live pages it became clear that inline editing needed a slim toolbar to be out of the way. Skins with encumbered toolbars pulled the inline editing experience down. Moono’s smaller icons make the editing process more discreet.

Another plus was the original dark skin, which turned out to be a blessing in disguise. Even though the initial skin was good enough to represent our new default look, the inclusion a lighter design now gives the community two official versions of Moono made Rafal Bromirski! Of course, only one was chosen as the “default” skin and it was the light one.

Finally, of all the entries Moono got the biggest support from the community. You all made our tough decision that much easier in the end, so thank you all for making your voices heard!

What’s Next?

In the next few weeks we will be making a few more modifications to the skin before implementing it to the final release of CKEditor 4. Don’t expect an overhaul; it’s going to be the same skin but with a few changes.

Again, we want to thank everybody for participating. Making the final decision was not easy, not with so many good entries, so your feedback helped. You all did a great job and we are thankful to have such an active community!

We hope you like the new skin!

Enter the discussion and post your comment

Post a comment
  1. The content of this field is kept private and will not be shown publicly.
  1. frozeman's picture

    frozeman

    Reply

    good choice!

    i like the icons of ozone better, they are much easier to understand, keeping in mind that my clients have to grasp their meaning fast.

     

    maybe you should exchange some..

    • Yes, we'll keep that in mind. That was one of our concerns and why Ozone had such a strong chance to win. But since Moono's icons are custom we are planning on changing a few of them. If you feel some of them aren't clear, let us know. Now is the time before we release CKEditor 4!

      • frozeman's picture

        frozeman

        Reply

        the following icons are hard to grasp and i would change them with the ozone ones.

         

        source, template, link (to cryptic), font color,

        the show blocks icons is hard to understand on both.

         

        this is what i can see for now.

        another thing is the sorting of the icons. i for my cms choose a different one. i posted in you feindura timeline a pic of the one i use.

         

        fabian

         

        • Please add some colors =(

          • I'm getting the feeling people are being influenced by the header pic with the colorful crayons. ;-) I agree, it looks great with all those cool colors. But let's not forget that website owners want an editor that can blend with their pages, and most sites have a main theme color, so adding nice colors will make it hard to please everyone.

      • bernesto's picture

        bernesto

        Reply

        I really like the moono theme as it is. I'd like to see both included. I however do agree that the font color and highlight icons need something.

  2. Anonymous's picture

    Anonymous

    Reply

    I like the general look of the icons and skin, but hope you'll introduce some colour.

    From a usability point of view, it's much more difficult to quickly scan an interface and identify the right icon without any colour. I'm not sure why quite a few "modern" interfaces are using monochrome buttons (Gmail, the new Outlook, this skin).

  3. Zouzou's picture

    Zouzou

    Reply

    And here we go again.

    After the blunders of previous monochromatic designs in programs like Thunderbird (<https://bugzilla.mozilla.org/show_bug.cgi?id=668336> among many others) or Visual Studio (<https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/2623017-add-some-color-to-visual-studio-11>, <https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/3086061-bring-back-the-visual-in-visual-studio>, <http://blogs.msdn.com/b/visualstudio/archive/2012/05/08/visual-studio-11-user-interface-updates-coming-in-rc.aspx>), one would have thought so-called "GUI designers" - or more recently nonsensically self-proclaimed "UX experts" - would have learned their lesson and stopped propagating the provably flawed idea that removing colors somehow achieves anything aside from making the product look ugly and harder to use.

    This new look imposes more strain on the eyes. Eyes and the brain are used to recognize not only shapes, but colors as well. Now they have only shapes to work with, so the process is slower and more difficult.
    The assertion that colors distract from the document is flawed too, for brains simply can't multitask.

    Sorry for the rant but I just can't stand these idiotic gray interfaces.

    • Anonymous's picture

      Anonymous

      Reply

      and there we go again.

      ranting against change because change is bad. Don't forget to post links to other people who have the same aversion against something, otherwise your rant might miss some sort of validation. Don't worry, it still doesn't.

      You don't like the (lack of) colors. Too bad CKEditor doesn't make use of various ways to change colors and look and feel. Oh wait, it DOES.

      • Zouzou's picture

        Zouzou

        Reply

        "ranting against change because change is bad" > Absolutely not; do not forget I am a developer too, and therefore a proponent of changes in my field. I have encountered aversion to changes and the need to justify myself a countless times.

        But this particular trend is obnoxious because it's only change for the sake of change. The only real advantage in usability it is supposed to bring is "avoiding distraction from the main document", but I have dismissed that. On top of that, it has a severe disadvantage: harder to spot a particular icon right away. Not to mention that making everything gray is simply ugly.

        "Don't forget to post links to other people who have the same aversion against something" > The reason I did was just to show how this is a general trend, and the many people who are put off by it. In the particular case of Visual Studio, the team has been receiving an unbelieavably high amount of comments on this issue and is still receiving them every day from new people (I'm subsribed to their comments). The reason people post about it is because they just can't grasp how usability as well as look&feel are being sacrificed for no particularly valid reason other than a flawed notion of "professionalism".
        Oh, and if you have a look at the last link I've posted about Visual Studio, they actually admitted they had to add color, so they started adding some. Not much, but they had to concede the point.

        "Too bad CKEditor doesn't make use of various ways to change colors and look and feel. Oh wait, it DOES." > Yeah? Of course I know I can change it, and I will definitely change the default look when I migrate to CKEditor 4. That's absolutely not the point here. The point is that it doesn't make sense to design an ugly & unusable gray interface, and it makes even less sense to select it as a contest winner.

        • Anonymous's picture

          Anonymous

          Reply

          I'm with you, Zouzou.  I have yet to see any kind of real justification for monochrome icons; they're just so trendy now that so many UI guys take it as gospel that they're good.

          There's a big difference between what looks nice (e.g., "ooh, all the icons use the same color scheme!") and what actually makes sense from a computer-human interaction standpoint.  My guess is the people who make monochrome icon sets are entirely of the Photoshop-loving hipster bent and not the "Let me cite studies demonstrating lower cognitive load" variety.

          • I also agree with Zouzou and anon above. Is there some sort of trend going on in the Mac world or something that might explain this bizarre desire for a bland grey colourless world?

            I genuinely thought there was something wrong with the screenshot, my Firefox or my monitor when this skin image first scrolled into view.

            On the bright side, it did get me to recalibrate the colours on one of my monitors, so thanks for that - but no thanks for this skin.

  4. When do we get these new themes and skin chooser into nightly-v4.ckeditor.com?

    • We have to make a few modifications to the skin first. It's not 100% ready. As some have mentioned, it needs a bit of color, even if only to give users a point of reference when glancing at the editor. We haven't even determined who will make those changes, so be patient.

  5. While the icons looks nice IT really needs colors !!! 
    a gray layout makes it very hard to blend with custom plugins icons... that we are already using !

    please add LOTs of colors !!

     

    • There will always be other skins available, other than the one we're choosen as the default. The CKEditor 3 Kama skin will still be there and there will be several other skins available, so you'll definitely have a choice.

    • Anonymous's picture

      Anonymous

      Reply

      What the problem to convert your icons to grayscale?

  6. In response to the people yearning for more color, I plan to release a variant of Ozone with full-color icons from the beautiful Fugue Icon Set which is licenced under "Creative Commons Attribution 3.0 License".

    I plan to continue to maintain the Ozone skin, starting with IE support and then offering a choice of monochrome or color icon set (ideally set in the config).

    Keep an eye on http://github.com/sstur/ckeditor-ui for updates, and feel free to open issues or make pull requests.

    Thanks,
    Simon
    http://sstur.github.com

  7. We've heavily customized the editor ourselves using fugue icons. You can see what our custom toolbar looks like here.

  8. Look great!

    Llike very much.

    Thank you all the Dev. team.

  9. Richard's picture

    Richard

    Reply

    One immediately obvious problem, at least in Firefox, is that the font drop-down is too narrow. It's only just wide enough to fit the default "Font" text; once you select a different font, you get the first two or three letters of the font name followed by "...".

    Looking at the demo, the fonts are displayed as:

    • "Arial";
    • "Co...";
    • "Co...";
    • "Ge...";
    • "Lu...";
    • "Ta...";
    • "Ti...";
    • "Tre...";
    • "Ver...";
  10. MacMladen's picture

    MacMladen

    Reply

     

    This discussion is really totally silly.

    I would never want to kiss or be with blonde girl, however most of people would. And that is what the choice is all about.

    You can have Miss of the world being blonde but my favourite would be red hair Nicole Kidman at any time.

    That means, let the CKeditor developer choose what ever they find most appealing to their taste. They do let you to choose the skin? So choose the one you like!!! It is that easy.

    What I would like to see is many skins available for both 3.x and 4.x that we can easily choose from (page with name, screenshot, download link, some explanation and home page link with maybe source files like PSD or PNG). And then if you have something to say, do it directly to author so he/she could change, improve or fork and do it yourself. That is what open source / github is all about.

    I'd like to se friendlier, more powerful yet smaller in footprint, standard compliant, easy to configure and extend rich text editor with nice, unobtrusive skin that is both pleasing to see and yet blends with site and is easy to customize.

    Thanks for all submissions and for CKsource people: let all contestant skins be available and track which one is downloaded the most, that could give you some idea what the crowd really say.

    The real winner is all of us anyway. Thank you!

    • We are working on pretty much eveything you mentioned. :) As for better page integration, check our current nightly build of v4. It shows how color is also added to the icons. We picked that particular skin because it's neutral. It least likely to bother people who don't wanto to personalize the editor.

  11. Anonymous's picture

    Anonymous

    Reply

    This is one of the great themes

  12. _King_'s picture

    _King_

    Reply

    TextColor and backgroundColor options are not available in IE10 !

  13. yea! I like the general look of the icons and skin, but hope you'll introduce some colour.

    thank post

  14. Finally! Colors are gone! Thanks a lot!

    While the CKeditors colors collided with nearly every website I've build over the years (And how couldn't it? There is no color-that-fits-to-every-other-color), now we are back to gray. Always working, always good looking gray. ++!

  15. Great icons and toolbars I like the mono version more!