ARGN01

Diseño gráfico de pantallas interactivas

Crear, diseñar y producir productos para dispositivos web y móviles centrados en la mejora de la experiencia del usuario, a través de las herramientas más utilizadas de creación gráfica de interfaces, maquetación, codificación y programación, en el desarrollo contenidos por web, y app’s por smartphones y tablets.

Diseñado y producido por Smartmind

Disponibilidad:

Consultar

Contenidos de la especialidad formativa

ARGN01 — Diseño gráfico de pantallas interactivas

Módulo 1

Diseño de productos digitales, usabilidad y proceso de diseño de productos UI-UX

Objetivo. Diseñar y producir interfaces de usuario con las herramientas específicas del entorno, cumpliendo las directrices de usabilidad y accesibilidad tanto para entornos gráficos basados en sistema operativo, como para aquellas interfaces Web clásicas y app. CONOCIMIENTOS/ CAPACIDADES COGNITIVAS Y PRÁCTICAS

Contenidos: 3

Conocimiento/capacidades cognitivas y prácticas

Diseño de productos digitales. Estudio de los Fundamentos de la usabilidad

Principios básicos del lenguaje visual. Comunicación visual.

Estudio del color, la imagen y tipografía.

Análisis de tendencias gráficas de diseño de web y app: Flat design, esqueumorfisme, material design.

Lenguaje gráfico. Definición de un manual de identidad corporativa.

Metodología del proceso de diseño, Definición elementos, entorno y paleta de producción. Definición de las extensiones de los productos finales

Creación de interfaces gráficas:

Creación de una interface gráfica acorde al aplicativo diseñado

Análisis de interfaces de Escritorio, Web y App.

Estudio de las GUI Android, IOS y Windows phone.

Preparación de productos adaptados a dispositivos. Concepto diseño multiplataforma, “Mobile First”.

Creación de transiciones, animación de interfaces como apoyo al UX.

Exportación y archivo de interfaces.

Creación colaborativa, en la creación de interfaces en ambientes de trabajo Agile y Scrum

Proceso de diseño UI- UX, análisis, creación de maquetas, aplicación resultados a los prototipos

Creación de un process de diseño estructural Design Thinking

Análisis del HCI (human computer interaction)

Establecer el proceso de creación de la arquitectura de la información

Principios de usabilidad de Jackob Nielsen

Creación de una maceta de Usabilidad, macetas heurísticas

Evaluación de una maceta Heurística

Desarrollo de informes de usabilidad

Realización de un diseño y mapa de estructura e interacción

Creación de wireframes de la app elegida

Creación de mockups y prototipos por la app

Estudio y creación de la narrativa de una app y fases: Alpha, Beta, Release

Definición de las técnicas de programación. Introducción a la maquetación y funcionalidad

Módulo 2

Técnicas de creación y publicación de interfaces con lenguajes de marcas, script, frameworks, librerías.

Objetivo. OBJETIVO: Desarrollar y publicar prototipos de apps con los lenguajes de estructuración, maquetación e interacción necesarios para poder estandarizar las producciones posteriores a interfaces con tecnologías crossbrowsers y multiplataforma. CONOCIMIENTOS/ CAPACIDADES COGNITIVAS Y PRÁCTICAS

Contenidos: 8

Conocimiento/capacidades cognitivas y prácticas

Creación de prototipos con lenguajes de marcas y formateado.

Introducción a los lenguajes de marcas

HTML5 y CSS3

Técnicas de maquetación Y Producción

Traslado de hashtags absolutos a hashtags de maquetación flex.

Jerarquía de etiquetado

Metaetiquetas SEO y Accesibilidad

Evolución Y deprecados

Lenguajes de Script

Javascript

Programación Orientada a objetos

La asignación

Sintaxis de Javascript

Estructuras de control

Funciones

Gestión de Acontecimientos

Técnicas de simulación de funcionalidad

Scripts de interacción, acompañamiento al usuario

Scripts de mejora de usabilidad

Formularios y feedback

Herramientas por la gestión del feedback y comunicación

Herramientas de sincronización de scripts de usabilidad

Validaciones Cliente – Servidor

Audio y video

Contenedores de video

Codecs de video y audio

Alternativas, librerías

Sprites CSS

Canvas y dibujo

Aplicaciones y uso

Funciones y propiedades

Imágenes

Gradientes

WebStorage

Conceptos previos

WebStorage

SessionStorage

LocalStorage

Apis de WebStorag