Designing the stash UI

Development UI/UX
,
1

I have been guilty in the past of not spending much time on the design side of UI development. I normally draw some vague designs in my notebook and go from there.

I’ve been using draw.io desktop recently to explore ideas for the query page and sidebar UI designs. It is open-source (but not taking contributions), and its files are text-based.

Below is an example:

image
image2051×964 77.8 KB

I’ve included the file where this comes from. It includes some other scene page related diagrams.
stash - scenes page2.drawio (145.6 KB)

I thought this might be useful for collaborating on UI designs.

I’ve investigated other drawing programs:

I like that drawio can be run as a standalone application and that it saves text-based files. It doesn’t have real-time collaboration, but I don’t think that’s an important consideration for this.

Let me know if you have any (free) wireframing tools that you prefer.

Paging @CJ13, @echo6ix and @QxxxGit since you’ve previously contributed to UI design discussions in the past, and @petrichor for their insight.

3

Hey!

Are migration to Bootstrap 5.x happening?
Some time ago I was playing around with it, it doesn’t seem to require too much effort. Actually was surprised how little it was breaking things.

Also, moving away from hardcoded css values to css variables would make theming so much easier, and enables things like theme color setting easily from ui etc.

Mainly using (paid) Figma, but Penpot seems promising.

4

I miss the adult sites of the early 2000’s… can the next redesign open every link as a popup window? Hell, feel free to spawn popups even when a link hasn’t been opened! Lots of popups. Everywhere.

5

A sidebar would be an improvement compared to how the filters look today. Most of this discussion is happening on the Stash PR:

6

I will try to design it in figma as im learning web designing it will be a great project

2 Likes