1. ¿QUE ES UN GUIÓN?

Un guion en el contexto de diseño de interfaces se refiere a un documento o esquema que define la estructura, el flujo y la interacción de los usuarios con una interfaz o un producto digital.

El guion sirve como una herramienta de planificación y comunicación entre los miembros del equipo de diseño y desarrollo, estableciendo las bases de cómo debe comportarse la interfaz y cómo los usuarios van a interactuar con ella.

El guion no necesariamente tiene que ser un documento extenso; puede ser un esquema sencillo o un mapa conceptual, dependiendo de la fase del proyecto. Es esencial para alinear las expectativas del cliente y del equipo de trabajo, ayudando a prever posibles dificultades o puntos de mejora en la experiencia del usuario.

Un guion en diseño de interfaces es un esquema o plan que describe la estructura y flujo de interacción de una interfaz, detallando cómo los usuarios navegarán y qué acciones podrán realizar en el sistema. Actúa como una guía para el diseño y desarrollo de la experiencia del usuario.

2. ¿TIPOS DE GUIÓN?

Existen varios tipos de guion en el ámbito del diseño de interfaces, cada uno con un enfoque específico para distintos aspectos del proceso de diseño. Algunos de los principales tipos son:

 Guion de interacción:

Se centra en el flujo de acciones que el usuario realizará dentro de la interfaz. Describe cómo el usuario interactuará con los elementos, como botones, menús y formularios, y cómo se moverá de una pantalla a otra.

 Guion de navegación:

Este guion detalla la estructura del sistema y cómo el usuario navegará entre las diferentes secciones o pantallas de la interfaz. Es especialmente útil en sistemas con varios niveles de jerarquía o en aplicaciones complejas.

 Guion visual:

Enfocado en los aspectos visuales del diseño, define la apariencia de la interfaz, incluyendo el layout, los colores, las tipografías y otros elementos gráficos. Asegura que la interfaz sea coherente con la identidad visual del producto.

 Guion de contenido:

Describe el tipo y el tono del contenido que aparecerá en la interfaz, como textos, etiquetas, mensajes o instrucciones. Es crucial para garantizar una comunicación clara y efectiva con el usuario.

 Guion de prototipado o wireframe:

Representa de forma esquemática y básica cómo se verán las pantallas y sus elementos interactivos. No se centra en el diseño visual detallado, sino en la disposición y la estructura funcional de la interfaz.

3. ¿QUE ES UN GUIÓN TÉCNICO?

Un guion técnico es un documento que describe detalladamente cómo debe ser implementada una interfaz o producto digital desde un punto de vista técnico. Específicamente, se enfoca en las instrucciones que los desarrolladores y el equipo técnico deben seguir para llevar a cabo el diseño propuesto en la práctica.

Este guion no solo incluye la descripción de las interacciones y funciones, sino también las especificaciones técnicas de cómo se deben construir estos elementos en la interfaz. Esto puede abarcar desde los lenguajes de programación que se utilizarán, hasta los detalles sobre la estructura de la base de datos, las integraciones con otros sistemas, y cómo los datos se manejarán a lo largo de la aplicación.

El guion técnico es una guía para asegurar que la visión del diseñador se pueda ejecutar de manera coherente, eficiente y técnica, tomando en cuenta las capacidades y limitaciones de las tecnologías que se emplean.

El guion técnico es clave para asegurar que la visión del diseño se pueda implementar de manera eficiente y correcta en términos de funcionalidad, rendimiento y tecnología.

4. ¿QUÉ ES UN STORYBOARD?

Un storyboard, también conocido como guion gráfico, es una serie de imágenes que representan visualmente una historia. Es una herramienta que se utiliza para planificar escenas de películas, programas de televisión, anuncios publicitarios, entre otros.

Un storyboard es una herramienta visual utilizada en el diseño de interfaces y otros proyectos, como películas o animaciones, que ayuda a planificar y estructurar la experiencia del usuario. Se trata de una secuencia de ilustraciones o imágenes que representan las pantallas, interacciones y flujos de un producto digital, organizadas en el orden en que los usuarios interactuarán con ellas.

En el contexto del diseño de interfaces, un storyboard muestra cómo se desarrollará la interacción del usuario a lo largo de la aplicación o el sitio web. Cada cuadro o "escena" del storyboard representa un paso o una pantalla dentro de la experiencia del usuario, y a menudo incluye anotaciones sobre el comportamiento de los elementos, las transiciones y las acciones que el usuario puede realizar.

Los storyboards son útiles para:

 Visualizar la experiencia del usuario: Permiten a los diseñadores, desarrolladores y otros miembros del equipo entender cómo se verá y se sentirá la interacción a lo largo del proceso.

 Comunicación de ideas: Ayudan a transmitir de manera clara las ideas y el flujo de trabajo a los stakeholders o clientes.

 Planificación: Son una herramienta efectiva para planificar y ajustar la  secuencia de interacciones antes de pasar al desarrollo real.

5. MENCIONE ALGUNOS EJEMPLOS DE GUIÓN.

1.  Guion de Flujo de Usuario (Ejemplo para una app de reserva de hoteles)

 Pantalla de inicio:

El usuario ve un campo para ingresar la ciudad, fecha de entrada y salida. Un botón de "Buscar" se encuentra debajo de los campos de búsqueda.

 Pantalla de resultados:

El usuario ve una lista de hoteles con filtros (precio, ubicación, estrellas). Cada hotel muestra una imagen, nombre, precio por noche y una calificación. Un botón "Ver más detalles" lleva al usuario a la página del hotel.

 Pantalla de detalles del hotel:

Información sobre el hotel: ubicación, servicios, opiniones de usuarios. Un calendario para seleccionar fechas y un botón para "Reservar ahora".

 Pantalla de confirmación de reserva:

El usuario ingresa sus datos de pago y un resumen de la reserva. Un botón de "Confirmar reserva" finaliza el proceso.

2.  Guion de Pantalla de Carga (Ejemplo para una app de redes sociales)

 Pantalla de carga inicial:

·         El logo de la aplicación aparece en el centro de la pantalla, con una barra de progreso debajo.

·         Animación suave que muestra el avance de la carga mientras se inicia la aplicación.

 Pantalla de inicio de sesión:

·         El usuario ve campos para ingresar su correo electrónico y contraseña.

·         Debajo de los campos, hay un botón de "Iniciar sesión" y otro para "Crear cuenta".

 Pantalla de feed:

·         Después de iniciar sesión, el usuario llega al feed de publicaciones con contenido de amigos o seguidores.

·         Un botón en la parte inferior permite crear una nueva publicación (texto, imagen o video).

3.  Guion de Transiciones (Ejemplo para una app de tareas)

 Pantalla de inicio:

·         El usuario ve una lista de tareas con una opción de "Agregar tarea".

·         Al presionar "Agregar tarea", la pantalla se desliza hacia abajo, mostrando un formulario para ingresar una nueva tarea.

 Pantalla de tarea detallada:

·         Al tocar una tarea de la lista, se abre una nueva pantalla con más detalles (descripción, fecha límite, prioridad).

·         La pantalla tiene botones para editar, completar o eliminar la tarea.

 Pantalla de notificación:

·         Si una tarea está cerca de su fecha de vencimiento, el usuario recibe una notificación en la pantalla de inicio que, al tocarla, lo lleva directamente a la tarea pendiente.

6. ¿Cuáles son los 7 planos de la fotografía? mencionar y colocar ejemplos.

Los planos de la fotografía se refieren a las diferentes distancias o ángulos de cámara utilizados para capturar una escena o sujeto, lo cual influye en la percepción y el impacto visual de la imagen. Aquí te presento los 7 planos más comunes con ejemplos de cómo se utilizan:

1.  Plano General (PG)

Descripción: Este plano muestra una amplia vista del entorno, donde el sujeto es solo una parte pequeña del cuadro. Se utiliza para contextualizar la escena y mostrar el ambiente o lugar.

Ejemplo: Una foto de una ciudad desde un rascacielos o una persona caminando en un campo abierto. El enfoque está más en el paisaje o el contexto que en el individuo.

Ejemplo visual: Una persona en medio de una gran plaza rodeada de edificios.

2.  Plano Entero (PE)

Descripción: Aquí el sujeto o personaje se muestra completo, de pies a cabeza, ocupando la mayor parte de la imagen, pero aun dejando espacio para el entorno.

Ejemplo: Una foto de una persona de pie en una habitación, donde se capturan tanto el cuerpo completo como algunos detalles del espacio que lo rodea.

Ejemplo visual: Una persona posando en una sala con un fondo decorado, mostrando su cuerpo entero.

3.  Plano Americano (PA)

Descripción: Se enfoca en el sujeto desde las rodillas hacia arriba. Es un plano clásico en el cine occidental, especialmente en los westerns, ya que permite ver tanto al personaje como su entorno y acción.

Ejemplo: Un vaquero con pistola, mostrando tanto su rostro como parte de su cuerpo, pero también parte del paisaje.

Ejemplo visual: Un actor de pie, con una pistola en la mano, donde se ve desde la rodilla hasta la cabeza.

4.  Plano Medio (PM)

Descripción: El plano muestra al sujeto desde la cintura hacia arriba, permitiendo capturar detalles del rostro y la expresión, pero también parte del entorno cercano.

Ejemplo: Una conversación entre dos personas, donde ambos están visibles desde la cintura hacia arriba, permitiendo capturar expresiones faciales y gestos.

Ejemplo visual: Un par de personas conversando en una mesa de café.

5.  Primer Plano (PP)

Descripción: El enfoque se centra en el rostro del sujeto, generalmente desde los hombros hacia arriba. Este plano es ideal para mostrar emociones y expresiones faciales.

Ejemplo: Un actor en una escena dramática, donde la cámara se centra en su rostro para captar sus emociones o reacciones.

Ejemplo visual: Una persona mirando hacia la cámara con una expresión facial intensa, como sorpresa o tristeza.

6.  Gran Primer Plano (GPP)

Descripción: Este plano se enfoca en una parte muy específica del rostro o un objeto cercano. Por lo general, se usa para destacar detalles como los ojos, las manos, o alguna característica particular.

Ejemplo: Una fotografía de los ojos de una persona, o una mano sosteniendo un objeto importante.

Ejemplo visual: Un primer plano de los ojos de una persona, mostrando detalles y expresiones intensas.

7.  Plano Detalle (PD)

Descripción: El plano detalle captura un pequeño detalle, como un objeto, una mano, o un accesorio. Se utiliza para resaltar aspectos importantes dentro de una escena.

Ejemplo: Una foto de un reloj de pulsera, el tatuaje en la muñeca de una persona, o una flor en primer plano.

Ejemplo visual: Un reloj de pulsera con la hora visible o una flor en primer plano, destacando su textura y colores.