Style Guide - Githubissues

bethanyios commented 4 years ago

Principles

Simplicity: for accessibility reasons and for a clean aesthetic. People struggling with homelessness face many difficulties - this app should be a place that provides calmness and an easy route to solution. Transparency: in order to maintain the vision of signpost as community-driven tool for homeless people to use, and have trust in. Consistency: the app must be very easy to use and be trusted as valuable, consistency encourages this. Inclusivity: there are many complexities to the issue of homelessness, and therefore many different people struggling with it. The goal of the app is to create a tool that can be used by all personas and is adaptable to their personal needs. Matching: connecting the system and real world so that the app speaks the language of the user with concepts that are familiar. Control: ensuring there are ways the user can take control if they make a mistake.

Design choices throughout app

Accessibility - at the forefront of all design choices Icons - use imagery and icons to indicate services for those who speak different languages or have lower literacy levels (use words in combination to add clarity for those who will understand). Mobile-first Design Messages/alerts - to bring clarity if the user journey is not clear to some. Navigation - ability to guide through the app as the user wishes, going back and forth easily so the user is able to check over information. Language - plain and simple communication.

Colours

Coral - accent colour Screen Shot 2020-01-20 at 12 35 09

Mako - foreground colour Screen Shot 2020-01-20 at 12 35 24

Light grey - transition colour Screen Shot 2020-01-20 at 12 35 38

Texture options: Screen Shot 2020-01-20 at 12 37 41

Icons: Screen Shot 2020-01-20 at 12 40 08

Typography

Headers: Passion one Content: Roboto?

Proportions

Golden Ratio --space-xs: 0.382rem; --space-s: 0.618rem; --space-m: 1rem; --space-l: 1.618rem; --space-xl: 2.618rem; --space-xxl: 4.236rem;

bethanyios commented 4 years ago

Landing page

I like the background of image 1 but the buttons of image 2 so would like to combine them.

renatadev commented 4 years ago

Textured background style:

background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ff9b77' fill-opacity='0.49' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");

Can be edited here

fac18 / signpost