Overhaul the UI design across the application

Description

The current user interface of Zettlr feels a bit all-over the place. I would suggest revamping:

the core UI elements – e.g. buttons, text inputs, radio buttons
the current color scheme for both light and dark themes
the layout of most UI elements (most importantly the toolbar, the search menu, and the status bar)

I've skipped writing about the current preferences UI, since I can see that it's nicely coming together in #4805 :)

[!note] I am unable to test Windows or macOS features, so please mention if any of my proposals also need to be revamped on those operating systems. Thanks!

Proposed Changes

I have put together a list of things that I think would improve the overall feel of the application.

Feel free to give me feedback! I couldn't impose a style from the current UI, and I couldn't find anything about the current branding or style Zettlr is going for, so I tried my best to improve the current UI rather than redesigning it from scratch.

[!note] I've noticed a couple things in CSS code that could enhance the readability for some people:

I'd highly recommend creating separate CSS variables for both light and dark themes.

I'd avoid using literal colors, and always use CSS variables instead.

Using a range between 900 and 50 (e.g. grey-50 instead of grey-0) might be better than number naming, but this is purely optional.

Consistency

I've seen a few screenshots of Zettlr and it seems to have different UI guidelines for the three operating systems. I'd suggest that Zettlr should look exactly the same on all operating systems. That way we don't have to create three different UI designs for three different operating systems. This also increases consistency.

Since users can already edit the application using CSS, it wouldn't make sense to enforce a set of rules for each operating system and potentially break user-created themes on different platforms.

[!important] Zettlr could benefit from its own (non-platform specific) design guidelines. All proposals in this issue are currently using undocumented design guidelines until we can work it out as a group.

Fonts

Using system fonts can result in ugly or pixelated text. I would recommend packaging an open source font into the application so that it looks the same on all platforms.

Some potential font families that might fit the proposed design are Lato, Inter, Raleway, and Noto Sans.

[!note] Feel free to recommend any other font you like!

Color Scheme (Light)

The current colour scheme is a little too grey. I have made it a little brighter on most UI elements.

Current

Proposal

^{* The proposed colors range has 11 colors, not just 8; this is not displayed so I can show the difference between the two effectively.}

The main problem seems to be the contrast on most elements. Here is a table of the most common contrast problems:

Description	Current	Proposal
Consider using the same color as the `toolbar`, and use a contrasting color for the border.
Consider applying the same border to the `toolbar` as above.
Consider removing the `background-color` property from `#window-content`.

UI Components

Currently, it seems that UI components look different on all platforms. I am not sure about the reasoning behind this.

I have created design proposals for each component regardless of the platform, and you can view them in the table below:

Component	Current	Proposal
Buttons
Text Inputs *
File Tabs

^{* The proposed components may look out of place or ugly because the current design system (and therefore everything around the proposed components) does not fit the proposed aesthetic.}

Layout

Below are some changes that could be made to the layout of Zettlr.

[!note] This is written based on the current UI on Linux.

[!note] I will soon attach images for certain changes.

Toolbar

Related CSS selector(s): #toolbar

Consider making the horizontal and vertical padding of the #toolbar element the same.

File Explorer

Related CSS selector(s): #file-manager, #file-tree

Consider moving the 'File Manager' and 'Global Search' buttons to the sidebar (where the File Manager is).
The 'Workspaces' title seems very redundant, as it does not do or display anything.

Instead, we could add a 'New File' and 'New Directory' on the right side of the sidebar, similar to what VSCode does.

Global Search

Related CSS selector(s): #global-search-pane

Consider creating an 'advanced' dropdown that that includes the 'Restrict to directory' option. This will be useful for further filtering options.
Consider removing the 'Search' button and instead search automatically after the user finishes typing.
Consider removing the Filter option from the search results.

Zettlr already presents the results cleanly, so there is no need for additional filters.
Consider removing the 'Clear search' button.

Entering a new query will clear the search results, since Zettlr would search automatically.
Consider moving the 'n matches' text to the current location of the Filter option.
Consider making the 'Toggle results' into a link instead. It could be moved to the current position of 'Filter search results'.

We could place it to the right side of the sidebar (next to where the 'matches' text would be).
For closed search results, consider making the arrows face to the right side instead of the left.

Caveats

The only two caveats I could think of are:

Existing users may need time to get used to the new UI (if the layout changes).
An entire overhaul may take a pretty long time.

Do you Wish to Attempt Implementing this Yourself?

Yes

Zettlr Version

None

Your Platform

[ ] Windows
[ ] macOS
[X] Linux

Operating System Version

Gentoo Linux

Additional Information

[!important] I will continue to update this topic with any additional suggestions or changes that might improve the current UI.

I created this issue to get the maintainer's attention first, to see if this overhaul is needed at all or not.

Status

This issue is not yet final. I still need to do the following:

[ ] Cover the dark colour scheme.
[ ] Cover more components (especially the radio button, and other components that are only present in one or two places).
[ ] Cover the #menubar and #window-controls elements.
[ ] Cover the status bar.
[ ] Cover the context menu.
[ ] Cover the formatting bar.
[ ] Cover the right sidebar.
[ ] Cover the icons.
[ ] Cover the layout improvements to the above items.

Thanks so much for opening up your first issue here on the repository! 🎉 We would like to warmly welcome you to the community behind the app! ☺️ We'll check in soon and have a look at your issue. In the meantime, you can check your issue and make sure it aligns with our contribution guidelines! Here's the comprehensive list:

NOTE: Please do not share screen captures of buggy behavior on YouTube. If you have uploaded a video on YouTube and linked it already, don't worry! But, we would like to ask you to remove the video from YouTube and upload it directly to GitHub instead, by editing your comment. Read more here.

Enhancements

An enhancement takes a feature and improves or alters its behaviour. Please make sure to argue how your proposition will aid non-technical text workers, and why it can't be emulated easily with other features or apps!

Feature requests

Feature requests introduce whole new features into the app. This requires a lot of work, so these might be turned down if the implementation costs supersede the benefits we expect to see from implementing it. Please do not be disappointed if that happens. It likely has nothing to do with your great request but simply with us and our missing resources!

You can of course always ask someone to implement this feature, because a PR with a working new feature has much higher chances of being merged! :)

Bug reports

Please note that one of the main reasons for why bug reports cannot be addressed is that there's not enough information for us to find and fix the bug you describe, so make sure you try to pinpoint the bug as close as possible.

The ideal bug report for us has two qualities:

The bug is always reproducible, at least within a certain context.
We know exactly what specifically goes wrong, and there is consensus on what should happen instead.

Please note that if you encounter behaviour that does not align with your expectations of what would happen, this might as well be simply intended behaviour and we need to simply clarify why the behaviour is the way it is. This is not to be considered a bug and such issues may be closed! Suggest an enhancement instead!

But now, have a great day and thank you again!

TL;DR: In the following, I will maybe sometimes sound harsh, but I do not intend any of this to dissuade you from pursuing this endeavour. I fully agree that Zettlr's UI is currently all over the place and that anything will be an improvement. However, after six years of trying to navigate this collossal ship of an app without hitting the figurative ice berg I want to think things through before jumping in; I have burned myself too often with this "actionism". I would love to get into a discussion about this to bring code, UI, and UX into alignment.

First of all, that's a lot of thought you have put in there, and I agree that Zettlr could definitely use a facelift. I believe that such a large overhaul will require a series of meetings and preconsiderations before actually touching the source code itself, but I also believe that, if we do this properly, it could really benefit the app.

Then, as you may have guessed, I am not a designer and one can see this when looking at the app. So I am definitely happy for any help there is.

Thirdly, I would like @sensologica to chime in here and provide additional insight since he was the originator of the preferences overhaul.

Now, to specific things you mentioned.

the core UI elements – e.g. buttons, text inputs, radio buttons

How? Do you have something in mind? What is the issue here?

I've seen a few screenshots of Zettlr and it seems to have different UI guidelines for the three operating systems. I'd suggest that Zettlr should look exactly the same on all operating systems. That way we don't have to create three different UI designs for three different operating systems. This also increases consistency.

This is already a difficult thing. Zettlr does not have different UI guidelines for the operating systems. Rather, I attempt to rigorously stick to the design guidelines of those platforms.

For macOS, this is the Human Interface Guidelines (HIG).

For Windows, this is Fluent UI.

For Linux, the main issue is that there are the GNOME HIG, but there are a variety of window managers that can be tweaked, so I mainly defaulted to a mixture of the GNOME and Apple HIGs, but without too much consistency.

Then:

I'd suggest that Zettlr should look exactly the same on all operating systems.

I did that in the beginning, but it looked extremely out of place and ugly. I don't personally like that, and I want Zettlr to feel more like an actual program than a website. Using a custom design would counter that. So while I do see that having a single UI will make things easier, such a UI would need to be properly thought out before. Without seeing what this would look like, I cannot wholeheartedly green light any such endeavour.

Since users can already edit the application using CSS, it wouldn't make sense to enforce a set of rules for each operating system and potentially break user-created themes on different platforms.

This has never been an issue before, so I don't think it has much bearing in the context of the overall UI.

Using system fonts can result in ugly or pixelated text.

What? Since when? I was using I think Lato or Raleway in the beginning, but it made the app look alien to the rest of the UI, which is why I switched to the system fonts instead. This made the app look more native. I am not a big fan of using a custom font for UI elements, so again, I would need to be convinced here.

Consider using the same color as the toolbar, and use a contrasting color for the border.

This issue is currently being discussed on Discord; since Windows has a setting for changing the colour.

Consider removing the background-color property from #window-content.

This is platform-specific. macOS does not have any background colour, since it uses Window vibrancy there to create a translucent window background.

Currently, it seems that UI components look different on all platforms. I am not sure about the reasoning behind this.

See the references to the Fluent UI/Apple HIG above. The elements on all platforms have been modeled after the native System UI elements. See as an example the side-by-side comparison between the macOS System Preferences and Zettlr's preferences:

The 'Workspaces' title seems very redundant, as it does not do or display anything.

It is not. Again, this has been borrowed by the Apple HIGs where category headers are used, and when you have both files and workspaces open, it makes sense:

Consider removing the 'Search' button and instead search automatically after the user finishes typing.

This pertains to UX, not UI, and this is currently blocked by inefficiencies in the search engine.

An entire overhaul may take a pretty long time.

Yup, I think not less than an entire year, especially given that we all do this voluntarily in our free time.

When it comes to colours and the idea of exclusively using CSS variables, I am on board, this looks like reasonable suggestions and adding a hint of blue into the gray colour palette looks definitely better.

Now, as you can see, it is not as easy as it may be to improve the styling. Specifically, there is a series of open questions that I pose from a purely programming perspective. I am happy to discuss proposals, and this list is not complete, just what I can think of from the top of my head:

I am currently in favour of keeping macOS and Windows styles native instead of using a custom layout. If we use a custom layout, I would need to be convinced. I do not mean this as sounding conservative, but rather I have seen a lot of very bad custom designs where people have completely disregarded how it feels to users.
The CSS of the app is still in an "in-between" state: There are some scattered LESS-files lying around, most CSS has been moved to the corresponding Vue components, but it's not really something I like. I would like to have a good plan of where to actually locate which styles to make this consistent also from a maintainer's perspective; so that it is easy to know where to look when we need to change something.
Before jumping into implementing such a layout, I want to refactor the entirety of the Vue components so that we have a cleaner base to start from.
We should definitely ask the users about this before doing something. Since I do not collect any telemetry, I have literally no idea what showstoppers there are for users. We would need to do a survey for this; which would also prevent us from spending time on something that nobody wants.
There are definitely more things to consider before starting this, but it's close to Christmas, and I am burned out from the year. I'll definitely be more focused in the new year.

With all of that being said: I fully agree that Zettlr's UI needs big improvements, but I want to do this properly, both to save you, the users, and myself time and energy. This is why I also would like @sensologica to chime in and say what he thinks.

Do you have any thoughts already?

I agree that this whole overhaul should have many discussions before anything is started. Given the size of Zettlr, this is definitely not going to be an easy task.

Most of the problems with UI elements that I described in the issue are only present on the Linux platform. In fact, Zettlr looks much nicer on macOS than on Linux.

This is already a difficult thing. Zettlr does not have different UI guidelines for the operating systems. Rather, I attempt to rigorously stick to the design guidelines of those platforms.

This is obviously subjective, but I feel that this is not a problem in today's world of applications. Software like Discord or VSCode use their own set of styles that don't fit the platform's design specifications - yet they manage to look good.

Electron applications are designed to bring websites to desktops. I don't think we should try fighting that.

Creating platform-specific designs also means that layouts have to be different on each platform. This is going to be pretty cumbersome if a user wants to use Zettlr on two or more different platforms, as they'll have to relearn the interface each time.

We also can't really follow the design guidelines perfectly. We have to work in a web-based environment that works very differently from native renderers (think GTK, for example), and we also have to completely rebuild all the components outlined in the guidelines (which may not always be perfect and therefore look out of place). This is a lot of work.

This is Linux-specific, but I think it's worth sharing. You can't really create styles for Linux based on guidelines. There are far too many style guides for desktop environments, not to mention window managers, which usually have none. Desktop environments also have user-defined themes, so we can't rely on defaults either.

I am not sure about the current state of theming in Zettlr, but having a platform agnostic design and allowing users to create themes on top of that might be better than what we have now.

I'd suggest that Zettlr should look exactly the same on all operating systems.

I did that in the beginning, but it looked extremely out of place and ugly. I don't personally like that, and I want Zettlr to feel more like an actual program than a website. Using a custom design would counter that. So while I do see that having a single UI will make things easier, such a UI would need to be properly thought out before. Without seeing what this would look like, I cannot wholeheartedly green light any such endeavour.

That would be the plan. We propose custom design guidelines that will look the same on all the platforms. It is an extremely difficult task to fit into the user's environment. It's the user's job to do that through theming, we can't do it for them.

Using system fonts can result in ugly or pixelated text.

What? Since when? I was using I think Lato or Raleway in the beginning, but it made the app look alien to the rest of the UI, which is why I switched to the system fonts instead.

This may be a problem on my end, but the system fonts used by Zettlr look pixelated with little to no smoothing. I have tried it with various other fonts and none had the same issue, so it's most likely my system font acting up.

As for font choice, you might want to try Inter. Inter is very close to Apple's SF font, which macOS uses by default.

It is not. Again, this has been borrowed by the Apple HIGs where category headers are used, and when you have both files and workspaces open

This does make sense this way, thanks!

This is platform-specific. macOS does not have any background colour, since it uses Window vibrancy there to create a translucent window background.

This issue is currently being discussed on Discord; since Windows has a setting for changing the colour.

I'm going to hide these from the main issue soon, as they're platform specific.

This pertains to UX, not UI, and this is currently blocked by inefficiencies in the search engine.

If there is an open issue for this, could you link it? I might check on it.

From a programming perspective, it makes sense to do exactly what you said: clean up Vue components, stylesheets and anything else that gets in the way of working efficiently.

If this gets the green light, it should be possible to propose designs through mock-ups alongside refactoring the codebase.

I'll update the issue at some point and hide unneeded info (such as specific component suggestions, as they don't seem relevant at the moment).

Looking forward to any thoughts! :)

Hey guys!

@catflip, you certainly make valid points and these are all issues that we would like to address. However, because our resources are so limited, there is only so much we can tackle at any one time.

While a beautiful and unified UI is certainly desirable, there are some long-standing UX issues that, I believe, merit our attention first. These UX problems may contribute to people losing their work (the table editor, for example) which is far more urgent than UI inconsistencies across platforms.

A UI overhaul is a massive undertaking, especially considering the variations between platform design guidelines. So at this time there is no immediately actionable way for us to address the UI without it taking our attention away from the more pressing UX problems.

I understand how frustrating working with an imperfect UI can be (I love a squeaky clean UI as much as anyone), but I think we must respect the UX process and do things in the right order. Hopefully, the improved usability and reliability will offset the slight inconvenience of aesthetic imperfections. UI improvements will follow in due time once we are on more solid ground.

If you would like to contribute to the design of Zettlr, perhaps you could lead the UI work and propose a design system that reimagines the UI while respecting the Zettlr brand and vision? Maybe start building a basic component library, while Hendrik works on engineering and I address UX? This way all three can evolve in parallel. But I'd want @nathanlesage to approve of this before any further action as he is the visionary behind the product.

As for font choice

Chromium, and in consequence Electron, support font-family: system-ui since a few years now: https://chromestatus.com/feature/5640395337760768

So, there is no need for Zettlr to ship with its own font. It would just use the system font. Mac and Windows don't let their users choose the system font anyway any more. Linux users, well they get whatever font they specify in their settings. If the font is pixelated, blurry, too small or too big, it's their own fault and easily fixable. KDE, Gnome, and Ubuntu ship with sane defaults, if the users doesn't change anything, Zettlr should display its interface like the rest of the desktop.

The current font stack of Zettlr would show me "Segoe UI" and "Liberation Sans" in various places, specifying "system-ui" in the user css fixes that and it shows me whatever font I set in my desktop.

@tannenfreund87 That's basically what Zettlr ships with in almost all places by now already.

Zettlr / Zettlr