Diseño Visual de Interfaces Visuales

ESTRUCTURA Y ELEMENTOS DE DISEÑO

EL COLOR El color es un fenómeno psicológico, una experiencia subjetiva que depende de dos conjuntos de factores: las propiedades físicas de la luz y el modo en que se organiza el sistema nervioso humano.

R

G B

FORMATOS DE IMAGENLas imágenes digitales se pueden guardar en distintos formatos. Cada uno se corresponde con una extensión específica del archivo que lo contiene. Los más utilizados en la actualidad son: BMP, GIF, JPG, TIF y PNG

PIXELES

Un píxel o pixel, es la menor unidad homogénea en color que forma parte de una imagen digital, ya sea esta una fotografía, un fotograma de vídeo o un gráfico.

La resolución expresada en (ppp) o (ppi), son los píxeles por unidad de longitud, es decir, los píxeles por pulgada. La pulgada mide 2,54 cm. La resolución define la cantidad de píxeles que contiene una imagen y la dimensión de estos píxeles expresan de qué forma se reparten en el espacio.

La resolución mínima para impresión es de 300 DPI, la resolución mínima para pantalla es de 72 DPI.

PIXELES

FUENTES TIPOGRÁFICASUna fuente es un conjunto de caracteres del tamaño de un tipo de letra, y usualmente incluye letras de caja alta, caja baja, versalitas, cifras, fracciones, ligaduras, signos matemáticos, de puntuación y de referencia.

FACTORES QUE AFECTAN LA TIPOGRAFÍA

Interlineado

Grosor

Ancho de los caracteres

Textura

FACTORES QUE AFECTAN LA TIPOGRAFÍA

AA

TIPOS DE ESTRUCTURASLa estructura es muy importante para definir una interfaz, ya que una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que una interfaz con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro programa o sitio.

Para escoger el tipo de estructura hay que tener en cuenta: Planifique la estructura antes de empezar .La estructura depende del contenido.

TIPOS DE ESTRUCTURASJerárquica La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida. Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.

TIPOS DE ESTRUCTURASLineal Esta estructura es muy útil cuando queremos que el usuario siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.

Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.

TIPOS DE ESTRUCTURASRed La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar.

Interfaz de usuario Los usuarios de sistemas, frecuentemente juzgan el sistema por su interfaz.

Un diseño de interfaz pobre puede provocar que el usuario cometa errores catastróficos, por esta razón muchos sistemas nunca son usados.

Las Interfaces de usuario se soportan en ventanas, iconos, representación de entidades, desplegado de menús y punteros.

Interfaz de usuario Modelo Mental Concepto que proviene de la psicología, es un mecanismo del pensamiento mediante el cual un ser humano intenta explicar como funciona el mundo real..

Interfaz de usuario Modelo Mental En GUI, el modelo mental es la representación que construye una persona para comprender el funcionamiento de un sistema. Ayuda a los usuarios a formar un acertado y útil modelo del sistema.

Paradigmas para la interfaz de usuario (Alan Cooper)

Paradigmas en el diseño de interfaces:

• Paradigma Tecnológico, se basa en entendercomo trabajan las cosas.

• Paradigma Metafórico, se basa en intuir como trabajan las cosas.

• Paradigma Idiomático, se basa en aprender como se llevan a cabo las cosas.

Paradigma tecnológico

• La interfaz expresa los elementos de la tecnología en que se ha construido, muestra el esquema interior del software

• El usuario ha de entender cómo funciona para poder interactuar con él

• No es el software el que se adapta al usuario sino al revés

Paradigma metafórico

La interfaz se expresa a través de una metáfora que oculta el funcionamiento interno del programa y que se refiere a términos más o menos familiares para el usuario

Paradigma metafórico

Son ampliamente conocidas las metáforas como “escritorio”, “papelera”, “carpeta”, “documento”, “ventana”

Paradigma idiomático

Está basado en la forma en que aprendemos nuevos lenguajes Sólo depende de la habilidad de los humanos para aprender

• Por ejemplo, el ratón no es la metáfora de nada pero se aprende a usar de forma efectiva

• Las barras de scroll son otro ejemplo de lo mismo, no representan nada pero se aprenden muy fácilmente.

• –En la realidad no es tan fácil “deshacer” (undo)

Paradigma idiomático

• El diseño de interfaz también construye su propia gramática

• Soluciona los problemas de los dos paradigmas anteriores

• Los elementos de un GUI son elementos que entendemos idiomáticamente más que intuirlos metafóricamente

• Sólo se depende de la habilidad para aprender • No se fuerza a entender el cómo y el por qué. • Las metáforas útiles se pueden acabar, pero

siempre se puede crear un nuevo idioma

Principios del diseño GUI • Simplicidad • Consistencia • Familiaridad • Disponibilidad • Flexibilidad • Eficacia • Predicción • Retroalimentación (Feedback) • Seguridad (Estabilidad) • Affordance

SIMPLICIDAD

CONSISTENCIA

Familiaridad

Disponibilidad

EFICACIA

PREDICCIÓN

RETROALIMENTACIÓN

AFFORDANCE

“Las reglas se pueden romper, pero nunca ignorar”.

Ten un Concepto Si no hay mensaje, ni idea, ni narración, no es diseño gráfico

Hay que comunicar, no decorar. "¡Oh, es precioso! Pero ¿qué es?

Habla con un único lenguaje visual Pregúntate, "¿Se relaciona todo con todo de forma armoniosa?".

Utiliza dos familias tipográficas como máximo. Bueno, o tres. Demasiados tipos son motivo de distracción...

Golpea en dos tiempos: ¡un, dos! Atrae la atención del espectador hacia un elemento importante y después condúcela por lo demás.

Escoge los colores con un propósito. No utilices los primeros que se te ocurran.

Si puedes hacerlo con menos, adelante. Si la idea esta clara, es innecesario recargarla.

El espacio negativo es mágico: no lo rellenes ¡créalo! El espacio llama la atención sobre el contenido.

Trabaja la tipografía como si tuviera la misma importancia que la imagen. La tipografía es material visual, y como tal, necesita relacionarse con los demás elementos del diseño.

Tienes que ser universal; recuerda tu trabajo no es para ti. Lo universal es el dominio del diseñador.

Busca en la historia, pero no la repitasAprende del trabajo de los demás, pero haz tú mismo los deberes.

Diseñar es mucho más que simplemente ensamblar, ordenar, incluso editar: es añadir valor y significado, iluminar, simplificar, aclarar, modificar, teatralizar, persuadir y, quizá, incluso entretener.

Es el principio, el fin, el proceso y el producto de la imaginación.

Taller: Visión FuturistaGenerar una propuesta de diseño a partir de un elemento que requiera la creación de una interfaz visual, el objeto debe ser inexistente, es una visión al futuro.

El trabajo debe tener: • Un análisis del objeto a diseñar, que objetivo va a cumplir dicho elemento. • Que interfaz de usuario propone para el producto de diseño. • Cual es el funcionamiento del sistema mediante las interfaces de usuario. • Describa los componentes del sistema y explique los tipos de relaciones y propiedades que este tiene. Tenga en cuenta la interfaz como un componente importante dentro de su funcionamiento.• Criterios para el Diseño de la Interfaz. • Utilización de bocetos del objeto propuesto.