El documento describe las características estéticas comunes de los sitios web de estilo Web 2.0, incluyendo bordes redondeados, degradados de color, líneas diagonales en los fondos, y logotipos reflejados. También discute tendencias en el diseño como la simplicidad, navegación separada, tipografías más grandes e iconos atractivos. Finalmente, señala que aunque existen estos estándares, algunos diseñadores están creando sitios sin estos clichés para romper con las convenciones establecidas.
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.