DISEÑO WEBIntroducción:• El padre de la World Wide Web elaboró un documento informático que  rompía con lo anterior porque...
Diseño y Web :• La concepción artística como en las interfaces. El usuario adquiere  un nuevo papel dentro del soporte, ya...
ESTILO: • Aunque existen unas características concretas, que abordaremos a   continuación, podemos definir el diseño 2.0 c...
•   Bordes redondeados: la llegada de la Web 2.0 ha supuesto el fin de las esquinas,    dando paso a un nuevo arquetipo en...
FUTURO DEL DISEÑO•   Hablar de diseño implica en general referirse a una estandarización, hablar de escuelas, de    tenden...
EVOLUCIÓN TECNOLÓGICA•   Navegadores web :•    Netscape consiguió ser el navegador de referencia desde el 1994 hasta que, ...
LOS OTROS NAVEGADORES•   Inicialmente se optó por hacer versiones específicas para cada tipo de navegador, pero    es un c...
FLASH•   También estuvo de moda crear impresionantes introducciones en Flash para recibir a los    internautas, algo que e...
AJAX•   El término AJAX (Asynchronous JavaScript And XML), al igual que el de Web 2.0, no es    ningún invento, ni un gran...
EL INTERNAUTA•   - Los usuarios saben dónde está o debería estar cada botón. Los menús están en la    parte superior y/o e...
INTERFACES PARA UN INTERNAUTA•   Usabilidad:•   Se trata en una disciplina cuyo objetivo es facilitar la interacción del u...
•   5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no    en la del propio sit...
•   11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los    usuarios nunca pierden su tr...
USABILIDAD FRENTE AL DISEÑO•   La Usabilidad se desarrolla con la parte izquierda del cerebro y representa la razón y la  ...
ARQUITECTURA DE LA INFORMACIÓN•   “El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de a...
ESTÁNDARES•   Es decir, son las normas que permiten que las webs se puedan visionar no sólo en    Internet Explorer o Mozi...
CCS•   Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usado    para definir la presentación ...
•   Separación del diseño y la programación. Los dos pueden trabajar en la web sin    interferir uno en el trabajo del otr...
XHTML•   El XHTML (Lenguaje de Marcado de Hipertexto Extensible) es el lenguaje de marcado    pensado para sustituir al HT...
CONCLUSIONES•   No está claro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares:    desde la portada del...
Diseño web
Upcoming SlideShare
Loading in …5
×

Diseño web

106 views
63 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
106
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño web

  1. 1. DISEÑO WEBIntroducción:• El padre de la World Wide Web elaboró un documento informático que rompía con lo anterior porque contenía hipervínculos, es decir, ofrecía posibilidad de ir a otro texto al pulsar sobre una palabra.• Trece años después, en el año 2004, el descubrimiento de Berners-Lee se reinventó, y no porque cambiara de un día para otro, sino porque, como suele ocurrir en el mundo de Internet, alguien le puso un nuevo nombre: Web
  2. 2. Diseño y Web :• La concepción artística como en las interfaces. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneador” de contenidos para ser el que elige, el que participa e incluso el que crea esos contenidos.• La Web 2.0 ha supuesto la creación de una serie de clichés de diseño, de elementos comunes, que configuran un estilo propio, hasta el punto de que a la hora de abordar el diseño de una página se habla del grado de aplicación del arquetipo
  3. 3. ESTILO: • Aunque existen unas características concretas, que abordaremos a continuación, podemos definir el diseño 2.0 como una conjunción de estilos cuya máxima es la sutileza y la combinación de elementos dispares. Grandes masas con volumen, utilizando técnicas de 3D • Uso de colores vibrantes y contrastados: además de por criterios puramente estéticos, la Web 2.0 se caracteriza por el uso colores con mucho contraste • Badges: se trata de una serie de botones con forma de chapas o placas. • Brillos, destellos y reflejos: tanto los logotipos como las barras de menú y los distintos elementos de las composiciones cuentan con destellos de luz y pequeñas zonas sobreexpuestas
  4. 4. • Bordes redondeados: la llegada de la Web 2.0 ha supuesto el fin de las esquinas, dando paso a un nuevo arquetipo en el que todos los bordes son redondeados.• Degradados: sin duda es una de las técnicas visuales que más han calado entre dos diseñadores de Web 2.0.• Líneas diagonales: se emplean especialmente en los fondos de las páginas y en los de los titulares, como motivos decorativos que se repiten.• Desenfoques: se hacen especialmente patentes en las sombras. En lugar de ser sombras duras, los diseñadores utilizan leves desenfoques.• Logotipos reflejados: durante un tiempo se convirtieron prácticamente en un estándar los logotipos reflejados
  5. 5. FUTURO DEL DISEÑO• Hablar de diseño implica en general referirse a una estandarización, hablar de escuelas, de tendencias, de modos de actuar generalizados, pero, al mismo tiempo, de ruptura y originalidad.• No obstante, y a pesar de esa aparente disidencia visual, es evidente que los diseños que rompen con el estándar contienen características de las citadas anteriormente, ya que mientras la Web 2.0 continúe siendo vanguardia los internautas seguirán• utilizándolo como referencia para saber si les gusta o no una página.
  6. 6. EVOLUCIÓN TECNOLÓGICA• Navegadores web :• Netscape consiguió ser el navegador de referencia desde el 1994 hasta que, en el año 1997, Microsoft introdujo el Internet Explorer en el Sistema Operativo Windows 98.• A pesar de que las estadísticas actuales nos dicen que IE sigue caminando, las corrientes alternativas van abriéndose paso. Opera abrió el camino y, hoy en día, Mozilla FireFox está haciendo “pupa” al dominio de IE con cuotas del 20% en algunos países europeos.
  7. 7. LOS OTROS NAVEGADORES• Inicialmente se optó por hacer versiones específicas para cada tipo de navegador, pero es un coste inasumible ante la gran proliferación de aplicaciones y dispositivos. No queda más remedio que utilizar un estándar común.• Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA, los navegadores de sólo texto….
  8. 8. FLASH• También estuvo de moda crear impresionantes introducciones en Flash para recibir a los internautas, algo que está prácticamente erradicado de todas las webs 2.0. ¿Por qué separar a nuestro visitante del producto un clic más?• La utilización de este tipo de animaciones ha pasado como decíamos a una posición secundaria, que es en animaciones en las cabeceras de las webs, en los banners o para ilustrar noticias. Como un ingrediente más del diseño, pero no como plato único.
  9. 9. AJAX• El término AJAX (Asynchronous JavaScript And XML), al igual que el de Web 2.0, no es ningún invento, ni un gran avance tecnológico, es el nombre que se le puso a una serie de técnicas y combinación de tecnologías ya existentes.• El uso de Ajax ha supuesto una revolución en el concepto de interacción del usuario con la página web. Ya podemos mover las ventanas a nuestro gusto y ponerlas en donde nos apetezca, eliminarlas de la vista o añadir nuevas ventanas con nuestras RSS favoritas en servicios como Netvives o google.
  10. 10. EL INTERNAUTA• - Los usuarios saben dónde está o debería estar cada botón. Los menús están en la parte superior y/o en la izquierda, y el logo que abre la pantalla es un enlace a la página de inicio.• Los usuarios no quieren diseñar. Hasta hace poco cuando alguien diseñaba una página web era porque abría un programa de retoque fotográfico, de diseño vectorial o de programación• Los usuarios quieren participar: la Web 2.0 es a menudo considerada como la “web colaborativa” ya que su base es que los usuarios empiezan a opinar, a juzgar y a decir lo que les gusta y lo que no.• Los usuarios quieren crear: este el objetivo último de la Web 2.0. Un internauta que crea contenidos y que, por lo tanto, no se encuentra ante una página diseñada con mejor o peor resultado, sino ante una interface.
  11. 11. INTERFACES PARA UN INTERNAUTA• Usabilidad:• Se trata en una disciplina cuyo objetivo es facilitar la interacción del usuario y, por esta razón, es lógico que naciera o, más bien, cobrara fuerza, con la llegada de la Web 2.0. Si el mundo web se sustenta en que los internautas participen, es necesario estudiar qué es lo que los estimula.• Principios de la Usabilidad:• 1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.• 2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.• 3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).• 4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
  12. 12. • 5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web.• 6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas• 7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo.• 8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.• 9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.• 10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
  13. 13. • 11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.• 12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.• 13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.• 14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
  14. 14. USABILIDAD FRENTE AL DISEÑO• La Usabilidad se desarrolla con la parte izquierda del cerebro y representa la razón y la acción lógica; por lo tanto se corresponde con Marte. Por su parte, el Diseño reside en la parte derecha del cerebro y se identifica con lo emocional y la acción intuitiva, así que se corresponde con Venus• Por lo tanto se trata de dos disciplinas que se necesitan una a la otra. El diseño necesita que la Usabilidad le diga cómo navega el usuario, y la Usabilidad necesita que el diseño le ayude a jerarquizar la información, a organizar contenidos y, en conjunto, a mejorar el producto.
  15. 15. ARQUITECTURA DE LA INFORMACIÓN• “El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información”.• Entender el contenido de la web, determinar los servicios que se ofrecen y a quién está dirigida la web.• Se trata de un ejercicio que consiste en utilizar a usuarios potenciales de nuestra para web• Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting.• Crear el mapa del sitio.• Definir las funcionalidades de la página y cómo se llega a ellas.• Contrastar la organización de la información que hemos propuesto con el resto de miembros del equipo.
  16. 16. ESTÁNDARES• Es decir, son las normas que permiten que las webs se puedan visionar no sólo en Internet Explorer o Mozilla Firefox, sino también en los navegadores para personas ciegas o dispositivos móviles como PDA o teléfonos móviles, así como para los internautas que utilizan velocidades de transferencia baja.• “El poder de la web está en su universalidad. El acceso a la web para todos, independientemente de su discapacidad, es un aspecto esencial.” Esta frase de Tim Berners-Lee representa a la perfección lo que suponen los estándares web: que la red no suponga una brecha con ningún colectivo por no disponer al cien por cien de sus sentidos, ni por navegar en un soporte distinto a un plasma de 17”.
  17. 17. CCS• Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML.• Es más sencillo realizar cambios globales: si queremos realizar un cambio en el diseño, como puede ser la distancia entre las fotos el texto, el color de los hipervínculos o el tamaño de los titulares• El estilo del site se mantiene en toda su extensión: salvo que marquemos lo contrario• El site es más accesible, ya que pueden definirse estilos para cada tipo de navegador.• Rápida descarga: en general las páginas son más ligeras, ya que toda la información de estilo está en los archivos CSS
  18. 18. • Separación del diseño y la programación. Los dos pueden trabajar en la web sin interferir uno en el trabajo del otro.• Está optimizado para buscadores: hay menos código en los archivos y resulta más fácil para el buscador encontrar palabras clave.• El usuario puede usar sus propias normas de estilo: algunos navegadores de Internet permiten personalizar las CSS de las páginas, por lo que son ellos quienes eligen cómo visionarlas.
  19. 19. XHTML• El XHTML (Lenguaje de Marcado de Hipertexto Extensible) es el lenguaje de marcado pensado para sustituir al HTML, pero aún le queda camino por recorrer. Cuando se daba por muerto el HTML 4.0 surge una nueva revisión del W3C el HTML 5.0 lo que hace que seguramente convivan durante un largo periodo de tiempo ambos.• El XHTML es una versión más estricta del código HTML para conseguir reducir las posibilidades de su uso y que la interpretación por los distintos dispositivos sea más simple, y que pequeños dispositivos, con menor capacidad que los ordenadores de mesa tradicionales puedan soportar, como los móviles.
  20. 20. CONCLUSIONES• No está claro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares: desde la portada del disco Tubular Bells de Mike Oldfield, hasta los reflejos de las obras de Roy Lichtenstein o las siluetas contrastadas de Keith Haring. Pero lo que sí está claro que esta forma de diseñar está traspasando los límites de las pantallas de ordenador, para convertirse en un referente del diseño digital como se aprecia, por ejemplo, en los grafismos de televisión.

×