Diseo

de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

1. Introduccin
El diseo de la interfaz de ExtraTele se basa en la intuitividad, frescura y sencillez.
Como ya he explicado con anterioridad en otros documentos del proyecto, ExtraTele
est pensado, sobre todo, para aquellas personas que consideran la televisin y los
productos que en sta se emiten como un hobbie. Hablamos de personas que emplean
parte de su ocio consumiendo televisin porque les entretiene y les divierte.
Teniendo esto en cuenta, he tratado de que el diseo de la web sea divertido, llamativo y
agradable a la vista. Los ingredientes fundamentales para tratar de conseguir esto han
sido el uso del color y tambin de la tipografa.
Para explicar el uso efectuado de estos dos elementos, comenzaremos hablando del
logotipo de la web.

2. El logotipo

Comenzando por el color, vemos el nombre de la web en dos diferentes, en funcin de

las dos palabras que lo integran. Se tratan de un rojo y un morado algo apagados. La
eleccin del rojo y el morado deriva, en primer lugar, en que son dos colores potentes
que captan la atencin y, en segundo lugar y, a decir verdad, ms importante, en que ya
existen otras webs que tambin hablan de televisin como FormulaTV y Vertele cuyos
colores son el azul y el verde, respectivamente. Por ello, he credo conveniente coger
otros colores y no abusar de esos dos, para tratar de crear una identidad visual
corporativa que se diferencie de la de los potenciales competidores.
Esos dos, por ser los que integran el ttulo, seran los dos colores principales de la web;
no obstante, la gama cromtica de ExtraTele la componen todos los colores de la clsica
imagen de barras de televisin. Dichas barras, adems, podemos verlas en el fondo del

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

logotipo en dos niveles de densidad o transparencia. Por sus mltiples colores, aportan
un gran dinamismo, riqueza visual y hacen que todo sea muy llamativo.
Adems del nombre y el fondo, el tercer elemento que integra el logotipo es un pequeo
icono de una televisin, una imagen en formato .png. Con unas lneas muy bsicas, este
dibujo recuerda a los productos audiovisuales de animacin, por lo que aporta
dinamismo y frescura. Adems, en la pantalla se ven nuevamente las barras tpicas del
medio televisivo, que caen del cristal, aportando as un toque de originalidad, mediante
el dibujo, a todo el logotipo.
Para finalizar con el logotipo, hay que destacar que la tipografa escogida ha sido la
clakduster. Con un trazo entre manual, infantil y similar al de algunos tebeos, se trata de
potenciar esa idea de diversin y carcter ocioso que, como deca al inicio, se pretende
transmitir al usuario. Dicha tipografa ser la caracterstica del sitio web.
Por ltimo, sealar que el ttulo, para conseguir diferenciarlo ms del fondo y que sea
ms fcil de leer, contiene un pequeo contorno de color negro y tambin una muy sutil
sombra.

3. La cabecera
A continuacin, veremos lo que es la cabecera de la web, compuesta por el logotipo y
el men.

El men, que estar visible desde cualquier lugar del sitio web, en primer lugar se
caracteriza por su disposicin centrada y superior, adems de por estar organizado
mediante recuadros.

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

En la primera fila, encontraremos las pestaas de novedades, making ofs, tomas falsas,
curiosidades y foro. La primera es la home page, las tres siguientes es donde estar
clasificada toda el material de la web segn su naturaleza y la cuarta es el foro, donde
los usuarios podrn hablar de diferentes temas relacionados con la televisin.
En la segunda fila hay dos recuadros algo ms grandes: programas y series. Cada uno
lleva al usuario a una seccin de la web donde podr ver el listado de los programas y
series. As, los internautas podrn encontrar junto todo el contenido extra de la serie o
programan que deseen.
La tipografa, tambin un punto ms grande en los dos recuadros de la segunda fila, es
de nuevo la clakduster.
En cuanto al color, en esta ocasin el fondo es de un color ms claro y sobrio, para
diferenciarlo del fondo multicolor y, adems, no sobrecargar excesivamente la visin.
Las letras son negras, para que resalten sobre el fondo claro. Lo mismo sucede con las
lneas de los recuadros.
Tambin podemos ver que cada recuadro contiene un dibujo sencillo y de la misma
naturaleza que el del logotipo (la tele) que trata de ilustrar el contenido de cada seccin.
Al pasar el cursos por los recuadros, veremos una pequea animacin de los pequeos
iconos, lo que aporta dinamismo. Pero, al pasar el cursor, tambin suceder que de
algunos recuadros (secciones), se desplieguen ms subsecciones. Lo vemos en la
siguiente imagen.

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

Las subcategoras se muestran en el men sobre un fondo de color oscuro, buscando el

contraste con el fondo claro de las categoras principales. Los cuadros tienen unos
bordes claros, del mismo color que el fondo del men principal, y las letras son blancas,
buscando de nuevo el contraste de color con el fondo para que puedan leerse fcilmente.
En cuanto a la tipografa, en esta ocasin no es la clakduster, sino la american
typewriter. Esto se debe a que no quera que las casillas de las subcategoras tuviesen el
mismo protagonismo que las de las categoras principales. Por ello he optado por una
letra ms recta, con un diseo ms similar al que estamos acostumbrados a ver y, por
tanto, ms discreto. Por la misma razn, el tamao del texto es menor en las
subcategoras.
Por ltimo en cuanto a la cabecera a nivel general he de destacar que tiene un fino borde
negro en el lado inferior del rectngulo, con la intencin de que identifiquemos
claramente el lmite de la cabecera y la diferenciemos del fondo del resto del sitio web.

4. La Home Page

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

Al entrar a la web, nos encontraremos la home page. En ella veremos, la cabecera, como
en cualquier parte de la web, y debajo la seccin Novedades.
Podemos saber que estamos en esta seccin mediante el cartel que se sita a mano
izquierda debajo del men. Se trata de un recuadro azul con letras maysculas con el
nombre de la seccin en tipografa clakduster.
Esta seccin contiene bsicamente lo ms novedoso de los contenidos del portal,
organizado en las diferentes categoras de Making ofs, Tomas falsas y Curiosidades
que, como hemos visto, son accesibles desde el men.
La disposicin, como vemos, ser en tres columnas, mostrando as el contenido de cada
categora de manera vertical. Cada una de estas columnas est separada de las dems
por una lnea negra. En definitiva, nos quedamos con tres columnas principales de
similar tamao y, a la derecha del todo, una columna ms pequea en la que los
anunciantes pondrn su publicidad.
Cada columna, salvo la de la publicidad, va encabezada del nombre de su categora en
un recuadro. Estos nombres tienen una tipografa clakduster. Las letras blancas destacan
sobre los colores vivos del relleno de los recuadros.
Los aportes ms actuales de cada categora, como vemos, estarn presentados con una
foto y, debajo, el nombre de la serie o programa. En la seccin Curiosidades ser
diferente, y el texto ser el nombre del artculo.
En las columnas Making ofs y Tomas falsas, la disposicin de los elementos ser arriba
fotografa y debajo de sta el texto, centrado. En cambio, en Curiosidades, imagen y
texto estarn a la misma altura. Adems, se ir alternando la disposicin lineal: primero,
texto izquierda e imagen a la derecha (localizaciones de Isabel), segundo, imagen a la
izquierda y texto a la derecha (trajes de Juego de Tronos).
La tipografa de los textos que acompaan a las imgenes, ilustrando ambos las
diferentes piezas de contenido, no es ni clakduster ni american typewriter, sino calibri.
Es el tercer y ltimo tipo de fuente que se usar en el portal.

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

Las letras de los textos a los que nos referamos son de color negro, diferencindose as
del color del fondo de la web, que es blanco. Esta eleccin del fondo se debe a que la
cabecera tiene mucho color y considero que ello necesitaba ser compensado. Adems,
siendo el fondo blanco, damos un mayor protagonismo a todos los contenidos, que
sern publicados sobre l. Tambin, sin duda, el fondo blanco ayuda a que el
protagonismo de la cabecera sea mayor, puesto que hace que todava llame ms la
atencin.

5. Otras secciones
Las dems secciones y subsecciones del sitio web seguirn prcticamente el mismo
esquema que la home page en cuanto a colores de fondo y tipografa, disposicin de los
elementos, etc. No obstante, vamos a ver unos cuantos ejemplos de otras secciones para
explicar en cada caso las diferencias frente a la home page que, como deca, su
estructura es la base para construir la de todo el portal.
Esto es lo que aparecer cuando pinchemos en el men principal en la seccin Making
ofs.

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

Como puede verse y ya deca, la presentacin de los elementos es enormemente similar.

El principal cambio es el reparto del espacio: para la publicidad sigue quedando el
mismo hueco en el lateral derecho, sin embargo, el espacio principal ahora queda
dividido en dos, en lugar de en tres columnas. Esto se debe a que la seccin en la que
estamos, Making ofs, se divide en dos subsecciones, vdeos y fotos.
En cuanto a tipografa todo es igual que en la home page y tambin en cuanto a colores.
La excepcin en la colorimetra est en los recuadros con los nombres de la seccin y
subsecciones. Arriba a la izquierda, bajo el men, igual que en la home page tenamos
el texto novedades en un recuadro, ahora vemos Making ofs, el nombre de la categora
en la que estamos y no de color azul, sino rojo, pues era este color el que tena el
recuadro making of que preside la primera columna del espacio principal en la home
page.
Los recuadros con el nombre de las subcateogras vdeos y fotos tienen, como suceda
con los recuadros que encabezaban las columnas de la home page, color propio. En este
caso, naranja y amarillo.
Veamos ahora la seccin curiosidades:

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

De nuevo el cartel que nos indican en qu ventana estamos debajo del men, tambin
con el color que tena en la home page, verde en esta ocasin.
La disposicin del espacio vuelve a ser en tres columna principales ms la de publicidad
a la derecha. Los elementos de esta seccin, Curiosidades, presentan la disposicin que
ya presentaban en la columna Curiosidades de la home page: fotografa y texto a la
misma altura, alternando derecha e izquierda.

Por ltimo vemos la ventana Series, indicada por un cartel en forma de recuadro en el
mismo sitio que el resto de ventanas, esta vez con fondo azul, color que se ha asignado a
esta categora.
Si los usuarios pinchan en esta seccin podrn ver dos listados, uno de series nacionales
y otro de series extranjeras. Estarn todas las series sobre las que haya contenido en el
sitio web. Al pinchar en una, el usuario ver todo el contenido que existe en el portal
sobre esa serie.
Las series, ordenadas alfabticamente segn si ttulo, se presentan de la siguiente forma:
imagen a la izquierda ms texto a la derecha, con ttulo de la serie y cadena en la que se
emite entre parntesis.
8

Diseo de interfaz Extra Tele

4 Com. Aud.

ngel Gmez Gil

Si en el men, en vez de hacer click en la categora Series, se hace click directamente en

una de las dos subcategoras (nacionales o extranjeras), la pantalla mostrar lo mismo,
pero eliminando las de la otra categora, y el contenido quedara dispuesto en una
columna en el centro, en lugar de en dos, como aqu vemos.
Este hecho de hacer click en la subcategora del men en vez de en la categora
principal, tiene las mismas consecuencias recin explicadas para todos los elementos
que podemos ver en el propio men.