DISEÑO WEB
INTRODUCCION
 La primera web fue publicada
  en el año 1991 por Tim
  Berners-Lee.
 Trece años después, en el año
  2004, el descubrimiento de
  Berners-Lee se reinventó .
 Alguien le puso un nuevo
  nombre: Web 2.0.
Diseño y Web 2.0

La llegada de la Web 2.0 ha supuesto una revolución en el
diseño. 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.
Mientras en la Web 1.0 los diseñadores realizaban páginas
sin apenas base previa, la Web 2.0 ha supuesto el
nacimiento de los estilos.
 En una página actual reconocemos una serie de cánones
repetitivos: bordes redondeados, degradados, un fondo con
diagonales y el logo reflejado.
Las páginas 1.0 fueron dibujadas
por diseñadores que provenían
del mundo de los carteles, prensa
y papelería, sin embargo las 2.0
han sido pensadas por creadores
especializados en diseño de
webs.
Gracias a esta demanda el diseño
2.0 se ha visto obligado a incluir
como disciplina no sólo la
elección de formas y colores,
sino también a pensar en el
individuo que va a interaccionar.
Le puso nombre concreto Jacob
Nielsen.
Estilo 2.0
              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
              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, a la vez que figuras planas;
               pequeños detalles de luz o
               degradados      delicados,     con
               grandes tipografías.
características
 1- Uso de colores vibrantes y
contrastados :se caracteriza por el
uso colores con mucho contraste .
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, indica que se trata de una
versión no definitiva de la web.
3- Brillos, destellos y reflejos:
cuentan con destellos de luz y
pequeñas zonas sobre expuestas,
que aportan volumen a los diseños.
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. Han
surgido una gran cantidad de
aplicaciones online que redondean
los diseños por nosotros.
5- Degradados: es una de las técnicas
visuales que más han calado entre dos
diseñadores de Web 2.0 . 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. 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.
“Web 2.0
        How to design guide 5”
1. Simplicidad: Este principio, conocido
como el de la Navaja de Occam, se ha
convertido en la base del diseño. Esta
simplicidad ha tenido como consecuencia
también que el color blanco adquiera un
mayor protagonismo.
2. Diseño centrado: 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.
3. Menos columnas: 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.

4.Separar
la navegación:
Cada        área      está
claramente definida para
un tipo de navegación o
de interacción y una serie
de contenidos.
5. Navegación simple:           6. Tipografías más grandes:
Organizar la página para        Era emplear fuentes pequeñas.
 que el usuario navegue         Los sites pueden ser bonitos y a
intuitivamente y sepa para      la vez respetar los principios de
qué sirve cada elemento y con   la usabilidad.
cuáles puede interactuar.
7. Leads en 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.

8. Iconos atractivos: Los iconos
son uno de los campos de acción
más interesantes para los
diseñadores.
FUTURO DEL DISEÑO
          2.0
Todos los movimientos artísticos se caracterizan porque mucha
gente hace lo mismo, hasta que alguien lo rompe y crea algo
más innovador.
Por esta razón la Web 2.0 está generando un movimiento en
contra de estos estándares. Lo importante es conocerlos, saber
por qué existen y cómo evitarlos”. “Hay que enseñar a las
masas que el look Web 2.0 es un término sin significado. El
Web 2.0 es un concepto… no un diseño estético.”
Evolución tecnológica
Navegador:
Navegadores web:Desde el primer explorador, llamado NCSA
Mosaic de principio de los noventa hasta hoy, la evolución ha
sido espectacular. A pesar de que las estadísticas actuales nos
dicen que IE sigue caminando, las Corrientes alternativas van
abriéndose paso.
Los otros navegadores: son los para móviles y para PDA, los
navegadores de sólo texto
Flash

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.
AJAX
El uso de Ajax ha supuesto una
revolución en el concepto de
interacción del usuario con la
página web.
  Y 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.
El internauta 2.0
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.
Manuel Lavín, director de consultoría e Business de Adesis Netlife,
define así al internauta 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 Web
2. Accede siempre desde su PC
3. Se conecta por módem
4. Se fija más en la espectacularidad de la Web que en los
contenidos
5. Es un usuario pasivo que sólo asimila información
6. Sólo interactúa para realizar compras, ver el mail y obtener
información
Mientras 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áginas
5. Genera información: Blogs, páginas
personales…
6. Publica contenido, lo ordena…
Los usuarios son más exigentes: Se trata de una
aplicación de estadísticas que nos ofrece todos los datos
sobre las personas que acceden a nuestra página y, por lo
tanto, a nuestros clientes.

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. Esto implica que los diseñadores tengan en
cuenta la presencia de estas herramientas.

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. No se trata de hacer
una aplicación amable por fuera y dura por dentro, sino que es
necesario poner a la vista las entrañas de la web para que
nuestro visitante suba documentos, organice vídeos o retoque
fotos.

Más contenido relacionado

PPTX
La web 2
PDF
PPTX
PDF
Web 2.0
PDF
Web 2.o y el diseño web
La web 2
Web 2.0
Web 2.o y el diseño web

La actualidad más candente (17)

PPTX
Diseño web
PDF
Diseño & Web 2.0
PDF
El diseño web
PDF
El diseño web
PDF
Diseño de web.03
PPTX
Diseño de web.03
PDF
Diseño weeb
PPTX
WEB 2.0 Y EL DISEÑO WEB
PPTX
Web de diseño
PPTX
Web 2
PDF
Presentación1
PDF
Web 2
PDF
WEB 2.0
PPTX
Diseño web
PDF
Diseño web
Diseño & Web 2.0
El diseño web
El diseño web
Diseño de web.03
Diseño de web.03
Diseño weeb
WEB 2.0 Y EL DISEÑO WEB
Web de diseño
Web 2
Presentación1
Web 2
WEB 2.0
Diseño web
Publicidad

Similar a Diseño web (14)

PDF
Web 2.o y el diseño web
PPTX
Presentacion dante 01 semana 3 tic
PPTX
Presentacion dante 01 semana 3 tic
PPTX
Web 2.0. sanchez
PDF
Diseño web
PPSX
Diseño de Pagina Web
PPTX
Diseño de web.03
PPTX
Web 2
PPTX
Web2mili
PDF
Diseño de web
PPTX
Diseño web
PDF
Alberto
Web 2.o y el diseño web
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
Web 2.0. sanchez
Diseño web
Diseño de Pagina Web
Diseño de web.03
Web 2
Web2mili
Diseño de web
Diseño web
Alberto
Publicidad

Diseño web

  • 2. INTRODUCCION  La primera web fue publicada en el año 1991 por Tim Berners-Lee.  Trece años después, en el año 2004, el descubrimiento de Berners-Lee se reinventó .  Alguien le puso un nuevo nombre: Web 2.0.
  • 3. Diseño y Web 2.0 La llegada de la Web 2.0 ha supuesto una revolución en el diseño. 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. Mientras en la Web 1.0 los diseñadores realizaban páginas sin apenas base previa, la Web 2.0 ha supuesto el nacimiento de los estilos. En una página actual reconocemos una serie de cánones repetitivos: bordes redondeados, degradados, un fondo con diagonales y el logo reflejado.
  • 4. Las páginas 1.0 fueron dibujadas por diseñadores que provenían del mundo de los carteles, prensa y papelería, sin embargo las 2.0 han sido pensadas por creadores especializados en diseño de webs. Gracias a esta demanda el diseño 2.0 se ha visto obligado a incluir como disciplina no sólo la elección de formas y colores, sino también a pensar en el individuo que va a interaccionar. Le puso nombre concreto Jacob Nielsen.
  • 5. Estilo 2.0  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  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, a la vez que figuras planas; pequeños detalles de luz o degradados delicados, con grandes tipografías.
  • 6. características 1- Uso de colores vibrantes y contrastados :se caracteriza por el uso colores con mucho contraste . 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, indica que se trata de una versión no definitiva de la web.
  • 7. 3- Brillos, destellos y reflejos: cuentan con destellos de luz y pequeñas zonas sobre expuestas, que aportan volumen a los diseños. 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. Han surgido una gran cantidad de aplicaciones online que redondean los diseños por nosotros.
  • 8. 5- Degradados: es una de las técnicas visuales que más han calado entre dos diseñadores de Web 2.0 . 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. El contraste siempre es leve para no dificultar la lectura ni centrar la atención sobre elementos decorativos.
  • 9. 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.
  • 10. “Web 2.0 How to design guide 5” 1. Simplicidad: Este principio, conocido como el de la Navaja de Occam, se ha convertido en la base del diseño. Esta simplicidad ha tenido como consecuencia también que el color blanco adquiera un mayor protagonismo. 2. Diseño centrado: 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.
  • 11. 3. Menos columnas: 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. 4.Separar la navegación: Cada área está claramente definida para un tipo de navegación o de interacción y una serie de contenidos.
  • 12. 5. Navegación simple: 6. Tipografías más grandes: Organizar la página para Era emplear fuentes pequeñas. que el usuario navegue Los sites pueden ser bonitos y a intuitivamente y sepa para la vez respetar los principios de qué sirve cada elemento y con la usabilidad. cuáles puede interactuar.
  • 13. 7. Leads en 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. 8. Iconos atractivos: Los iconos son uno de los campos de acción más interesantes para los diseñadores.
  • 14. FUTURO DEL DISEÑO 2.0 Todos los movimientos artísticos se caracterizan porque mucha gente hace lo mismo, hasta que alguien lo rompe y crea algo más innovador. Por esta razón la Web 2.0 está generando un movimiento en contra de estos estándares. Lo importante es conocerlos, saber por qué existen y cómo evitarlos”. “Hay que enseñar a las masas que el look Web 2.0 es un término sin significado. El Web 2.0 es un concepto… no un diseño estético.”
  • 15. Evolución tecnológica Navegador: Navegadores web:Desde el primer explorador, llamado NCSA Mosaic de principio de los noventa hasta hoy, la evolución ha sido espectacular. A pesar de que las estadísticas actuales nos dicen que IE sigue caminando, las Corrientes alternativas van abriéndose paso. Los otros navegadores: son los para móviles y para PDA, los navegadores de sólo texto
  • 16. Flash 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.
  • 17. AJAX El uso de Ajax ha supuesto una revolución en el concepto de interacción del usuario con la página web. Y 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.
  • 18. El internauta 2.0 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. Manuel Lavín, director de consultoría e Business de Adesis Netlife, define así al internauta 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 Web 2. Accede siempre desde su PC 3. Se conecta por módem 4. Se fija más en la espectacularidad de la Web que en los contenidos 5. Es un usuario pasivo que sólo asimila información 6. Sólo interactúa para realizar compras, ver el mail y obtener información
  • 19. Mientras 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áginas 5. Genera información: Blogs, páginas personales… 6. Publica contenido, lo ordena…
  • 20. Los usuarios son más exigentes: Se trata de una aplicación de estadísticas que nos ofrece todos los datos sobre las personas que acceden a nuestra página y, por lo tanto, a nuestros clientes. 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.
  • 21. 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. Esto implica que los diseñadores tengan en cuenta la presencia de estas herramientas. 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. No se trata de hacer una aplicación amable por fuera y dura por dentro, sino que es necesario poner a la vista las entrañas de la web para que nuestro visitante suba documentos, organice vídeos o retoque fotos.