SlideShare una empresa de Scribd logo
1 de 25
Introducción

Cuenta la historia1, en
nuestro caso, la Wikipedia,
que la primera web fue
publicada en el año 1991 por
Tim Berners-Lee. 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.02.
La llegada de la Web 2.0 ha supuesto una revolución en el diseño,
tanto en lo que se refiere a 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.
Desde el punto de vista visual este nuevo modo de hacer webs ha
supuesto una estandarización. Mientras en la Web 1.0 los
diseñadores realizaban páginas sin apenas base previa, ya que
existían pocas referencias de diseño digital, la Web 2.0 ha supuesto el
nacimiento de los estilos.
Todos sabemos que nos encontramos en una página actual porque
reconocemos una serie de cánones repetitivos: bordes redondeados,
degradados, un fondo con diagonales y el logo reflejado.
Estilo 2.0

La Web 2.0 ha supuesto la       1- Uso de colores vibrantes y contrastados: además de por
creación de una serie de         criterios puramente estéticos, la Web 2.0 se caracteriza por el
clichés de diseño, de            uso colores con mucho contraste .
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
2.0 que debe tener.
Siguiendo el artículo
“How to destroy the Web
2.0 look”3, de Elliot Jay
Stocks, podemos definir
las siguientes
características:
2- Badges:

se trata de una serie de
botones con forma de
chapas o placas.
Consiste en una estrella
con bordes redondeados y
que habitualmente se
utilizan para atraer la
atención sobre un precio,
una promoción o “un gran
mensaje de Beta”4, es
decir, indica que se trata
de una versión no
definitiva de la web.
3- 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, que
aportan volumen a los
diseños. Al
mismo tiempo, las webs
se llenan de objetos con
un reflejo de él mismo
sobre
su base.
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. Bien sea a
través de los programas
de diseño o a través de las
hojas de estilo CSS;
incluso han surgido una
gran cantidad de
aplicaciones
online que redondean los
diseños por nosotros
5- Degradados:


sin duda es una de las
técnicas visuales que más
han calado
entre dos diseñadores de
Web 2.0. Más
pronunciados o más
sutiles, los
gradientes de color son
empleados desde los
fondos de las páginas
hasta los
favicones, los pequeños
iconos que se muestran
junto a la dirección web en
el
navegador de Internet.
6- 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. Estos
patrones
rayados se componen
habitualmente de un color
y una trama de este, es
decir,
una versión más oscura o
más clara de la misma. El
contraste siempre es leve
para no dificultar la
lectura ni centrar la
atención sobre elementos
decorativos.
7- Desenfoques:



se hacen
especialmente
patentes en las
sombras. En lugar de
ser sombras duras, los
diseñadores utilizan
leves desenfoques.
8- Logotipos
reflejados:


 durante un tiempo se
convirtieron
prácticamente en un
estándar los logotipos
reflejados, de forma
que según va
separándose el dibujo
del reflejo va
desenfocándose como
si se tratara de papel
mojado.
A estos clichés podemos sumar los elaborados
  por Ben Hunt en su artículo “Web 2.0 How to
  design guide ”, y que se refieren más a
  conceptos de diseño general:
Este principio, conocido como el de la Navaja de
Occam, se ha convertido en la base del diseño. Buscar la opción
   que haga la
navegación más sencilla y que exijan menos esfuerzo a los
   usuarios, evitando
las interferencias de elementos superfluos y otorgando una mayor
   importancia
a aquellos en los que queremos que fijen su atención.
Esta simplicidad ha tenido como consecuencia también que el
   color blanco
adquiera un mayor protagonismo: a nadie le asusta ya ver una
   página con
fondo blanco (Google es blanco) y, en general, ha pasado de
   proporcionar
sensación de web poco trabajada a otra de web clara y ordenada.
mientras en la web 1.0 todo el contenido se alineaba a la
izquierda, las páginas 2.0 siempre están centradas,
   mejorando la visualización
de los contenidos en cualquier tipo de resolución de
   escritorio.
antes la páginas se estructuraban en un mayor número de
columnas, imitando tal vez el estilo de los periódicos; el
  diseño actual tiende
hacia dos, en el caso de los blogs, y tres en el caso de las
  páginas con un
mayor volumen de contenido.
aunque siempre fueron distintas la zona
  superior y la
inferior, ahora se marca más visualmente. Al
  mismo tiempo, cada área está
claramente definida para un tipo de navegación
  o de interacción y una serie de
contenidos.
el concepto de Usabilidad en sí mismo.
  Organizar la
página para que el usuario navegue
  intuitivamente y sepa para qué sirve cada
elemento y con cuáles puede interactuar.
tras un período en el que la tendencia era
   emplear
fuentes pequeñas, como indicativo de
   elegancia, se ha pasado a un modelo en
el que se consigue que las fuentes grandes
   también sean visualmente
atractivas. Los sites pueden ser bonitos y a la
   vez respetar los principios de la
usabilidad.
en general, la negrita se ha convertido en el modo
  más
eficiente de destacar la información sin recurrir a
  colores que ensucien la
identidad corporativa de la página. Esto, unido a la
  necesidad de jerarquizar los
contenidos, ha derivado en los tagline, es decir,
  frases que resumen el
contenido de la página o de la empresa, así
  como entradillas que
esquematizan los servicios o contenidos de la
  entidad o de la aplicación.
han dejado de ser un elemento auxiliar del diseño para
convertirse en un componente prioritario. En general, se puede
   decir que la
principal característica del diseño 2.0 es la sutilidad, los
   pequeños detalles, y
por ello los iconos son uno de los campos de acción más
   interesantes para los diseñadores.
Un navegador es un programa que se utiliza para acceder a la web. Desde el primer
explorador, llamado NCSA Mosaic de principio de los noventa hasta hoy, la evolución
ha sido espectacular.
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.
El dominio que ejerció IE fue tal que el desarrollo web se orientó totalmente a la
visualización en este navegador. Nacieron frases como “Optimizado para Internet
Explorer”, que venía a significar en muchos casos que si no usabas el Explorador de
Windows, no ibas o poder ver la página o algunos servicios no iban a funcionar.
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.
Los archivos elaborados con el programa de
  animación 2D por excelencia en el campo
web, Flash, han pasado de ser la solución definitiva
  cuando deseamos hacer una web
visualmente atractiva, a una posición mucho más
  discreta.
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.
   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
    Igoogle.
¿Qué evolucionó antes? ¿El internauta o la web?
   Como en el famoso caso del huevo y
la gallina, no está claro quién nació antes, pero
   parece evidente que con el surgimiento
de las aplicaciones 2.0 los usuarios comenzaron a
   exigirlas. Entre una web donde ver
vídeos y otra donde además de ver vídeos puedo
   comentarlo, compartirlo y subir los
míos propios, el usuario elegirá siempre la segunda
   opción.
Lyseth (1)

Más contenido relacionado

La actualidad más candente (16)

diseño web
diseño webdiseño web
diseño web
 
Wed
WedWed
Wed
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Diseño web
Diseño webDiseño web
Diseño web
 
Web 2.o y el diseño web
Web 2.o y el diseño webWeb 2.o y el diseño web
Web 2.o y el diseño web
 
Web 2
Web 2Web 2
Web 2
 
WEB 2.0 Y EL DISEÑO WEB
WEB 2.0 Y EL DISEÑO WEBWEB 2.0 Y EL DISEÑO WEB
WEB 2.0 Y EL DISEÑO WEB
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
 
Presentación1
Presentación1Presentación1
Presentación1
 
Diseño & Web 2.0
Diseño & Web 2.0Diseño & Web 2.0
Diseño & Web 2.0
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Web 2.0. sanchez
Web 2.0. sanchezWeb 2.0. sanchez
Web 2.0. sanchez
 
Web 2
Web 2Web 2
Web 2
 
Web de diseño
Web de diseñoWeb de diseño
Web de diseño
 
Web2mili
Web2miliWeb2mili
Web2mili
 

Similar a Lyseth (1) (15)

Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Web 2.o y el diseño web
Web 2.o y el diseño webWeb 2.o y el diseño web
Web 2.o y el diseño web
 
Diseño weeb
Diseño weebDiseño weeb
Diseño weeb
 
Diseñ0 w3d
Diseñ0 w3dDiseñ0 w3d
Diseñ0 w3d
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño de Pagina Web
Diseño de Pagina WebDiseño de Pagina Web
Diseño de Pagina Web
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño web
Diseño webDiseño web
Diseño web
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Alberto
AlbertoAlberto
Alberto
 
Alberto
AlbertoAlberto
Alberto
 
Web 2
Web 2Web 2
Web 2
 

Lyseth (1)

  • 1.
  • 2. Introducción Cuenta la historia1, en nuestro caso, la Wikipedia, que la primera web fue publicada en el año 1991 por Tim Berners-Lee. 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.02.
  • 3. La llegada de la Web 2.0 ha supuesto una revolución en el diseño, tanto en lo que se refiere a 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. Desde el punto de vista visual este nuevo modo de hacer webs ha supuesto una estandarización. Mientras en la Web 1.0 los diseñadores realizaban páginas sin apenas base previa, ya que existían pocas referencias de diseño digital, la Web 2.0 ha supuesto el nacimiento de los estilos. Todos sabemos que nos encontramos en una página actual porque reconocemos una serie de cánones repetitivos: bordes redondeados, degradados, un fondo con diagonales y el logo reflejado.
  • 4. Estilo 2.0 La Web 2.0 ha supuesto la  1- Uso de colores vibrantes y contrastados: además de por creación de una serie de criterios puramente estéticos, la Web 2.0 se caracteriza por el clichés de diseño, de uso colores con mucho contraste . 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 2.0 que debe tener. Siguiendo el artículo “How to destroy the Web 2.0 look”3, de Elliot Jay Stocks, podemos definir las siguientes características:
  • 5. 2- Badges: se trata de una serie de botones con forma de chapas o placas. Consiste en una estrella con bordes redondeados y que habitualmente se utilizan para atraer la atención sobre un precio, una promoción o “un gran mensaje de Beta”4, es decir, indica que se trata de una versión no definitiva de la web.
  • 6. 3- 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, que aportan volumen a los diseños. Al mismo tiempo, las webs se llenan de objetos con un reflejo de él mismo sobre su base.
  • 7. 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. Bien sea a través de los programas de diseño o a través de las hojas de estilo CSS; incluso han surgido una gran cantidad de aplicaciones online que redondean los diseños por nosotros
  • 8. 5- Degradados: sin duda es una de las técnicas visuales que más han calado entre dos diseñadores de Web 2.0. Más pronunciados o más sutiles, los gradientes de color son empleados desde los fondos de las páginas hasta los favicones, los pequeños iconos que se muestran junto a la dirección web en el navegador de Internet.
  • 9. 6- 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. Estos patrones rayados se componen habitualmente de un color y una trama de este, es decir, una versión más oscura o más clara de la misma. El contraste siempre es leve para no dificultar la lectura ni centrar la atención sobre elementos decorativos.
  • 10. 7- Desenfoques: se hacen especialmente patentes en las sombras. En lugar de ser sombras duras, los diseñadores utilizan leves desenfoques.
  • 11. 8- Logotipos reflejados: durante un tiempo se convirtieron prácticamente en un estándar los logotipos reflejados, de forma que según va separándose el dibujo del reflejo va desenfocándose como si se tratara de papel mojado.
  • 12. A estos clichés podemos sumar los elaborados por Ben Hunt en su artículo “Web 2.0 How to design guide ”, y que se refieren más a conceptos de diseño general:
  • 13. Este principio, conocido como el de la Navaja de Occam, se ha convertido en la base del diseño. Buscar la opción que haga la navegación más sencilla y que exijan menos esfuerzo a los usuarios, evitando las interferencias de elementos superfluos y otorgando una mayor importancia a aquellos en los que queremos que fijen su atención. Esta simplicidad ha tenido como consecuencia también que el color blanco adquiera un mayor protagonismo: a nadie le asusta ya ver una página con fondo blanco (Google es blanco) y, en general, ha pasado de proporcionar sensación de web poco trabajada a otra de web clara y ordenada.
  • 14. mientras en la web 1.0 todo el contenido se alineaba a la izquierda, las páginas 2.0 siempre están centradas, mejorando la visualización de los contenidos en cualquier tipo de resolución de escritorio.
  • 15. antes la páginas se estructuraban en un mayor número de columnas, imitando tal vez el estilo de los periódicos; el diseño actual tiende hacia dos, en el caso de los blogs, y tres en el caso de las páginas con un mayor volumen de contenido.
  • 16. aunque siempre fueron distintas la zona superior y la inferior, ahora se marca más visualmente. Al mismo tiempo, cada área está claramente definida para un tipo de navegación o de interacción y una serie de contenidos.
  • 17. el concepto de Usabilidad en sí mismo. Organizar la página para que el usuario navegue intuitivamente y sepa para qué sirve cada elemento y con cuáles puede interactuar.
  • 18. tras un período en el que la tendencia era emplear fuentes pequeñas, como indicativo de elegancia, se ha pasado a un modelo en el que se consigue que las fuentes grandes también sean visualmente atractivas. Los sites pueden ser bonitos y a la vez respetar los principios de la usabilidad.
  • 19. en general, la negrita se ha convertido en el modo más eficiente de destacar la información sin recurrir a colores que ensucien la identidad corporativa de la página. Esto, unido a la necesidad de jerarquizar los contenidos, ha derivado en los tagline, es decir, frases que resumen el contenido de la página o de la empresa, así como entradillas que esquematizan los servicios o contenidos de la entidad o de la aplicación.
  • 20. han dejado de ser un elemento auxiliar del diseño para convertirse en un componente prioritario. En general, se puede decir que la principal característica del diseño 2.0 es la sutilidad, los pequeños detalles, y por ello los iconos son uno de los campos de acción más interesantes para los diseñadores.
  • 21. Un navegador es un programa que se utiliza para acceder a la web. Desde el primer explorador, llamado NCSA Mosaic de principio de los noventa hasta hoy, la evolución ha sido espectacular. 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. El dominio que ejerció IE fue tal que el desarrollo web se orientó totalmente a la visualización en este navegador. Nacieron frases como “Optimizado para Internet Explorer”, que venía a significar en muchos casos que si no usabas el Explorador de Windows, no ibas o poder ver la página o algunos servicios no iban a funcionar. 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.
  • 22. Los archivos elaborados con el programa de animación 2D por excelencia en el campo web, Flash, han pasado de ser la solución definitiva cuando deseamos hacer una web visualmente atractiva, a una posición mucho más discreta. 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.
  • 23. 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 Igoogle.
  • 24. ¿Qué evolucionó antes? ¿El internauta o la web? Como en el famoso caso del huevo y la gallina, no está claro quién nació antes, pero parece evidente que con el surgimiento de las aplicaciones 2.0 los usuarios comenzaron a exigirlas. Entre una web donde ver vídeos y otra donde además de ver vídeos puedo comentarlo, compartirlo y subir los míos propios, el usuario elegirá siempre la segunda opción.