Tema 1 Diseño de Interfaces Web

---

Índice

1. Elementos de diseño
2. Color, tipografía, iconos
3. Componentes de una interfaz web
4. Mapas de navegación y prototipos
5. Guías de estilo
6. Aplicaciones para desarrollo web

1. Elementos de diseño

Fundamentos

• Balance

La fuerza detrás del balance es la gravedad. Si algo no tiene balance parece que está cayendo.El balance puede ser simétrico o asimétrico.

Simétrico	Asimétrico

• Contraste

Diferencia a los elementos de una página dándole mayor importancia a unos y restándole importancia a otros. Se puede lograr contrastando tamaño, color, tipografía y textura.

Contraste de color	Contraste tipográfico

• Énfasis

Un elemento tiene énfasis cuando sobresale de entre otros elementos. Se debe usar con cuidado porque si enfatizamos todo no se destaca nada.

• Ritmo

Se usa para lograr movimiento. Progresión visual de elementos que se repiten en un patrón determinado. Las claves para crear ritmo son la repetición y la variación.

• Unidad

La organización de los elementos y la relación entre ellos debe tener una clara organización.

Elementos

• Línea

Ayuda a organizar la información y a dirigir el ojo hacia los elementos.

• Forma

Cualquier figura geométrica que se genera con el uso de la línea o el color. Existen tres diferentes formas: Geométricas, Naturales y Abstractas.

Geométrica	Natural	Abstracta

• Textura

La textura le da a la página un sentido de superficie ya sea áspera o lisa, suave o dura. Da tridimensionalidad al diseño. Puede producir efectos emocionales ya que visualmente se relaciona la textura directament con el sentido del tacto.

Existen dos tipos de texturas: táctiles y visuales.

• Espacio

El espacio es vital para el diseño. Se define como el área o distancia entre las cosas o elementos visuales que forman una página, incluyendo el área en blanco.

El espacio en blanco es esencial ya que le permite un descanso al ojo mientras recorre su página.

• Tamaño

El tamaño crea una distinción o jerarquía entro los elementos existentes en la página. Es necesario trabajar con la proporción de los elementos para que el diseño sea funcional, organizado, elegante y efectivo.

• Tonalidad

La tonalidad es la variación de claro a oscuro en un solo color. Crea dirección y movimiento.

• Sicología de las formas. Qué transmite cada forma.

  • Círculo: Perfección, innovación, extroversión, protección, movimiento, adaptabilidad, vida social, universalidad y creatividad.
  • Cuadrado: Fortaleza, solidez, seguridad, orden, estabilidad, honestidad, realismo, confianza, compromiso y masculinidad
  • Rectángulo: Estabilidad y resistencia.
  • Triángulo: Enfoque, crecimiento, soporte, divinidad, inspiración, vitalidad, justicia, ciencia y poder.
  • Triángulo girado: Dirección, avance, retroceso y caída.
  • Hexágono: Inteligencia, perfección, unidad, sinergia, trabajo, sabiduría.
  • Pentágono: Cuerpo humano, naturaleza, armonía y orgánico.
  • Línea: Unión, acercamiento, cooperación, suavidad, dinamismo y simplismo.
  • Línea curva: Movimiento, amistad.
  • Línea vertical: Balance y eficiencia.
  • Línea horizontal: Silencio y confianza.
  • Línea diagonal: Dinamismo y alteración.
  • Corazón: Sentimientos, felicidad, amor, relacionamiento, identificación, encanto, empatía y nobleza.
  • Estrella: Logro, éxito, espiritualidad, libertad, salvación, triunfo, inmensidad, sueños y deportes.
  • Cruz: Unión, asistencia, colaboración, bivalencia, oposición y equipo.
  • Espiral: Continuidad, excelencia, ilusión, relativismo, energía y vitalidad.

  Diseños según la edad del público al que va dirigido

  • Niños (hasta 13 años)

  • Aprecian los efectos de sonido y animaciones
  • Les gustan diseños ricos en colores (navegación y texto sencillos)
  • Buscan elementos en la pantalla que les puedan sorprender. La recorren con el puntero con el fin de encontrar animaciones, etc.
  • Tienden a clicar en los banners ya que no suelen percibirlos como elementos distintos al contenido.
  • No suelen utilizar el scroll
  • Prefieren leer instrucciones breves antes de un juego. Un adulto intenta utilizar las aplicaciones directamente.
  • Deben evitarse las descargas lentas.
  • El interés de los niños se mantiene mientras las páginas son novedosas y divertidas. Importante actualizar la web.
  • Los niños menores de 8 años no piensan en términos abstractos. Les resulta mas fácil reconocer imágenes reales que símbolos.

  • Adolescentes (13-17 años)

  • Rechazan ser tratados como niños. Si perciben diseño infantil abandonan su uso.
  • Prestan mas atención que los adultos en la apariencia visual de una aplicación.
  • Priorizan tiempo breve de descarga.
  • Suelen leer poco en la web, prefieren que los conceptos se ilustren visualmente.
  • No les gusta leer texto demasiado pequeño.
  • Les gusta realizar actividades interactivas.

  • Mayores de 65 años

  • Debe evitarse la proximidad de colores amarillos, azules y verdes, ya que resultan difíciles de discriminar para algunos.
  • Debe existir buen contraste entre el fondo y el contenido
  • Se deben de evitar los fondos decorados, ya que interfieren en la lectura
  • Recomendable utilizar imágenes que tengan que ver con el texto.
  • Prefieren tipos de letra grandes (de 12 puntos al menos).
  • Recomendable fuentes de palo seco (sans serif) que las romanas (serif) u ornamentadas.

  2. Color, tipografía, iconos

  Color

  El color es la herramienta más eficaz y poderosa para comunicar ideas simbólicas. La combinación correcta de colores determina la funcionalidad del trabajo.

  El uso eficiente del color se logra conociendo la teoría y aplicándola de manera consciente a cada elemento que integra el diseño.

  Teoría del color.

  La teoría del color es un grupo de reglas básicas en la mezcla de colores para conseguir el efecto deseado combinando colores de luz o pigmento. La luz blanca se puede producir combinando el rojo, el verde y el azul, mientras que combinando pigmentos cian, magenta y amarillo se produce el color negro.

  • Aditivo: RGB. Añade luz roja, verde y azul para crear la gama de colores en monitores.
  • Substractivo: CMYK. Se crean los colores al añadir pigmentos de tintas cyan, magenta, amarillo y negro.

  Propiedades del color:

  1. Matiz
  2. Saturación o intensidad
  3. Valor o Brillo

  Los colores básicos son:

  • Rojo: #FF0000
  • Verde: #00FF00
  • Azul: #0000FF
  • Blanco: #FFFFFF
  • Negro: #000000
  • Amarillo: #FFFF00

  Sicología del color

  • Rojo: Amor, calor, valor, pasión, poder, espontáneo, sexo, ira e incluso peligro.
  • Naranja: Transmite amabilidad, alegría, innovación, energía y diversión.
  • Amarillo: Optimismo, hospitalidad, tranquilidad, creatividad y atemporalidad.
  • Verde: Crecimiento, renovación, relajación, juventud, orgánico y seguridad.
  • Azul: Fuerza, frío, fresco, calma, serenidad, descanso, confianza e inteligencia.
  • Morado: Misterio, sofisticación, eternidad, excentricidad, lujo, moda, frívolo y exótico.
  • Rosa: Ilusión, ensueño, infancia, tierno, delicadeza, cortesía, erotismo, dulce y encanto.
  • Café: Acogedor, estabilidad, confort, amargo, cálido, corriente y rústico.

  Tipografía

• Tipografía de las letras

Las partes de la letra tienen un nombre específico de acuerdo a su función.

https://srtaphillips.com

Existen varias clasificaciones tipográficas, sin embargo la más aceptada es la de 5 clasificaciones de acuerdo al período histórico de su creación:

1. Clásicas o antiguas: Se utilizan para documentos formales y serios.
2. Transicionales: Se utilizan para documentos semi-formales.
3. Egipcias o slab serifs: Se utilizan para grandes titulares.
4. Modernas: Se utilizan para documentos informales, nuevos y hasta jocosos.
5. San serifs: Se utilizan cuando hay mucho texto pequeño y debe ser legible.

Psicología de la tipografía

Tipografía en la Psicología de las formas.

• Angulares y dentadas: Transmiten agresividad, liderazgo, fuerza, intensidad y dinamismo.
• Redondeadas y suaves: Transmiten modernidad, amistad y delicadeza.
• Cursivas y manuscritas: Transmiten feminismo, informalidad y personalización.

Ver: 18 reglas para el uso del texto en Diseño Gráfico

En Css podemos indicar la tipografía de la siguiente forma:

				div{
					font-family: Vegur, 'PT Sans', Verdana, Sans-serif;
				}
			

En este caso el navegador busca la fuente Vegur en nuestro sistema, en caso de no estar instalada, busca la siguiente y así sucesivamente.

El tamaño de la letra en Css se indica con font-size. Ejemplo:

				h1{
					font-size: 40px;
				}
			

Podemos indicar una fuente que no está instalada de la siguiente forma:

				<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
				<style>
					body{
						font-family: 'Sofia';
						font-size: 22px;
					}
				</style>
			

Iconos.

Los iconos son uno de los elementos gráficos más usados en diseño web. Icono es una imagen gráfica generalmente pequeña y que suele ser una metáfora de las acciones que puede hacer. Ej: Lupa para buscar, diskette para guardar.

El icono no siempre es interpretado más rápido que un texto, incluso a veces puede ser malinterpretado o no saber qué significa debido a que la percepción del icono es algo subjetivo.

Un icono debe ser:

• Lo más sencillo posible, con los suficientes detalles como para expresar lo que debe, pero no más. Los iconos enrevesados, complejos y con muchos trazos tan solo crean confusión.
• Debe seguir los modelos ya aceptados por el público que los va a visualizar. Existen iconos característicos dentro de una comunidad o país, así como otros asumidos a nivel mundial. Salirse de este modelo ya aceptado hace perder la claridad al icono, condenándolo al fracaso.
• Debe estar perfectamente concebido para la información concreta que va a representar. Pequeñas diferencias en el diseño de un icono pueden crear grandes diferencias de cara al espectador.

3. Componentes de una interfaz web

Header, nav, sidebar, main, footer y espacios en blanco.

Cabecera <header>.

Situada en la parte superior de la página. Anchura generalmente de la página y altura variable.

Normalmente contiene logotipo, texto identificador y otros elementos como fotografías, login, búsqueda, banners, etc. Suele ser común a todas las páginas del sitio web.

Sistemas de navegación <nav>.

Permiten navegación por distintas páginas. El menú puede contener textos, gráficos o ambos e incluir efectos dinámicos. Hay muchos tipos de menús y efectos.

Cuerpo de la página <main>.

Donde se presenta al usuario la información referente a los contenidos de la página.

Normalmente lleva un título que identifique claramente a la página. El título puede ser resaltado por el tamaño o color del mismo.

Pie de página <footer>.

Suele mostrar enlaces a servicios muy particulares del sitio web (contratación de publicidad, contacto, condiciones de uso, políticas de seguridad, etc).

Espacios en blanco.

Intentar hacer la interfaz más equilibrada, limpia y sencilla.

Ejemplos: Dejar espacio en blanco entre menú lateral de navegación y el cuerpo de la página, entre cabecera y cuerpo, entre cuerpo y footer. Todo este concepto entra dentro del diseño de la página deseado e incluso de las modas.

4. Mapas de navegación y prototipos

Los sitios web pueden contener muchas páginas, todas accesibles desde algún punto del sitio y todas con algunos enlaces a otras páginas. Dependiendo de la complejidad del sitio web será conveniente o no realizar un esquema de como acceder a todas las páginas del sitio.

Ejemplo:

La navegación puede ser lineal, lineal en estrella, jerárquica y múltiple.

Múltiple: Cada página tiene enlaces hacia todas las demás.

Prototipo.

Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.

El objetivo es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc. Además, te permite definir como interactuarán estos elementos entre sí.

En los wireframes no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.

Ventajas de usar Wireframes:

• Rápidos y baratos de crear: Son bocetos esquemáticos rápidos de crear y con un coste muy bajo. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un problema de tiempo o dinero.
• Detectar y corregir los problemas antes.
• Mejoras sencillas: En poco tiempo podrás mostrar los primeros Wireframes a amigos, clientes o repasarlos tu mismo para repasar las mejoras que se puedan realizar en el diseño, el posicionamiento de los elementos o la estructura de los contenidos.

La mejor manera de realizarlos es con lápiz y papel.

Puedes encontrar plantillas en raincreativelab.com

5. Guías de estilo

Una guía de estilo es una colección de elemento prediseñados gráficos y reglas que diseñadores o desarrolladores web deben seguir para asegurarse que partes separadas del sitio web sean consistentes y creen una experiencia cohesiva al final.

Deberá establecerse:

• Colores y tonos. Muestra los colores principales del sitio con todas sus posibles variaciones, ya sean patrones o tonos sólidos. Las referencias deben incluir el código de color exacto e información relevante para su aplicación, como los porcentajes de saturación y luminosidad, cuando estos son necesarios.
• Tipografías (de títulos, subtítulos, encabezados y texto principal). Es un listado de los tipos de fuentes presentes en el diseño web. Además, explica todas las normas que regirán el uso de estas tipografías en el sitio, incorporando nombres, tamaños, estilos y colores. Es conveniente adjuntar imágenes que ilustren todos estos detalles para evitar confusiones.
• Menú. Tipo de menú que se utilizará. Define el uso combinado de las tipografías con la paleta cromática. Debe mostrar cómo se verán los botones y enlaces, considerando los usos con y sin texto, en hover, selección e inactividad.
• Imágenes. Esta sección indica todos los tamaños y proporciones de imágenes usados en el sitio y cómo conviven dentro del diseño. Además, muestra los efectos o variaciones que puedan tener en sus distintas aplicaciones, especificando si se trata de una galería, foto destacada, uso en el footer u otros.
• Otros . Cada sitio es distinto, por lo que siempre incluimos un apartado adicional para entregar los detalles de elementos específicos. Por ejemplo, explicamos las características de los bloques de autor, calendarios, gráficos, tablas y/o fichas, cuando estos existen.

6. Aplicaciones para desarrollo web

El diseñador web no suele partir de cero. Se apoya en herramientas para desarrollar un sitio. Estas herramientas pueden ser:

• General. Navegadores, tratamiento de imágenes, clientes FTP, etc
• Diseño. Para diseñar páginas web y/o prototipos
• Multimedia. Programas orientados a la gestión o creación de animaciones Adobe Flash, JavaFX
• Programación. Enfocados a desarrolladores y programadores. Ligados a lenguajes concretos o tecnologías para la Web (jquery, bootstrap, etc)
• Editores y validadores HTML y CSS . Programas para la edición de código HTML y CSS, que pueden ofrecer ayudas WYSIWYG, como pueden ser Dreamweaver y Kompozer (www.kompozer.net). CSS toolbox específico para CSS.

Fuentes:

Diseño de Interfaces Web. Instituto Chan do Monte, Marín.

Psicología de la tipografía. websa100. Agencia de marketing digital

Mercatop Branding Studio. www.mercatop.com

Principios y Elementos de Diseño. Prof. Mauricio Conejo, Escuela de Artes Plásticas.