Cette leçon contient 35 diapositives, avec quiz interactifs et diapositives de texte.
La durée de la leçon est: 180 min
Éléments de cette leçon
Mobile Application Design
Slide 1 - Diapositive
Terugblik
Examenuitleg
Maak jouw tweede ontwerp af.
Ontwerp jouw app in Balsamiq.
Beschrijf in jouw portfolio in een nieuw hoofdstuk wat de voordelen en nadelen van jouw eerste en tweede ontwerp zijn.
Verwerk de feedback van jouw presentatie in jouw portfolio.
Jij ontwerpt tests over de gebruikersinterface.
Beschrijf de verbeteringen, aan de hand van de tests, in jouw portfolio.
Onderbouw jouw prijzen.
Slide 2 - Diapositive
Waar staan wij
Week 2 blok 2
Week 7 laatste les
Week 8 examinering
Week 9 bespreken
Week 10 herkansing
Acatec bekijken
Slide 3 - Diapositive
Over de examinering
Jij hebt jouw portfolio ingeleverd op Acatec.
Jij verschijnt op de examineringsdatum in het betreffende lokaal.
Jij zit in een klas tegenover twee examinatoren.
De examinator gaat jou een opdracht geven.
Jij doorloopt dezelfde stappen als in deze lessen om tot een ontwerp te komen.
De examinatoren toetsen jou aan dezelfde criteria als beschreven in de leerdoelen op Acatec.
Slide 4 - Diapositive
Over de examinering
1e dag: Maakt een eerste concept voor de vormgeving van de mobile app.
2e dag: Presenteert de vormgeving van het mobile app-concept en verwerkt feedback.
3e dag: Maakt een vormgevingsontwerp voor de gebruikersinterface van de app en test dit.
4e dag: Vertaalt het definitief app vormgevingsontwerp naar een visueel prototype.
5e dag: Vertaalt het definitief app vormgevingsontwerp naar een visueel prototype.
Slide 5 - Diapositive
Doelen deze les
Wij kunnen alleen verder als iedereen zijn of haar portfolio heeft gemaakt!
Het bouwen van een BMI calculator.
Aan de hand van de kennis die jij nu op doet, zal jij (grotendeels) jouw app idee kunnen maken.
Slide 6 - Diapositive
Presenteer je wireframes
Vandaag presenteren jullie je 1e en 2e ontwerp en je legt uit wat de verschillen zijn.
Slide 7 - Diapositive
Nu verder met Flutter
Wij gaan een BMI Calculator maken.
Waarom? Omdat er veel technieken in zitten die ons bekend maken met de taal en framework.
Na het maken van deze app, ben jij in staat om een prototype te maken van jouw app idee.
Slide 8 - Diapositive
Nu verder met Flutter
Docent laat nu een video zien
Slide 9 - Diapositive
Skeleton maken
Wij gaan eerst skeleton code maken. Dit houd in dat wij het fundament waar uit wij gaan verder bouwen, gaan maken. Laten wij dit samen doen.
Slide 10 - Diapositive
Skeleton maken
Docent laat nu zien hoe je de skelet moet maken.
Slide 11 - Diapositive
Wij kunnen elke knop en elke pixel precies aanpassen zoals wij willen. Is dat handig om dat voor alles in de app te doen?
A
Ja, ik wil alles kunnen aanpassen
B
Nee, want het is veel werk
C
Ja, want het is niet veel werk
D
Alle antwoorden zijn correct
Slide 12 - Quiz
Thema's
Thema's zijn in het leven geroepen om ons het leven makkelijker te maken.
Consistent door alle pagina's die jij maakt.
Ook Flutter heeft thema's. Laten wij dit samen doorlopen.
Slide 13 - Diapositive
Stateful widget vs.
Stateless widget
Slide 14 - Diapositive
Stateful vs stateless widgets
State: When things are as they are.
When something in your UI needs to change (color, form, number, etc), use stateful widgets.
When something won't change and is 'static', use stateless widget.
Slide 15 - Diapositive
Thema's
Op dit moment geen thema.
Alles heeft de default kleur.
Slide 16 - Diapositive
api.flutter.dev
Slide 17 - Lien
Thema's
Probeer maar eens een dark theme.
class BMICalculator extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: InputPage(),
);
}
}
Slide 18 - Diapositive
Thema's
Probeer maar eens een dark theme.
class BMICalculator extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.red),
home: InputPage(),
);
}
}
}
Slide 19 - Diapositive
Thema's
Opdracht: accentColor is een property waarmee je overige elementen kan kleuren. Zoek die in de documentatie van de ThemeClass en hoe je hem moet gebruiken. Maak de accentColor paars.
Slide 20 - Diapositive
Thema's
Hier kan je aan blijven sleutelen totdat jij de gewenste kleuren hebt bereikt voor jou merk/bedrijf.
Slide 21 - Diapositive
Thema's
De thema die wij moeten namaken is op de volgende website te vinden.
Slide 22 - Diapositive
dribbble.com
Slide 23 - Lien
www.colorzilla.com
Slide 24 - Lien
Thema's
De kleuren achterhalen in een design kan je door gebruik te maken van tools op het internet. Een van deze tools heet ColorZilla.
Gebruik deze tool en richt met je muis op de kleur van de achtergrond.
Met deze tool krijg je de ARGB kleuren.
Slide 25 - Diapositive
Thema's
Nu je de kleur weet, verander de achtergrond kleur van de app.
Gebruik hiervoor de Color method.
Slide 26 - Diapositive
Colors
ARGB is bijvoorbeeld: #0A0E21
Wanneer je de tool gebruikt krijg je RGB combinatie.
Slide 27 - Diapositive
Wat mist er in de code die ColorZilla geeft?
A
De R van ARGB
B
De B van ARGB
C
De A van ARGB
D
De G van ARGB
Slide 28 - Quiz
Colors
ARGB is bijvoorbeeld: #0A0E21 <<< dit is de hexadecimale code van RGB.
Maar wat wij missen is de transparantie.
Slide 29 - Diapositive
api.flutter.dev
Slide 30 - Lien
Colors
Maar wat wij missen is de transparantie.
Voeg deze eraan toe om het af te maken.
Gebruik de scaffoldBackgroundColor en stel dezelfde kleur in als bij primaryColor.
Slide 31 - Diapositive
Wat valt je nu op in de scaffold body?
A
De kleuren zijn verschillend
B
Er is een app bar met witte tekst
C
De witte tekst in de app bar en niet in de body
D
Ik zie geen verschil
Slide 32 - Quiz
Colors
Echter er is geen specifieke property om aan te passen om de body tekst wit te krijgen