Improve The Overall UX

Problem

The UI lacks the polish and UX necessary to give developers more confidence that Netlify CMS is the right CMS for their project and is as robust as other similar CMS’s.

Motivation

In the time I have used Netlify CMS for my projects, I have identified several key areas the UI needs attention. If I am going to invest my time and future projects in this CMS, I’d like to share some of these areas of improvement.

Solution

From an outsiders perspective I have created a few mockups showing what I believe the Netlify CMS UI should look like in order to give users a much better experience. They highlight the following improvements

• Use of space
• Navigation
• Contextual awareness
• Icons
• Typography

Invision Prototype https://invis.io/3ATIRBHKW9F#/380522637_Login_-_Custom_Logo

You’ll see in these mockups that I’ve organized the navigation and combined it with collections moving the search bar at the top in the toolbar. We are now including additional columns which we would easily be configurable in config.yml. I also provided useful links in the navigation that pertain to the website you are working on. This makes it much easier to get around if need be. I’ve added icons to each collection that can be configurable as well. I am utilizing the full width of the viewport contrary to the pixel limit that we enforce in our layout today.

Moving on to the editor view, I also am taking full advantage of the browser width, fixing the editor to the left. I am conserving vertical space by keeping the inputs concise yet easily readable. In the toolbar I have included a language toggle so that we are better able to support translations in our websites content creation process.

You will also notice that I included the following additions which I am happy to create individual issues for these if need be

• Multi-language support
• Column configuration for each collection
• Edit config.yml right in Netlify CMS via Settings tab (we can already make markdown changes, why not config.yml as well?
• Specific site settings configurable in config.yml such as navigation, footer, social, etc that do not belong in it’s own collection
• Breaking Media out of a dialog when browsing from main UI (not from a image or file widget)

Otherwise, we are keeping much the same. I just cleaned up the layout to support a cleaner, more intentional aesthetic that focuses on content.

I will update this issue as I create more screens. I figured I could at least get a dialog going to see if we might be able to make a concept like this a reality. Feedback is certainly welcome.

Edit I have created a sandbox to illustrate this in action… https://codesandbox.io/embed/netlify-cms-editor-design-j1cg3

[austincondiff]

As I’ve worked on this design, I’ve realized that my initial mocks of the collection view do not consider some features that Netlify CMS currently offers. I have made several modifications to accommodate these features. I’d love to get some feedback.

And here are some mobile designs…

[austincondiff]

Just a quick update, here are my latest designs that align a bit closer with the mobile screens above.

My plan moving forward is to update our stories in storybook to reflect these design changes. Then I plan on replacing the existing components in the current UI with these newer components.

I’d really appreciate any help I can get. Currently I am the only one working on this design effort. Let me know if anyone is interested in contributing. Thanks!