-
-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Have Site-Wide standards for Colors that developers can use #991
Comments
Updated issue title and included current versions of the logo as part of the scope. |
@JohnHaoHuang @sei1122 Moving this issue to the Prioritized Backlog. I'd like to encourage thinking about a redesign of the site, but I'd like to wait until Seiko is finished with her Heuristics issues. I like what is happening with the color scheme changes and perhaps we can use those elements in the new design plans. Focus on making progress on your current issues, but this would be next in line to take on. |
@sei1122 Assigning this to you. Given the work you have done recently, it is apparent that standards need to be created for all of the design elements for Food Oasis. As part of the scope for this issue, I am including the development of a Communications Guide, Communications Guide for Code for America's Get Your Refund program. All projects should have this for creating slide decks and documents. This should match anything created for the website, which is why I am adding it to the scope of this issue. |
Here are things to consider and plans. Let me know if you have any suggestions @fancyham, @entrotech. How do we want to maintain the design system as a team?
This is my suggestion for the design system file maintenance. It is similar to the dev environment
Question to ask Dev team:
MVP of this project
|
I'm more familiar with interaction design stuff, less so with the visual, style guides, and communicating standards but… I'd love if we could include in the style guide lots of vision / exemplar / example / archetype screens. Showing things like the landing screens and the logic for how our layouts respond to different display sizes. Full-screen layouts would show how elements fit together, spacing, color etc. I think that'd be good for the broader team, also, since then everyone could see what we're aiming for, even if they don't understand CSS or the tech side. The CSS would be a subsequent step or artifact, I think? Getting to those exemplar screens / layouts: It would be nice to have a design process where we can create mockups, compare and contrast different styles/options where we can try out ideas and do several rounds of design refinement to get to the final 'vision' example screens? That could be a larger project where multiple designers contribute to it (visual designers in particular would be great), too, as that could be quite fun as well as bringing really different approaches into consideration. |
@fancyham, I will ask about more your vision at the meeting. Do you have any example that I can look at? |
Thinking more of the rebranding / mood board direction / ideal layouts and vision mockups side of things. Something where we can share inspirations and ideas, but then to distill those ideas into our own designs with vision layouts. I'll see if I can find something sharable — I'm thinking we could use one of the figma pages as a giant wall for design ideas and inspiration to start. |
I see I got it. |
There are some Figma tools that make export to CSS easier — might be useful to make designs, then to export CSS that the developers can use without additional modification, possibly making incremental site changes easier? One example: Builder.io - Figma to HTML, React, and more (thanks, @nkiwan ) |
Todays meeting, we talked about what the goal of this issue is, which is, we think, a way to make it easier for both developers and designers to refer to a single 'source of truth' for how buttons, fonts, and colors should look. @sei1122 is going to talk to devs to ask how they use CSS and to talk about how we might be able to make this easier to maintain. Bryan (me) mentioned that it's a lot of manual work to make small changes and keep track of those canges and asked if there's a way we can keep the Figma files and CSS in sync somehow. Either for Figma to export CSS, or perhaps to import CSS into Figma. I also mentioned "exemplar' (example) pages / archetype pages / dummy layout mockups are really useful for everyone to get a sense of how all the pieces fit together on the page, so we all understand what the intended look and feel is. And finally, we discussed a separate effort to do big-picture improvements to the site design — mood boards, competitive analysis, ideation and discussion, and creating vision mockups for how we'd like the site to look and feel so that we can see our target, even if it take a little while to get there. |
I'm going to attend Monday's dev meeting. Questions to ask engineers.
|
@staceyrebekahscott, @fancyham. Here are some breakdown idea
|
@sei1122 @fancyham I definitely like the idea of setting milestones for this. I'd like to wait until we complete our roadmapping sessions before adding these to Github. But all of these ideas will be considered during roadmapping so the work can be aligned with other project priorities. The breakdown above is a great starting point. Thanks Seiko! |
I finish auditing the Food seeker and the admin site. https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7817 |
I created the things we need to clarify. https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=7578%3A11874 |
I had a meeting with @entrotech and @fancyham today. Next Step
https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=7578%3A11874 |
Issue #1419 fixes background color on "Back to List" link on the Stakeholder Detail panel |
Meeting Note: Nov 29 We checked each item on this file. Next step
|
Created sample colors based on the last meeting feedback.
Action Item: |
Next step
|
@entrotech https://www.figma.com/file/D3oq9QOXl0rFkwr |
Narae used these colors for buttons and thinking to include the colors. She used this to generate colors and naming Things to consider
|
I met with @entrotech on May 16th to learn about our code's naming conventions for colors. Material UI, the color setting is main, light shade, and dark shade settings.
import { createTheme } from '@mui/material/styles';
Reference After discussing color settings with John, I have decided to incorporate the semantic names into our color palette.
Here is the final design of the color palette |
Goal:
Make it easy for developers to use CSS styles/layouts confidently, and for designers to be able to easily update design standards.
This is probably figuring out the process for how do we best work together — perhaps CSS documents, working in Figma, etc. (perhaps working in Figma, Export the CSS from Figma, then that CSS becomes the new site-wide CSS??)
Overview
The application currently has not implemented agreed-upon standards for colors and typography. We should have documented standards that are implemented in the code base as re-usable styles. This will require coordination between UI/UX and developers.
Action Items
Resources/Instructions
Color settings
https://github.com/hackforla/food-oasis/blob/develop/client/src/theme/colors.js
The text was updated successfully, but these errors were encountered: