Oefening interface-ontwerp

Vorige les bouwde je een prototype voor een toepassing van een Arduino-microcontroller. Tijdens deze les bouwen we een prototype voor een softwareservice. Tijdens het eerste lesuur bekijken we de belangrijkste elementen waar je rekening moet mee houden bij het ontwerpen van een gebruiksvriendelijke en gebruikersgerichte interface voor software- en/of hardwaretoepassingen of webservices. Waar moet je rekening mee houden bij UX-design? Bekijk de presentatie op Presentatie "Soorten interfaces & UX-design" én lees zeker het bijhorende hoofdstuk in de cursus (https://www.schoolvoorbeeld.be/multimedia/Handboek). 

Je vormt groepjes en de lector bezorgt aan iedere groep een opdracht/idee dat je verder moet uitwerken en waarvoor je een interface moet prototypen. We gebruiken hiervoor het programma Pencil dat je best al vooraf installeert!

Deze opdracht wordt geëvalueerd voor permanente evaluatie. 

Interface- en UX-ontwerp

Op zoek naar een handige tool voor het bouwen van "mockups" en/of interfaces? Pencil is een gratis en open source tool met een massa mogelijkheden.

Installeer Pencil voor het uitvoeren van de opdracht rond interface-ontwerp. 

"Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms."
Installeer Pencil

Andere (commerciële) tools:

https://blog.prototypr.io/the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016-701263ae65e8

Digitaal ontwerp

Tijdens de les demonstreert de lector een aantal handige technieken in Adobe Photoshop.



Presentatietips

7 tips to create visual presentations from Emiland

Foto's nodig? 

Interessante links:

Icoontjes nodig?

Icoontjes nodig voor je app?

https://thenounproject.com/

https://fontawesome.com/icons?d=gallery

Lettertypes nodig?

www.dafont.com

Tips voor betere presentatie!!!

  1. Een presentatie bouw je op het “einde”: Denk eerst grondig na wat je gaat vertellen. Nadien bouw je de presentatie. De presentatie visualiseert de mondelinge uitleg. De presentatie is geen “reproductie” van wat je vertelt en zeker geen spiekbrief.
  2. Eenvormigheid van stijl. Elke dia moet een onderdeel van hetzelfde verhaal lijken. Gebruik overal dezelfde opbouw, dezelfde kleuren, dezelfde achtergrond. MAAR: speel wel met lettertypes, letterkleur en lettergrootte. Gebruik geen kinderlijke lettertypes zoals Comic Sans.
  3. Overgangen en effecten. Niemand zit te wachten op teksten of beelden die binnen of buiten vliegen. Vermijd overgangseffecten. Toon elke dia heel strak na elkaar zonder effecten. GEBRUIK ZO WEINIG MOGELIJK ANIMATIES OF EFFECTEN!!!
  4. Less is more. Gebruik zo weinig mogelijk tekst. Gebruik zeker geen opsommingstekens. Gebruik een krachtig woord of een slogan in elke slide of een vraag. Liever één zin, één regel... dan meerdere regels.
  5. Elk beeld = idee. Gebruik mooie afbeeldingen of achtergronden (niet meer dan één per dia) die iets meer vertellen over je verhaal.
  6. Aantal dia's: Beperk je presentatie tot maximaal 10 dia's. In drie seconden moet de kijker begrijpen wat je met de dia wil vertellen.
  7. Takeaway: toon een besluit in je laatste dia. Iets om over na te denken. Iets waarover de kijker nadien nog nadenkt. Iets dat blijft hangen en bij blijft.

        Opdracht UX

        De lector verdeelt de opdrachten onder de diverse groepen. Je krijgt hiervoor twee lesuren de tijd. Daarna volgt de presentatie.

        MOGELIJKHEID 1: OldsMobile

        Ontwerp een bedieningsinterface voor een mobieltje voor bejaarden. Denk aan alles wat voor een "bejaarde" belangrijk is. Gebruikersgemak, gezondheid, veiligheid, winkelen...

        MOGELIJKHEID 2: DomusOS

        Een ultramodern domoticasysteem voor je woning: verwarming, beveiliging, verlichting, keuken... Alles zit geïntegreerd in één systeem. Je kan als bewoner uiteraard het systeem aansturen. Hoe ziet de bedieningsinterface voor jouw "DomusOS" eruit. Hoe stuur je de interface aan?

        MOGELIJKHEID 3: StoreOS

        Een AR-toepassing op je smartphone die naadloos integreert in de winkelruimte. In plaats van iedereen aan te sturen online te shoppen, gebruik je de mogelijkheden van digitale technologieën om de winkelervaring te verbeteren. 

        Werkwijze?

        1. Analyse van de doelgroep.

        2. Beschrijving van de functionaliteit. Bespreek en beschrijf grondig het INTERACTION DESIGN en het VISUAL DESIGN.

        3. Opbouw van 5 “schermen”. Bij elk scherm een beschrijving waarom die keuze/opbouw: argumenteer aan de hand van de cursus.

        4. Bouw en selecteer een huisstijl. Voorzie een gepaste naam en logo voor je product.

        5. Welke interface-technieken ga je gebruiken (vb. skeuomorfisch of niet)? Welke interactieve mogelijkheden? GUI, NUI, STAG?

        6. Maak een PDF-bestand met daarin al de voorgenoemde informatie (stap 1 tot 5).

        7. PITCH: Bouw een presentatie (met aangepaste huisstijl) en presenteer die aan het publiek alsof je hen wil overtuigen om uw ontwerp te kiezen. Die presentatie moet niet in PowerPoint... Je mag ook een presentatiefilmpje bouwen.


        Doel

        1. Inleveren via Toledo.

        2. Presenteren voor de groep.

        Aantal te behalen punten:
        20 voor PDF + 10 punten voor presentatie