[WIKI] UI/UX Ideas - Suggestions to Test

[Arximedis]

Hi Grape Devs - Wanted to document a few Ideas to see if minor tweaks to the HTML and CSS might optimize UX :

1.) Governance.so DAO Layout & Widget Updates

Update: Widgets => Possible add Image and CSS updates to color, box-shadow & background

Update Example → Alteration of Marinade DAO" CSS v.s. Physis

Potential Add Image to HTML:

<img src="https://app.realms.today/realms/MNDE/img/mnde_logo.png" style="max-width:100%;max-height:100%;margin:1px 2px 1px 1px;">

CSS Updates

.css-1w2pphc
{
color: rgb(255, 255, 255,0.9);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
overflow: hidden;
position: relative;
box-shadow: rgba(77, 0, 153, 0.5) 0px -5px 5px -5px, rgba(77, 0, 153, 0.5) 0px 5px 15px -5px;
z-index: 0;
border-radius: 17px;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgb(115, 166, 133,0.5) 100%);
}

E.g. → Physis Foundation Quorum →
.css-1bcbzhm

    color: rgb(255, 255, 255);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px, rgba(0, 0, 0, 0.12) 0px 12px 24px -4px;
    z-index: 0;
    border-radius: 17px;
    background: linear-gradient(75deg, rgba(0, 0, 0, 0.5) 40%, rgb(20, 182, 161) 200%);

2.) If possible: Normalize all the Header Section Metrics & Widget Tables to always display the same structure, widths, and details even if they are 0

Why? To maintain a level of consistency in the way the widgets display.

Header Section Metrics “Boxes”

Normalize Widget Table Details

[butter1234567890]

I think we can and should redo the front end design and look to create a proper design system under Grape Strategic Initiatives. I see in discord TemptingBeef says he can handle front end development. A new design will really bring the life to this. Both can be covered under GSI.

[its.kirk]

Thank you for the great feedback, and wonderful that we have TemptingBeef on board.

I do believe the directory should have less text and more images/graphics related to the DAOs and this is something worth exploring on how we can achieve that, let’s discuss on the next DAO call