2019 design

[ssddanbrown]

This is a WIP design update targeted for early 2019. It includes some functional aspects of the design as well as just styles.

Design Goals

• Improved design consistency and feature usage throughout application.
• Provide a more modern, less "stock" feel.
• Cleanup of colour-scheme for easier customizability.
• Lessen usage of glaring entity colours.
• Improved mobile usability.
• Increased functionality in core areas for improved app usage efficiency. (Book list sorting, for example)

Early Preview (Comparison)

Old Books List View

New Books List View

[qianmengnet]

This list of books and sorting looks good.

[lucassmacedo]

Nice!

[lostdesign]

The typography needs more contrast and hierarchy but it looks great overall

[Shackelford-Arden]

Personally, I'm a bit fan of the increased usage of the available space. Definitely excited!

[seanosullivanuk]

The early preview looks nice. I look forward to seeing this progress.

[ssddanbrown]

Getting there: https://gfycat.com/acceptablewanarkshell

Have had good progress over these last two weekends. Just a few small bits and an update to the mobile styles now before it's ready to be merged into master.

[Abijeet]

@ssddanbrown - Looks good!

A few things,

1. Padding on the top of the page, between the page heading and the border of the white main section feels a little high.
2. Having the create buttons along with the other buttons that are specific to the page (Edit, Delete etc) we are currently viewing feels a little awkward. Maybe we can add a horizontal divider?
3. On the same menu, how are we deciding the order of the menu items?

[JHenneberg]

Getting there: https://gfycat.com/acceptablewanarkshell

Have had good progress over these last two weekends. Just a few small bits and an update to the mobile styles now before it's ready to be merged into master.

Really good progress. Cant wait.

[ssddanbrown]

@Abijeet

1. Padding on the top of the page, between the page heading and the border of the white main section feels a little high.

Yeah, I've had a surprising amount of trouble with this padding, It never looks quite right depending on the page content. Will likely adjust this again before release.

2. Having the create buttons along with the other buttons that are specific to the page (Edit, Delete etc) we are currently viewing feels a little awkward. Maybe we can add a horizontal divider?

Good idea, Some visual separation would really help here.

3. On the same menu, how are we deciding the order of the menu items?

Not really decided yet. The ordering is something I know will change before release. It feels odd to not have the edit page action at the top. At some point I'll put some focus on this, probably at the same time as your idea from point 2.

[ssddanbrown]

Upon other bits, I've done some updates to the mobile layout today.

Here's a preview of what this looks like, I've followed the same flow for the exact same content at iPhone SE sizes (Our smallest target):

• Old Design: https://gfycat.com/EminentExhaustedFinch
• New Design: https://gfycat.com/esteemedfrighteningazurevase

Actually got stuck a few times on the old design. I know there's still some padding/size changes for mobile still to do. Still need to update Markdown editor for mobile.

[ssddanbrown]

If anyone has some better recommendations for the wording (Or good ideas for icons) of the info/content tabs that would be great:

Info will show everything that's currently in the sidebar and any buttons/actions. Contents focuses on the main content

[Nebucatnetzer]

Looks a lot cleaner, however we'll notice what could be improved when we use it in production :)

[ezzra]

Much better, but the header is still too large, the breadcrumb row is too big and I wonder if there is even a possibility to hide it somewhere else?!

[ssddanbrown]

After 6 Months from starting this redesign, I'm fairly happy with where it's got to. Will still be some tweaks and fixes to make while other bits are completed for the next release. Now happy to merge into master.

Feel free to open new issues regarding the design if you're comfortable playing with the master branch, Please prefix the issue names with [2019 design] so I can easily see if the issue is regarding this design. Be aware that UI stuff is very opinionated and subjective so sorry if I close any such issues more hastily than you'd hope.

[nmehlei]

After switching to the new version, the tiles of the grid view in our books list have now a maximum width of ~262px with the book titles h2 element having a maximum width of 214px. This leaves only ~19 characters before the title is being wrapped. Is this expected behavior? At least in our case, it negatively impacts the visual look but this probably depends on the average book length and might be very different in other cases.