dfeyer commented

(Migrated from github.com)

Copy link

As posted on riot this afternoon I start working on some design research around the UI.

Goals

Add a bit more personality
Solve low contrast issues (accessibility)
Improve the relation between form element and button
Respect the current slim and calm design
Respect the current color palette

Link to the figma project

The Figma design use the Noto font, because the font used by Plume are not support in Figma. My research are not around the font, and the current fonts are good.

You can follow my journey here:
https://www.figma.com/file/CZ6IxnQgYGhy5H4WYr1lA6VK/UI?node-id=0%3A1

Changes

More graphical page header (the idea is to have the image on full screen, over the fold)
Move "like & share" widget before the author area (it's related to the content, not the author)
Redesign a bit the page footer
Try to be a bit more casual in the "like & share" widget
Redesign the commenting form (improve difference between input & button)
Small redesign of the tag list
Create a editor toolbar to make action like editing, deleting visible at a central place, without ambiguities)
Works on the responsive version

Nice to have

Night mode (see https://github.com/Plume-org/Plume/issues/403)

You can comments here, or directly on Figma

Hope that this little refresh make readers happy.

How to apply this change to the project

This is a work in progress to see how we can progressively introduce the changes by splitting the change in small (as possible) iteration. In bold change that will affect all the project, other changes affect only the post detail page currently.

Update the page header (logo, navigation)
Update the page footer (link to riot, github, instance details...)
Form input & button styling (consistent in all forms)
Introduce the editor palette (only on post detail page)
Style the content of the post (headline, image, typography)
Author resume (post footer)
Like & Share widget
Comment form
Comments feed

After all those iterations, Plume will feel a bit refreshed but also a bit inconsistent too. I will try to make an inventory of the other pages, and see how much works are needed to polish everything.

As posted on riot this afternoon I start working on some design research around the UI. # Goals - Add a bit more personality - Solve low contrast issues (accessibility) - Improve the relation between form element and button - Respect the current slim and calm design - Respect the current color palette # Link to the figma project The Figma design use the Noto font, because the font used by Plume are not support in Figma. My research are not around the font, and the current fonts are good. You can follow my journey here: https://www.figma.com/file/CZ6IxnQgYGhy5H4WYr1lA6VK/UI?node-id=0%3A1 # Changes - [x] More graphical page header (the idea is to have the image on full screen, over the fold) - [x] Move "like & share" widget before the author area (it's related to the content, not the author) - [x] Redesign a bit the page footer - [x] Try to be a bit more casual in the "like & share" widget - [x] Redesign the commenting form (improve difference between input & button) - [x] Small redesign of the tag list - [x] Create a editor toolbar to make action like editing, deleting visible at a central place, without ambiguities) - [ ] Works on the responsive version # Nice to have - [ ] Night mode (see https://github.com/Plume-org/Plume/issues/403) You can comments here, or directly on Figma Hope that this little refresh make readers happy. # How to apply this change to the project This is a work in progress to see how we can progressively introduce the changes by splitting the change in small (as possible) iteration. In bold change that will affect all the project, other changes affect only the post detail page currently. - [ ] **Update the page header** (logo, navigation) - [x] **Update the page footer** (link to riot, github, instance details...) - [x] **Form input & button styling** (consistent in all forms) - [ ] Introduce the editor palette (only on post detail page) - [ ] Style the content of the post (headline, image, typography) - [ ] Author resume (post footer) - [ ] Like & Share widget - [ ] Comment form - [ ] Comments feed After all those iterations, Plume will feel a bit refreshed but also a bit inconsistent too. I will try to make an inventory of the other pages, and see how much works are needed to polish everything.

👍 2 ❤️ 2 🎉 1

Granitosaurus commented

2019-03-22 05:39:14 +00:00

(Migrated from github.com)

Copy link

I'm not sure if this the right issue to address this but I'd also like to address the design of comments part of the page.

It's not very structured and has too much white space as result it's pretty hard to follow and read.
e.g. just disabling some margins already make a world of difference imo:

I'm not sure if this the right issue to address this but I'd also like to address the design of comments part of the page. It's not very structured and has too much white space as result it's pretty hard to follow and read. e.g. just disabling some margins already make a world of difference imo: ![no margin](https://i.imgur.com/viQlHtx.png)

👍 1

ahangarha commented

2019-11-11 11:24:59 +00:00

(Migrated from github.com)

Copy link

Header and footer and also so-called modern editor are not following responsive design. Should I file a new issue for it or it can be here?