+

INTERFACES

UNLaM | Diseño Gráfico para la Web

Universidad Nacional de la Matanza
Departamento de Ingeniería
Tecnicatura en Desarrollo Web
Introducción al Diseño Gráfico en la Web
da Costa // Minetti // Padovano // Vega
+
Definición

 INTERFAZ (del inglés interface, superficie de contacto)

es una conexión física y funcional entre dos aparatos o
sistemas independientes.

 La INTERFAZ será el mecanismo, entorno o herramienta

que hace posible la comunicación entre dos sistemas
cualesquiera.
+
Interfaces
+
Interfaces de Usuario

 Cuando uno de los sistemas que se

comunican es un ser humano utilizamos
el concepto de INTERFAZ DE USUARIO.

 Tenemos un sistema físico o

informático y una persona que desea
interaccionar con él, dándole
instrucciones concretas, siendo la
interfaz de usuario la herramienta que
entiende a ambos y es capaz de traducir
los mensajes que se intercambian.
+
Interfaces de Usuario

 Las interfaces de usuario son utilizadas en

multitud de sistemas que nos rodean y
hacen nuestra vida más cómoda y segura.

 Inicialmente las interfaces de usuario eran

desarrolladas pensando solamente en su
correcto funcionamiento, luego se
comprobó la necesidad de que fueran
fácilmente usables y después se hizo patente
la importancia de la estética en las mismas .
+
Interfaces de Usuario

 Estamos tan acostumbrados a las interfaces

gráficas que se puede afirmar que, si
desaparecieran, la gran mayoría de los usuarios
de aplicaciones informáticas quedarían
anulados.
 Sistemas operativos y programas que antes
funcionaban casi exclusivamente en modo de
comandos han tenido que actualizarse y
ofrecer a los usuarios interfaces gráficas
equivalentes para no quedarse olvidados por el
público general.
+
Interfaz de usuario MS-DOS
+
Interfaz gráfica de Usuario
+
Interfaz de usuario Microsoft

Word Windows
+
Interfaz de Navegador vs. Buscador
+
Interfaces Web

LINK BUILDING  Los sitios web supusieron la aparición de las

interfaces web, interfaces gráficas de
usuario con unos elementos comunes de
presentación y navegación que pronto se
convirtieron en estándares.
 El diseño de estas ha evolucionado con el
tiempo hacia un esquema general
perfectamente definido.
+
Interfaces Web

 Interfaces bien definidas, con un conjunto de

componentes gráficos y funcionales similares que
hacen posible que sea cual sea el usuario que accede
a un sitio web cualquiera la comunicación entre ellos
sea posible y efectiva.

ENCABEZADO PIE

CUERPO NAVEGACIÓN
+
Encabezado

 El encabezado es un elemento común en las páginas web

que bien utilizado se convierte en identificador del sitio,
aportando al mismo un estilo propio que lo distingue.

 Es una zona de la interfaz web situada en la parte superior

de la misma de anchura generalmente igual a la de la
página y altura variable, en la que se ubica generalmente
el logotipo del sitio web o de la empresa propietaria.
+
Encabezado > Funciones

 Identificar el sitio web en el que se encuentra el usuario,

mediante el logotipo y el nombre del mismo, de la
empresa propietaria o de la marca que representa.

 Dar personalidad propia al sitio, definiendo un estilo

propio que exprese su naturaleza e identidad,
generalmente basado en los colores corporativos de la
empresa o marca.
+
Encabezado > Funciones

 Identificar cada una de las páginas pertenecientes al

sitio web, ya que el encabezado suele ser común en
todas ellas, creando con ello un elemento de referencia.

 Crear una separación visual entre el borde superior de

la interfaz y el contenido central de la misma, haciendo
más cómoda su visualización y lectura.
+
Navegación

 Los sistemas de navegación son los elementos de

una interfaz que permiten la navegación por las
diferentes secciones y páginas que componen el
sitio web.

 Se presentan como menús formados por

diferentes opciones, con las que el usuario puede
interactuar; al hacer click sobre cada una ellas se
carga una página o sección diferente.
+
Navegación

 Los sistemas de navegación son una pieza

de vital importancia para la experiencia del
usuario de nuestro sitio web.

 Cada menú de navegación puede estar

formado por opciones textuales, gráficas o
ambas, siendo frecuente utilizar en ellas
efectos dinámicos para acentuar el carácter
interactivo de las mismas.
+
Navegación > Características
 Establecer un modo de ir de un sitio a otro dentro de la
web. La navegación debe ser clara, concisa, consistente
y fácilmente identificable dentro de la página.
 Comunicar al usuario la relación entre el contenido que
está visualizando y la navegación del sitio. Debemos
permitir que el usuario sepa en todo momento dónde se
encuentra, hacia donde puede ir desde este punto y qué
partes del sitio ha visitado ya.
+
Navegación > Características

 Reflejar la arquitectura del sitio que subyace al

sistema de navegación. Debemos diferenciar la
navegación global, la navegación local o subsecciones
y la navegación contextual.

 Permitir volver a la página de inicio rápidamente. En

un sitio web la página de inicio sirve como punto de
partida y como lugar al que volver cuando nos
encontramos perdidos, por eso debe ser sencillo ir a
este punto desde cualquier parte del sitio.
+
Navegación > Ubicación

 Su ubicación en la interfaz debe permitir un cómodo

acceso a las opciones.

 Hay dos tipos de barras de menús, los menús

horizontales y los verticales. Ambos son igualmente
usados en los diseños web. Los dos permiten
desarrollarse en menús desplegables (aunque es más
recomendable utilizar los menús horizontales para
ello), y los dos también, permiten desarrollarse en
botones de rollover.
Menús
desplegables
Menús
desplegables
 +

Menús secundarios
+
+

Menús con íconos

Categorías de menús
Categorías de menús
+
+
Cuerpo de la página

 El cuerpo es la parte de la página web donde se presenta

al usuario toda la información referente a los contenidos
de la página.

 El cuerpo de la página va a ser el lugar donde el usuario

visualizará la información que busca, el punto donde
podemos comunicarnos con él directamente sobre una
cuestión concreta y determinada.
+
Cuerpo de la página

 Al ser la parte más importante de la interfaz, el espacio

destinado a ella debe ser el mayor de todos, ocupando
generalmente entre el 50% y el 85% del total.

 Los contenidos específicos del cuerpo de la página

variarán según sea una página textual, un formulario, una
ficha, una tabla, etc., pero existirán algunos elementos
característicos de esta zona, que deberán estar presentes
generalmente en todos los casos: títulos, líneas
separadoras, viñetas, etc.
+
Cuerpo de la página

 Todos estos elementos gráficos que situemos dentro del

cuerpo de página deben presentar un aspecto similar al
del resto de elementos de la interfaz, respetando sus
estilos generales de diseño.
Jerarquía de la información
Iconización
Tablas y organización
Gráficos y distribución de datos
+
Pie de página

 El pie de página es un elemento opcional, que suele

contener información muy concreta.

 El pie de página suele contener un menú auxiliar que

permita al usuario continuar navegando por el sitio
web sin tener que volver a buscar el menú principal.

 También puede contener un menú específico, en el

que se suelen mostrar enlaces a servicios muy
particulares del sitio web, como contratación de
publicidad, formulario de contacto, ofertas de empleo,
condiciones de uso, políticas de seguridad, etc
(GOOGLE)
+
Pie de página
 Uno de los usos más comunes del pie de página en la
actualidad es mostrar información sobre la empresa
propietaria del sitio web o de su responsable directo.
(VIRTUAL – REAL)
 Esta información se suele complementar con el
número de teléfono, mail redes sociales e información
sobre copyright de los contenidos de la web.
+
Pie de página

 El pie de página establece una delimitación

del final del documento, que ayuda al
usuario a definir visualmente las diferentes
zonas de la página y evita el mostrar
contenidos "pegados" a la parte inferior de
la ventana del navegador web.
+
Pie de página de Envato Elements
+
Pie de página de Skype
+
Sitios para analizar
+

Elementos Modernos  Imagen Hero

de una interfaz web  Sliders / Carruseles
Cómo se llaman y para qué sirven
 Galerías

 Tarjetas
+
Imagen Hero

 Imagen de gran tamaño que aparece como el elemento

visualmente más destacado de una página web.

 Generalmente se ubica en el centro de la página de inicio, al frente

de cualquier otro objeto o, a lo sumo, con algunas líneas de texto
encima.
+
Imagen Hero

 Está diseñada para ser lo primero que llama la atención del usuario
al ingresar a la página.

 Suele contener información sobre temas importantes, como los

valores de la empresa, una característica prominente del producto,
el artículo más vendido, una noticia destacada, etc.
+
Slider o Carrusel

 Unslideshow es una presentación de una serie de imágenes,

generalmente estáticas, que se muestran en un orden
preestablecido.

 Muestranpresentaciones de imágenes y texto para dar a conocer

sus productos o los valores de la empresa.

 Disponenmás de una pieza de contenido en el mismo lugar (se

muestra una sola a la vez).
+
Slider o Carrusel

 Ofrecenalgún indicador (o navegador) de que hay más de una pieza

de contenido a mostrar, o diapositiva, dentro del carousel.

 Contienen imágenes y una pequeña cantidad de texto en cada

diapositiva.

 Incluyen
contenido sobre la marca o la misión de la organización,
información importante o promociones.
+
Slider o Carrusel

Podemos usar sliders para representar distintas clases de datos:

 Tours de producto (cada diapositiva nos muestra alguna característica

del artículo).

 Contenido nuevo y relevante (por ejemplo, noticias o nuevos productos).

 Galerías de fotos.

 Portfolios.

 Series de productos.

 Presentaciones tradicionales (por ejemplo, para explicar un proyecto).

Hero Header slider
Logos infinitos slider
Productos slider
Posts slider
Slider de escena
Fullscreen Slider
Slider de presentación de producto
Bloque de video a pantalla completa
Slider con texto estático
Testimonios
[Link] combina heros con sliders
+
Galerías

 Son
elementos capaces de listar pocos o muchos elementos de
manera visual.

 Pueden ser estáticas o dinámicas.

 Su composición puede ser geométrica o desorganizada.

 Puede incluir filtros y elementos de navegación como el paginado.

+
Tarjetas

 Es una forma de mostrar contenido en forma de tarjetas o Cards.

 Las tarjetas se pueden voltear para mostrar aún más contenido.

 Sepueden doblar para resumir y desdoblar para desarrollar la

información.

apilarlas se ahorra espacio; se pueden agrupar y/o desplegar para

 Al
ser utilizadas en el momento en el que sean requeridas.
+
Tarjetas

Puedes aprovechar este tipo de diseño si el contenido:

 Es
una especie de colección que cuenta con diversos contenidos
multimedia.

 Soportacontenido de amplitud variable e interacción en línea, como

una sección de comentarios o botones de enlace hacia redes sociales.

 Situ contenido condensa información clave junto con imágenes de

alta resolución para hacer la navegación más dinámica y fluida.