Application Design(s)

[falkonprods]

The key designs of the application - should include main screens and key elements.

[JMKJR]

Linking our figma here https://www.figma.com/file/Yfmu9x1lpnL3zIAyaG2oTM/Labs3-Design-System?node-id=1569%3A0

[JMKJR]

We discussed the possibility of a consistent branding/theming amongst all L3 products starting with daoOS. This decision will heavily inform the design process and I don't believe we came to a conclusion.

I recall the following options proposed:

1. We don't worry about this for daoOS. Just use some component library and style as we please without establishing a standard.
2. We use the Stacks UI component library https://github.com/blockstack/ui .
3. We provide our own component library/theming.

Let's discuss in this thread or on discord.

My thoughts: I did have a look and played around with the Stacks UI library. It's definitely a well done and good initiative for Stacks website/documentation theming. But I don't think it is a DApp standardized design solution, it seems more for their documentation sites and such. I don't believe it leverages any particular properties that warrant using it over a more popular library like Tailwind or Material UI or making one of our own.

[marbiano]

Here are my two cents, based on my own experience architecting UIs:

1. Stacks UI looks good, but it feels experimental yet, especially on the documentation side. That's fine with experienced developers, but if the plan is to be able to incorporate people in all the seniority spectrum, then good docs become an important factor. Also, the fact that they are using emotion behind means we might be tied to that library while trying to modify their components for our own use. I'm not personally a fan of emotion these days, and I believe there are better CSS-in-JS libraries like stitches.
2. Primer also looks nice, but it does also comes with its own limitations, which are mainly two: their set of components looks very Github oriented, and it's also using a CSS-in-JS library behind the scenes, which in this case is styled-components. While SC these days is more mature and has more adoption than Emotion, it introduces a similar limitation in the case we want to customize their components.
3. Tailwind UI gives you accessible and functional components, while very leanly integrating with Tailwind CSS for visuals. It's a bit more work, but it pays off in the long run because it's way easier to port into our own system. They've also recently released the React version of the library, so we got components to work with directly. The only big drawback of Tailwind UI is that it's a paid product, so the project would need to have a budget in order to use it. Team pricing costs $599.
4. Radix UI is an interesting alternative to Tailwind UI, and it's free, but it's still under heavy development so there are components missing. It's from the same people behind Stitches so those two work together beautifully. This has been my tool of choice for a bunch of recent side projects.
5. Other solutions like Material UI are too convoluted in my opinion, and while you can customize their look & feel with themes, it's hard to detach once you've made it your UI library of choice.

If it was my choice, I would go with Tailwind UI even if it means spending some money, because their documentation is stellar, new devs might be already familiar with Tailwind and it would be the easiest of the presented options to leanly port into a fully custom design system.

[JMKJR]

Excellent analysis. I've only used Material UI but Tailwind looks a lot better to me for all of the reasons you've said @marbiano . I independently came to the same conclusions especially with regards to a lean solution we could put an L3 coat of paint over if we wish. @falkonprods this would deduct from total grant money but it may be worth the investment going forward as a team. Can we put this to some type of vote? Or maybe there are other good ideas we have yet to consider :)

[MarianoArg]

In my opinion, it's better to pick one option and use it as a standard and try to be aligned during the whole process.

I've worked with @marbiano in the past so my thoughts are pretty close to the same speaking about those libraries.

If it was up to me, I'll probably pick Tailwind, for the same reasons, the docs are really well written, and is easier to adapt those components to our needs.

We can even use just the lib itself (TailwindCSS) and create our own components library, but of course, this might take more time.

Another option might be Ant Design which is from Alibaba's team. I used it in the past but just for a brief, and it's ok, it has a lot of components with cool functionalities, but sometimes the customization could feel like not an easy chore. But it was a while since I use it, so it might be different nowadays.

[falkonprods]

I have no objections to purchasing a library if it saves us time and we are all OK with having lower payments because of it. I, personally, am not doing this for money, so would just as soon pay to move things along and do it better/righter than get any form of payment...

[marbiano]

I'm in a similar position to @falkonprods, happy to get less reward for the appropriate set of tools.

[JMKJR]

I agree with you all. I also believe that as we help build out the early infrastructure of Stacks ecosystem and L3, there will be opportunities to profit as an org beyond this grant money with future DAO built applications, possible tokenomics and such but I digress. My vision and commitment is long term.

[Zk2u]

also agree with this approach. let's use tailwind for now.

[marbiano]

Are we moving forward with Tailwind UI then? How's the process for buying the license in between the organization? I'd like to make a PR to integrate it into the boilerplate as soon as we have it available.

[Zk2u]

my vote is personally with modded Geist, but i'm down for what the majority votes for :)

Tailwind stuff seems to me too generic and not concise enough for L3.

[JMKJR]

I do like the Geist aesthetic. Already feels kinda web³ to me :) . If we went the "free" route, I like this one the best.

However, Tailwind UI does provide us with nice shells, headings, data displays etc. There's definitely a lot more out of the box.

Maybe we should decide on a free option and have a vote between that and Tailwind UI.

[marbiano]

Tailwind stuff seems to me too generic and not concise enough for L3.

Tailwind is also easy enough to theme and make it your own. And Tailwind UI brings up a bunch of ready-to-use 100% accessible components. That is not a minor reason.

That amount of time and attention to details the people behind Tailwind has put into the product is really admirable, here's a recent blog post that speaks by itself.

I do like Geist but it's way more limited in comparison to Tailwind CSS + Tailwind UI.

As an aside, what is the look & feel you are all talking about for "L3 stuff"? I haven't seen any kind of visual that describes it, would you care to share it with me?

[Zk2u]

another issue that comes to mind with Tailwind is its licensing. we don't exist as a regular team or company of sorts, so we could run into problems in that case

[madrepublic]

Hi! I have started on daoOS design and have made a simple but buggy prototype here: https://www.figma.com/proto/qgJqserxx5gP4vWiCj9PCX/LAB3?page-id=33%3A2497&node-id=33%3A3345&viewport=1104%2C633%2C0.2571127414703369&scaling=min-zoom

I made a prototype to show some of the interactions. Drewf has already seen a preview of this and I used the frames from Enid I think. They were most helpful. This is a start :)

And this is wahlmank on Discord, just to be clear.

[JMKJR]

@madrepublic Hey this is great! Didn't even realize figma was this powerful. Do you have the art assets somewhere we could download? Like the logos and what fonts are used etc. Then we can get to work on this :)

[Zk2u]

@madrepublic Hey this is great! Didn't even realize figma was this powerful. Do you have the art assets somewhere we could download? Like the logos and what fonts are used etc. Then we can get to work on this :)

figma's crazyyy 😂 those are most likely gonna change btw, we were just getting something doable ready for M0T1. it'll probs end up using same stuff as syvita

gonna turn this into a discussion cause it doesn't really feel like an issue rn