SlideShare una empresa de Scribd logo
1 de 23
Descargar para leer sin conexión
• 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 creación de una serie de
  elementos comunes 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.
• En ninguna web se suelen emplear más de dos
  colores, uno de ellos habitualmente oscuro como el
  negro o gris, junto a otro más vivo como el verde o el
  azul y, aumentando la variedad cromática, diferentes
  tramas de estos dos colores.
• 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
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
• 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. Más
pronunciados o más sutiles, los gradientes de color son
empleados desde los fondos de las páginas hasta los
favicones.
• 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.
• 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, 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 guide5”, y que se refieren más a conceptos
de diseño general:
1. Simplicidad: “en igualdad de condiciones la solución
más sencilla es probablemente la correcta”6. Este
principio, conocido como el de la Navaja de Occam, se ha
convertido en la base del diseño. 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: 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.
• 4. Separar la navegación: 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.
• 5 Navegación simple: el concepto de Usabilidad en sí
  mismo.
• 6Tipografías más grandes: tras un período en el que la
  tendencia era emplear fuentes pequeñas.
• 7Leads en negrita: en general, la negrita se ha
  convertido en el modo más eficiente de destacar la
  información.
• 8. Iconos atractivos: han dejado de ser un elemento
  auxiliar del diseño para convertirse en un componente
  prioritario.
3.3. FUTURO DEL DISEÑO 2.0
• 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. 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.
Este diseñador, al igual que muchos otros, apuestan por utilizar las
tendencias actuales estéticas actuales como base para los nuevos
cánones web, creando sites en los que no aparezca ninguno de los clichés.
3.4. EVOLUCIÓN TECNOLÓGICA (Y SU USO)
3.4.1 NAVEGADOR
• Navegadores web
3.4. Evolución tecnológica (y su uso)
3.4.1 Navegador
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.
LOS OTROS NAVEGADORES


• 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….
3.5. 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.

Durante algún tiempo muchas páginas consistían en un
gran archivo de Flash que contenía todos los menús,
textos, fotos, etc. Esto supone un gran problema de
accesibilidad, ya que cualquiera que visite la página desde
un navegador no gráfico,
LO MISMO SUCEDE CON LOS BUSCADORES DE
INTERNET, QUE CUANDO RECORREN LAS PÁGINAS
LOCALIZANDO PALABRAS EN FUNCIÓN DE LAS
CUALES INDEXAR LA WEB, NO ENCONTRABAN
NADA. Y COMO CADA DÍA ES MÁS EVIDENTEMENTE
QUE SI NO ESTÁS EN LOS BUSCADORES, COMO
GOOGLE O YAHOO, NO EXISTES, NO TIENE
SENTIDO DARLE TODA LA RESPONSABILIDAD A UN
ARCHIVO DE FLASH.

 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.

Más contenido relacionado

Similar a Diseño web (20)

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.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
 
La web 2
La web 2La web 2
La web 2
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
diseño web
diseño webdiseño web
diseño web
 
Diseño web semana 3
Diseño web semana 3Diseño web semana 3
Diseño web semana 3
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diana
DianaDiana
Diana
 
Web 2
Web 2Web 2
Web 2
 
Wed
WedWed
Wed
 
W ebb pdf
W ebb pdfW ebb pdf
W ebb pdf
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
 
Web 2
Web 2 Web 2
Web 2
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Web2mili
Web2miliWeb2mili
Web2mili
 

Diseño web

  • 1.
  • 2.
  • 3.
  • 4. • 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.
  • 5. ESTILO 2.0 • La Web 2.0 ha supuesto la creación de una serie de elementos comunes 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.
  • 6. • En ninguna web se suelen emplear más de dos colores, uno de ellos habitualmente oscuro como el negro o gris, junto a otro más vivo como el verde o el azul y, aumentando la variedad cromática, diferentes tramas de estos dos colores.
  • 7. • 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
  • 8. 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
  • 9. • 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.
  • 10. • 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.
  • 11. • 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.
  • 12. • Desenfoques: se hacen especialmente patentes en las sombras. En lugar de ser sombras duras, los diseñadores utilizan leves desenfoques.
  • 13. • 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.
  • 14. • A estos clichés podemos sumar los elaborados por Ben Hunt en su artículo “Web 2.0 How to design guide5”, y que se refieren más a conceptos de diseño general: 1. Simplicidad: “en igualdad de condiciones la solución más sencilla es probablemente la correcta”6. Este principio, conocido como el de la Navaja de Occam, se ha convertido en la base del diseño. 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.
  • 15. • 3. Menos columnas: 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. • 4. Separar la navegación: 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. • 5 Navegación simple: el concepto de Usabilidad en sí mismo. • 6Tipografías más grandes: tras un período en el que la tendencia era emplear fuentes pequeñas. • 7Leads en negrita: en general, la negrita se ha convertido en el modo más eficiente de destacar la información.
  • 17. • 8. Iconos atractivos: han dejado de ser un elemento auxiliar del diseño para convertirse en un componente prioritario.
  • 18. 3.3. FUTURO DEL DISEÑO 2.0 • 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. 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.
  • 19. Este diseñador, al igual que muchos otros, apuestan por utilizar las tendencias actuales estéticas actuales como base para los nuevos cánones web, creando sites en los que no aparezca ninguno de los clichés.
  • 20. 3.4. EVOLUCIÓN TECNOLÓGICA (Y SU USO) 3.4.1 NAVEGADOR • Navegadores web 3.4. Evolución tecnológica (y su uso) 3.4.1 Navegador 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.
  • 21. LOS OTROS NAVEGADORES • 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….
  • 22. 3.5. 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. Durante algún tiempo muchas páginas consistían en un gran archivo de Flash que contenía todos los menús, textos, fotos, etc. Esto supone un gran problema de accesibilidad, ya que cualquiera que visite la página desde un navegador no gráfico,
  • 23. LO MISMO SUCEDE CON LOS BUSCADORES DE INTERNET, QUE CUANDO RECORREN LAS PÁGINAS LOCALIZANDO PALABRAS EN FUNCIÓN DE LAS CUALES INDEXAR LA WEB, NO ENCONTRABAN NADA. Y COMO CADA DÍA ES MÁS EVIDENTEMENTE QUE SI NO ESTÁS EN LOS BUSCADORES, COMO GOOGLE O YAHOO, NO EXISTES, NO TIENE SENTIDO DARLE TODA LA RESPONSABILIDAD A UN ARCHIVO DE FLASH. 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.