Diseño de una ventana

Teoría sobre creación de GUI

Proceso GUIDE completo

image

Guía de estilos

Look & Feel

El objetivo de la guía de estilos es conseguir un look and feel en toda la aplicación, siendo look la apariencia y el feel la forma en la que se interactúa. Hay beneficios para el usuario como incrementar la productividad y para el desarrollador disminuye las decisiones a tomar en el diseño.

Entorno de la guía de estilos

Los documentos necesarios para una guía de estilos son:

A partir de estos documentos se puede realizar una guía de estilos para la propia aplicación

Guía de estilos en la web

En la web la herramienta que se hace indispensable para los estilos es el CSS que permite separar aspecto del contenido, uniformizar el aspecto de varias páginas, cambiar globalmente el aspecto de una web y desarrollar más rápido nuevas páginas de la web al contar con el mismo CSS para todas.

Patrones

Son una forma más sencilla de realizar guías de estilos y deben contener ejemplos suficientemente variados y generales como para poder ser útiles para crear todos los interfaces de nuestra aplicación.

Ejemplo de patrones en OpenOffice

image 1
image 2

Metáforas

Una metáfora en Comunicación Persona-Máquina (CHM) es una representación de una interfaz que pretende que el usuario la identifique con otra interfaz (posiblemente no informática) que conozca. Por ejemplo el ratón cuando cambia al icono de la mano con el dedo, imita el hecho de pulsar con un dedo.

Elementos de diseño

Ventanas

Interfaces indivisibles que permiten realizar una actividad concreta, cada una de ellas compuesta por controles con los que interactúan los usuarios. Las ventanas se relacionan con otras ventanas pudiendo a partir de unas visitar otras. No tienen porque coincidir con las ventanas del SO.

Controles

Permiten al usuario realizar una o varias acciones puntuales. Son de pocos tipos y tienen una apariencia estandarizada. Hay controles que en vez de realizar una acción al usuario, solo muestran información.

Diseño de una ventana

El diseño de una ventana consiste en un esquema donde se representan los controles en sus posiciones relativas y aproximadas. Se identifican en ella los controles con un nombre y con la clase de objetos de usuario, identificando cada ventana.

Para el diseño debe tener una navegación y flujo de trabajo, ha de ser de la manera en la que se lee, en el caso de occidente de arriba abajo y de izquierda a derecha.

Es ideal que tengan una composición armónica:

Composición armónica: Secuencial

En este caso se trata de que la composición se realice con esta lógica

Composición armónica: unidad

Mantener un uso similar de tamaño, colores y formas y dejar menos espacio entre los elementos que entre estos y el margen.

Composición armónica: proporcionada

Composición armónica: simplicidad

Se puede calcular la complejidad de una ventana sumando los 3 elementos anteriores, por ejemplo la calculadora de Windows (sin menú):

image 3