*DISEÑO WEB:Fue publicado en el año 1991 trece añosdespués se reinvento, alguien le pusonombre: Web 2.0
DISEÑO WEB 2.0:Ha supuesto el nacimiento de los estilos.Todos sabemos que nos encontramos enuna pagina actual porque recon...
Las páginas 1.0 fueron dibujadas pordiseñadores que provenían del mundo de loscarteles, sin embargo las 2.0 han sido pensa...
DISEÑO WEB 2.0Las páginas han evolucionado, pero losusuarios más. Cada día son más exigentesa la hora de elegir el tiempo ...
ESTILO 2.0La Web 2.0 ha supuesto la creación de una seriede clichés de diseño, de elementos comunes, queconfiguran un esti...
ESTILO 2.0Aunque existen unas características concretas,que abordaremos a continuación, podemosdefinir el diseño 2.0 como ...
*    1- Uso de colores vibrantes y    contrastados: Es el uso de colores con    mucho contraste que facilita la    jerarqu...
2- Badges: Se trata de una serie debotones con forma de chapas o placas.Consiste en una estrella con bordesredondeados y q...
3- Brillos, destellos y reflejos: tanto loslogotipos como las barras de menú y losdistintos elementos de las composiciones...
4- Bordes redondeados: Bien sea a travésde los programas de diseño o a través delas hojas de estilo CSS; incluso han surgi...
5- Degradados: sin duda es una de lastécnicas visuales que más han calado entredos diseñadores de Web 2.0. Máspronunciados...
6- Líneas diagonales: se emplean especialmenteen los fondos de las páginas y en los de lostitulares, como motivos decorati...
7- Desenfoques: se hacenespecialmente patentes en lassombras. En lugar de ser sombrasduras, los diseñadores utilizan leves...
8- Logotipos reflejados: durante un tiempo se convirtieronprácticamente en un estándar los logotipos reflejados, deforma q...
*1. Simplicidad: Esta simplicidad ha tenido comoconsecuencia también que el color blanco adquieraun mayor protagonismo2. D...
3. Menos columnas: tiende hacia dos, enel caso de los blogs, y tres en el caso delas páginas con un mayor volumen deconten...
5. Navegación simple: cada elemento y concuáles puede interactuar.6. Tipografías más grandes: Se ha pasado a unmodelo en e...
7. Leads en negrita: en general, la negritase ha convertido en el modo más eficientede destacar la información8. Iconos at...
Futuro de diseño 2.0.Se refiere a unaestandarización .La web 2.0 esta generando unmovimiento en contra de estándares que h...
*    Es un programa que se utiliza para acceder    a la web. Nets Cape consiguió ser el    navegador desde 1994 hasta que ...
El domino que consiguió el IE fue tal que eldesarrollo webs oriento a la visualización.Las estadísticas aduales nos dice q...
*Navegadores como móviles y PDA de solotexto estan ganando importancia.Cada navegador interpreta asu modo elcódigo HTML no...
*La utilización de este tipo de animaciones hapasado como decíamos a una posiciónsecundaria que es en animaciones de las w...
*Es nombre que se puso a una serie de técnicas ycombinaciones de tecnologías ya existentes ,yapodemos mover las ventanas e...
*Atrás queda aquella web 1.0 donde los internautas eranmeros espectadores que perdían más tiempo buscandoque utilizando lo...
*- Los usuarios son más exigentes. Elusuario de Internet de hoy en día, por elcontrario, ofrece muchas menosposibilidades ...
-Los usuarios no quieren diseñar. Gracias al fenómenode las plantillas el usuario no pierde tiempoprogramando o diseñando ...
*
Usabilidad: Se trata en una disciplina cuyoobjetivo es facilitar la interacción del usuarioy, por estarazón, es lógico que...
*1. Anticipación, el sitio web debeanticiparse a las necesidades del usuario.2.   Autonomía, los usuarios deben tener el  ...
Reversibilidad, un sitio web ha de permitirdeshacer las acciones realizadas7. Ley de Fitts indica que el tiempo paraalcanz...
9. Aprendizaje, los sitios web deben requerir unmínimo proceso de aprendizaje y deben poder serutilizados desde el primer ...
13. Seguimiento de las acciones del usuario.Conociendo y almacenando información sobre sucomportamiento previo se ha de pe...
*La Usabilidad se desarrolla con la parte izquierda delcerebro y representa la razón y la acción lógica; por lotanto se co...
*“El arte y la ciencia de estructurar y clasificarsitios web e intranets con el fin de ayudar a losusuarios a encontrar y ...
*    1.   Entender el contenido de la web.    2. Realizar estudios de card sorting.    3. Elaborar un borrador del árbol d...
** Se define como el “conjunto de  recomendaciones dadas por el World  Wide Web Consortium (W3C)* Es decir, son las normas...
* Consiste en uno o varios documentos en los que se escriben las características que va a tener cada uno de los elementos ...
*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 ...
** El XHTML es una versión más estricta del código HTML para conseguir reducir las posibilidades de su uso y que la interp...
** No está claro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares: desde la portada del disco Tubular B...
Diseño web
Diseño web
Diseño web
Diseño web
Próxima SlideShare
Cargando en…5
×

Diseño web

119 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
119
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Diseño web

  1. 1. *DISEÑO WEB:Fue publicado en el año 1991 trece añosdespués se reinvento, alguien le pusonombre: Web 2.0
  2. 2. DISEÑO WEB 2.0:Ha supuesto el nacimiento de los estilos.Todos sabemos que nos encontramos enuna pagina actual porque reconocemos unaserie de cañones repetitivos.
  3. 3. Las páginas 1.0 fueron dibujadas pordiseñadores que provenían del mundo de loscarteles, sin embargo las 2.0 han sido pensadaspor creadores especializados en diseño dewebs.
  4. 4. DISEÑO WEB 2.0Las páginas han evolucionado, pero losusuarios más. Cada día son más exigentesa la hora de elegir el tiempo que pasan encada site. Gracias a esta demanda eldiseño 2.0 se ha visto obligado a incluircomo disciplina no sólo la elección deformas y colores, sino también a pensar enel individuo que va a interaccionar.
  5. 5. ESTILO 2.0La Web 2.0 ha supuesto la creación de una seriede clichés de diseño, de elementos comunes, queconfiguran un estilo propio que a la hora deabordar el diseño de una pagina se habla del gradode aplicación del arquetipo 2.0 que debe tener.
  6. 6. ESTILO 2.0Aunque existen unas características concretas,que abordaremos a continuación, podemosdefinir el diseño 2.0 como una conjunción deestilos cuya máxima es la sutileza y lacombinación de elementos dispares.Podemos definir las siguientes caracteristicas:
  7. 7. * 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.
  8. 8. 2- Badges: Se trata de una serie debotones con forma de chapas o placas.Consiste en una estrella con bordesredondeados y que habitualmente seutilizan para atraer la atención sobre unprecio o una promoción.
  9. 9. 3- Brillos, destellos y reflejos: tanto loslogotipos como las barras de menú y losdistintos elementos de las composicionescuentan con destellos de luz. Al mismotiempo, las webs se llenan de objetos conun reflejo de él mismo sobre su base
  10. 10. 4- Bordes redondeados: Bien sea a travésde los programas de diseño o a través delas hojas de estilo CSS; incluso han surgidouna gran cantidad de aplicaciones onlineque redondean los diseños por nosotros
  11. 11. 5- Degradados: sin duda es una de lastécnicas visuales que más han calado entredos diseñadores de Web 2.0. Máspronunciados o más sutiles, los gradientesde color.
  12. 12. 6- Líneas diagonales: se emplean especialmenteen los fondos de las páginas y en los de lostitulares, como motivos decorativos que serepiten. Estos patrones rayados se componenhabitualmente de un color y de un trama deeste.
  13. 13. 7- Desenfoques: se hacenespecialmente patentes en lassombras. En lugar de ser sombrasduras, los diseñadores utilizan levesdesenfoques.
  14. 14. 8- Logotipos reflejados: durante un tiempo se convirtieronprácticamente en un estándar los logotipos reflejados, deforma que según va separándose el dibujo del reflejo vadesenfocándose como si se tratara de papel mojado
  15. 15. *1. Simplicidad: Esta simplicidad ha tenido comoconsecuencia también que el color blanco adquieraun mayor protagonismo2. Diseño centrado: mientras en la web 1.0 todo elcontenido se alineaba a la izquierda, las páginas 2.0siempre están centradas
  16. 16. 3. Menos columnas: tiende hacia dos, enel caso de los blogs, y tres en el caso delas páginas con un mayor volumen decontenido.4. Separar la navegación: Clara área estaclaramente definida por un tipo denavegación
  17. 17. 5. Navegación simple: cada elemento y concuáles puede interactuar.6. Tipografías más grandes: Se ha pasado a unmodelo en el que se consigue que las fuentesgrandes también sean visualmente atractivas
  18. 18. 7. Leads en negrita: en general, la negritase ha convertido en el modo más eficientede destacar la información8. Iconos atractivos: han dejado de ser unelemento auxiliar del diseño paraconvertirse en un componente prioritario.
  19. 19. Futuro de diseño 2.0.Se refiere a unaestandarización .La web 2.0 esta generando unmovimiento en contra de estándares que hacen lomismo.La web 2.0 es un concepto… no un diseño estético.
  20. 20. * 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.
  21. 21. El domino que consiguió el IE fue tal que eldesarrollo webs oriento a la visualización.Las estadísticas aduales nos dice que IE siguecaminando
  22. 22. *Navegadores como móviles y PDA de solotexto estan ganando importancia.Cada navegador interpreta asu modo elcódigo HTML no queda mas remedio queusar un estándar común.
  23. 23. *La utilización de este tipo de animaciones hapasado como decíamos a una posiciónsecundaria que es en animaciones de las webso para estudiar noticias.
  24. 24. *Es nombre que se puso a una serie de técnicas ycombinaciones de tecnologías ya existentes ,yapodemos mover las ventanas en donde nosapetezca en servicios como Net vives o Igoogle.
  25. 25. *Atrás queda aquella web 1.0 donde los internautas eranmeros espectadores que perdían más tiempo buscandoque utilizando los sites y que simplemente leían textocon hipervínculos.
  26. 26. *- Los usuarios son más exigentes. Elusuario de Internet de hoy en día, por elcontrario, ofrece muchas menosposibilidades a los sites. Entra, y si no venada que le interese, se va.- Los usuarios saben dónde está odebería estar cada botón. Los menúsestán enla parte superior y/o en la izquierda, y ellogo que abre la pantalla es un enlace a lapágina de inicio.
  27. 27. -Los usuarios no quieren diseñar. Gracias al fenómenode las plantillas el usuario no pierde tiempoprogramando o diseñando y coge un diseño ya elaboradopor otros, lo aplica, y puede tener una página personalmoderna-Los usuarios quieren participar: la Web 2.0 es amenudo considerada como la “web colaborativa” ya quesu base es que los usuarios empiezan a opinar, a juzgar ya decir lo que les gusta y lo que no.-- Los usuarios quieren crear: este el objetivo últimode la Web 2.0. Un internauta que crea contenidos y que,por lo tanto, no se encuentra ante una página diseñadacon mejor o peor resultado, sino ante una interface.
  28. 28. *
  29. 29. Usabilidad: Se trata en una disciplina cuyoobjetivo es facilitar la interacción del usuarioy, por estarazón, es lógico que naciera o, más bien,cobrara fuerza, con la llegada de la Web 2.0.
  30. 30. *1. Anticipación, el sitio web debeanticiparse 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).
  31. 31. Reversibilidad, un sitio web ha de permitirdeshacer las acciones realizadas7. Ley de Fitts indica que el tiempo paraalcanzar un objetivo con el ratón esta enfunción de la distancia y el tamaño delobjetivo.8. Reducción del tiempo de latencia.Hace posible optimizar el tiempo deesperadel usuario, permitiendo la realización deotras tareas
  32. 32. 9. Aprendizaje, los sitios web deben requerir unmínimo proceso de aprendizaje y deben poder serutilizados desde el primer momento.10. El uso adecuado de metáforas facilita elaprendizaje de un sitio web, pero un uso inadecuadode estas puede dificultar enormemente elaprendizaje.11. La protección del trabajo de los usuarios esprioritario, se debe asegurar que los usuarios nuncapierden su trabajo como consecuencia de un error.12. Legibilidad, el color de los textos debecontrastar con el del fondo, y el tamaño defuente debe ser suficientemente grande.
  33. 33. 13. Seguimiento de las acciones del usuario.Conociendo y almacenando información sobre sucomportamiento previo se ha de permitir al usuariorealizar operaciones frecuentes de manera más rápida.14. Interfaz visible. Se deben evitar elementosinvisibles de navegación que han deser inferidos por los usuarios, menús desplegables,indicaciones ocultas, etc.
  34. 34. *La Usabilidad se desarrolla con la parte izquierda delcerebro y representa la razón y la acción lógica; por lotanto se corresponde con Marte. Por su parte, elDiseño reside en la parte derecha del cerebro y seidentifica con lo emocional y la acción intuitiva, asíque se corresponde con Venus.
  35. 35. *“El arte y la ciencia de estructurar y clasificarsitios web e intranets con el fin de ayudar a losusuarios a encontrar y manejar la información”.Así definieron Louis Rosenfield y Peter Morvilleesta disciplina en su libro “InformationArchitecture for the World Wide Web: DesigningLarge-Scale Web Sites”.
  36. 36. * 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.
  37. 37. ** 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.
  38. 38. * 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.
  39. 39. *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 deestilo.
  40. 40. ** 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.
  41. 41. ** 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.

×