List of design clean up items

[svandekerkhof]

There now is a separate page in the Figma file called 'most current design' where you can find the designs for these items.

• The spacing between the different elements on the website seems off, you can measure distances in Figma to look that up.
• I’ve changed some of the font sizes compared to the first mock-up to make it more consistent. There is an overview of the font sizes and styles used in the Figma file.
• I updated the color of some of the non-map UI elements, they mainly went from shades of green to black and gray.
• Check and adjust the padding of UI elements: all the tab bars and the animation button have a 10px padding all around. Please check the padding on the pop-up on hover, that looks different on the live website compared to the design.
• About the color of animated arcs, I think an orange/gold color (another reference to money!) could work well. I’ve added the color to the Figma file.
• I added an introduction to the project at the top of the page to the Figma design, this can replace what is there now (‘Welcome to Green Equity’ etc.).
• There now is a design for the pop-ups on the ‘disadvantaged communities’ map. I also added a box with a note about the data used for that map.
• There also is a design now for the pop-ups for when a user is exploring a category other then ‘all categories’, the example in the Figma file is for the transportation category.
• I’ve integrated the animated map into the ‘Funding per capita’ map by added a button at the bottom of the map. This button should only be active when a user is looking at the data in the ‘all categories’ tab.
• A slider on the control bar for the animated map was added. Overall the control bar will need to be a bit slimmer to fit between below the map and above the legend.
• For the pop-ups on hover, it would be great if the top of the pop-up can be aligned with the cursor of the user. Currently it centers the pop-up with the cursor.
• Drop-shadow and a white border of 2px on the inside of the state shape needs to be added. Info on the drop shadow can be found in the Figma file with the info on the colors.