UI more modern

[Angelk90]

Check for existing issues

• Completed

Describe the feature

A project without .git file was taken as an example.

It would be possible to discuss the ui that zed wants this project to have in the future.

At the moment it seems very dark as a UI, retro.

Android Studio:

Registrazione.schermo.2024-02-22.alle.11.34.40.mov

Zed:

Registrazione.schermo.2024-02-22.alle.11.38.43.mov

[BrianIto]

Zed has some themes that are actually pretty good. But I got the point of having a little more colors and modernizing it. As far as I know, Zed is really focusing on perfomance and maybe this will be a matter of discussion when the talkative is about UI. Are you guys open for UI suggestions? (Figma like)

[evrensen467]

I agree, a more modern UI would be nice in Zed, the current UI definitely feels retro for me along with the lack of colours and liveliness.

[rubjo]

Here's hoping that this won't be a dev focus. For me, a big part of the appeal with Zed is that it is minimal, clean and modern out of the box. Anyway, Android Studio should probably not be the first thing to take design cues from.

Themes are a good way of customizing Zed's appearance.

[widersky]

Leave my concept here.

[rubjo]

My two cents: I think this looks like a small but thoughtful and very polished improvement – I like the (for me) more logical rearrangement of icons and the fact that they have slightly larger click areas. This keeps the sense of minimalism while also making the app look a little more native macOS-like. Good job!

[alygin]

There's arguing in the comments about translucency — does it only bring distracting noise, or adds so needed colorful variety to the boring working environment. Pesonally, I don't mind translucency per se, as long as it's configurable. But I'm much more concerned with additional limitations and questionable design decisions that it imposes.

Let's have a look at this particualr concept. It looks cool, thanks @widersky for putting effort and taste in making it. But it seems to put visual appeal above some other very important things. I'll try to explain.

In order to make this translucent panel look nice, we have to fully separate the whole left panel from the main workspace (as it demonstrated on the screenshot). Otherwise it won't look so cool. But we have to sacrifice integrity of the statusbar for this cool picture. It's now split in two parts, and its left part changes size along with the project view.

Let's think of where all those nice icons at the bottom of the project view go when the user starts resizing this left panel and making it narrow? Or even when he or she hides the panel completely? What will happen? Will the buttons just disappear? Or will they jump to some other place? Any of these will be quite a confusing behaviour. Especially, the first "Show Project Panel" button that disappears when you hide the project panel.

The same thing with the title bar — the project and branch switchers live separate lives in this concept. They are not separated because it's convenient, they are separated solely because otherwise the screenshot wouldn't look cool.

Thus, again, I'm not against translucency, but I'm against sacrificing UI clarity and predicatbility for it, and I'll be happy to see a translucency-based concept that fixes all the mentioned (and unmentioned too) issues without bringing new ones.

[Angelk90]

@widersky : How did you make this concept, figma?

[alumni]

Zed has some themes that are actually pretty good.

It's not just about themes/colors.

The main issue that I have is the UX:

• the buttons to toggle the panels (the ones in the status bar) are too small and too far away from where my mouse usually is
• missing git / search / find all references panel (I don't want to see a tab for search / references)
• it's difficult to distinguish files from folders, it would be nice if folders had a collapse/expand button next to them like in the screenshot

If you compare JetBrains Fleet with VSCode, they have similar features but somehow the UI of VSCode is cleaner (I like the panel switcher, the way the tree behaves), maybe it could be a good inspiration :)

[emersonjds]

I agree with @alumni, experience is everything in usability, if I'm going to spend hours of my life using ZED I want something fluid, with a well-defined UI design pattern, think about all aspects, we love ZED's performance, we want it to be the best editor possible

[widersky]

@Angelk90 yes, Figma

[Angelk90]

@widersky : Good job.

If you're on discord, you should show this.

@alumni : I agree.

@rubjo : Android Studio is a great product.

[widersky]

Already done that :)

[Angelk90]

@widersky : I can't find you by your name, how can I find you there.

[widersky]

@Angelk90 zodiac_shiba user

[baldwindavid]

I think we have to keep in mind that everyone has different preferences. I don't have a strong opinion on the file explorer because I open it sparingly. As for the main editor, I think it's quite beautiful (especially with Rosé Pine Moon 😍 ).

A big draw for me is the minimalism. Part of this is a lack of visual clutter. Admittedly, some of this "clutter" for me represents missing features that make it hard for me to read code (indent guides and "sticky scroll"), but I still love the overall look of the interface, including the terminal.

I certainly don't see Android Studio as appealing at all; it looks childish (toy-like) to me. VSCode raises my stress level because it just looks cluttered, heavy, and lacking polish. Not saying I'm right, but just goes to show a lot of this is eye of the beholder.

I doubt any of this is "finished" though and UI/UX tweaks and polish will be added. At any rate, just putting my hand up as someone that really enjoys the general design approach here.

[Angelk90]

@baldwindavid : Each of us has different preferences, but many think that the current look is very retro.
Which themes can't improve, I'm not saying that zed has to look like Android Studio, but a more modern look would be better.
For example, for me the best IDE is Webstorm, but not everyone likes it.

[baldwindavid]

@Angelk90 My point exactly. I respect and appreciate others' opinions on this.

[Angelk90]

@baldwindavid : for me @widersky's concept would be a great starting point.
The point of this issue is to make it clear that many people feel this problem, perhaps they don't express it as clearly as we do.

For example, what do you think of that concept?

[evrensen467]

I personally agree with David when it comes to Android Studio, I definitely don't find it appealing, but it looks at least modern compared to Zed, which gives me total retrospect vibes and I don't like it. I like the UI of Xcode (horrible UX), and I love the UX of the newer JetBrains IDEs (the new UI revamp is fine), I would look at those editors when it comes to UI/UX. This is my two cents.

I'd also like to add that I interpret the motto marketing of Zed to be an editor that's lightweight and minimalistic but offers the feature set of a full fledged IDE, I'm not sure if Zed currently is in that state, but I don't think the latter will develop without the minimalism of the editor getting affected, I'm not sure how the Zed team is planning on this regard. I do think many visuals are missing but it seems like people prefer minimalism over them, which I understand but I don't think it matches with the motto of Zed? What I'm trying to land at, maybe we can still have these visuals, but abstracted away good enough to satisfy both sides?

[baldwindavid]

@evrsen Yep, you're never going to perfectly appeal to a general audience. For example, my background is many years spent in the terminal (Neovim) and I also enjoy Helix quite a lot. If my background was more in IDEs perhaps my tastes would be different.

@Angelk90 - That mockup seems fine and not a big departure from the current look and feel. Regardless, I'll leave it to the designers; I trust they'll take feedback and make any changes or not as they see fit.

[JosephTLyons]

I've converted this into a Discussion, as that probably makes more sense here. Our UI is very intentionally minimal, so I don't expect we will change anything that will jeopardize that design philosophy, but that's not to say we won't make improvements. I'm not on the design team, so I will leave this discussion to them for digging into things more.

[Angelk90]

@alumni : What exactly does JB Fleet?
What do you think about Studio Android and WebStorm as UI/UX?

[rubjo]

A working environment with very subtle colours and minimal design gives me retrospect vibes which is not what I personally like when I'm working, feels depressing.

• A working environment with very subtle colours and minimal design gives me retrospect vibes which is what I personally like when I'm working, feels liberating, efficient, and lets me focus on content rather than chrome.

If I want to liven things up a bit, I can always use a nice syntax colouring theme (like Ultimate Dark Neo, ahem) or even go full glaring Synthwave -84.

[evrensen467]

If I want to liven things up a bit, I can always use a nice syntax colouring theme (like Ultimate Dark Neo, ahem) or even go full glaring Synthwave -84.

I'm happy you have a solution, but with how things are laid out currently themes doesn't cut it for me, sure a bit more vibrant syntax highlighting can be better but that doesn't cover the full experience I have with the editor as a whole.

[alumni]

@alumni : What exactly does JB Fleet?
What do you think about Studio Android and WebStorm as UI/UX?

I'm using VSCode, JB Fleet, JB WebStorm (the new UI), DBeaver (Eclipse). In all of them I like that you can customize the left, right and bottom panels.

User Interface

What I like about VSCode and WebStorm is that the buttons to switch panels are big. I never liked the old version of WebStorm and Eclipse where they were so tiny. I like in VSCode that you can also put them to the top of the side panel (like in Fleet). In Fleet/Eclipse, I don't like that they are tabs (with text), I prefer the icons.

What I like about VSCode and Fleet is that the SCM/git panel works in the sidebar. Same for "Find References" in VSCode. In WebStorm you could move these panels to the side, but they're rather designed to be in the bottom panel (they have a wide layout).

I don't like that Fleet barely has any panels I could pick. I also don't like that it always opens both left and right panels when it starts, even though I keep closing the right panel.

What I like about Zed/VSCode/etc is that different UI elements have different backgrounds (or at least I have a theme that does that (it's also the reason why I'm using Catppuccin Macchiato in most IDEs except VSCode). In Fleet, the Catppuccin theme has the same background everywhere (file tree, editor, tab bar, title bar, status bar etc). I like a bit of contrast between UI elements, it allows me to focus on the text editor, which is the important one.

In WebStorm (and in VSCode, if themed properly), I like that file tree has both icons and expand/collapse buttons for folders. In VSCode I'm using a theme which has custom icons for certain files/folders.

In Zed, Fleet and WebStore I like that you can switch the project/branch from the title bar - I like WebStorm the most because of the down arrow and that the switchers aren't very compact.

In VSCode and Fleet I like that you can toggle the panels from the title bar.

I like the less complicated status bar of Fleet. In VSCode/WebStorm, after installing some plugins, it started to get full, so I started to disable them. In Zed the panel switchers are so tiny I can barely see them.

Editor

In Zed and VSCode I like that I can go to the previous editing location with the back/forward buttons. MacOS doesn't like my mouse back/forward buttons :(

In all editors that support it, I have "show invisibles/whitespaces" enabled. In Zed/Fleet with Catppuccin Macchiato, and in most VSCode themes they are the same color as the text, which makes them really annoying, in WebStorm they are barely visible. For VSCode I'm using "Plastic - deprioritized punctuation" which displays very subtle whitespaces.

I really like sticky scroll in VSCode - I enabled it everywhere (in the editor, tree, terminal).

[ralphdas]

The lack of features is not minimalism if it leads to a inflexible end product. I mostly work, as many other frontend developers, on large monorepos. Zed will be a wonderful editor if the project sidebar would allow me to clearly change my scope or focus to different parts of the same codebase. It currently does not allow me to make workspaces like I enjoy with VS Code. I would love to have different projects which contain different folders which direct me to certain parts of the filesystem. I think the development team should focus on pragmatic solutions and achieve minimalism through strict organization opposed to strict exclusion of features.

[jasongitmail]

Using MacOS's system font, San Francisco, for tabs, project panel, title bar, status bar, etc would make it feel more native and less retro. Add folder icons like those in the screenshot above, and it'd look incredible!

[alumni]

I have already configured the UI font to be the system font.

For the editor part, I'm using JetBrains Mono, but Zed Mono is also decent.

Would be nice to configure the font weight for the editor. Also the line hight as a numeric value (either as a ratio to font size or absolute value)

[jasongitmail]

What settings property is for the UI font?

Zed's configuration docs only describe how to set the font for the editor area and the terminal.

[Moshyfawn]

What settings property is for the UI font?

ui_font_family

[jasongitmail]

Now this is the default too 🙏 Happy to see

[mcpeng]

My personal opinion: Zed's current style is excellent, similar to its official website style. The keywords for this style are roughly as follows: sketch, minimalism, engineering, retro, disappear (Zed team's concept of Your editor should disappear is correct). It is like a garage or small studio, allowing you to focus on your creative work itself. It can make you feel like an ambitious creator, with a bit of a hacker feeling. Many times, creators need to have some ambition and idealism.

For a professional engineering tool, translucency is not a good design element. Too much light and shadow will constantly distract your attention, and it has a plastic and cheap feeling, making it look like a childish toy. As for the concept figure of Widersky, it gives me the feeling that the current popular and template oriented design for ordinary users on the market lacks engineering and professional design thinking. I personally agree with some of alygin's insights, such as the issue with the title bar(the project and branch switchers live separate lives in this concept. They are not separated because it's convenient, they are separated solely because otherwise the screenshot wouldn't look cool.), and the unnecessary circular border added to the icon in the PHP file, when the number of such icons increases, they are very good at attracting your attention.

The above are personalized viewpoints. The purpose of presenting these viewpoints is simply to hope that Zed team can adhere to the current design style and continue to improve the interactive experience within this style.

[bicharhamid]

I LOVE ZED's UI Design. I wouldn't change it at all. If you guys did change it can you please leave an option for this one intact?

[briancmd]

I love the UI of the Zed editor, but the only thing I wish I could do is install custom icons in the project panel. I would definitely prioritize performance (especially memory usage) over any of these updates. Keep up the good work!

[Moshyfawn]

Be sure to follow or even contribute to #8843. There's still a bit of infra that needs to be developed to support it 😋