# Prototipado y diseño visual

### Affordance <a href="#id-38b69f7b-742c-4b06-9006-53855a7b7918" id="id-38b69f7b-742c-4b06-9006-53855a7b7918"></a>

Es la propiedad de un elemento de evidenciar visualmente la comprensión de su uso. Esto en gran medida se relaciona con sus características visuales, espaciales y contextuales, y cómo estas se articulan con las experiencias previas del usuario.

### API <a href="#id-110578cf-659a-49ed-bcbd-61dd52ed52b2" id="id-110578cf-659a-49ed-bcbd-61dd52ed52b2"></a>

Una API (siglas en inglés de application program interface) es un paquete de funciones, subrutinas y procedimientos desarrollado para interactuar con un software o interfaz externo. De esta manera una plataforma digital puede integrar y beneficiarse de las funcionalidades de otro software, preexistente y de probada eficiencia (o no), incluyéndose dentro de su propio abanico de herramientas.

### App Nativa <a href="#a6509c94-da54-4f40-b4bd-dd57cb036008" id="a6509c94-da54-4f40-b4bd-dd57cb036008"></a>

Una aplicación nativa está desarrollada y optimizada para un sistema operativo determinado y su plataforma de desarrollo (Android, iOS, etc). Este tipo de app se adapta completamente a características del dispositivo obteniendo así una mejor experiencia de uso.

### Arquitectura de la Información <a href="#id-0005adf3-f553-430c-8057-efdc01149907" id="id-0005adf3-f553-430c-8057-efdc01149907"></a>

La arquitectura de la información se trata de la organización del contenido de una web o aplicación de manera logica y clara, facilitando así su asimilación y uso por parte del usuario. Una buena arquitectura de la información resulta de articular eficientemente el contenido de la plataforma con el contexto y necesidades del usuario.

### Card Sorting <a href="#b17751d7-e283-455e-a848-aebea2ba3fbb" id="b17751d7-e283-455e-a848-aebea2ba3fbb"></a>

Es una técnica de análisis para tomar decisiones relacionadas a la Arquitectura de la Información en un producto o servicio. Consiste en la organización, jerarquización y rotulado de tarjetas en categorías, para evaluar la mejor forma de disponer los contenidos teniendo en cuenta el pensamiento, modelo mental y comportamiento de los usuarios.

### F-Pattern <a href="#a52c25e1-0de9-4e16-823c-ed39fcdbdb0d" id="a52c25e1-0de9-4e16-823c-ed39fcdbdb0d"></a>

El F-Pattern (o patrón en F) es uno de los principales patrones de lectura y escaneo de texto aplicado naturalmente por las personas al estar frente a una pantalla. Surge de numerosos estudios de Eyetracking (seguimiento del comportamiento visual) y nos permite tomar decisiones de diseño teniendo en cuenta este comportamiento recurrente por parte de los usuarios. Como su nombre lo indica, el patron forma la figura de una F.

### Gestalt (leyes) <a href="#id-90097a33-101c-4b03-b66e-d9ec5d9ff721" id="id-90097a33-101c-4b03-b66e-d9ec5d9ff721"></a>

La Gestalt fue una corriente psicológica del siglo XX que prestó particular atención a la percepción, esto es: la forma en que las personas distinguen elementos y de qué manera estos son organizados en el subconciente. A partir de numerosas investigaciones llegaron a delinear los principios básicos de la percepción en 8 leyes: Ley de la buena forma, Ley de la pregnancia, Ley del cierre, Ley de la similitud, Ley del contraste, Ley de la proximidad, Ley del movimiento común y Ley de la experiencia. Estos conceptos son especialmente útiles para el diseño de interfaces intuitivas y simples aprovechandolos en favor del usuario.

### Heurísticas <a href="#bc1423c4-996f-4a20-a987-e75a254afb79" id="bc1423c4-996f-4a20-a987-e75a254afb79"></a>

Las heurísticas son un conjunto de principios que facilita la evaluación de usabilidad. Consiste en recorrer un determinado flujo, interfaz o plataforma explorando sus distintas funcionalidades e identificar los errores que pueda tener. Existen distintas propuestas aunque las más reconocidas son las heurísticas de Nielsen.

### Identidad <a href="#bcb1a993-7348-4975-a857-6f69d84c509a" id="bcb1a993-7348-4975-a857-6f69d84c509a"></a>

El término ‘identidad’ se refiere al ADN y la esencia. Así, la identidad acota, más allá de sus rasgos estéticos, aspectos intangibles más profundos como son sus valores, sus principios y el modo en que ambos se expresan. De esta manera, todos sus grupos de interés perciben la compañía de la misma manera y reciben un mismo mensaje.

### Interacción <a href="#id-5df341e0-7dfe-4911-bc08-72b5f86078fc" id="id-5df341e0-7dfe-4911-bc08-72b5f86078fc"></a>

La interacción entre el usuario y producto/servicio es la forma en que se mueven e interactúan con la interfaz, las posibilidades que se le brindan, el nivel de interactividad, a que tiene acceso, etc.

### Layout <a href="#a7b31337-5218-4a45-b1a0-8cc514545b0d" id="a7b31337-5218-4a45-b1a0-8cc514545b0d"></a>

Layout se refiera a la disposición visual de elementos (texto, imágenes, íconos, etc.) en una pantalla, página o cualquier otro soporte gráfico. Detrás de esta propiedad del diseño existe una necesidad comunicacional asociada a la naturaleza del producto y su público.

### Layer-Cake Patter <a href="#id-6a9072d8-21d4-4891-b5e1-6b11874450a5" id="id-6a9072d8-21d4-4891-b5e1-6b11874450a5"></a>

Este patrón de lectura recibe su nombre de la figura que genera el mapeo del mismo, reminiscente de una torta en capas (layer cake). Es uno de los patrones más eficientes de escaneo y lectura de contenido por parte de los usuarios y se estructura fundamentalmente desde el uso de títulos (headings) y subtítulos (subheadings) que se destaquen y sean descriptivos de la información que va a ofrecer la página y/o artículo.

### Mockup <a href="#f624974c-7d62-46eb-9b20-b2a437adbd9d" id="f624974c-7d62-46eb-9b20-b2a437adbd9d"></a>

Es una representación visual del producto. Así como los wireframes muestran la estructura, los mockups presentan como se verá dicho producto en fidelidad media o media-alta. Son muy útiles para tomar desiciones sobre el estilo visual, la paleta de colores y la tipografía. Pueden incluir el Diseño de Interación (IxD)

### Patrones de Diseño <a href="#id-31204435-28f8-4e7f-a26f-d4ec16026446" id="id-31204435-28f8-4e7f-a26f-d4ec16026446"></a>

Los patrones de diseño de navegación e interacción son soluciones preexistentes, ya probadas y validadas, a problemas recurrentes a los que se enfrentan los diseñadores a la hora de desarrollar una interfaz. De esta manera nos permiten acelerar nuestro trabajo y al mismo tiempo apelar a un ecosistema al cual los usuarios ya están acostumbrados.

### Patrones de Escaneo de Texto <a href="#id-01af34b1-8d2f-4cb3-a9ab-ff4182901519" id="id-01af34b1-8d2f-4cb3-a9ab-ff4182901519"></a>

Los patrones de escaneo de texto surgen de investigaciones desarrolladas por medio de Eyetracking (seguimiento del comportamiento visual) y nos indican de qué manera se comporta la vista de los usuarios al navegar una interfaz. Esto es, a qué prestan mayor atención, de qué manera se mueven por los distintos bloques de texto de la página, qué cosas ignoran, etc. La forma en que un usuario escanea una página depende, en parte, del diseño de la misma.

### Prototipo <a href="#a697bf3c-9b07-40e7-8117-748c84b693c9" id="a697bf3c-9b07-40e7-8117-748c84b693c9"></a>

Un prototipo es una versión preliminar de un diseño. Nos permite explorar nuestras ideas de forma visual e interactiva, antes de invertir tiempo y dinero en el desarrollo. Existen diferentes debilidades de prototipos, desde el papel y lápiz, hasta los creados mediante algún software que permiten simular el uso interactivo y presentar la vista final de los contenidos.

### Responsive Design <a href="#ccb184e4-f0e1-489c-a297-10c94a1ce8f1" id="ccb184e4-f0e1-489c-a297-10c94a1ce8f1"></a>

Es una concepción de diseño que responde al comportamiento del usuario y su entorno basado en el tamaño de su pantalla y plataforma. La práctica consiste en una mezcla de grillas flexibles y otros elementos que permiten que un diseño digital se adapte de manera óptima a cualquier dispositivo.

### Template <a href="#ed62c216-caa2-4580-88c7-1f35e6d1cdc4" id="ed62c216-caa2-4580-88c7-1f35e6d1cdc4"></a>

Un template (o plantilla) es un documento base prediseñado que nos sirve de guía a la hora de generar y ubicar contenido. Nos indica la estructura de un diseño o sistema para generar orden y consistencia a lo largo de un determinado proyecto.

### Test**eo "de guerrilla"** <a href="#cffdc7b4-294d-47af-9dac-5659f7b64379" id="cffdc7b4-294d-47af-9dac-5659f7b64379"></a>

Este tipo de testeos con usuarios se suele aplicar en estadios tempranos de la etapa de prototipado y se caracteriza por tener un bajísimo costo de implementación y aportar un gran valor al proyecto en cuanto a detección temprana de errores de diseño. Los prototipos que se usan en esta actividad son en baja fidelidad, no hace falta más que la interface planteada con lapiz sobre papel, el usuario, un facilitador y un observador.

### UI Design <a href="#ed62c216-caa2-4580-88c7-1f35e6d1cdc4" id="ed62c216-caa2-4580-88c7-1f35e6d1cdc4"></a>

El Diseño de Interfaz contempla la selección de los elementos de interfaz adecuados para lograr y organizar la pantalla de una manera que sea fácil de entender y usar por el usuario. El objetivo es hacer la interacción del usuario tan eficiente y simple como sea posible.

### Usabilidad <a href="#id-770fb3ce-eb3f-4baf-9c58-253ad66795ac" id="id-770fb3ce-eb3f-4baf-9c58-253ad66795ac"></a>

La usabilidad tiene relación con la facilidad de uso de los productos o servicios así como la capacidad de que los usuarios y visitantes puedan explorar por el mismo de una forma práctica, útil y sencilla.

### User Flow <a href="#id-78d013e6-636b-48f8-b70b-99bd4a0828ec" id="id-78d013e6-636b-48f8-b70b-99bd4a0828ec"></a>

Los User Flows, o simplemente Flows (flujos), son una representación gráfica de las actividades y acciones realizadas por los usuarios de un sistema determinado. Es una herramienta de suma importancia para el trabajo de todo el equipo de un producto/servicio ya que visualiza y documenta el funcionamiento y permite detectar caminos alternativos o no-felices que deben contemplarse.

### UX Writing <a href="#id-014f3fb9-ab71-433b-a68a-c6c3d4b6116d" id="id-014f3fb9-ab71-433b-a68a-c6c3d4b6116d"></a>

UX Writing es la práctica de diseñar las palabras y textos que las personas ven y oyen al interactuar con una interfaz. Es clave en la usabilidad de un producto ya que se refiere al diseño de la conversación entre el mismo y su usuario.

### Wireframe <a href="#b6dcdab9-0092-47d5-b6d1-3da130d698b3" id="b6dcdab9-0092-47d5-b6d1-3da130d698b3"></a>

Es un boceto, una representación de baja y media fidelidad de un sitio web o una app, generalmente hecha a mano, en lápiz y papel. También existen diversos *softwares* para crear wireframes.
