Arquitectura y diseño de interfaces

Aprendizaje colaborativo basado en desafíos
Volver
  • Créditos 28 créditos

Para cursar esta asignatura tienes que haber aprobado:

Módulo al que pertenece

Competencia disciplinar

Definir las necesidades del proyecto web, considerando los objetivos y requerimientos del cliente y/o usuario y aplicando técnicas de diseño de experiencia de usuario.

Unidad de competencia

Levanta los objetivos del proyecto, necesidades y/o requerimientos del cliente y/o usuario para el desarrollo de propuesta de diseño de interfaz, aplicando técnicas de diseño de experiencia de usuario y arquitectura de información.

Aprendizajes

  • Procedimental:

    Especificar los requerimientos del cliente, definiendo tipología de proyecto web, objetivo y referentes de la competencia (benchmark) directa, aplicando técnicas de levantamiento de información.
    Detallar los objetivos del proyecto considerando su función principal,funciones secundarias y tecnologías a utilizar.
    Definir contenidos del proyecto, en función sus objetivos (cliente- usuario) a través de inventario con índices, listas ,elementos, categorías y /o etiquetas que estructuran su navegación.

  • Actitudinal:

    Participar en la cocreación del proyecto, considerando la retroalimentación del cliente y/o usuario
    Demostrar acuciosidad en el levantamiento de información.

  • Conceptual:

    Reconocer las funciones principales, secundarias y tecnologías del proyecto digital.
    Reconocer los elementos que estructuran su navegación.

Tipo de evidencia

Producto
Entrevistas estructuradas con cliente para levantar información (objetivos, contenidos)
Producto:
Informes con análisis de necesidades del cliente que desarrolle estudio de referentes directos e indirectos a nivel nacional e internacional, considerando objetivos y contenidos comunes.
Presentación a cliente con definición del proyecto y su fundamento.
Proceso:
Reunión de validación con cliente de los usuarios asociados al proyecto
Producto:
Informe y/o presentación y análisis y resultados de test heurísticos, aplicados a muestra de usuarios
Producto:
Encuestas, entrevistas a usuarios aplicadas y analizadas
Producto:
Fichas de arquetipos de usuarios y mapas de empatía
Producto:
Diagrama de funciones asociados al sitio según tipo de usuario y objetivo
Producto:
Mapa de Contenido, que evidencia relación entre contenidos del sitio, secciones, subsecciones, link, páginas y documentos
Producto:
Mapa de navegación del proyecto que de cuenta de criterios de usabilidad y accesibilidad.
Wireframes análogos y/o digitales de las plantillas principales de un proyecto aplicado en distintos dispositivos. Visualización de jerarquía, funciones y rotulación de elementos de navegación.

Competencia disciplinar

Definir las necesidades del proyecto web, considerando los objetivos y requerimientos del cliente y/o usuario y aplicando técnicas de diseño de experiencia de usuario.

Unidad de competencia

Levanta los requerimientos de usabilidad y accesibilidad asociados al proyecto web para el desarrollo de propuesta de diseño de interfaz, aplicando técnicas de diseño de experiencia de usuario y arquitectura de información

Aprendizajes

  • Procedimental:

    Especificar arquetipos de usuarios asociados al proyecto, considerando los objetivos del mismo y aplicando técnicas de levantamiento de necesidades.
    Evaluar los requerimientos de usabilidad y accesibilidad aplicando distintas metodologías de experiencia de usuario y aplicando testeos según estándar de la comunidad web.
    Diagramar funciones a partir de la evaluación de requerimientos de usabilidad y accesibilidad, visualizando acciones y/o tareas principales y secundarias a realizar por los usuarios.

  • Actitudinal:

    Participar en la cocreación del proyecto, considerando la retroalimentación del cliente y/o usuario
    Demostrar acuciosidad en el levantamiento de información.

  • Conceptual:

    Reconocer el concepto de arquetipos y sus técnicas de modelado.
    Reconocer los conceptos de usabilidad y accesibilidad .
    Reconocer las metodologías de evaluación de experiencia de usuario
    Reconocer el diagrama de funciones y sus componentes; acciones y/o tareas principales y secundarias a realizar por los usuarios.

Tipo de evidencia

Producto
Entrevistas estructuradas con cliente para levantar información (objetivos, contenidos)
Producto:
Informes con análisis de necesidades del cliente que desarrolle estudio de referentes directos e indirectos a nivel nacional e internacional, considerando objetivos y contenidos comunes.
Presentación a cliente con definición del proyecto y su fundamento.
Proceso:
Reunión de validación con cliente de los usuarios asociados al proyecto
Producto:
Informe y/o presentación y análisis y resultados de test heurísticos, aplicados a muestra de usuarios
Producto:
Encuestas, entrevistas a usuarios aplicadas y analizadas
Producto:
Fichas de arquetipos de usuarios y mapas de empatía
Producto:
Diagrama de funciones asociados al sitio según tipo de usuario y objetivo
Producto:
Mapa de Contenido, que evidencia relación entre contenidos del sitio, secciones, subsecciones, link, páginas y documentos
Producto:
Mapa de navegación del proyecto que de cuenta de criterios de usabilidad y accesibilidad.
Wireframes análogos y/o digitales de las plantillas principales de un proyecto aplicado en distintos dispositivos. Visualización de jerarquía, funciones y rotulación de elementos de navegación.

Competencia disciplinar

Desarrollar maquetas y prototipos de diseño de interfaz de acuerdo a requerimientos de arquitectura e interacción y criterios de usabilidad, accesibilidad.

Unidad de competencia

Construye la estructura de contenidos del proyecto web, en función de los objetivos y necesidades de los usuarios y/o clientes.

Aprendizajes

  • Procedimental:

    Construir mapa de contenidos mediante relaciones entre elementos y de acuerdo a orden establecido según consideraciones del proyecto y estándares del medio.
    Elaborar mapa de navegación y flujo que seguirán los usuarios de acuerdo sus decisiones.

  • Actitudinal:

    Participar en la cocreación del proyecto, considerando retroalimentación del cliente y/o usuario
    Demostrar acuciosidad en el levantamiento de información.

  • Conceptual:

    Reconocer la estructura de mapa de contenidos, según tipo de proyecto web.
    Identificar las características de un mapa de navegación.

Tipo de evidencia

Producto
Entrevistas estructuradas con cliente para levantar información (objetivos, contenidos)
Producto:
Informes con análisis de necesidades del cliente que desarrolle estudio de referentes directos e indirectos a nivel nacional e internacional, considerando objetivos y contenidos comunes.
Presentación a cliente con definición del proyecto y su fundamento.
Proceso:
Reunión de validación con cliente de los usuarios asociados al proyecto
Producto:
Informe y/o presentación y análisis y resultados de test heurísticos, aplicados a muestra de usuarios
Producto:
Encuestas, entrevistas a usuarios aplicadas y analizadas
Producto:
Fichas de arquetipos de usuarios y mapas de empatia
Producto:
Diagrama de funciones asociados al sitio según tipo de usuario y objetivo
Producto:
Mapa de Contenido, que evidencia relacion entre contenidos del sitio, secciones, subsecciones, link, páginas y documentos
Producto:
Mapa de navegación del proyecto que de cuenta de criterios de usabilidad y accesibilidad.
Wireframes análogos y/o digitales de las plantillas principales de un proyecto aplicado en distintos dispositivos. Visualización de jerarquía, funciones y rotulación de elementos de navegación.

Competencia disciplinar

Desarrollar maquetas y prototipos de diseño de interfaz de acuerdo a requerimientos de arquitectura e interacción y criterios de usabilidad, accesibilidad.

Unidad de competencia

Construye wireframes de interfaz del proyecto web, considerando funcionalidad, interacción y jerarquía de contenido.

Aprendizajes

  • Procedimental:

    Construir wireframes de las pantallas principales del proyecto web, considerando jerarquías de contenido aplicadas a múltiples dispositivos.
    Construir wireframes de las pantallas principales del proyecto web, considerando rotulación de elementos de navegación.

  • Actitudinal:

    Participar en la cocreación del proyecto, considerando la retroalimentación del cliente y/o usuario
    Demostrar acuciosidad en el levantamiento de información.

  • Conceptual:

    Reconocer concepto de wireframes y su aplicación en múltiples dispositivos.

Tipo de evidencia

Producto
Registro iteración equipo-cliente de análisis y propuesta de look and feel
Caso de uso del proyecto con especificación de funciones e interacciones asociadas a los actores y partes de sistema.
iteración equipo-cliente de análisis de propuesta en caso de uso de producto Wireframe con correcciones y/o indicaciones con: Especificación de colores y tipografías a aplicar en contenido, elementos de navegación y de interfaz acorde al look del proyecto Selección de tipografías y rango de escalas en contenido, elementos de navegación e interfaz según viabilidad accesibilidad. Especificación de elementos de navegación y de interfaz a intervenir con recursos graficos y efectos para dar jerarquía

Competencia disciplinar

Desarrollar maquetas y prototipos de diseño de interfaz de acuerdo a requerimientos de arquitectura e interacción y criterios de usabilidad, accesibilidad.

Unidad de competencia

Produce contenido visual aplicando técnicas gráficas de edición y dibujo digital, considerando criterios estéticos, accesibilidad y usabilidad definidos en arquitectura de información.

Aprendizajes

  • Procedimental:

    Modificar imágenes, aplicando herramientas de edición y aplicando herramientas de fotomontaje.
    Seleccionar color y tipografía, en función de su legibilidad y relación con la identidad de marca.
    Dibujar elementos de interfaz considerando estilo visual de acuerdo a concepto a comunicar.
    Exportar archivos, de acuerdo al medio de salida y requerimientos de optimización

  • Actitudinal:

    Ser riguroso en la producción de contenidos digitales asociado a un proyecto.
    Ser constante en la práctica de producción de contenidos digitales asociado a un proyecto.

  • Conceptual:

    Reconocer funcionalidades de herramientas digitales de dibujo asociado a la producción de contenidos digitales de un proyecto web.
    Reconoce exportación de archivos según medio de salida asociado a la producción de contenidos digitales de un proyecto web.

Tipo de evidencia

Propuesta de look and feel
Diseño visual de interfaz de las principales páginas en todos los dispositivos.

Producto:
Diseño visual de interfaz de las principales páginas en todos los dispositivos.
Archivo PSD, .XD, PDF,PNG, JPG. De Prototipado visual de un proyecto en el que se visualice:
Archivos con imágenes para desarrollo de propuesta visual de interfaz exportadas según función (jpg, svg, png, gif)
Contenidos de imágenes editadas
Tipografías,color e iconos legibles y coherentes con la identidad de la marca
Tipografía, color y contraste accesibles
Distribución y jerarquía de contenidos adaptados a distintos dispositivos
Rotulación de contenidos de acuerdo a wireframe
funcionalidad e interactividad en el diseño
Aplicacion de leyes de composicion y percepcion
Look and feel de la marca y proyecto

Competencia disciplinar

Desarrollar maquetas y prototipos de diseño de interfaz de acuerdo a requerimientos de arquitectura e interacción y criterios de usabilidad, accesibilidad.

Unidad de competencia

Diagrama contenido visual de interfaz con herramientas digitales, considerando criterios estéticos, accesibilidad y funcionalidad del proyecto.

Aprendizajes

  • Procedimental:

    Analizar los contenidos visibles en el wireframe, en función de su visualización en múltiples dispositivos, considerando distribución,ubicación y proporción.
    Ajustar wireframe de acuerdo a iteración con cliente y equipo.
    Construir grillas de distribución de contenidos, adaptables a distintos tipos de dispositivos.
    Componer mock up aplicando criterios de accesibilidad y usabilidad de acuerdo a requerimientos del proyecto.
    Componer mock up aplicando leyes de composición y percepción de acuerdo a requerimientos del proyecto.
    Aplicar Look and feel en la composición de los elementos gráficos de acuerdo a requerimientos del proyecto.

  • Actitudinal:

    Ser riguroso en la producción de contenidos digitales asociado a un proyecto.
    Ser constante en la práctica de producción de contenidos digitales asociado a un proyecto.

  • Conceptual:

    Reconocer los conceptos de estilos visuales y su relación con los contenidos y elementos de una interfaz.
    Reconocer concepto responsivo dentro de un proyecto web.
    Reconocer leyes de composición y percepción.
    Reconocer concepto de Look and feel.

Tipo de evidencia

Propuesta de look and feel
Diseño visual de interfaz de las principales páginas en todos los dispositivos.

Producto:
Diseño visual de interfaz de las principales páginas en todos los dispositivos.
Archivo PSD, .XD, PDF,PNG, JPG. De Prototipado visual de un proyecto en el que se visualice:
Archivos con imágenes para desarrollo de propuesta visual de interfaz exportadas según función (jpg, svg, png, gif)
Contenidos de imágenes editadas
Tipografías,color e iconos legibles y coherentes con la identidad de la marca
Tipografía, color y contraste accesibles
Distribución y jerarquía de contenidos adaptados a distintos dispositivos
Rotulación de contenidos de acuerdo a wireframe
funcionalidad e interactividad en el diseño
Aplicacion de leyes de composicion y percepcion
Look and feel de la marca y proyecto