3. DISEÑO WEB 2.0:
Ha supuesto el nacimiento de los estilos.
Todos sabemos que nos encontramos en
una pagina actual porque reconocemos una
serie de cañones repetitivos.
4. Las páginas 1.0 fueron dibujadas por
diseñadores que provenían del mundo de los
carteles, sin embargo las 2.0 han sido pensadas
por creadores especializados en diseño de
webs.
5. DISEÑO WEB 2.0
Las páginas han evolucionado, pero los
usuarios más. Cada día son más exigentes
a la hora de elegir el tiempo que pasan en
cada site. 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.
6.
7. 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 que a la hora de
abordar el diseño de una pagina se habla del grado
de aplicación del arquetipo 2.0 que debe tener
.
8. ESTILO 2.0
Aunque 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.
Podemos definir las siguientes caracteristicas:
9. *
1- Uso de colores vibrantes y
contrastados: Es el uso de colores con
mucho contraste que facilita la
jerarquización de la información y por lo
tanto la lectura.
10. 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 o una promoción.
11. 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. Al mismo
tiempo, las webs se llenan de objetos con
un reflejo de él mismo sobre su base
12. 4- Bordes 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
13. 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.
14. 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 de un trama de
este.
15. 7- Desenfoques: se hacen
especialmente patentes en las
sombras. En lugar de ser sombras
duras, los diseñadores utilizan leves
desenfoques.
16. 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
17. *
1. Simplicidad: 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
18. 3. Menos columnas: 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: Clara área esta
claramente definida por un tipo de
navegación
19. 5. Navegación simple: cada elemento y con
cuáles puede interactuar.
6. Tipografías más grandes: Se ha pasado a un
modelo en el que se consigue que las fuentes
grandes también sean visualmente atractivas
20. 7. Leads 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.
21. Futuro de diseño 2.0.Se refiere a una
estandarización .La web 2.0 esta generando un
movimiento en contra de estándares que hacen lo
mismo.
La web 2.0 es un concepto… no un diseño estético.
22. *
Es un programa que se utiliza para acceder
a la web. Nets Cape consiguió ser el
navegador desde 1994 hasta que en
1997,Microsoft introdujo el internet
Explorer.
23. El domino que consiguió el IE fue tal que el
desarrollo webs oriento a la visualización.
Las estadísticas aduales nos dice que IE sigue
caminando
24. *
Navegadores como móviles y PDA de solo
texto estan ganando importancia.
Cada navegador interpreta asu modo el
código HTML no queda mas remedio que
usar un estándar común.
25. *
La utilización de este tipo de animaciones ha
pasado como decíamos a una posición
secundaria que es en animaciones de las webs
o para estudiar noticias.
26. *
Es nombre que se puso a una serie de técnicas y
combinaciones de tecnologías ya existentes ,ya
podemos mover las ventanas en donde nos
apetezca en servicios como Net vives o Igoogle.
27. *
Atrás queda aquella web 1.0 donde los internautas eran
meros espectadores que perdían más tiempo buscando
que utilizando los sites y que simplemente leían texto
con hipervínculos.
28. *
- Los usuarios son más exigentes. El
usuario de Internet de hoy en día, por el
contrario, ofrece muchas menos
posibilidades a los sites. Entra, y si no ve
nada que le interese, se va.
- 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.
29. -Los usuarios no quieren diseñar. Gracias al fenómeno
de las plantillas el usuario no pierde tiempo
programando o diseñando y coge un diseño ya elaborado
por otros, lo aplica, y puede tener una página personal
moderna
-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.
-- 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.
31. Usabilidad: Se trata en una disciplina cuyo
objetivo es facilitar la interacción del usuario
y, por esta
razón, es lógico que naciera o, más bien,
cobrara fuerza, con la llegada de la Web 2.0.
32. *
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.
3. Los colores han de utilizarse con
precaución para no dificultar el acceso
a los usuarios con problemas de
distinción de colores (aprox. un 15% del
total).
33.
34. Reversibilidad, un sitio web ha de permitir
deshacer las acciones realizadas
7. Ley de Fitts indica que el tiempo para
alcanzar un objetivo con el ratón esta en
función de la distancia y el tamaño del
objetivo.
8. Reducción del tiempo de latencia.
Hace posible optimizar el tiempo de
espera
del usuario, permitiendo la realización de
otras tareas
35. 9. Aprendizaje, los sitios web deben requerir un
mínimo proceso de aprendizaje y deben poder ser
utilizados desde el primer momento.
10. El uso adecuado de metáforas facilita el
aprendizaje de un sitio web, pero un uso inadecuado
de estas puede dificultar enormemente el
aprendizaje.
11. La protección del trabajo de los usuarios es
prioritario, se debe asegurar que los 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ño de
fuente debe ser suficientemente grande.
36. 13. Seguimiento de las acciones del usuario.
Conociendo y almacenando información sobre su
comportamiento previo se ha de permitir al usuario
realizar operaciones frecuentes de manera más rápida.
14. Interfaz visible. Se deben evitar elementos
invisibles de navegación que han de
ser inferidos por los usuarios, menús desplegables,
indicaciones ocultas, etc.
37. *
La Usabilidad se desarrolla con la parte izquierda del
cerebro y representa la razón y la acción lógica; por lo
tanto se corresponde con Marte. Por su parte, el
Diseño reside en la parte derecha del cerebro y se
identifica con lo emocional y la acción intuitiva, así
que se corresponde con Venus.
38. *
“El arte y la ciencia de estructurar y clasificar
sitios web e intranets con el fin de ayudar a los
usuarios a encontrar y manejar la información”.
Así definieron Louis Rosenfield y Peter Morville
esta disciplina en su libro “Information
Architecture for the World Wide Web: Designing
Large-Scale Web Sites”.
39.
40. *
1. Entender el contenido de la web.
2. Realizar estudios de card sorting.
3. Elaborar un borrador del árbol de la web.
4. Crear el mapa del sitio.
5. Definir las funcionalidades de la página y cómo
se llega a ellas.
41. *
* Se define como el “conjunto de
recomendaciones dadas por el World
Wide Web Consortium (W3C)
* Es decir, son las normas que permiten
que las webs se puedan visionar no
sólo en Internet Explorer o Mozilla
Firefox, sino también en los
navegadores para personas ciegas o
dispositivos móviles como PDA o
teléfonos móviles.
42. * Consiste en uno o varios documentos en los que
se escriben las características que va a tener
cada uno de los elementos de la página:
titulares, párrafos, columnas, enlaces, etc., de
modo que afectan o pueden afectar al
conjunto del site.
43. *
1- Es más sencillo realizar cambios globales.
2- El site es más accesible.
3- Rápida descarga.
4- El usuario puede usar sus propias normas de
estilo.
44. *
* El XHTML es una versión más estricta del
código HTML para conseguir reducir las
posibilidades de su uso y que la
interpretación por los distintos dispositivos
sea más simple, y que pequeños
dispositivos, con menor capacidad que los
ordenadores de mesa tradicionales puedan
soportar, como los móviles.
45. *
* 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 las obras de Roy Lichtenstein
o las siluetas contrastadas de Keith Haring. Pero
lo que sí está claro que esta forma de diseñar
está traspasando los límites de las pantallas de
ordenador, para convertirse en un referente del
diseño digital como se aprecia, por ejemplo, en
los grafismos de televisión.