Your SlideShare is downloading. ×
0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Diseño & Web 2.0
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Diseño & Web 2.0

192

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
192
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DISEÑO WEB
  • 2. INTRODUCCIÓNLa primera web fue publicada en el año 1991 por Tim Berners-Lee
  • 3. DISEÑO Y WEB 2.0La Web 2.0 ha supuesto una revolución en el diseño en loque se refiere a la concepción artística como en lasinterfaces.
  • 4. DISEÑO Y WEB 2.0Este nuevo modo de hacer webs ha supuesto unaestandarización.
  • 5. DISEÑO Y WEB 2.0Mientras en la Web 1.0 los diseñadores realizaban páginas sinapenas base previa, ya que existían pocas referencias de diseñodigital, la Web 2.0 ha supuesto el nacimiento de los estilos.
  • 6. DISEÑO Y WEB 2.0Todos sabemos que nos encontramos en una página actual porquereconocemos una serie de cánones repetitivos: bordesredondeados, degradados, un fondo con diagonales y el logoreflejado.
  • 7. DISEÑO Y WEB 2.0Las páginas 1.0 fueron dibujadas por diseñadores que provenían delmundo de los carteles, prensa y papelería, sin embargo las 2.0 hansido pensadas por creadores especializados en diseño de webs.
  • 8. DISEÑO Y WEB 2.0Los usuarios cada día son más exigentes a la hora de elegir el tiempoque pasan en cada sitio web. Gracias a esta demanda el diseño 2.0se ha visto obligado a incluir no sólo la elección de formas y colores,sino también a pensar en el individuo que va a interaccionar. Asínace la Usabilidad, un término que también surgió cuando alguien lepuso nombre, en concreto fue Jacob Nielsen.
  • 9. ESTILO 2.0La Web 2.0 ha supuesto la creación de una serie de clichés dediseño, de elementos comunes, que configuran un estilo propio,hasta el punto de que a la hora de abordar el diseño de una páginase habla del grado de aplicación del arquetipo 2.0 que debe tener.
  • 10. ESTILO 2.0Aunque existen unas características concretas, queabordaremos a continuación, podemos definir el diseño2.0 como una conjunción de estilos cuya máxima es lasutileza y la combinación de elementos dispares. Grandesmasas con volumen, utilizando técnicas de 3D, a la vez quefiguras planas; pequeños detalles de luz o degradadosdelicados, con grandes tipografías. Podemos definir lassiguientes características:
  • 11. ESTILO 2.0Uso de colores vibrantes y contrastados : Es el uso de colores conmucho contraste que facilitan la jerarquización de la información y,por lo tanto, la lectura. Colores contrastados pero, al mismo tiempo,en menor número.
  • 12. ESTILOS 2.0Badges: Se trata de una serie de botones con forma de chapas oplacas. Consiste en una estrella con bordes redondeados y quehabitualmente se utilizan para atraer la atención sobre un precio,una promoción o “un gran mensaje de Beta, es decir, indica que setrata de una versión no definitiva de la web.
  • 13. ESTILOS 2.0Brillos, destellos y reflejos: Los logotipos, barras de menú y losdistintos elementos de las composiciones cuentan con destellos deluz y pequeñas zonas sobreexpuestas, aportan volumen a losdiseños. Al mismo tiempo, las webs se llenan de objetos con unreflejo de él mismo sobre su base.
  • 14. ESTILOS 2.0Bordes Redondeados: La Web 2.0 ha supuesto el fin de las esquinas,dando paso a un nuevo arquetipo en el que todos los bordes sonredondeados.
  • 15. ESTILOS 2.0Degradados: Las técnicas visuales que más han calado entre dosdiseñadores de Web 2.0. más pronunciados o más sutiles, losgradientes de color son empleados desde los fondos de las páginashasta los favicones, los pequeños iconos que se muestran junto a ladirección web en el navegador de Internet.
  • 16. ESTILOS 2.0Líneas Diagonales: Se emplean especialmente en los fondos de laspáginas y en los de los titulares, como motivos decorativos que serepiten. Estos patrones rayados se componen habitualmente de uncolor y una trama de este, es decir, una versión más oscura o másclara de la misma.
  • 17. ESTILOS 2.0Desenfoques: Se hacen especialmente patentes en las sombras, enlugar de ser sombras duras, los diseñadores utilizan levesdesenfoques
  • 18. ESTILOS 2.0Logotipos Reflejados: durante un tiempo se convirtieronprácticamente en un estándar los logotipos reflejados, de forma quesegún va separándose el dibujo del reflejo va desenfocándose comosi se tratara de papel mojado.
  • 19. A estos clichés podemos sumar los elaborados por Ben Hunt en su artículo “Web 2.0" y que se refieren más a conceptos de Diseño General
  • 20. ESTILOS 2.0Simplicidad: Busca la opción que haga la navegación más sencilla yque exijan menos esfuerzo a los usuarios, evitando lasinterferencias de elementos superfluos y otorgando una mayorimportancia a aquellos en los que queremos que fijen su atención.
  • 21. ESTILOS 2.0Diseño Centrado: Mientras en la web 1.0 todo el contenido sealineaba a la izquierda, las páginas 2.0 siempre están centradas,mejorando la visualización de los contenidos en cualquier tipo deresolución de escritorio.
  • 22. ESTILOS 2.0Menos Columnas: antes la páginas se estructuraban en un mayornúmero de columnas, imitando tal vez el estilo de losperiódicos; el diseño actual tiende hacia dos, en el caso de losblogs, y tres en el caso de las páginas con un mayor volumende contenido.
  • 23. ESTILOS 2.0Separar la Navegación: Aunque siempre fueron distintas la zonasuperior y la inferior, ahora se marca más visualmente. Al mismotiempo, cada área está claramente definida para un tipo denavegación o de interacción y una serie de contenidos.
  • 24. ESTILOS 2.0Navegación Simple: El concepto de usabilidad en sí mismo.Organizar la página para que el usuario navegue intuitivamente ysepa para qué sirve cada elemento y con cuáles puede interactuar.
  • 25. ESTILOS 2.0Tipografías más Grandes: Tras un período en el que la tendencia eraemplear fuentes pequeñas, como indicativo de elegancia, se hapasado a un modelo en el que se consigue que las fuentesgrandes también sean visualmente atractivas.
  • 26. ESTILOS 2.0Leads en Negrita: La negrita se ha convertido en el modo máseficiente de destacar la información sin recurrir a colores queensucien la identidad corporativa de la página. Esto, unido a lanecesidad de jerarquizar los contenidos, es decir, frases queresumen el contenido de la página o de la empresa.
  • 27. ESTILOS 2.0Iconos Atractivos: Han dejado de ser un elemento auxiliar deldiseño para convertirse en un componente prioritario. Engeneral, se puede decir que la principal característica del diseño2.0 es la sutilidad, los pequeños detalles, y por ello los iconosson más interesantes para los diseñadores.
  • 28. FUTURO DEL DISEÑO 2.0En general referirse a una estandarización, es hablar de escuelas,de tendencias, de modos de actuar generalizados, pero, al mismotiempo, de ruptura y originalidad. Todos los movimientosartísticos se caracterizan porque mucha gente hace lo mismo,hasta que alguien lo rompe y crea algo más innovador. Por estarazón la Web 2.0 está generando un movimiento en contra deestos estándares.
  • 29. FUTURO DEL DISEÑO 2.0No obstante, y a pesar de esa aparente disidencia visual, es evidenteque los diseños que rompen con el estándar contienencaracterísticas de las citadas anteriormente, ya que mientras laWeb 2.0 continúe siendo vanguardia los internautas seguiránutilizándolo como referencia para saber si les gusta o no una página.
  • 30. EvoluciónTecnológica
  • 31. NAVEGADORESUn navegador es un programa que se utiliza para acceder a la web.Desde el primer explorador, llamado NCSA Mosaic de principio delos noventa hasta hoy, la evolución ha sido espectacular.
  • 32. NAVEGADORESNetscape consiguió ser el navegador de referencia desde el 1994hasta el año 1997.
  • 33. NAVEGADORESEn 1997 Microsoft introdujo el Internet Explorer en el SistemaOperativo Windows 98. El dominio que ejerció IE fue tal que eldesarrollo web se orientó totalmente a la visualización en estenavegador. Nacieron frases como “Optimizado para InternetExplorer”.
  • 34. NAVEGADORESA pesar de que las estadísticas actuales nos dicen que IE siguecaminando, las corrientes alternativas van abriéndose paso.Opera abrió el camino y, hoy en día, Mozilla Firefox estáhaciendo “pupa” al dominio de IE con cuotas del 20% en algunospaíses europeos. También están las opciones de: Safari y la recienteGoogle Chrome.
  • 35. NAVEGADORESTambién existen otros tipo de navegadores en otras aplicacionesque están ganando importancia como son los navegadores paramóviles y para PDA, los navegadores de sólo texto.
  • 36. FLASHLos archivos elaborados con el programa de animación 2D porexcelencia en el campo web, Flash, han pasado de ser la solucióndefinitiva cuando deseamos hacer una web visualmente atractiva, auna posición mucho más discreta.
  • 37. FLASHDurante algún tiempo muchas páginas consistían en un granarchivo de Flash que contenía todos los menús, textos, fotos,etc. Esto supone un gran problema de accesibilidad, ya quecualquiera que visite la página desde un navegador no gráfico,como lectores para personas ciegas, móviles y PDA, no veían nada.
  • 38. FLASHLo mismo sucede con los buscadores de Internet, que cuandorecorren las páginas localizando palabras en función de las cualesindexar la web, no encontraban nada. Y como cada día es másevidentemente que si no estás en los buscadores, como Google,Yahoo, no existes, no tiene sentido darle toda la responsabilidada un archivo de Flash.
  • 39. FLASHAl mismo tiempo, Flash si se ha convertido en el gran protagonistade otro campo del diseño web: los vídeos en línea. Las principalesplataformas de vídeo, como YouTube, Metacafe o Dailymotion,utilizan los vídeos codificados en Flash Video, debido a lo pocoque pesan los archivos
  • 40. AJAXEl término AJAX (Asynchronous JavaScript And XML), al igual que elde Web 2.0, no es ningún invento, ni un gran avance tecnológico, esel nombre que se le puso a una serie de técnicas y combinaciónde tecnologías ya existentes. Poco a poco se ha convertido enuna palabra de moda, que popularizó Jesse James Garrett en suartículo “Ajax: A New Approach to Web Applications”.
  • 41. AJAXEl ejemplo que popularizó el uso de esta tecnología fue como casisiempre, al hablar de web hoy en día, de la mano de Google, consus aplicaciones GMaps y Gmail. De repente, el usuario descubrióque los contenidos de las páginas podían actualizarse de unamanera más amable, sin tener que soportar la recarga de completade la página. Se actualizaba solamente lo que el usuario quería.
  • 42. INTERNAUTASParece evidente que con el surgimiento de las aplicaciones 2.0 losusuarios comenzaron a exigirlas. Entre una web donde ver vídeos yotra donde además de ver vídeos pueda comentarlo, compartirlo ysubir los míos propios, el usuario elegirá siempre la segunda opción.
  • 43. INTERNAUTAManuel Lavín, director de consultoría eBusiness de Adesis Netlife,define así al internauta 1.0 en su artículo “Web 2.0” Por fin alguienal otro lado de la pantalla”
  • 44. INTERNAUTALos Usuarios son más Exigentes: Hasta la llegada de la Web 2.0 elinternauta accedía a una página, la exploraba, valoraba si algúncontenido le interesaba y, si no, se iba.
  • 45. INTERNAUTALos Usuarios saben dónde está o debería estar cada botón: Losmenús están en la parte superior y/o en la izquierda, y el logo queabre la pantalla es un enlace a la página de inicio. El paso de los añosha hecho que los internautas conozcan una serie de convencionessobre cómo se diseñan las páginas, por lo que si no se respetan sefrustrará y se irá.
  • 46. INTERNAUTALos Usuarios no quieren Diseñar: Hoy en día si alguien quiere, porejemplo, hacer su blog, piensa en con qué lo va a llenar, qué va aescribir, a quién se va a dirigir, y el diseño se lo deja a Wordpress.Gracias al fenómeno de las plantillas el usuario no pierde tiempoprogramando o diseñando y coge un diseño ya elaborado por otros,lo aplica, y puede tener una página personal moderna sin necesidadde manejar herramientas de diseño.
  • 47. INTERNAUTALos Usuarios quieren Participar: La Web 2.0 es a menudoconsiderada como la “web colaborativa” ya que su base es que losusuarios empiezan a opinar, a juzgar y a decir lo que les gusta y loque no.
  • 48. INTERNAUTALos Usuarios quieren Crear:Este el objetivo último de la Web 2.0. Un internauta que creacontenidos y que, por lo tanto, no se encuentra ante una páginadiseñada con mejor o peor resultado, sino ante una interface.
  • 49. USABILIDADSe trata en una disciplina cuyo objetivo es facilitar la interacción delusuario y, por esta razón, es lógico que naciera o, más bien, cobrarafuerza, con la llegada de la Web 2.0. Si el mundo web se sustenta enque los internautas participen, es necesario estudiar qué es lo quelos estimula.
  • 50. USABILIDADPRINCIPIOS
  • 51. USABILIDAD Anticipación:El sitio web debe anticiparse a las necesidades del usuario.
  • 52. USABILIDAD Autonomía: Los usuarios deben tener el control sobre el sitio web. Losusuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
  • 53. USABILIDAD 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).
  • 54. USABILIDAD Consistencia:Las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
  • 55. USABILIDAD Eficiencia del usuario:Los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
  • 56. USABILIDAD Reversibilidad:Un sitio web ha de permitir deshacer las acciones realizadas.
  • 57. USABILIDAD Ley de Fitts: Indica que el tiempo para alcanzar un objetivo con el ratón esta enfunción de la distancia y el tamaño del objetivo. A menor distancia ymayor tamaño más facilidad para usar un mecanismo de interacción.
  • 58. USABILIDAD Reducción del tiempo de latencia: Hace posible optimizar el tiempo de espera del usuario,permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.
  • 59. USABILIDAD Aprendizaje:Los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
  • 60. USABILIDAD El uso adecuado de metáforas:Facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
  • 61. USABILIDAD 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.
  • 62. USABILIDAD Legibilidad:El color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.
  • 63. USABILIDAD Seguimiento de las acciones del usuario:Conociendo y almacenando información sobre su comportamientoprevio se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.
  • 64. USABILIDAD Interfaz Visible:Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
  • 65. ARQUITECTURA DE LA INFORMACIÓN
  • 66. USABILIDAD1. Entender el contenido de la web, determinar los servicios que se ofrecen y a quién está dirigida la web.2. Realizar estudios de card sorting.3. Elaborar un borrador del árbol de la web, agrupando la información y estableciendo jerarquías.4. Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting.5. Crear el mapa del sitio.6. Definir las funcionalidades de la página y cómo se llega a ellas.7. Contrastar la organización de la información que hemos propuesto con el resto de miembros del equipo.
  • 67. ESTANDARES CSSLas hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. 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.
  • 68. ESTANDARES XHTMLEl Lenguaje de Marcado de Hipertexto Extensible es el lenguaje demarcado pensado para sustituir al HTML. Cuando se daba pormuerto el HTML 4.0 surge una nueva revisión del W3C el HTML 5.0lo que hace que seguramente convivan ambos durante largo tiempo. El XHTML es una versión más estricta del código HTML paraconseguir reducir las posibilidades de su uso y que lainterpretación por los distintos dispositivos sea más simple, y quepequeños dispositivos, con menor capacidad que losordenadores de mesa tradicionales puedan soportar.
  • 69. CONCLUSIÓN Como conclusión, podemos resumir todo lo expuesto hasta ahora en que el diseño Web 2.0 pronto estará pasado de moda. Cuando las normas de un estilo están tan claras, es porque el siguiente paso será su redefinición. El diseño supone en gran medida romper los cánones, así que debemos estar preparados para la llegada de la próxima tendencia. Un nuevo modo de hacer webs, donde se imponga unos nuevos hábitos de navegación por parte de los usuarios y que nos obligue aredefinir la usabilidad, el aspecto visual y, en conjunto, la interacción
  • 70. Integración de las Tecnologías Alumno Cristian Harold Sagástegui RuizInstituto Estatal Superior Tecnológico “TRUJILLO”

×