Epic: open design system V1

[nloureiro]

This epic is part of our Q2 roadmap #6161, Q3 roadmap #7166, Q4 2022 roadmap: #8399 & Q1 2023 #9090

Description

The idea is to create a framework to open the design process to the community. Alongside the fact that ethreum.org is an open-source project, we think the design should be too.
This is a "new concept" for the design field. There is room to be continuous improvement.

**Proposal on how it will work **

Based on the same workflow for the code, PRs and issues, we will try to build a similar system, but with Figma in the mix.

Github will be the center and the base for all proposals and discussions. It can probably be used to create new PRs code in the sense that it will be implemented.

Goals

• Improve the overall site design
• Better consistency across the pages
• Improve the user experience
• Bring the community closer to the project
• Design in the open for full transparency of the process

Checklist

• Have a community call to discuss this framework and get feedback.
• Create the de base design system.

Q2 update
We have been working on the Design System on Q2 2022, and we achieved the goals:

• Create the base Figma file (https://www.figma.com/file/NrNxGjBL0Yl1PrNrOT8G2B/ethereum.org-Design-System?node-id=0%3A1)
• Create the Foundations for Color, Typography, Spacing, Illustrations, Brand, and Layout base.

With this base file, we can start creating the components, all based on these core foundations.
Remember that some decisions were made with future migration to Chakra UI. These impact the spacing, media queries, and design token rules. This migration is not scheduled yet but probably will happen during Q3 and Q4.
The Design system should be ahead of that migration to take advantage of the rework of some components and push minor design improvements that will make ethereum.org more cohesive and appealing and improve the overall user experience.

Q3 Main goals
The team will continue to work on this EPIC this quarter, with the main tasks already planned:

• Create the header Component.
• Create the Footer Component.
• Create the Hero Component.
• Improve the gradients in the color library.
• Publish the file on the Figma community.

We will have more tasks that can have an awesome contribution to the community. We will prepare an easy-to-use and track way of contributing to the ethereum.org design system.

Q4 Main goals
The team will continue to work on this EPIC this quarter, with the main tasks already planned:

• Create the template for an MD-based page.
• Add Accordion components
• Add left navigation component
• Add the modal component
• Add the full-width section component, like the one used on the homepage
• Update the file on the Figma community
• Community call on Design focus on the DS system to plan future contributions
• Plan and prepare the Figma to code EPIC to start in Q1 2024

Q1 2023 Update

This Epic is close to the end of the V1.
We made some changes to the planning of the design system to have smaller epics and more collaborations from the community.

To achieve a tangible and usable V1, we are closing the documentation and then calling as a closed version and publishing.

Here are some details from the overall planning and achievements for the Design System V1 here using some simplified slides: (full version here)

The overview of the Design System V1

High-level uses for different personas to start to use the Design system V1

Zoom out approach to V1, V2 and V3

The overall comparison and evolution of the three versions before having a finished version of the Design System.

The next steps are:

• Improve overall documentation
• Change the readme.md to add this to the “ways to contribute”
• create a new issue for V2

[github-actions]

This issue is stale because it has been open 45 days with no activity.

[github-actions]

This issue is stale because it has been open 45 days with no activity.

[samajammin]

This epic had reduced focus in Q3 as a result of Geth website design work (see #7166 update for details) but we still managed push progress forward across 1) foundations, 2) components, and 3) layouts. We also synced the design system with our Chakra UI implementation, laying the ground for a future code implementation of the design system.

The primary pieces we worked on this quarter:

• Foundations / Typography > added style for display big statistics numbers
• Foundations / Color > added new color for visited state
• Foundations / Icons > added new icons
• Base Components / Navigation > added breadcrumbs navigation
• Base Components / Buttons > changed the buttons behaviour for mobile
• Base Components / Tooltips > new component
• Composed Components / Hero > consolidated variations and added the “big numbers” variation
• Layouts / Base layout > created and is ready

Some fun stats since the we published the design system on the Figma community: >1,500 views, 21 likes and 291 downloads.

Thank you @nloureiro for continuing to lead this effort, with support from @konopkja and many others! Expect us to continue this work through Q4 in coordination with the UI library rollout.

Want to get involved? Follow along in Figma and join the conversation in our #design Discord channel.

[Dev-Liz]

Hello, @nloureiro @samajammin I'm an intermediate-level UX Designer enthusiastic about blockchain products.

I'd love to contribute to this project, and would like to know if it's reserved for the core team only, or if there is any way I could come in.

[nloureiro]

Hi! Thank you for reaching out.
Definitely not reserved for the core team, we are a community-driven project and encourage contributions from the community.

On the design side, we have been trying to get a good framework to make it easy to contribute and incorporate into the main epic flows, but at this point, we haven't set a good way to do so.

We are making some documentation to expand on how to contribute to design, but the tl:dr might be around this list:
A. Providing design critique on prototypes
B. Contributing to the Design system
C. Raising issues with the current ethereum.org design in GitHub
D. Proposing design changes to the website
E. Helping with UX research
F. Writing web3 UX/design content
G. Drawing new illustrations for the website

Do you have an idea of how you could contribute? Does it fit on any of these points?

[Dev-Liz]

Yes @nloureiro

I'd love to help majorly with:

• UX Research &
• Writing web3 UX/Design content

I could still contribute to any of the other options when necessary (except drawing illustrations).

Please let me know where to get started.

[nloureiro]

i

This is awesome. Thank you.

Interesting that you mention "Writing web3 UX/Design content" because @konopkja and I have been talking about having more design focus documentation on ethereum.org

Curious to hear your thoughts on this. What topics do you think ethereum.org should cover no design for web3?

[nloureiro]

Yes, we can have a zoom meeting every Friday. We need to get organized and discuss more projects that need to be done.
…

Thank you for your comment. For now, a call on Fridays might be too much.

Internally we agree to close this EPIC once we:

• Close the WIP components
• Do some cleanup on the file
• Add and review the documentation inside the Figma file
• Publish the updated V0.3 on the Figma community with a change log

I will update the scope of this epic with these topics, which might take 2 to 3 weeks in January.

This is the link to the Figma WIP, please leave any comment/suggestion/ bug you found, and I will address it.
https://www.figma.com/file/NrNxGjBL0Yl1PrNrOT8G2B/ethereum.org-Design-System?node-id=0%3A1&t=6Tf3zTQVwDl1WCbY-1

Meanwhile:

• we are updating "how to contribute" to have the framework and proceedings transparent to everyone and, be as easy as possible to contribute.
• I will create new EPICs or "Design System Issues" on components that need work or are next to be added to the Design system. Then you can jump in and help build the design system.

In the process, we might have a few community calls or even specific task calls if needed, but all the work needs to be documented here on Github.

Does this make sense? do you have any ideas on how to contribute?

[Dev-Liz]

i

This is awesome. Thank you.

Interesting that you mention "Writing web3 UX/Design content" because @konopkja and I have been talking about having more design focus documentation on ethereum.org

Curious to hear your thoughts on this. What topics do you think ethereum.org should cover no design for web3?

Getting started in web3 as a designer, can be very daunting because there are little to no resources available for designers (unlike developers)

ethereum.org could cover topics that would easily onboard designers from web2 into web3. Such as:

Introduction to web3 Design

• Difference between web1, web2 and web3 Designs (what makes web3 different)

Web3 Fundamentals

• Web3 Terminologies
• Web3 tokens (and why we need them) ?
• Web3 wallets
• Dapps
• DAOs (How they work)
• Web3 Design principles

Analyzing web3 products

• Ui Elements and components design
• Interaction and flow

Web3 Design Basics

• Wallet interaction
• Interaction with blockchain protocols
• Defi Product Design
• NFT Product Design
• Designing for web3 Governance

User Research and Usability testing in web3

Glossary

Resources

Contributing to web3 Design projects

We could further break each topic down into subtopics.

This is open to modifications @nloureiro

[nloureiro]

i

This is awesome. Thank you.
Interesting that you mention "Writing web3 UX/Design content" because @konopkja and I have been talking about having more design focus documentation on ethereum.org
Curious to hear your thoughts on this. What topics do you think ethereum.org should cover no design for web3?

Getting started in web3 as a designer, can be very daunting because there are little to no resources available for designers (unlike developers)

ethereum.org could cover topics that would easily onboard designers from web2 into web3. Such as:

Introduction to web3 Design

• Difference between web1, web2 and web3 Designs (what makes web3 different)

Web3 Fundamentals

• Web3 Terminologies
• Web3 tokens (and why we need them) ?
• Web3 wallets
• Dapps
• DAOs (How they work)
• Web3 Design principles

Analyzing web3 products

• Ui Elements and components design
• Interaction and flow

Web3 Design Basics

• Wallet interaction
• Interaction with blockchain protocols
• Defi Product Design
• NFT Product Design
• Designing for web3 Governance

User Research and Usability testing in web3

Glossary

Resources

Contributing to web3 Design projects

We could further break each topic down into subtopics.

This is open to modifications @nloureiro

@Dev-Liz, this is great. Thank you.

I've created a new issue to separate the conversation from the design system. Please let's keep the conversation there and try to bring more designers to help scope what can be a new epic for the next quarter.

[Dev-Liz]

i

This is awesome. Thank you.
Interesting that you mention "Writing web3 UX/Design content" because @konopkja and I have been talking about having more design focus documentation on ethereum.org
Curious to hear your thoughts on this. What topics do you think ethereum.org should cover no design for web3?

Getting started in web3 as a designer, can be very daunting because there are little to no resources available for designers (unlike developers)
ethereum.org could cover topics that would easily onboard designers from web2 into web3. Such as:
Introduction to web3 Design

• Difference between web1, web2 and web3 Designs (what makes web3 different)

Web3 Fundamentals

• Web3 Terminologies
• Web3 tokens (and why we need them) ?
• Web3 wallets
• Dapps
• DAOs (How they work)
• Web3 Design principles

Analyzing web3 products

• Ui Elements and components design
• Interaction and flow

Web3 Design Basics

• Wallet interaction
• Interaction with blockchain protocols
• Defi Product Design
• NFT Product Design
• Designing for web3 Governance

User Research and Usability testing in web3
Glossary
Resources
Contributing to web3 Design projects
We could further break each topic down into subtopics.
This is open to modifications @nloureiro

@Dev-Liz, this is great. Thank you.

I've created a new issue to separate the conversation from the design system. Please let's keep the conversation there and try to bring more designers to help scope what can be a new epic for the next quarter.

Noted @nloureiro

[nloureiro]

This EPIC will be followed by this one > #9431