Penpot app - Design & Frontend improvements

Contribution
,
1

About initiative

The main purpose of this initiative is improve design & front-end in various areas:

  • Improve interface code, which is still growing thanks to rapid development. There is space for improving scalability, maintainability, predictability, efficiency and create better design foundations across the app
  • Improve performance issues - mainly on the side of CSS design, duplicate code, complexity of rules, complexity of calculations for the browser, specificity & inheritance issues etc.
  • Improve design consistency - there are few areas, where design can be unified, since there are design decisions that does not add so much value to users (they cannot even be recognized by user)
  • Improve accessibility - color blindness issues (this is especially important for various functions that may be incomprehensible to users with poor equipment or vision problems).

I described this initiative in a little more depth in one of my posts and the individual areas can be detailed in this thread.

5 Likes
2

1. Unification design foundations

Code is really hard to read, have unused props/variables/selectors etc. and does not respect some defined values. I would like to improve it and start with this step.

This first step including:

  • analysis of CSS
  • possible refactor with proposing improvements in unification (these will be separate PRs)
  • connect variables that already exist across code base
  • reduction of unused code
  • discussion on improving the CSS architecture for the next step

Do you think we can start with small PR’s and see how it’s going? Do you have anything to add?

3

I find that this is a good place to start and I would not add anything else to maintain this first PR as concise as possible.

4

I have only one thing to consider:

I think we cannot avoid a greater amount of communication regarding individual solutions. So I’m wondering - isn’t there a better way to discuss individual changes? Something in a narrower group of people or through e.g. tickets in Taiga?

I don’t mind solving it here as well, it’s just that the thread will probably grow a lot over time and cease to be effective.

1 Like
5

This is a good point as we obviously don’t want to duplicate information and add unnecesary bureaucracy.

I think we could deal with the specific solutions directly at GitHub issues and PRs, leaving this community post for more open topics like the discussion about the global topic, summarizing the advance and general thoughts and doubts.

Do you think you’d feel confortable that way? Sorry for not having a clearer defined protocol, but we are also learning by the way on how to manage “deep” contributions (at least deeper than the ones that we are used to at Penpot) as this one.

2 Likes
6

Absolutely, whatever suits you. I will send the first PR soon and mark it as open somehow so we can comment on it and see it through.

Thank you for information and no need to say sorry, it’s absolutely fine :slight_smile:

1 Like
7

Hello @ondrejkonec:
I’ve seen your PR, very nice. I’ll try to merge it this week :slight_smile:

2 Likes
8

I am using the Penpot desktop for Linux and enjoying it so much. I am a big fan of Penpot and have been using it for a while, but I am new to the desktop app. As a new user, I would like to give feedback to the design team.

  1. Please make login fewer hassles by adding an option for “Sign in with your browser”. I have my Penpot workspace in the browser, and copying my password to the new Penpot Desktop is an unsecured, extra step.

  2. Improve micro-interactions by adding animation and progress in some buttons. I get no feedback when I want to access a library and add it to my current file. The button does not grey out, or show loading. It just stays there. Also when I logged into the desktop app, the login button could have shown me a loading spinner instead of staying the same while the interface loads in the background. There are many places where these small animations are needed.

Penpot has come a long way in a short period of time, and I want to pour my love into the excellent team of Penpot. I love this tool and I really want Penpot to progress. And I hope the desktop app gets some love so I can have it as my primary tool of choice for UI/UX design.