Huisstijl
Last updated
Last updated
Ik heb onderzoek gedaan naar de huisstijl van PICTURE. Aangezien het een functionele tool is, waar een goede gebruikerservaring voorop staat, is de vormgeving niet erg spannend. Wel heb ik op basis van nieuwe inzichten een kleine slag geslagen in de huisstijl.
Iconen worden vooral functioneel gebruikt in bijvoorbeeld buttons. De stijl van de iconen is minimalistisch met weinig details. De stijl van de iconenset uit het deze huisstijl heb ik hergebruikt aangezien ik dit een goede, functionele set vond met precies de juisgte hoeveelheid detail.
Het logo is strak en de C van picture moet een CT-scan voorstellen. Dit logo heb ik intact gelaten bij de uitbreiding van de tool omdat ik dit een sterk en goed passend logo vond.
Kleuren zijn gebaseerd op basis van onderzoek naar dark mode richtlijnen van google Material Design. Door mindel velle kleuren te gebruiken waar de saturation niet zo hoog is behoud ik de leesbaarheid. Google zegt hierover het volgende:
"A dark theme should avoid using saturated colors, as they don't pass WCAG's accessibility standard of at least 4.5:1 for body text against dark surfaces. Saturated colors also produce optical vibrations against a dark background, which can induce eye strain." (Google, z.d.)
Google heeft ook een tool gemaakt die je helpt met het zoeken van een geschikte complementary kleur voor je (dark mode) design. Ik heb deze tool gebruikt om te kijken welke kleur ik naast blauw kon gebruiken als steunkleur. De volgende tint kwam hieruit;
Om deze reden ben ik gegaan voor een combinatie van blauw en oranje. Aangezien ik niet meer elementen had waar nog een andere kleur voor nodig zou zijn heb ik het bij deze twee kleuren gelaten. Wel heb ik de oranje iets meer oranje gemaakt dan op bovenstaande foto omdat dit op deze manier beter leesbaar was met mijn achtergrond.
Ik heb gekozen voor lettertype Poppins aangezien Poppins een geometrische letter is bestaat deze uit vormen en zijn de stokken even lang, aldus Google Fonts (Google Fonts, z.d.). Voor de kleine teksten in de tool vond ik dit een fijner, overzichtelijker geheel. Verder heb ik ook bewust voor een schreefloze letter gekozen omdat de pixels van een beeldscherm schreven snel onduidelijk kunnen maken. Het vorige lettertype van de huidige tool was vrij smal en dun, waardoor deze lastiger te lezen werd bij kleine lettergroottes. Poppins is een stuk breder en beter leesbaar. Ook heb ik met ook op development gekeken naar google fonts omdat deze vaak het makkelijkste te implementeren zijn en hier geen licentie kosten aan verbonden zijn.
