Add new project to website: Design Systems

[ExperimentsInHonesty]

Overview

We need to add a new project to the hack for la website so that our project list can be current

Project Details

• Name: Design-Systems
• Name of future project.md file: design-systems.md
• Files you will need to upload to the website repository: design-systems.jpg and design-system-hero.jpg
• Where you will store the files:
  • images go in this folder: /assets/images/projects
  • project.md file goes in this folder: _projects

Action Items

• Take the content listed here and create a new project.md card (skip anything that has strikethrough)
• Download the images
• Add both project card and images to appropriate folders
• Once you have it working on your local environment
  • Take screen shots of the project card on the homepage and the projects project page adding them to issue
  • Reach out to the product manager to ask if they are satisfied by adding a comment to this issue with a link to the screenshots on your issue
• Submit pull request
• Let Product Manager know when its live

Resources

Template for project.md files

Content of the project.md card

• A link to the 600 x 400 image
• Alt image text - 'Hack for LA logo and the title of the project, Design Systems'
• A link to the 1500 x 700 hero image
• Name of project: Design Systems
• A blurb about your project:

The Design System initiative seeks  to empower volunteers with the tools, documentation and templates for creating and maintaining a design system for their HfLA projects.  As Hack for LA continues to scale it has become more essential to create consistent documentation and standards for design deliverables. 

A Design System is a single source of truth for a website’s designers and developers– a collection of reusable components, styles, and code guided by clear standards and documentation. Design systems are now an industry standard used by the website teams of most major companies.

• Links:
• GitHub: https://github.com/hackforla/design-systems/projects/1
• Slack: Design-System](https://hackforla.slack.com/archives/CH2U1CB9Q
• Any resources for a Getting Started link (a link to a wiki, readme(s) or both):
  • Wiki: https://github.com/hackforla/design-systems/wiki
  • Overview: https://github.com/hackforla/product-management/blob/master/project-one-sheets/Design-Systems-One-Sheet.pdf
• What you are looking for skills wise: N/A
• Partner(s): N/A
• Location: Remote
• Status: Active
• Program Area: Civic Tech Infrastructure

[github-actions]

@abuna1985

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 21, 2021 at 12:02 AM PST.}

[abuna1985]

Screenshots of the proposed changes

Click here to screenshots of the proposed Design Systems project card

Project card (desktop)

Project card (mobile)

Click here to screenshots of the proposed Design Systems project profile

Design Systems project profile (desktop)

Design Systems project profile (mobile)

[abuna1985]

Update

1. Completed changes. Awaiting approval from @hannahlivnat to complete PR
2. Just awaiting PM approval
3. Will be available Sunday/Monday to complete this
4. By the end of next week.

[Hanastevenson]

Hi @abuna1985

Thanks for the update. The project card works. The Project profile needs some adjustment. In the current screen shot provide by you there seems to be little padding from the top of the artwork to the navigation.

Please see below the preferred layout. I've left in the bounding box to illustrate. The artwork size needs to be reduced to align with the sides of the 'project overview' white boxes underneath.

[Hanastevenson]

@ExperimentsInHonesty Do we need to review the copy? Highlighting the fact this initiative goes across 20+ product teams?

[ExperimentsInHonesty]

@Hanastevenson i think we took this text from the one sheet. Maybe we should revisit both.

[abuna1985]

@ahoang94 Where is the path to the 'Branding and Assets' folder? Could you provide a direct link to the image?

[ahoang94]

@abuna1985 Apologies, I thought you had access to the folder.

SVG: https://drive.google.com/file/d/1C5SWxzXOOYAD72XSMcDCBCc27Z0VbVSG/view?usp=sharing
PNG: https://drive.google.com/file/d/1aoukvj0QbBcBs8nlzgJuzcNYwDu4uYFC/view?usp=sharing

[github-actions]

@abuna1985

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 5, 2021 at 12:02 AM PST.}

[ExperimentsInHonesty]

@abuna1985 Can we get a PR in for adding the design systems team to the website today?

[abuna1985]

@ExperimentsInHonesty @Hanastevenson Thank you so much for your patience. My apologies for the delay. I have submitted pull request #2365. I will also attach screenshots below for you to see the final changes made.

Project Card/Page final version (desktop)

Hack for L.A. projects design systems page - desktop version

Hack for L.A. projects design systems card - desktop version

Project Card/Page final version (mobile)

Hack for L.A. projects design systems page - mobile version

Hack for L.A. projects design systems card - mobile version

Let me know if you have any questions. 👋 👋 👋

[Hanastevenson]

@abuna1985 @ExperimentsInHonesty
Hi Adam,
Thank you for the update. One small query, on the mobile design are you able to shift the H1 down so there is less padding between the H1 and the card? I understand this may be an extra ticket as it could affect all other project cards, please proceed.

[ExperimentsInHonesty]

@abuna1985 does not seem connected to the repo because its not showing "All Time Contributors" section
see https://www.hackforla.org/projects/design-systems

[abuna1985]

@hackforla/website-merge reopening this issue to make edits and get all-time contributors added

[abuna1985]

Reopening for 1 more round of edits

[abuna1985]

@Hanastevenson Can you please add the following topic to the Design Systems repository (https://github.com/hackforla/design-systems):

• hack-for-la

Note: I have included a link for an article from GitHub on how to add topics

This will help when we are collecting the data from your repo for the project details page.

Thank you! 👋 👋 👋