UI refresh of the desktop application

Hello,

On Dribble, I came across the work of Artem Nosenko (/shots/13907643-Bitwarden-Design-Concept-for-macOS) and his concept is awesome.

I then tried to implement his work without changing the UX too much.

The main lines :

  • I migrated Font Awesome 4 to 5 (but I kept FA 4 to be compatible with jslib);
  • I reworked the left menu (especially the drop-down list);
  • In the middle list, I changed the size of the icons, without increasing the height of the elements;
  • Finally, I moved the action buttons in the header and I added the item icon to the detail view.

What do you think?

My work is available on GitHub: vermotr/bitwarden-desktop

https://ibb.co/ngQHgJx
https://ibb.co/DgSDdcv

Feature name:

UI refresh

Feature Description

UI refresh of the desktop application

Clients / Repos Affected:

Desktop

Timeline to completion (estimate):

ETA: Q2/2021 - Q3/2021

9 Likes

Nice UI improvements!

This is a much needed improvement. Indeed, the drop-down list in the current state is a bit confusing in regards to the icon alignment. The folder icon versus the right arrow icon (which indicates the presence of sub folders) should not be on the same level.

It would be nice if your UI changes would also be applied to the web vault. As the web vault for example contains the same drop-down list.

Very nice, it looks very refreshing. I wonder how this will look on a Windows 10 machine. As the spacing between the items for me in current state is much more narrow.

I also like that items that are selected or hovered over with the mouse now stand out more. In the current state it is hardly noticeable.

Much welcomed change, I like that you have moved the function buttons to the top. That makes it more in sync with the web vault. I also feel it makes it more easy to use in terms of usability. As for some reason I do find myself ā€˜searchingā€™ for those buttonsā€™ in current state.

Question, what is the motivation behind changing the functions buttons from right to left (delete / edit and copy)?

If possible could you translate this to the web vault too?

I hope your UI changed gets implemented soon. This thread should get more attention.

@kspearrin @cscharf

Thank you very much @aex351 for your review!

Regarding the buttons, I find it more relevant to have the actions most often used on the right and the least on the left. This is really a personal vision, so I really appreciate having more feedback.

If you want to try my work, you can clone my fork: GitHub - vermotr/bitwarden-desktop: The desktop vault (Windows, macOS, & Linux).

1 Like

@vermotr, could you provide a Windows binary?

I am trying to build bitwarden-desktop myself. However it is failing. Any instructions for this would also be welcome.

@vermotr I came across the exact same design just a few days ago and was planning on also doing a redesign. Really awesome work so far. I expanded on it a little bit:

  • Changed font to default system font
  • Increased padding slightly between vault items
  • Made font weight of names bold, changed size of cipher header
  • Added background to icon, fallback now uses default icon
  • Replaced fontawesome icons with material icons
  • Fixed groupings ā€œmy vault/sendā€ footer position
  • Hid ā€œadd itemsā€ button on vault bin page

Iā€™m having trouble branching off and doing anything with jslib causing issues. If you could let me know how to deal with this Iā€™ll push the code to your fork.

Cheers

1 Like

@EvansMatthew97, nice work!

Iā€™m not sure replacing Font Awesome with Material icons is a good idea. Indeed, the other applications are already using FA4. A good start, would be to update to the version 5 (like I did), but it is true that if we update to a new version, we can also change the font :man_shrugging:

Regarding the jslib, you cannot update it directly from the desktop repository because itā€™s a common code referenced in Bitwarden JavaScript projects. You can find the repository here: GitHub - bitwarden/jslib: Common code referenced across Bitwarden JavaScript projects.
You must therefore propose your modifications in this repository, but these modifications will be reflected in the other projects.

@kspearrin @cscharf, what do you think of our work? Would you be interested in a PR?

1 Like

Iā€™m not sure replacing Font Awesome with Material icons is a good idea.

While I understand it is used globally by Bitwarden, FontAwesome Free can be limiting. Material Icons is open source, so if more icons need to be added, BitWarden can create their own branch https://github.com/material-icons/material-icons.

Material icons also have a more ā€œappā€ feel than ā€œwebsiteā€ in my opinion. Because itā€™s used everywhere, FontAwesome is almost the Calibri of fonts. Itā€™s not necessarily bad, itā€™s just plain and can be perceived as cheap.

2 Likes

This refresh is exactly whatā€™s keeping me from moving from my current password manager. A much needed overhaul of the UI. I do hope this will be implemented in the official version soon.

2 Likes

Any update on this? Why is nobody from Bitwarden commenting in this thread.

1 Like

Weā€™re working on some UI updates internally, icons are especially tricky due to the licensing (FA in particular).

1 Like

I would love to see you folks adopt the ā€œsystem fonts stackā€ approach on a cross-platform, cross-app/-extension basis. This is one of the really few nits I have with your otherwise outstanding product and its various implementations.

p gets an Update. Very nice and modernā€¦ Just for inspirasion: 1Password 8 arrives on Windows with a new design and big performance improvements - The Verge

I agree, on Windows and compared to BE it looks more modern and fresh.

But on a Mac the GUI of v8 (made with Electron) is, in my opinion, a huge step backward :frowning: No Mac look&feel anymore.

1 Like

I went through a bunch of threads, reading to see if weā€™ll get some UI refresh. UX wise, I like Bitwarden, but I recently switched from Miky (as itā€™s shutting down). Myki was years ahead UI wise. Based on what Iā€™ve read, the UI changes that Bitwarden releases are very small and rare.

A ton of people instantly turn down Bitwarden because it looks like a 2005 design. A bit of spacing, padding and some icons updates would instantly change the design and look. But from what I read, seems like thatā€™s a lot to ask for.

2 Likes

Thanks for the feedback, and welcome to Bitwarden! The design team recently released a blog post about design philosophy that you might want to check out. We are constantly evolving, so stay tuned!

3 Likes

Ohh how i like BW, but the Design is compared to the new 1P Design Say hello to 1Password 8 for iOS and Android | 1Password from the 90ā€™sā€¦