Este documento describe diferentes principios de diseño gráfico para interfaces como ritmo, proximidad, énfasis, formas, líneas, iconos y color que contribuyen a la usabilidad de un sitio web. Explica que el ritmo establece patrones para ordenar elementos mediante la forma, posición o color. La proximidad consiste en colocar elementos relacionados cerca para formar unidades coherentes. El énfasis distingue elementos por tamaño, ubicación o color. La combinación de formas geométricas y abstractas junto con el contraste de colores

1. Actividad Tema 1 – Planificación de interfaces gráficas
Ritmo
La repetición o ritmo es una forma de establecer patrones con los que se ordenan los elementos de
la página. De esta manera los usuarios comprenden el contenido y acceden a él en poco tiempo. Es
una de las claves principales para mantener la usabilidad del sitio.
El ritmo se consigue estableciendo un patrón basado en la forma, posición, color, o una
combinación de todos.
La web utiliza un ritmo no armónico, en tanto que provee una sensación discordante, aumentando
el mensaje del diseño. Se trata de un patrón irregular, con el fin de proporcionar un aspecto informal
al diseño – deseable en el caso de un público objetivo joven -.
Proximidad
Consiste en la colocación próxima de los elementos que estén relacionados, formando unidades
visuales que brindan coherencia al contenido de la página.
Tan importante es que los objetos similares se encuentren próximos (como los artículos), como los
diferentes alejados (menú, pie de página y contacto).

2. Las clases de proximidad son: por menor distancia – el caso de los dos artículos - , por contacto –
evitando que exista separación entre ellos – y por superposición, es decir, creando un breve
solapamiento que provea la sensación de proximidad entre ellos.
Énfasis
El énfasis supone una forma de distinguir algo dentro de un elemento. Se consigue proporcionar
énfasis a los elementos en función de su tamaño, ubicación y color. En el caso del texto, un ejemplo
son los títulos.
Podemos observar, por ejemplo, como se distingue claramente la selección de “Home” (inicio) en
el menú superior horizontal mediante su inclusión en un bocadillo. Además, es el primer elemento
del menú y está señalado por una flecha.
Por otra parte, la sección dedicada a contenidos es la que ocupa una mayor proporción de la web, a
la vez que está ubicada en la parte central y su fondo es de color naranja, el más llamativo del site.
Los elementos subdominantes, consiguen captar la atención y dar la opción de que sea el usuario
quién decida dónde continuar su navegación en función de sus intereses. Por ejemplo, con los
títulos de los artículos.
Los elementos subordinados son aquellas informaciones anunciadas por los elementos dominantes
y subdominantes. Su legibilidad debe ser muy buena.
Tipo de formas
En la web se combinan formas geométricas y abstractas.
Las formas geométricas, consistentes en objetos simétricos y regulares (como los rectángulos o las
flechas situadas bajo la sección de contacto, la flecha que señala el menú horizontal superior...),
proporcionan al usuario una sensación de seguridad y orden.
No obstante, debemos fijarnos en que la web está dirigida a un público joven. Es por ello que
también se han utilizado formas geométricas un tanto difuminadas o alteradas en sus bordes y
formas abstractas, cuyo empleo ha crecido en los últimos años.
Debemos recordar que una de las principales utilidades de las formas es organizar o separar
elementos, así como dirigir la vista del usuario. En este sentido, las formas se han utilizado para
distinguir las diferentes secciones de la web, así como sus contenidos.
Tipo de líneas
Las líneas se utilizan para la separación de los contenidos, consiguiendo claridad en el mensaje.
Las única línea que aparece es la que separa los dos artículos o entradas de la sección dedicada a
contenidos.

3. Iconos utilizados
Los iconos son imágenes gráficas que suelen ser metáforas de las acciones que se pueden hacer.
En la web aparece el icono de un sobre para indicar que desde esta sección de la página puede
enviarse un e-mail y contactar con la empresa que ofrece los servicios anunciados en el site. De esta
manera se evita que el usuario deba leer texto, obteniendo de una manera más rápida las opciones
disponibles en el site.
Gama de colores
Los rojos, amarillos y naranjas resultan estimulantes. Los azules y verdes brindan la sensación de
tranquilidad y sosiego.
En el caso de esta web se ha utilizado la combinación de colores opuestos, la cual consiste en la
selección de los colores que se encuentran en oposición dentro de la rueda de colores (como el
verde y el violeta). Esta combinación – a diferencia de la monocromática o los colores análogos -
se utiliza cuando desea generarse un alto impacto visual.
Además, el elevado contraste en la selección de colores, así como su fortaleza, es adecuado para un
público joven.
Estructura de la página
Logotipo, menú o navegador horizontal superior, zona lateral izquierda, zona principal central-
derecha, pie de página.