0
   Cuenta la historia, en nuestro    caso, la Wikipedia, que la primera    web fue publicada en el año 1991    por Tim Be...
La llegada de la Web 2.0 ha supuestouna revolución en el diseño, tanto en loque se refiere a la concepción artísticacomo e...
Todos sabemos que nos encontramos en una página actual porquereconocemos unaserie de cánones repetitivos: bordes redondead...
La Web 2.0 ha supuesto la creación deuna serie de clichés de diseño, deelementos comunes, que configuran unestilo propio, ...
1- Uso de colores vibrantes ycontrastados: además de por criteriospuramente estéticos, la Web 2.0 secaracteriza por el uso...
3- Brillos, destellos y reflejos: tantolos logotipos como las barras de menúy losdistintos      elementos     de     lasco...
5- Degradados: sin duda es una de lastécnicas visuales que más han caladoentre dos diseñadores de Web 2.0.Más pronunciados...
7- Desenfoques: se hacenespecialmente patentes en lassombras. En lugar de ser sombrasduras, los diseñadores utilizan leves...
1. Simplicidad:       “en igualdad decondiciones la solución más sencilla esprobablemente la correcta "Esteprincipio, cono...
2. Diseño centrado: mientras en la web1.0 todo el contenido se alineaba a laizquierda, las páginas 2.0 siempre estáncentra...
4. Separar la navegación: aunquesiempre fueron distintas la zonasuperior y la inferior, ahora se marcamás      visualmente...
8. Iconos atractivos: han dejado deser un elemento auxiliar del diseñopara convertirse en un componenteprioritario. En gen...
Hablar de diseño implica en general referirse a una estandarización, hablar deescuelas, de tendencias, de modos de actuar ...
Un navegador es un programa que seutiliza para acceder a la web. Desde elprimer explorador, llamado NCSAMosaic de principi...
Los archivos elaborados con el programa de animación2D por excelencia en el campo web, Flash, han pasadode ser la solución...
Manuel Lavín, director de consultoría eBusiness de Adesis Netlife, define así alinternauta 1.0 en su artículo “Web 2.0: Po...
Eduardo Manchón, co-fundador de Panoramio, interpreta y esquematiza losprincipiosde la Usabilidad de Bruce Tognazzini y qu...
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad delusuario, no en la del propio sitio web. ...
10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero unusoinadecuado de estas puede dificultar e...
La Usabilidad se desarrolla con la parte izquierda del cerebro y representa la razónyla acción lógica; por lo tanto se cor...
Tomando como punto de partida el artículo de Iain Barker titulado “What isinformationarchitecture?”, podemos definir los s...
El verdadero triunfo de la Web 2.0 ha sido el triunfo de los estándares web, un    términoa veces poco conocido entre los ...
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguajeusadopara definir la presentación de un docume...
No está claro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares:desde la portada del disco Tubular Bells...
WEB 2.0 Y EL DISEÑO WEB
WEB 2.0 Y EL DISEÑO WEB
WEB 2.0 Y EL DISEÑO WEB
Upcoming SlideShare
Loading in...5
×

WEB 2.0 Y EL DISEÑO WEB

167

Published on

WEB 2.0 Y EL DISEÑO WEB

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
167
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "WEB 2.0 Y EL DISEÑO WEB"

  1. 1.  Cuenta la historia, en nuestro caso, la Wikipedia, que la primera web fue publicada en el año 1991 por Tim Berners-Lee. El padre de la Word 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.
  2. 2. La llegada de la Web 2.0 ha supuestouna revolución en el diseño, tanto en loque se refiere a la concepción artísticacomo en las interfaces. El usuarioadquiere un nuevo papel dentro delsoporte, ya que deja de ser un“escaneador” de contenidos para ser elque elige, el que participa e incluso elque crea esos contenidos.Desde el punto de vista visual estenuevo modo de hacer webs hasupuesto una estandarización.Mientras en la Web 1.0 losdiseñadores realizaban páginas sinapenas base previa, ya que existíanpocas referencias de diseño digital, laWeb 2.0 .
  3. 3. Todos sabemos que nos encontramos en una página actual porquereconocemos unaserie de cánones repetitivos: bordes redondeados, degradados, un fondocondiagonales y el logo reflejado.El nacimiento de estos estilos viene derivado al mismo tiempo de lacreación de nuevos perfiles profesionales: diseñador gráfico web. Laspáginas 1.0 fueron dibujadas por diseñadores que provenían del mundode los carteles, prensa y papelería, sin embargo las 2.0 han sidopensadas por creadores especializados en diseño de webs.Las páginas han evolucionado, pero los usuarios más. Cada día son másexigentes a la hora de elegir el tiempo que pasan en cada site. Gracias aesta demanda el diseño 2.0 se ha visto obligado a incluir como disciplinano sólo la elección de formas y colores, sino también a pensar en elindividuo que va a interaccionar. Así nace la Usabilidad, un término quetambién surgió cuando alguien le puso nombre, en concreto fue JacobNielsen.
  4. 4. La Web 2.0 ha supuesto la creación deuna serie de clichés de diseño, deelementos comunes, que configuran unestilo propio, hasta el punto de que a lahora de abordar el diseño de unapágina se habla del grado deaplicación del arquetipo 2.0 que debetener.Aunque existen unas característicasconcretas, que abordaremos acontinuación,.
  5. 5. 1- Uso de colores vibrantes ycontrastados: además de por criteriospuramente estéticos, la Web 2.0 secaracteriza por el uso colores conmucho contraste que facilitan lajerarquización de la información y, porlo tanto, la lectura.2- Badges: se trata de una serie debotones con forma de chapas o placas.Consiste en una estrella con bordesredondeados y que habitualmente seutilizan para atraer la atención sobreun precio, una promoción o “un granmensaje de Beta”, es decir, indica quese trata de una versión no definitiva dela web.
  6. 6. 3- Brillos, destellos y reflejos: tantolos logotipos como las barras de menúy losdistintos elementos de lascomposiciones cuentan con destellosde luz y pequeñas zonas sobreexpuestas, que aportan volumen alos diseños. Al mismo tiempo, laswebs se llenan de objetos con unreflejo de él mismo sobre su base.4- Bordes redondeados: la llegadade la Web 2.0 ha supuesto el fin de lasesquinas, dando paso a un nuevoarquetipo en el que todos los bordesson redondeados. Bien sea a través delos programas de diseño o a través delashojas de estilo CSS.
  7. 7. 5- Degradados: sin duda es una de lastécnicas visuales que más han caladoentre dos diseñadores de Web 2.0.Más pronunciados o más sutiles, losgradientes de color son empleadosdesde los fondos de las páginas hastalos favicones, los pequeños iconos quese muestran junto a la dirección weben el navegador de Internet.6- Líneas diagonales: se empleanespecialmente en los fondos de laspáginas y en los de los titulares, comomotivos decorativos que se repiten.Estos patrones rayados se componenhabitualmente de un color y una tramade este, es decir, una versión másoscura o más clara de la misma.
  8. 8. 7- Desenfoques: se hacenespecialmente patentes en lassombras. En lugar de ser sombrasduras, los diseñadores utilizan levesdesenfoques.8- Logotipos reflejados: durante untiempo se convirtieron prácticamenteen un estándar los logotiposreflejados, de forma que según vaseparándose el dibujo del reflejo vadesenfocándose como si se tratara depapel mojado.
  9. 9. 1. Simplicidad: “en igualdad decondiciones la solución más sencilla esprobablemente la correcta "Esteprincipio, conocido como el de laNavaja de Occam, se ha convertido enla base del diseño. Buscar la opciónque haga la navegación más sencilla yque exijan menos esfuerzo a losusuarios, evitando las interferencias deelementos superfluos y otorgando unamayor importancia a aquellos en losque queremos que fijen su atención.
  10. 10. 2. Diseño centrado: mientras en la web1.0 todo el contenido se alineaba a laizquierda, las páginas 2.0 siempre estáncentradas, mejorando la visualización delos contenidos en cualquier tipo deresolución de escritorio.3. Menos columnas: antes la páginas seestructuraban en un mayor número decolumnas, imitando tal vez el estilo de losperiódicos; el diseño actual tiende haciados, en el caso de los blogs, y tres en elcaso de las páginas con un mayorvolumen de contenido.
  11. 11. 4. Separar la navegación: aunquesiempre fueron distintas la zonasuperior y la inferior, ahora se marcamás visualmente. Al mismotiempo, cada área está claramentedefinida para un tipo de navegación ode interacción y una serie decontenidos.5. Navegación simple: el conceptode Usabilidad en sí mismo. Organizarla página para que el usuario navegueintuitivamente y sepa para qué sirvecada elemento y con cuáles puedeinteractuar.6. Tipografías más grandes: tras unperíodo en el que la tendencia eraemplear fuentes pequeñas, comoindicativo de elegancia, se ha pasado aun modelo en el que se consigue quelas fuentes grandes también seanvisualmente atractivas..
  12. 12. 8. Iconos atractivos: han dejado deser un elemento auxiliar del diseñopara convertirse en un componenteprioritario. En general, se puede decirque la principal característica deldiseño 2.0 es la sutilidad, los pequeñosdetalles, y por ello los iconos son unode los campos de acción másinteresantes para los diseñadores
  13. 13. Hablar de diseño implica en general referirse a una estandarización, hablar deescuelas, de tendencias, de modos de actuar generalizados, pero, al mismotiempo, de ruptura y originalidad. Todos los movimientos artísticos se caracterizanporque mucha gente hace lo mismo, hasta que alguien lo rompe y crea algo másinnovador.Por esta razón la Web 2.0 está generando un movimiento en contra de estosestándares.Precisamente el artículo citado anteriormente, How to destroy the Web 2.0 look”, deElliot Jay Stocks, se ha constituido en un referente para este movimiento. Para elautor“los clichés de diseño siempre han existido.Este diseñador, al igual que muchos otros, apuestan por utilizar lastendenciasactuales estéticas actuales como base para los nuevos cánones web, creando sitesenlos que no aparezca ninguno de los clichés.
  14. 14. Un navegador es un programa que seutiliza para acceder a la web. Desde elprimer explorador, llamado NCSAMosaic de principio de los noventahasta hoy, la evolución ha sidoespectacular.Netscape consiguió ser el navegadorde referencia desde el 1994 hasta que,en el año1997, Microsoft introdujo elInternet Explorer en el SistemaOperativo Windows 98.El dominio que ejerció IE fue tal que eldesarrollo web se orientó totalmente ala visualización en este navegador.Nacieron frases como “Optimizadopara Internet Explorer”, que venía asignificar en muchos casos que si nousabas el Explorador de Windows, noibas o poder ver la página o algunosservicios no iban a funcionar.
  15. 15. Los archivos elaborados con el programa de animación2D por excelencia en el campo web, Flash, han pasadode ser la solución definitiva cuando deseamos haceruna web visualmente atractiva, a una posición muchomás discreta.Durante algún tiempo muchas páginas consistían en ungran archivo de Flash que contenía todos losmenús, textos, fotos, etc. Esto supone un gran problemade accesibilidad, ya que cualquiera que visite la páginadesde un navegador no gráfico, como pueden loslectores para personas ciegas, o muchos móviles yPDA, no veían nada.Lo mismo sucede con los buscadores de Internet, quecuando recorren las páginas localizando palabras enfunción de las cuales indexar la web, no encontrabannada. Y como cada día es más evidentemente que si noestás en los buscadores, como Google o Yahoo, noexistes, no tiene sentido darle toda la responsabilidad aun archivo de Flash.
  16. 16. Manuel Lavín, director de consultoría eBusiness de Adesis Netlife, define así alinternauta 1.0 en su artículo “Web 2.0: Por fin alguien al otro lado de la pantalla”:1. Utiliza IE para navegar por la Web2. Accede siempre desde su PC3. Se conecta por módem4. Se fija más en la espectacularidad de la Web que en los contenidos5. Es un usuario pasivo que sólo asimila información6. Sólo interactúa para realizar compras, ver el mail y obtener informaciónMientras asigna estas características al internauta 2.0:1. Utiliza IE, Firefox, Opera, Safari…2. Accede desde su PC, PDA, Blackberry, TV, WII…3. Se conecta por GPRS, ADSL, Cable…4. Busca la operativa en las páginas5. Genera información: Blogs, páginas personales…
  17. 17. Eduardo Manchón, co-fundador de Panoramio, interpreta y esquematiza losprincipiosde la Usabilidad de Bruce Tognazzini y que, a su vez, estaban basados en granmedida en los principios heurísticos de Jacob Nielsen: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 usuariossienten que controlan un sitio web si conocen su situación en un entorno abarcabley no infinito.3. Los colores han de utilizarse con precaución para no dificultar el acceso a losusuarios con problemas de distinción de colores (aprox. un 15% del total).4. Consistencia, las aplicaciones deben ser consistentes con las expectativas delosusuarios, es decir, con su aprendizaje previo
  18. 18. 5. Eficiencia del usuario, los sitios web se deben centrar en la productividad delusuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayornúmero de pasos son más rápidas de realizar para una persona que otras tareascon menos pasos, pero más complejas.6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta enfunción de la distancia y el tamaño del objetivo. A menor distancia y mayor tamañomás facilidad para usar un mecanismo de interacción.8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de esperadel usuario, permitiendo la realización de otras tareas mientras se completa laprevia 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 ydeben poder ser utilizados desde el primer momento.
  19. 19. 10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero unusoinadecuado de estas puede dificultar enormemente el aprendizaje.11. La protección del trabajo de los usuarios es prioritario, se debe asegurarquelos 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ñodefuente debe ser suficientemente grande.13. Seguimiento de las acciones del usuario. Conociendo y almacenandoinformación sobre su comportamiento previo se ha de permitir al usuario realizaroperaciones frecuentes de manera más rápida.14. Interfaz visible. Se deben evitar elementos invisibles de navegación que handeser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc
  20. 20. La Usabilidad se desarrolla con la parte izquierda del cerebro y representa la razónyla acción lógica; por lo tanto se corresponde con Marte. Por su parte, el Diseñoresideen la parte derecha del cerebro y se identifica con lo emocional y la acciónintuitiva, asíque se corresponde con Venus. Esta teoría, desarrollada por Curt Cloninger en suartículo “Usability experts are from Mars, graphic designers are from Venus” es unamuestra de la lucha aparentemente existente entre diseño y Usabilidad.Decimos aparentemente porque el paso del tiempo ha demostrado que ningunawebpuede prescindir de la Usabilidad, porque el usuario se frustra y se va si no sabemanejar la interface y, al mismo tiempo, si algo no es atractivo visualmente para elinternauta es difícil que se desarrolle como producto: no se diferenciaría de losdemás,parecería anticuado, nadie recordaría la web, etc.
  21. 21. Tomando como punto de partida el artículo de Iain Barker titulado “What isinformationarchitecture?”, podemos definir los siguientes como los pasos necesarios para unaarquitectura de la información acertada:1. Entender el contenido de la web, determinar los servicios que se ofrecen y aquién está dirigida la web.2. Realizar estudios de card sorting. Se trata de un ejercicio que consiste enutilizar a usuarios potenciales de nuestra para web para que organicen elcontenido a través de fichas, ordenándolo según sus esquemas mentales. Estohace que la estructura resultante se adecúe más a lo que el internauta esperaencontrarse.3. Elaborar un borrador del árbol de la web, agrupando la información yestableciendo jerarquías.4. Evaluar la correspondencia entre nuestro árbol y los resultados del cardsorting.5. Crear el mapa del sitio.
  22. 22. El verdadero triunfo de la Web 2.0 ha sido el triunfo de los estándares web, un términoa veces poco conocido entre los internautas pero con una importancia vital para eldesarrollo web. Se define como el “conjunto de recomendaciones dadas por el WorldWide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómocrear e interpretar documentos basados en el Web” (Alexis Bellido).Es decir, son las normas que permiten que las webs se puedan visionar no sólo enInternet Explorer o Mozilla Firefox, sino también en los navegadores para personasciegas o dispositivos móviles como PDA o teléfonos móviles, así como para losinternautas 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 TimBerners-Lee representa a la perfección lo que suponen los estándares web: que la redno suponga una brecha con ningún colectivo por no disponer al cien por cien de
  23. 23. Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguajeusadopara definir la presentación de un documento estructurado escrito en HTML o XML.Las principales ventajas para usar CCS son:1- Es más sencillo realizar cambios globales: si queremos realizar un cambioen el diseño, como puede ser la distancia entre las fotos el texto, el color de loshipervínculos o el tamaño de los titulares, será más sencillo hacerlo en las CSSya que bastará con modificar un archivo y no página por página.2- El estilo del site se mantiene en toda su extensión: salvo que marquemos locontrario, todas las páginas tendrán el titular y los párrafos en el mismoformato, los mismo márgenes entre los elementos, etc.3- El site es más accesible, ya que pueden definirse estilos para cada tipo denavegador. Pueden crearse distintos formatos para que cada navegador lointerprete como le señalemos.4- Rápida descarga.
  24. 24. 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 lasobras de Roy Lichtenstein o las siluetas contrastadas de Keith Haring. Pero lo quesíestá claro que esta forma de diseñar está traspasando los límites de las pantallasdeordenador, para convertirse en un referente del diseño digital como se aprecia, porejemplo, en los grafismos de televisión.Toda la imagen corporativa de las cadenas, desde los printers con el nombre de lospresentadores hasta las ráfagas entre programas o los gráficos explicativos de lasnoticias, la pantalla va llenándose de degradados, reflejos y demás. ¿Supondrá latransición a televisión digital la misma revolución visual que para la web fueelaumento de la resolución y del ancho de banda?Un nuevo modo de hacer webs, donde se imponga unos nuevos hábitos denavegación por parte de los usuarios y que nos obligue a redefinir la usabilidad, elaspecto visual y, en conjunto, la interacción
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×