Determine names for "Write" and "Design" modes

[annezazu]

Similar to improving the discoverability of the write/design modes, we also need to consider the naming of this option and what it'll provoke in terms of the experience. As a reminder and for context, this option is meant to provide a simplified site editing experience by focusing mainly on basic text changes without access to the full suite of design tools, unless one switches into the "Design" mode where all options are available. There are some open questions around whether the ability to add new items should be available in "Write" mode or just "Design" mode but, as it stands at a high level, that is the general split to keep in mind. Design is for accessing the full suite of tools. Write is for focusing on the content, including images, in the site editor.

Let the discussion begin!

[JosVelasco]

I like Content mode and Design mode. Clear and scalable.

[joshxduncan]

I like Content mode and Design mode. Clear and scalable.

I agree with this because "Write mode" ignores the fact that adding/updating images, videos, quizzes, downloads, and other types of content are all valid non-design actions that aren't properly described by the word "write". Whereas, since WordPress is a CMS (content management system), the term Content mode is both accurate and elegant.

Design mode, on the other hand, works because design is widely understood as actions that affect the layout of the page or styling – things that someone desiring to edit content may want to actively avoid. In practice, when these two things are not separated we often get content people accidentally breaking the layouts that design people made while making edits.

[annezazu]

+1 I agree around Content and Design! I think it also moves away from the verb vibe of "design" and "write" while still providing clarity between what each option.

[talldan]

I'd also love to see the icons considered.

The current icon for 'Design' isn't great IMO, I find I often get confused about which mode I'm in:

[jasmussen]

A quick mockup just to share the content/design aspect:

Dan's point about icons is well made. It's worth looking at similar interfaces to see what might be a good fit.

The closest equivalent in Figma, however, still keeps it a sort of cursor:

I.e. the first cursor icon is the "rearrange everything" icon that maps perhaps best to "Design" in this case, whereas the T icon for text would be an equivalent to "content", in that that tool focuses on letting you select editable fields. That doesn't quite capture how you can also swap out images and so on, but it may still be a fit. In that case, T and the cursor may still be a fit. But I'd welcome input!

[JosVelasco]

I think the current pencil icon for Content mode is perfect.

I'd love to see a brush or a color palette for the Design mode.

[joshxduncan]

I also mocked up some options using the open source heroicons with some edits. If you'd like, you can indicate your top pick and runner up, so we can get an idea of general consensus from different perspectives.

Also anyone else feel free to add more options, but it would make sense to continue the numbering + title format so we can all know what we're referencing.

1. Pencil + Layout

2. Pencil + Dynamic Layout

3. Pencil + Swatch

4. Pencil + Brush

[joshxduncan]

Top pick: 2. Pencil + Dynamic Layout

I've updated from the Swatch option to this according to the discussion below and to align with a consensus. I think it clearly communicates design mode well in a way people find intuitive.

Runner up: 1. Pencil + Layout

Rationale: It's self descriptive but there's less focus on design here in terms of art. In the long run, I think the swatch is just more visually appealing, while also getting the point across, whereas this feels a bit more "mechanical". Like many, I am all for a "prettier" WordPress.

[joshxduncan]

Also a note on the content mode icon: I think the "Pencil in box" icon better communicates "content" while also being more modern and visually appealing than the current "Pencil over line" icon.

Pencil in box (rounded/line)

Pencil over line (sharp/solid)

[jasmussen]

I like option 2 of those, and nice work by the way, thanks for contributing. Depending on broader consensus, I'm happy to help redraw the icons in WordPress style.

[joshxduncan]

I like option 2 of those, and nice work by the way, thanks for contributing. Depending on broader consensus, I'm happy to help redraw the icons in WordPress style.

Great, thanks for the response! Redrawing in WP style would be really helpful.

[JosVelasco]

I love option 4, Pencil + Brush, because the brush seems more inviting and fun for adding style and design. The others seem more serious to me.