Start creating our design principals / design system

[froi]

What are Design Principals

From the Interaction Design Foundation

Design principles are widely applicable laws, guidelines, biases and design considerations which designers apply with discretion. Professionals from many disciplines—e.g., behavioral science, sociology, physics and ergonomics—provided the foundation for design principles via their accumulated knowledge and experience.

In other words they are the guide rails that will shape how we think, brainstorm, and implement design for our projects.

Why do we need this

Part of what we are trying to do is re-imagine what and who Code for Puerto Rico is and wants to be. In the past we've never really had a structured approach in how we created and planed our projects, outreach, and branding. This is the start of aligning all of these ducks in a row.

The other goal is to establish a baseline for all our projects, a set of guides that all official projects should follow. This will ensure a better experience for our users and community. It also show's the why of our decisions. Having all our properties and projects feel (not look) the same creates trust in our users and shows the way for other initiatives.

---

Make no mistake this is a huge undertaking for a small team like us. Adding to this everything that is happening across the world, it just makes this feel even bigger. Thankfully there are a number of design principals and design systems that can help us achieve what we want to accomplish.

Resources

These resources are meant to serve as inspiration and a starting point for our efforts. Some major research needs to happen before we decide what we want to do.

Collections

• principals.design

From government

• United States Web Design System
  • Website standards
• UK Digital Service Design Principals

From private companies

• GitHub Primer
• Microsoft Design
• Airbnb Design

[allthedoll]

@froi I think this all looks really good. I'd like to point out an additional resource specifically for writing image alt text for the blind at Perkins School for the Blind because accessibility shouldn't be an afterthought (you know this, I'm just shouting for posterity).

[jamesxv7]

@LaysCurbelo, @froi & @jpadilla
In the spirit of facilitating the visualization of the assets in the repo I have created the following document. Additional I added a link for those who want to see it in Figma.

I understand that the team is working on completing this type of document.

[froi]

Sweet! ❤️ ❤️ ❤️

Thanks for working on this @jamesxv7. 🎉 🎉

A quick thought about this issue, it's meant to be for us to reuse/create a design system that others can use for their projects not necessarily the look and feel for Code for PR itself. I want this issue to focus on how we can help people make accessible apps quickly and how we as a brigade can build our tools with a system that enforces good practices.

Does this make sense? Please let me know if this is already understood and you are working towards that. If you are more interested in the branding for Code for PR that's awesome too but I'd prefer to move that conversation to a GH discussion or another issue to keep the conversation focused on the topics.

Thoughts?

CC/ @jpadilla

[jamesxv7]

Understood, fully agree and aligned. I'm going to create an issue with the summary of all the details discussed on Github and Slack.