3.png
1.png

Next step:
An app to help homelessness.

Untitled design.png

What style system did I use?
How did I fix acessibilty issues?

next.png

Style Guide

Below is the style guide I created for "Next Step". My aim was to ensure complete uniformity in style and formatting. A guide to be used by all memebrs of the design team if this project was to be launched.

Colour

images.jpg
Twitter-logo.svg.png

Blue was chosen as the primary colour to fall inline with social medias use of the colour. It promotes comfort,safety and trustworthiness. 

Colour Palette.png

I opted to use #2B2E3D" and "#FAFAFB" instead off Pure white and pure black in order to decrease eye strain

I chose a Flouride Turquoise"#45D3C2" as a  accent colour to compliment the dark navy blue

Wild Blue Yonder #6F7CB3 was chosen as a text colour for subtitles and subheadings

 Wild Watermelon"#FC4A71" was used when hovering to indicate the area to be clicked on. 

Type and Buttons

I opted to use two san serif fonts to promote the modern and minimalist aspect of the brand. Unfortunately I was only able to gain "Mustica Pro" in the Semibold weight as the alternate weights came with a fee.

For this reason most of the app's type was in "Be Vietnam" as i had a larger acess to its range of weights.

If this project came with a budget i would opt to solely using Mustica Pro.

typography guide.png
Typography.png

The creators described  Mustica Pro as a "perfect to serve as the mainstay font for various design and commercial projects."

The created decribed Be Viietnam is as !a blend of technology and humanism ...  the youthful and modern voice of a tech company.

Typography 2.png
bUTTONS.png

Icons are in colour #FAFAFB (colours). For display purposes they are coloured in #2B3566.

next.png

Accessibility

Throughout the design process, I was careful to keep accessibility guidelines in mind.

In terms of the colours used throughout the designs, I  ensured I had a good contrast between colours so that they were accessible to users with visual disabilities.

I used Colourcontrast.cc in order to check the contrast. I was able to experience what colourblind users would see if they were to navigate the website.

green N BLack.png
blue and white.png
black and white.png
next.png