TWE Design System: Design Microsite

joshfishman commented 1 year ago

Dependencies

474

Overview

We need to design a template for our Jekyll based Website. This website is meant to be an easily themed Design Systems team resource.

Action Items

[x] Review MkDocs Material Theme
[x] Create a wireframe of Microsite
[x] Design Microsite
- [x] Structure
- [x] Header
- [ ] Footer #408
- [x] Subnav
[x] Design Preliminary Microsite Component Cards (the rest will be addressed on #402)
[ ] Identify and create separate layouts needed for various components #474

Resources/Instructions

397
444
MkDocs Material Theme
Remaining issues that have to be finished for final microsite templates to be chosen
https://github.com/hackforla/internship/issues/408
https://github.com/hackforla/internship/issues/411

meetminji commented 1 year ago

1st draft

George48U commented 1 year ago

hi there

would love to contribute

meetminji commented 1 year ago

Draft 2

joshfishman commented 1 year ago

@meetminji this is looking great! Can you please remove the logo underlay in the background of the body?

George48U commented 1 year ago

@meetminji this is looking great! Can you please remove the logo underlay in the background of the body?

I'm a UI/UX designer that recently joined github to help with ongoing projects. I stumbled found yours and I really like what you're doing with microsite.I'd like to contribute but am having difficulty understanding github and how it works. Could you please tell me about your work and how I may help?

meetminji commented 1 year ago

@joshfishman Removed the background and added a sub header nav. for the component

meetminji commented 1 year ago

@George48U

Hey! Github can get confusing to get around! I am currently building wireframes for a microsite for TWE's Design components. There are many issues for the designers and there's one assignee per design issue. It would be great to get your feedbacks on my work and maybe we could discuss in a design team meeting an issue you could work on! Thank you!

George48U commented 1 year ago

That would be fantastic. Could you please provide a link to your work so that I may look at it?

meetminji commented 1 year ago

That would be fantastic. Could you please provide a link to your work so that I may look at it?

https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=2-45&mode=design&t=pmDvb1X5dr7fbEWd-0

it is under MVP Design System and it's all the way at the bottom right.

George48U commented 1 year ago

Hey! Github can get confusing to get around! I am currently building wireframes for a microsite for TWE's Design components. There are many issues for the designers and there's one assignee per design issue. It would be great to get your feedbacks on my work and maybe we could discuss in a design team meeting an issue you could work on! Thank you!

i just went through the MVP design system nice work, thoughtful layout, clear information hierarchy, I'd be interested in participating in a design team meeting to explore possible issues I could contribute to. Just let me know when the meeting is scheduled

meetminji commented 1 year ago

Hey! Github can get confusing to get around! I am currently building wireframes for a microsite for TWE's Design components. There are many issues for the designers and there's one assignee per design issue. It would be great to get your feedbacks on my work and maybe we could discuss in a design team meeting an issue you could work on! Thank you!

i just went through the MVP design system nice work, thoughtful layout, clear information hierarchy, I'd be interested in participating in a design team meeting to explore possible issues I could contribute to. Just let me know when the meeting is scheduled

thank you! Have you been to one of the team meetings before to onboard? I am not sure we have met. We also communicate through Slack under #internships if you haven't joined yet. We have all team meetings on Thursdays at 10 am and Design team meetings are on Tuesdays at 12:30 pm. Today's meeting was canceled.

George48U commented 1 year ago

Hey! Github can get confusing to get around! I am currently building wireframes for a microsite for TWE's Design components. There are many issues for the designers and there's one assignee per design issue. It would be great to get your feedbacks on my work and maybe we could discuss in a design team meeting an issue you could work on! Thank you!

i just went through the MVP design system nice work, thoughtful layout, clear information hierarchy, I'd be interested in participating in a design team meeting to explore possible issues I could contribute to. Just let me know when the meeting is scheduled

thank you! Have you been to one of the team meetings before to onboard? I am not sure we have met. We also communicate through Slack under #internships if you haven't joined yet. We have all team meetings on Thursdays at 10 am and Design team meetings are on Tuesdays at 12:30 pm. Today's meeting was canceled.

You are welcome. I have not attended any of the past meetings, and you are correct that we have not met. My email address is odegeorge3@gmail.com. You can add me to the Slack channel. thank you

meetminji commented 1 year ago

moved navigation to the left side
categorized components to avoid long list
sub navigation on the right for components in category
created tabs for class, states, and code

ExperimentsInHonesty commented 1 year ago

@meetminji Please provide update

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

remember to add links to the top of the issue if they are going to be needed again.

meetminji commented 1 year ago

updated accordion design. created a microsite wireframe for dropdown and accordion.
need to review updated designs.
will have around 5 hours to work on this issue for the next week
hope to be done with this issue in a couple weeks

meetminji commented 1 year ago

Update for next week:

Instead of two separate tabs for the file component, it should be open and closed state.
For state, change to hover and selected state for closed and open.
Leave example blank for now and later add screenshot of the component from website (when created).
Accordion might not pass accessibility test. Change teal to full saturation with white text.

meetminji commented 1 year ago

Included an open and closed state
changed accordion item color to full saturation with white text

meetminji commented 1 year ago

Update for next week:

for accordion item, change color to mid-green. Same color as hover/select state as accordion parent
accordion item hover/select state color is green.

meetminji commented 1 year ago

Updated color on accordion item

sunannie27 commented 1 year ago

@meetminji The design is accepted once the first section is renamed to "Class" in Figma.

meetminji commented 1 year ago

Renamed first section to "Class"

joshfishman commented 8 months ago

@karina-sato @mklmrgn Great quick catch up today -- just a reminder about what I flagged today about the microsite design to website process.

I am concerned that information created in the design process is not being translated to the microsite template. I

believe we should edit both the way you present components in design and the way we present them on the microsite so that all info is more easily translated / included (maybe they should be the same exactly?)

Looking forward to your thoughts.

karina-sato commented 8 months ago

Thanks for the input @joshfishman

We'll need to further understand what type of information is not being translated to the microsite so we can think of ways to improve. Can you tell me what information is/isn't useful for the dev team on the Master Layout? What information is missing from the microsite template?

Cause combining both the microsite and the master layout would require a lot of effort and time for the design team, since we have different component variants and states for a single component.

The master layout I'm talking about is this:

joshfishman commented 2 months ago

@mklmrgn Can you include the footer in this design so it is complete

KC-skc commented 1 month ago

@mklmrgn Please provide update

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."