Ontwerpen
Bij het ontwerpen heb ik rekening gehouden met de meegeleverde [brand-guide].
Hi-fi schetsen zijn gemaakt in Figma.
:root {
--primary-color: #ffc200;
--primary-color-white: #fff;
--primary-color-black: #000;
--black-75: #404040;
--black-50: #808080;
--black-25: #bfbfbf;
--default-padding: 1em;
}
@import url("https://fonts.cdnfonts.com/css/t-star-pro");
@font-face {
font-family: "TStarProRegular";
src: url("../fonts/TStarProRegular.ttf");
font-weight: 500;
font-display: swap;
}Voorafgaand aan het schetsen heb ik eerst een analyse gedaan op de opdracht. Het maken van een soort prijzenpagina waar contracten te zien zijn.
Ik ben begonnen met het maken van een statische landing voor dekstop, misschien een aparte volgorde. Maar ik had nog geen inspiratie voor een mobiele layout.
Hier is een kleine hint te zien van wat er onder bij de verschillende contracten verwacht kan worden.
De inspiratie hiervoor heb ik van Pinterest & een andere bron vandaan. Bronnen staan beschreven in de Read.me en in de analysefase.
Het idee achter dit ontwerp is dat de eindgebruiker verleid wordt om voor het middelste service contract te gaan. In dit geval is dit het middel-dure contract. Mensen zijn vaak geneigd om niet tussen het duurste en goedkoopste te kiezen, de middenweg dus. Daarom werkt een ontwerp waar drie contracten zijn uitgelicht het beste, toevallig is het redelijk nieuw binnen Fivespark dat zij een derde contract aanbieden.
Na een tijdje weer rond googelen ben ik bij een nieuwe bron gekomen, een artikel waarin meerde layout mogelijkheden voor een prijzen weergave worden uitgelegd.
In eerste instantie had ik de drie varianten even getekend om te kunnen zien welke het best zou werken voor zo min mogelijk layout shifting/changing.
In variant één worden de contracten op elkaar gestapeld en zijn deze features daar binnenin uitklapbaar.
In variant twee worden de contracten in een lijst naast elkaar gezet waar de gebruiker dan doorheen kan scrollen.
In variant drie worden de contracten onder drie buttons gezet. Deze methode zorgt ervoor dat er bijna tot geen layout shifting is. Deze methode heb ik dan ook gekozen om uit te werken.
Ik heb wat breakdown schetsen gemaakt om de HTML opbouw voor mij zelf wat duidelijker te maken.
Voor de desktop landingspage heb ik een paar simpele HTML elementen beschreven die ik nodig zou hebben.
Voor de mobile heb ik ook een schets gemaakt waar ik variant drie heb uitgewerkt in een breakdown.
In Figma heb ik het een en ander in elkaar geknutseld. Voor de dekstop heb ik een hi-fi schets gemaakt.
Brandbook - Hoe zien we eruit.pdf
Mijn minder sterke punten zijn ontwerpen, dus hiervoor ben ik naar een teamgenoot gegaan om feedback te vragen over mijn figma ontwerp. Hier hebben we gekeken naar iconen kleuren. Hier hebben we het en ander aangepast.
In deze commit heb ik het 'vink' & 'kruis' icoontje aangepast naar huisstijl kleuren.
Ik heb alleen de svg's aangepast, die van Figma afkomstig zijn.
De grijze en groene iconen zijn verandert naar de zwarte-gele daar rechts van.
Aan Tristan heb ik gevraagd of hij naar mijn landingspage wilde kijken en eerlijk te vertellen wat hij er van vond. Ik heb hier waardevolle informatie gekregen, waar ik uiteindelijk toch andere designkeuzes voor heb gemaakt.
