2. Ontwerpen ✏️ - TessaViergever/frameless.io GitHub Wiki

Omdat er geen ontwerp is vanuit Frameless en het nog niet vast ligt welke content er precies op de website komt en waar, heb ik een sitemap schetsje gemaakt. De architectuur van de website visueel maken helpt overzicht krijgen op welke mogelijke pagina's er zijn, waar deze op de website komen te staan en vanuit waar je ze kunt bereiken. Deze tool geeft inzicht op de verbinding tussen de user stories van het planningboard en hoe die vertalen naar een website. Dit hoeft uiteraard niet de daadwerkelijke sitemap te worden, er kunnen dingen veranderen maar het geeft houvast en concretiseert de user stories voor me.

Omdat Frameless nog geen huisstijl heeft, heb ik deze week wat inspiratie gezocht (vooral voor kleuren). Hier heb ik een Figma board van gemaakt. Deze heb ik besproken met Y. Zij gaat dit met R. bespreken zodat ik weet hoe zij erin staan. Het lettertype is al wel besloten, hier zal ik verder niets meer voor opzoeken.

De uiteindelijke huisstijl heeft elementen van mijn mood board met een aantal aanpassingen. Yolijn heeft een Frameless bibliotheek gemaakt in Figma, hier kan ik mee aan de slag. Hieronder zie je een stukje van de kleuren waar we gebruik van gaan maken.

Om een beeld te krijgen van hoe de website eruit komt te zien heb ik een aantal schetsen gemaakt. Dit is voor mezelf handig maar ook voor Y&R zodat ik ze een beeld kan geven van wat ik in gedachten heb. Het zijn enkel idee-schetsen, dit hoeft niet het eindproduct te zijn.

📷 Schetsen

homepage	header	hero "window"	ons werk pagina	ons werk pagina (2)

Deze week ben ik ook begonnen met mijn schetsen naar Figma te brengen. Tokens Studio is gekoppeld, Yolijn heeft de Figma huisstijl bibliotheek klaargezet en deze heb ik binnengehaald. Ook kan ik de tokens nu editen. Yolijn heeft een voorbeeld homepage gemaakt, deze gebruik is als referentiepunt in mijn eigen Figma schetshoek. Als eerste ben ik met de homepage begonnen (mobiel en desktop).

Na overleg met Yolijn besloten om bij te sturen om de opdracht wat meer behapbaar te maken: eerst een one page met daarop alle content. Vanuit daar verder uit te breiden naar nieuwe pagina's etc. Hier heb ik een nieuwe schets voor gemaakt.

📷 One page schets

Ook de huisstijl hebben Yolijn en ik aangepast. De lichtere tinten van maroon werden heel erg Barbie, dit past niet bij Frameless. Vandaar dat we een nieuwe kleur ("rosewood") aan het palet hebben toegevoegd. Deze lijken wat natuurlijker aan te sluiten en kunnen gebruikt worden voor de lichtere kleuren na de donkerdere maroon kleuren.

Het zou kunnen dat het palet nog verder veranderd. Bijv. de grijs wat meer roze maken en die samen met petrol gebruiken. Dit is weinig werk omdat we met design tokens werken. Zowel in code als in Figma kunnen de kleuren gemakkelijk aangepast worden.

26/2 Schetsen laten zien aan Yolijn, vragen gesteld en feedback ontvangen. Mijn vragen:

• externe links gebruiken (dan gaat bezoeker van website af) bijv. naar NL DS website? -> nog even geen externe links
• scrollbar? nah
• volgorde onderdelen in orde? -> ja

Opmerkingen Yolijn:

• werkwijze/principes als H2 met daarin: Design Systems, Open Source en Common Ground
• main nav kan er gewoon uitzien alsof er meerdere pagina's zijn maar met anchor links naar juiste plek op website (evt. later met JS detecten waar gebruiker op website is en dat kopje in nav laten zien als actief)

Het is gelukt om componenten en design tokens in Figma wat beter te begrijpen. Het Figma ontwerp ziet er nog niet uit hoe ik het in mijn hoofd heb maar het is fijn dat ik heb kunnen oefenen met de concepten. (Dit ontwerp is ook (nog) niet getest op toegankelijkheid.)

📷 Figma ontwerp week 4

Op 29/2 heb ik mijn ontwerp laten zien aan Rowan, Bryan, Ryan en Ali. Ik heb mijn proces laten zien (van analyseren tot ontwerp) en om feedback gevraagd. Ook heb ik aangegeven dat er nog niets aan toegankelijkheid testing gedaan is op dit ontwerp, dat ik kleuren heb gebruikt die eigenlijk niet in het kleurenpalet zitten (lichtere kleuren) omdat de kleuren in het palet erg fel waren en ik die samen te intens vond. Ook vraag ik me af of het misschien een beter idee is om alleen kleuren van het petrol palet te gebruiken in plaats van ook maroon. Ik heb mijn collega's gevraagd of ze feedback hebben op mijn ontwerp.

• Ryan: gaf aan dat hij het (nb: hij is geen designer) super tof vond, kleurgebruik en spacing voelt voor hem natuurlijk.
• Rowan: vond de rood/roze van de buttons (te?)fel. Ook gaf hij aan dat het een goed idee zou zijn om de header kleur van mobiel en tablet gelijk te houden (dat was ik met hem eens, had die van tablet gekopieerd uit het voorbeeld van Yolijn en de ander zelf gemaakt).
• Bryan: zei dat hij het mooi vond en vroeg of ik in dit ontwerp gebruik heb gemaakt van de bestaande componenten. Ik gaf aan dat ik dit inderdaad heb gedaan, uit de Figma bibliotheek van NL DS met de styling van Frameless. Dat ik niet zeker weet of dat helemaal goed is gegaan en dat ik ook zelf dingen gemaakt heb en dit gecombineerd heb met de elementen.
• Ali: had nog als toevoeging/tip dat er in Figma community ook templates zijn, dat ik daar misschien nog iets aan zou kunnen hebben. Ik gaf aan dat ik weet dat dit er is, maar hier niet naar heb gekeken omdat ik vanuit die NL DS componenten wilde opbouwen en zelf zoveel mogelijk wilde leren van Figma.