Documentatie Nienke
Vandaag hoorden we onze opdracht en groepen. En hebben een aantal vragen opgezet voor de opdrachtgever. Voor de eerste week is de opdrachtgever Cyd Stumpel. Ze heeft ons de details van de opdracht uitgelegd en wij hebben onze vragen kunnen stellen en de antwoorden genoteerd. Verder heeft ze laten zien hoe de data van de visdeurbel gebruikt kan worden op de site en zelf wat voorbeelden laten zien van wat we zouden kunnen doen met de opdracht. De opdrachtgevers in Utrecht, Studio Moan, zijn deze week nog niet beschikbaar, ze zullen ons volgende week dinsdag een mail sturen over ons eerste contact moment.
Vandaag heb ik gewerkt aan verschillende conceptschetsen. Hiermee heb ik ook meteen aan mijn leerdoel gewerkt: meer variëren in mijn ontwerpfase. Normaal heb ik snel één idee in mijn hoofd dat ik meteen wil uitwerken. Ik merk alleen dat dit me soms beperkt, omdat ik dan minder andere opties bekijk die misschien beter zijn. Door nu meerdere schetsen te maken, dwing ik mezelf om breder te denken en verschillende richtingen te onderzoeken voordat ik een keuze maak.
Daarnaast heb ik in Blender een 3D-model gemaakt van een vishaak, omdat we geen goede online konden vinden. Dit kostte wat tijd, maar daardoor hebben we wel iets dat precies past bij wat we nodig hebben.
Ook ben ik begonnen met het digitaliseren van één van de ideeën. Dit is een soort staafdiagram waarbij vissen per uur langs zwemmen om de data weer te geven. Ik ben nu aan het kijken hoe ik dit idee het beste kan uitwerken en hoe het er visueel duidelijk en aantrekkelijk uit kan zien. En hoe ik mijn idee goed digitaal kan maken.
Ik ben vandaag begonnen met een meeting met Vasilis over het ontwerpproces. Hier vertelde hij hoe je 40 verschillende schetsen in 1 minuut kan maken, om jezelf te dwingen om met creatieve ideeën te komen. Verschillende varianten maken van hetzelfde idee telt ook als variatie, want soms is een idee al gewoon heel goed. Het is handig voor mij om bewuster keuzes maken, en dit ook te documenteren! Het zit niet alleen in het begin, maar in elke ontwerpkeuze kan je werken aan dat leerdoel. Alleen in je hoofd iets bedenken kan, maar met fysiek iets uitwerken krijg je vaak ook weer onverwachte inzichten. Maken is ook onderzoek doen. Je kan dan screenshots of forks maken om te vergelijken met elkaar. Laat mensen meekijken. Als je alleen werkt, dan ben je gelimiteerd aan je eigen brein en conventies. In ons team is het sowieso een goed idee om wat meer met elkaar mee te kijken.
Design principles: Waar moet ons werk aan voldoen? toegankelijkheid, huisstijl, kenmerk opdrachtgever. Helpt voor houvast om te kijken of je nog wel op de goede weg bent (principle.adactio.com). Watervalmethode: een doet het wireframe, dan het design, dan het developen en je kan niet meer terug naar boven. Scrum: Je werkt in sprints, het gaat altijd door. je hebt geen eindoel, maar een doel voor over twee weken. Agile: je kan veranderen tijdens het proces. Een uiteindelijk doel, maar daar kan je vanaf wijken. Inzichten van jezelf en opdrachtgevers geven je een aanpassing voor het eindoel. Bij twijfel, maak verschillende prototypes zodat de opdrachtgever kan meedenken. Mensen zijn geneigd om hun onzekerheden voor zich te houden, maar zie twijfel als iets positiefs. Laat het zien. Stel vragen.
Vandaag heb ik aan de tijdlijn css toegevoegd. Dit is nog een beetje experimenteren. Ik wil graag dat er geen afgesneden vissen zijn, maar daar kom ik nog niet helemaal uit. Verder moet ik ook nog een x-as toevoegen, zodat je duidelijk kan zien op welk uur van de dag, hoeveel vissen te zien zijn, zonder te hoeven hoveren. Mitchell dacht ook dat we de grafiek in twee rijen konden splitsen, AM en PM bijvoorbeeld.
Gesprek met Jad: Denk aan de toegangelijkheid: tooltips als popover. Tabindex zodat je door de verschillende uren heen kan tabben. Misschien voor blinden iets van een percentage, omdat ze het visueel niet zien. Ik ben van plan om dit wel te doen, maar aangezien we nu nog in de ontwerpfase zitten, is het voor nu nog niet mijn prioriteit. Ik wil meer varieren, zodat ik verschillende opties aan de opdrachtgever kan laten zien.
Gesprek met Jad: Denk aan de toegangelijkheid: tooltips als popover. Tabindex zodat je door de verschillende uren heen kan tabben. Misschien voor blinden iets van een percentage, omdat ze het visueel niet zien. Ik ben van plan om dit wel te doen, maar aangezien we nu nog in de ontwerpfase zitten, is het voor nu nog niet mijn prioriteit. Ik wil meer varieren, zodat ik verschillende opties aan de opdrachtgever kan laten zien. Verder heeft jad een kleine cursus gegeven over React, dit was erg fijn, want ik heb nog nooit gewerkt met React.
Cursus JavaScript met Jad. Dit hielp met het herinneren van de basis van Javascript. dit valt snel weg dus dit was erg fijn.
Feedback Sanne: klein visje ipv een hele nieuwe die uitsteekt van de tabel. Table gebruiken voor semantiek en toegankelijkheid. Dat helpt waarschijnlijk ook met tabben.
Verder heb ik het design aangepast van waar ik mee bezig was na de feedback van Cyd en Sanne.
Feedback studio moan:
Beetje onoverzichtelijk nog, kan ik doen met de grote van de vis, bar graph en dan 1 vis eropdoet, en niet verticaal centreren. Het leest nog beetje onduidelijk maak het fool-proof en nog steeds zo vrolijk oogt. Misschien de andere kant op zwemmen. Tweede versie is wel beter. Iets van bubbeltjes We mogen best creatief bedenken voor visuele vormgeving, bijv de 3 tips voor het spotten van de vis, dus bijv de fiets en romeinse helm etc De hover is prima, maar als er over heen hover.
De opdrachtgever vond dat we al erg ver waren in het proces en was erg enthousiast. Maar vond dat we nog wat meer in de huisstijl van de Visdeurbel konden werken. Dat is met kleuren en fonts, maar ook op het gebied van aandacht vasthouden met animaties en simpele weergaves van de data.
Deze week hebben we vooral onze projecten omgezet naar React, hier hebben we ook een cursus van Victor over gevolgd, waar we ons vooral hebben verdiept in Hooks. Verder heb ik deze week de feedback van studio MOAN toegepast aan mijn ontwerp:
Ik heb nu een table van de html gemaakt, waardoor het semantisch is. hieraan heb ik ook al toegankelijkheid toegevoegd, zodat mensen met een screenreader hier ook doorheen konden tabben. Ik heb nu scroll driven animations, waar de staafdiagram uit-scaled als de tabel in beeld komt scrollen. Er zwemt een vis voor, die het meest gespot is in dat uur.