Create a style guide based on the SPY website

hackforla / HomeUniteUs

We're working with community non-profits who have a Host Home or empty bedrooms initiative to develop a workflow management tool to make the process scalable (across all providers), reduce institutional bias, and effectively capture data.

https://homeunite.us/

GNU General Public License v2.0

36 stars 21 forks source link

Create a style guide based on the SPY website #13

Closed c-fuchs closed 4 years ago

c-fuchs commented 4 years ago

Overview

We need to match the look and feel of the SPY website.

Action Items

Document fonts, color schemes, and other design elements of the SPY website.

Resources/Instructions

Link to Figma Board SPY website Useful plugin to examine a site's elements without knowing code: Whatruns

V1 of Style Guide

ExperimentsInHonesty commented 4 years ago

Logo banner4

Top menu

Footer

Buttons

Infographics

Bullet and link styling

ExperimentsInHonesty commented 4 years ago

@AlexChh93 's figma

c-fuchs commented 4 years ago

@AlexChh93, From our 1/18 call let's:

[x] Create check mark and X icons for matching tables.

ETA is Saturday (today 1/18) end of day

ExperimentsInHonesty commented 4 years ago

As per our meeting of 1/8 discussion.
@AlexChh93

[x] Please add a screenshot from the SPY site to show the logo in relationship to the menu in order for developers to be able to eyeball the ratio easily. This would go on the Logo page of the style guide, in addition to the logo by itself.

awadethomas commented 4 years ago

Creating a To-Do List

Create & refine dedicated areas for Typography (font to use & replacement font), Color, Buttons & Button States, All Icons, Nav Structure, Pre-made Elements, Logo Treatment
Try to incorporate grids into the style guide to show spacial awareness

ExperimentsInHonesty commented 4 years ago

@c-fuchs notes from meeting 2/4: Complete style guide, update with new screenshots (e.g. check and “x” icons and colors), and put in its own, linkable location to be published on project page on HfLA site

awadethomas commented 4 years ago

Style guide is now more up-to-date. We added Forms, updated Button sizes, Logo spacing, & additional colors

awadethomas commented 4 years ago

As an idea of what we can do as a next: https://biings.design/#/

c-fuchs commented 4 years ago

Great! Would you put these into a style guide V1 powerpoint to hand off to SPY @awadethomas ?

ExperimentsInHonesty commented 4 years ago

@awadethomas Will you be able to make this slide deck before Tuesday?

c-fuchs commented 4 years ago

Style Guide moved to Google Drive