UI refresh of the desktop application

GitHub Contributions
#1

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

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

3 Likes
Bitwarden Roadmap
#2

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.

#3

@kspearrin @cscharf

#4

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).

#5

@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.

#6

@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:

2584Ɨ3650

  • 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

#7

@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?

#8

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.

1 Like
#9

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.

1 Like