Prototipatge web i d’aplicacions mòbils (2)

Mòduls professionals i UF's associades.

AFA0: Cicle formatiu de grau superior de Disseny i edició de publicacions impreses i multimèdia

• MP8 (UF2,UF3), MP12

AF10: Cicle formatiu de grau mitjà de Preimpressió digital

• MP8 (UF1,UF3), MP12

Descripció del curs:

Aprofundiment al prototipatge web i d’aplicacions mòbils (app) mitjançant Adobe XD.

Objectius:

1. Assoliment de la gestió del projecte multimèdia crossmedia, interrelacionant diversos prototipus i implementant un enfocament de disseny centrat en usuari, responsiu, universal i sostenible.

2. Aprofundiment en el programari Adobe XD per al disseny i formalització visual i d’interacció de prototipus de webs i aplicacions mòbils (app).

3. Generació d’un prototipus complex amb disseny visual i d’interacció per a web i/o per aplicació mòbil.

Hores:

• Presencials: 25 h

• No presencials: 0 h

• Totals: 25 h

Nivell de formació:

□ INICIAL

□ MITJÀ

🗹 SUPERIOR

□ AVANÇAT

Àmbit de contingut:

Documentació per al curs:

Presentació i exemples visuals (pantalla) de mostra per il·lustrar la formació.

Equips necessaris:

Equipament de treball per al formador/a

1. Maquinari

Dispositiu digital de treball:

• estació iMac integrada (pantalla) amb teclat i ratolí (mouse), Projector digital, pantalla i comandament-apuntador.

2. Programari

Programari de prototipatge web i app:

• Adobe XD.

Programari d’autoedició de suport:

• Adobe Photoshop,

• Adobe Acrobat Pro.

Passador de diapositives.

Navegador web.

Utilitat de (pre)visualització d’imatges.

Requisits per a la certificació:

Assistència del 80%.

Coneixements previs:

Haver completat el curs de formació relacionat Prototipatge web i d’aplicacions mòbils (1).

Continguts de la formació:

1. Disseny del producte multimèdia

   1. Cicle de producció. De la ideació al desenvolupament.

   2. Esbossos i prototipatge.

   3. Prototipatge i desenvolupament per programació.

   4. Disseny d’interfície i experiència d’usuari (UI/UX). Disseny visual i interacció.

   5. Disseny centrat en usuari (UCD) i disseny emocional.

   6. Usabilitat i inclusivitat.

   7. Disseny responsiu. Mobile First.

2. Programari de prototipatge web i app.

   1. Programari lliure i propietari. Sketch, Figma, Adobe XD.

   2. Evolució i comparativa. Versions d’Adobe XD

   3. Prototipatge amb programari Adobe anterior a XD.

   4. Adobe XD. Treball en local i treball en el núvol.

   5. Mapa de pantalles i navegació.

   6. Creació i gestió del concepte de disseny. Llibre d’estil.

3. Configuració i operatives bàsiques de treball amb Adobe XD.

   1. Format i producte. Mòbil, web, continguts per xarxes socials (Instagram, Twitter, Facebook, Youtube) i d’altres.

   2. Interfície de treball. Espais de Disseny, Prototipatge i Compartició. Panells i eines.

   3. Taules de treball (artboard). Denominació, dimensions, color. Viewport i scrolling. Recurs i elements de fixació.

   4. Diagramació de pantalla. Retícula i quadrícula. Píxel i ràtio proporcional. Elements estructurals.

   5. Estructuració de pantalles.

   6. Creació i gestió de grafismes vectorials. Línia, forma i objectes. Combinació, substracció, intersecció i exclusió editable de solapament.

   7. Integració responsiva d’imatges en mapa de bits.

   8. Recursos de composició de text. Text de punt i text d’àrea.

   9. Agrupament. Alineació i distribució d’elements.

   10. Ordenació d’elements. Superposició.

   11. Opacitat-transparència.

   12. Selector de color. RGB, HSB i Hexadecimal. Sòlid i degradats. Comptagotes. Mostres.

   13. Màscares.

   14. Efectes d’ombrejat i emborronament.

   15. Recurs de graella de repetició.

4. Capes.

   1. Gestió de taules de treball (artboard), objectes i grups.

   2. Iconografia.

   3. Opcions de capa. Exportació, bloqueig i ocultació.

5. Actius (assets).

   1. Funcionalitat i possibilitats. Llibre d’estil. Concepte de disseny.

   2. Colors, estils de caràcter, components i vídeos.

   3. Biblioteques.

6. Complements (plug-ins).

   1. Funcionalitat i possibilitats.

   2. Cerca, instal·lació i gestió.

   3. Exemples.

7. Components.

   1. Funcionalitat i possibilitats.

   2. Component principal i instàncies. Estats. Hover.

   3. Creació i gestió. Panell capes.

   4. Animació i interacció. Espai Prototipus.

   5. Previsualització.

   6. Components anidats. Estructuració complexa.

   7. Rendiment.

   8. Component extern.

8. Espai de treball Prototipus.

   1. Interrelació i navegació entre pantalles.

   2. Redireccionament en pantalla pròpia.

   3. Solapament d’elements animats.

   4. Interacció.

   5. Disparadors.

   6. Accions. Tipus i destinació.

   7. Animació de components. Selecció d’estats. Opcions.

   8. So.

   9. Previsualització en escriptori i en dispositiu mòbil. Generació de clips de vídeo.

9. Espai de treball Compartició.

   1. Invitació. Retroalimentació.

   2. Revisió de disseny.

   3. Desenvolupament.

   4. Presentació.

   5. Testeig d’usuari.

   6. Personalitzat.

   7. Enllaços i nivell d’accés.

10. Exportació. Opcions.

Activitat d'ensenyament/aprenentatge: