UI improvements suggestions

[hunvreus]

A few things we should redesign:

1. Left panel navigation
2. Menu items for "Sitemap" (see below) and then one for each collection (e.g. "Pages", "Posts", "Products"...). Finally one for "Settings". We may extend later with "Data" and "Includes".
3. Bottom item for account (has menu to log out).
4. "Sitemap" lists the content on a tree. We can do that if we index the url along with the content and order it in a path tree (e.g. blog/my-blog-post is under blog, about/news/my-new-news is under about/news which is under about). This requires to read the _config.yml to define the rule to generate the URL for each content entry. This would have the added benefit of allowing us to show the preview link.

Make the live site editable;

1. When viewing the site, you can hover blocks that are editable.
2. When hovering an editable block, it is highlighted (color border) and shows an "Edit" link in one of the corners.
3. User can clik the "Edit" link and is sent to the CMS to edit the content.
4. Once saved, the user is sent back to the website.

Additionally, we could have a menu link always visible in one of the corners, allowing the user to access the CMS, add content, view build status...

This should be all possible with two steps;

• Add an attribute in the template for elements we want to make editable (e.g. <div jekyllpro='_posts/2018-09-32-my-blog-post.md'>) and have a one line <script> that points at a simple JS file that adds the hover behavior for elements that have the right attribute.

[wwayne]

Grabbing. Gonna discuss with @xueyuanren to improve CMS UI/UX first

[xueyuanren]

@hunvreus @wwayne Here is what I have for now. Not sure about the logo on the top left corner, do we user client's logo or Jekyllpro? I've added some icons to the menu as examples. For the form elements, I am not sure how many kinds of components we gonna have. For now, I asked zihui to help to provide the screenshots for some information.

Just got some urgent tasks from sam's, so need to work on that first. Please let me know your comments and I'll finalize the design and the "content type" page later on.

cc @stephanedelgado @ShuziC

[stephanedelgado]

Here's the first round of graphic elements/logos.

• From where I stand, Jekyll(Plus) and Jekyll(Pro) is the best way to name and differentiate the two offers; the two names sound and look good in an effortless way.

• UIUX weights heavy in selling point

• I see the landing page carrying a mix of attached graphic elements/logos, together with extracts from the interface

Any comments welcome

[hunvreus]

Counter proposal for the logo:

Trying to combine J, the + and somehow remind the shape of a test tube (logo from Jekyll).

Personally, I like 1.

For the font, I'd take a geometric font;

• Futura
• Harmonia Sans
• Neuzeit
• Poppins

These are just suggestions.

[stephanedelgado]

Looks very good!

UNIQLO has a line designed by Jil Sander called +J

would this be a problem?

Also if J+ has a logomark, will we need one too for JPlus and should they be related? My approach was to think of a design that would work as a "family" but maybe it's not needed

[hunvreus]

Dunno, maybe we can use a similar logotype with something else instead of the plus. For example (for JekyllPro):

[hunvreus]

Maybe something like that:

[stephanedelgado]

Brand name is Jekyllplus, the core branding includes:

1. A simple and straightforward logo mark: The “plus” translates into the mathematical symbols “+”

2. A "J+" symbol which appears only in the UI in the form of an animated widget