Deze handleiding zal uitleggen hoe analisten/developers/product managers/... feedback kunnen geven op mockups via comments op Figma.
Met een muis: Om te navigeren tussen de verschillen schermen moet je spatie en rechter muisknop tegelijk ingedrukt houden en je muis bewegen.
Met een trackpad: Als je een trackpad hebt, kan je heel makkelijk door de schermen in Figma navigeren, door met je vingers te slepen.
Om in te zoomen naar een scherm, kan je + of - op je toetsenbord gebruiken (dit kan verschillen per toetsenbord). Je kan ook rechts boven zoom opties vinden met verschillende toetsenbord sneltoetsen terug vinden.
Als je een trackpad hebt, kan je ook makkelijk in- en uitzoomen door je twee vingers van of naar elkaar te slepen.
Feedback geven via Figma doe je door comments te laten op schermen.
Een designer bezorgt een Figma link naar mockups. Om comments te kunnen schrijven, moet je eerst een account aanmaken.
Eens je een Figma account hebt aangemaakt, kan je comments laten op specifieke plekken op de schermen.
Om in comment modus te gaan, moet je op het tekst ballonetje linke boven klikken. Je muis zal dan in een pin veranderen. Deze kan je eender waar in het document plaatsen. Wanneer je dit doet, maak je een comment aan. Dan mag je daar relevante feedback schrijven.
Als je per ongeluk op de verkeerde plaats een pin zet, kan je op Cancel drukken, of ergens anders op de scherm klikken met je muis. Dit zorgt ervoor dat de pin verdwijnt.
Eens je je feedback geschreven hebt, mag je op "post" drukken. Dit maakt je comment zichtbaar voor iedereen die toegang heeft tot de Figma link. Je kan een lijst van alle comments zien op de rechter kant van je scherm, wanneer je in "comment modus" bent. Je kan ook reageren op comments en discussies starten.
Ontwerpers bij ABB werken op verschillende gebieden en overlappen ook met mensen in andere disciplines (front-end, analyse, ...). Het is aan jou om te bepalen op welke gebieden je wilt bijdragen. Enkele voorbeelden van wat we doen:
Conceptualisering
Analyse
Interviews afnemen
Wireframing & schetsen
High-fidelity mockups tekenen
HTML & CSS
Testen met klanten
Branding
Presentaties
Designers gebruiken de bovenstaande skillset om aan alle LBLOD projecten te werken die vermeld staan in Producten en Diensten.
Momenteel bestaat de design team uit:
Smooth Sailing: Agency
: Freelance
Wij zijn verplicht de huisstijl van de Vlaamse overheid te volgen. Zij hebben uitgebreide en transparante richtlijnen (kleuren, logo, lettertypes, ...). We gebruiken deze richtlijnen om ons eigen open-source Design systeem, Appuniversum, te maken. Deze is gebaseerd op, en volgt, de richtlijnen van Webuniversum.
Er zijn ook specifieke richtlijnen voor de digitale huisstijl, die lichtjes verschillen van de algemene richtlijnen.
Al de applicaties en websites die we publiceren, moeten toegankelijk zijn, volgens de WCAG 2.1 richtlijnen [EN].
Header: Om vlot te integreren met onze codebase en snelheid te verhogen, hebben we de header nagemaakt in Ember. Deze verschijnt altijd en overal.
Footer: De footer werd ook nagemaakt. Deze gebruiken we enkel op log-in pagina's, omdat onze applicatiepatronen anders in elkaar zitten.
We maken momenteel gebruik van een mix van klikbare prototypes in Figma, en echte prototypes in HTML en CSS. We werken ook samen met andere departementen om hier een degelijke componenten bibliotheek aan te leggen, zowel in vectoren (Figma) en HTML en CSS.
We gebruiken Figma, maar we hebben nog geen licentie.
De Vlaamse Overheid heeft een webcomponentenblibiotheek gebouwd. We maken daar momenteel geen gebruik van:
In haar huidige vorm, de 3.0 versie, is deze bibliotheek beschikbaar wanneer we gebruik maken van hun Webplatform. Binnen onze applicatiearchitectuur maken we geen gebruik van dat Webplatform, en kunnen we dus ook geen gebruik maken van de webcomponentenbibliotheek.
De 3.0 versie is niet open source. Wij maken open source applicaties, en hebben dus nood aan open source oplossing.
Om onze applicaties mee te bouwen, hebben we een open source componentenbibliotheek gebouwd.
De bibliotheek is gebaseerd op de oude webcomponenten van de Vlaamse Overheid, versie 2.0. Hier bouwden we onze applicaties mee in het begin, toen deze versie nog open source gepubliceerd werd. Om ervoor te zorgen dat we bugs konden oplossen, de bibliotheek konden uitbreiden voor specifieke applicatie componenten en onze applicaties open source konden publiceren, riepen we Appuniversum in het leven. Iedereen die gebruik wil maken van deze bibliotheek, meer specifiek in kader van projecten voor de Vlaamse Overheid, mag hier aan meewerken.
Deze componenten bibliotheek bestaat momenteel uit twee delen: Appuniversum & Ember-Appuniversum.
Dit Design systeem is zover gegroeid dat het een project op zich is geworden. We werken eraan om de communicatie tussen de verschillende partijen en bewegende delen te optimaliseren.
Appuniversum is niet alleen voor developers, of designers die prototypes in HTML & CSS bouwen. We bieden ook een open-source Figma library, waar designers, analisten, project managers,... eigen wireframes en mock-ups kunnen bouwen, gebruik makend van vooraf gedefinieerde onderdelen.
Deze bibliotheek bootst Ember-Appuniversum na.*
*Dit werk is nog in uitvoering en er kunnen nog kleine discrepanties in bestaan.