Diseño Web. Elementos de interfaz

El valor del diseño de una interfaz comienza a ser parte de nuestra vida cotidiana. ¿Qué hace funcionar un sitio Web? No importa cómo se haya planificado, una interfaz funcional es a menudo la diferencia entre un sitio fácil de navegar y otro confuso y frustrante.
Se considera que una interfaz tiene éxito cuando la media de las personas puede interaccionar por sentido común, sobre algo que ha definido otra persona.
Este libro le introduce en los principios del diseño de una interfaz, explica sus elementos básicos y el uso de estos. Con interesantes ejemplos de sitios Web consolidados, se analiza la eficacia o ineficacia de interfaces del mundo real, a la vez que se muestra cómo realizar todas las tareas relacionadas con la planificación, estilo, presentación y especificaciones técnicas de un sitio.

INTRODUCCIÓN
¿Qué hay en un elemento?
La legalidad de la interfaz
La suma de las partes
Tecnología

SECCIÓN I. PRINCIPIOS DEL DISEÑO DE LA INTERFAZ

CAPÍTULO 1. DEFINIR EL PROYECTO
Fases de desarrollo
Alcance del proyecto
Objetivos estratégicos
Especificaciones técnicas
Apariencia y distribución
Marcando
Look & Feel

CAPÍTULO 2. DISEÑO DE LA INTERFAZ DEL SITIO WEB
Comunicación con la audiencia
Metáforas
Entretenimiento versus interfaz
Escalabilidad del diseño
Estructura versus flexibilidad
Accesibilidad
Internacionalización
Distribución y organización
Visualización de información
Organización del contenido y categorización
Encontrar el camino
Utilidad y experiencia
Diseño estándar
Lenguaje visual
Mostrar texto versus usar texto de Body
Especificaciones funcionales
Especificaciones técnicas
Paradigmas de interacción
Pruebas de usuario
Lectura adicional

SECCIÓN II. ELEMENTOS LINEALES BÁSICOS DE LA INTERFAZ

CAPÍTULO 3. ELEMENTOS DE ENLACE
Estilos de vínculos de texto
Enlaces de texto
Texto enlazado
Enlaces no textuales
Enlaces de texto GIF
Enlaces gráficos
Colocación de enlaces
Densidad de enlace
Autonomía
Polarizar
Agrupación de enlace
Colocación de los enlaces
Descripciones de enlace
Presentación
Color de los enlaces
Enlaces visitados
Enlaces activos
Tipografía y legibilidad de los enlaces
Tipos de letra y tamaño
Color y legibilidad
Efectos de presentación en los enlaces
Presentación de enlaces en la plataforma
Múltiples canales de entrega: exploradores y portátiles
Los elementos de enlace en los WebTV

CAPÍTULO 4. ELEMENTOS DE TIPO BOTÓN
Botones versus enlaces
Botones del sistema
A través de la representación en las plataformas
Énfasis
Botones GIF
Botones de texto
Botones iconizados
Estilo y contenido
Diseñar iconos gráficos
Métodos para adornar botones
Bordes
3D
Poner en relieve y repujado
Color
Los botones y las hojas de estilo
Etiquetas
Grupos de jerarquía y botones etiquetados
Texto del botón
Tipografía
Facilidad de lectura
Colocar los botones en una interfaz
Análisis visual
Agrupación de botones
Botones interactivos
Interacción con el ratón
Animación
Reacción sonora

CAPÍTULO 5. ELEMENTOS DEL FORMULARIO
Cuadros de texto
Cuadros de texto
Campos de selección
Menús
Campos de lista
Conmutadores, casillas de verificación y botones de opción
Combinar elementos de formulario en una interfaz
Refrescar los elementos del formulario con JavaScript
CSS y los elementos del formulario

SECCIÓN III. ELEMENTOS AVANZADOS DE LA INTERFAZ

CAPÍTULO 6. ELEMENTOS DE CONTROL
Controles de ventana
Paneles anclados en el explorador
Barras de desplazamiento
Controles de salida
Deslizadores y botones de graduación

CAPÍTULO 7. MODELOS MENTALES Y ELEMENTOS DE INTERFAZ
Jerarquía de metáforas
Aplicar metáforas a las interfaces Web
La metáfora de página
Señales de dirección
Metáforas de entorno en el Web
Sobre pestañas
Pestañas en la Web
Categorización basada en tareas
Buenas pestañas, malas pestañas

CAPÍTULO 8. ELEMENTOS DE INTERFAZ PERSONALIZADOS
Construir elementos personalizados de DHTML
Efectos mouseover
Capas desplegables
Ventanas personalizadas
Flash

CAPÍTULO 9. ELEMENTOS DE INTERFAZ EXPERIMENTALES
Apariencia del cursor
Movimiento del ratón
Desplazar al lado opuesto (Panning)
Arrastrar/soltar (Grabbing)
Seguimiento (Tracking)
Interfaces panning
Iniciando el movimiento panning
Flinging
Interacción 3D
Ejemplos de la vida real de los elementos de la interfaz
El criterio de diseño
Tecnología
La decisión del diseñador

SECCIÓN IV. LOS ELEMENTOS DE LA INTERFAZ EN ACCIÓN

CAPÍTULO 10. EJEMPLOS DE LA VIDA REAL
Blogger (www.blogger.com)
Diseñador: Evan Williams Firma: Pyra.com LTD
Dot Dot Dot (www.dot-dot-dot.org)
Diseñador: Peter Bilak
Factory 512 (www.factory512.com)
Diseñador: Dmitri Utkin
Suffocate (www.suffocate.org/s3/nonshock/?pg=art&nr=20)
Diseñador: Christopher J. Falvey Firma: Media Basement
ioResearch (www.ioresearch.com/flash/index.html)
Diseñador: Kris Griffith Firma: ioResearch
Designer Shock (www.designerdock.de/designershock/ds003/inhalt.html)
Diseñador: Stefan Gandl Firma: Designer Shock
Boeri (www.boeriusa.com)
Diseñador/Firma: Red98
Omnia (www.omniband.com)
Diseñador: Mathew Mejia Firma: Droppod
Media Basement (www.mediabasement.com/mediabasement/default_main.asp)
Diseñador: Christopher J. Falvey Firma: Media Basement
Three.oh (www.threeoh.com/v09)
Diseñador: John Widegren, Stanley Wolukau Firma: three
HUGE (http://hugeinc.com/2001/huge_1000.html)
Diseñador/Firma: HUGE
Shift (www.shift.jp.org/banner)
Diseñador/Firma: Paradise Graphics and Shift Productions
Wireframe Studio (www.wireframe.co.za)
Diseñador/Firma: Wireframe Studio

CONCLUSIÓN

BIBLIOGRAFÍA
Libros y artículos
Sitios Web y lista de servidores

ÍNDICE ALFABÉTICO