Default theme

[oleq]

Note: This is an umbrella issue, a heart of discussion around themes in CKE5. The aim is to avoid fragmentation and confusion about the mockups.

The architecture of themes is discussed in a separate issue.

Overview

CKEditor 5 needs a new, default theme.

1. It must keep up with design trends.
2. It must meet accessibility standards and requirements.
3. It must reflect the flexibility, modularity and extensibility of the editor.
4. It should be easy to integrate with web pages and applications, both visually and technically.

Problems to consider

• Contrast
• Rounded corners
• Color palette
• Icons
  • Colors
  • Types

---

Mockups

These mockups follow the Implementations document. This is the first attempt to take the ongoing UX discussion to the next level, an entry point to further discussion.

Classic interface

Tabbed interface

Menu

Dialogs

Inline editing

Fullpage

[Reinmar]

What are the questions that we want to answer here? I mean – are we meant to discuss (spacing, colors, etc.) the designs already or sth else still?

[oleq]

@Reinmar See "Related issues" "The problems to consider" section.

[Reinmar]

OK, changing the title to "The problems to consider" makes this clear.

[oleq]

Yes, you were right. Also note that this is the beginning – there will be more problems in the future.

[koleary]

Overall very nice.

Tabs could be even simpler, perhaps just heavy over or underline.

Dark title bar need not be so dark if tabs have no background. The lighter color can be the top bar background. It looks a bit heavy now.

My personal preference is larger and lighter weight for titles.

[georgephillips]

This looks like a big improvement. Have you considered moving the labels above the form fields. This would improve the usability and provide more space for UI elements.

• StackExchange discussion on the topic http://ux.stackexchange.com/questions/44095/which-is-more-usable-labels-above-form-elements-or-to-the-right
• UX argument for above labels http://uxmovement.com/forms/faster-with-top-aligned-labels/
• Material design on labels https://www.google.com/design/spec/components/text-fields.html#text-fields-labels

Keep up the good work

[FinalAngel]

The tabbed interface looks great 👍

For the dialogs consider to use more wide space for the form elements, the more you see the better as @georgephillips also points out.

[oleq]

@georgephillips Good point, thanks!

[Reinmar]

I've been just reviewing the dropdown component and found the dropdown styling very confusing. It's so white in relation to totally unmarked buttons that they look like active all the time. I think that the styling should be very similar, if not identical.

See ckeditor/ckeditor5-theme-lark#12 (comment)

[oleq]

I don't think so, @Reinmar. It was a conscious design decision. Take a look on the interface of popular text processors like LibreOffice Writer or MS Word 2016. It's a common practice that dropdowns and other complex controls in the toolbar are slightly different than the rest of the interface.

[Reinmar]

Hm.. you're right. But:

• I'm not sure whether this is necessary in case of a few buttons.
• I think that you can type in those dropdowns in LO Writer and MS Word, so their white bg may be indicating that they are input fields. Different story. And this may even make our dropdown buttons more confusing.

But most importantly, it just looks odd when you have just couple of buttons. The below screenshot is of course an extreme situation when you have exactly three items and each of them is different. But we should take such case into consideration.

(of course margins are missing and the dropdown button is too big due to the border, but this is a different story)

[Reinmar]

BTW when I look at designs like this https://twitter.com/steipete/status/735377624265072641 I start to think that perhaps we should adopt a single convention and follow it closely. I think that perhaps we've been trying to be too innovative. For many aspects that makes sense, and the UX in some sense will be one of them, but design not necessarily.

[luzfcb]

sorry if this is the wrong place to ask:

since html has no implements a concept of physical page (A4 paper), ckeditor 5 will provide anything that helps to implement the editor with concept of physical page, like google docs, ms office online do?

[Reinmar]

Thanks for asking. That's a topic for a separate ticket: #147

[Reinmar]

Cleaning up old discussions. See #186.