Diseño web
- 2. La primera web fue publicada en el año 1991 por Tim Berners-Lee. El padre de la World Wide Web elaboró un documento informático que rompía con lo anterior porque contenía hipervínculos, es decir, ofrecía posibilidad de ir a otro texto al pulsar sobre una palabra. En el 2004 se lo reinvento ya que alguien le puso un nuevo nombre Web 2.0.
- 3. La Web 2.0 fue una revolución tanto en la concepción artística, como en las interfaces, ya que el usuario puede elegir los contenidos siendo el que participa hasta incluso crea esos contenidos, dando lugar a los estilos en el diseño digital. El nacimiento de nuevos estilos dio lugar al nacimiento de nuevos perfiles , sin embargo las 2.0 han sido pensadas por creadores especializados en diseño de webs. Los usuarios son cada vez mas exigentes para estar en los sitios webs, por eso el diseño web 2.0 se ha visto obligado a incluir como disciplina no solo la elección de formas y colores, sino también a pensar en el individuo que va a interactuar, naciendo así la Usabilidad le dio el nombre Jacob Nielsen.
- 4. Estilo 2.0 El diseño 2.0 es un conjunto de estilos cuya máxima es la sutileza y la combinación de elementos dispares. Grandes masas con volumen, utilizando técnicas de 3D y figuras planas, pequeños detalles de luz o degradados delicados , con grandes tipografías. Según el artículo «How to destroy the Web 2.0 look » podemos definir: Uso de colores vibrantes y contrastados que permite la jerarquización de la información y , por tanto la lectura ; no se emplea mas de dos colores: uno oscuro negro o gris y el otro mas vivo como el verde o el azul y los aplican a todos los elementos de la Web.
- 5. Badges: Son una serie de botones con forma de chapas o placas, consiste en una estrella con bordes redondeados y se utilizan para atraer la atención sobre un precio o promoción. Brillos, destellos y reflejos: Los Logotipos , barras de menú y distintos elementos de las composiciones cuentan con destellos de luz y pequeñas zonas sobreexpuestas, aportan volumen a los diseños y llenan de objetos con un reflejo de él mismo sobre su base. Bordes redondeados: se da paso a un nuevo arquetipo en que todos los bordes son redondeados ya sea por programas de diseño o a través de las hojas de estilo CSS.
- 6. Degradados: esta técnica visual a calado entre los diseñadores, elaborando más pronunciados o más sutiles, siendo empleados desde los fondos de las páginas hasta los pequeños iconos que se muestran junto a la dirección web en el navegador de Internet. Líneas Diagonales: Se emplean en los fondos de las páginas y en los titulares como motivos decorativos que se repiten. Sus patrones son de un color y una trama de este (una mas clara y otra mas oscura). Desenfoques: En las sombras los diseñadores utilizan leves desenfoques. Logotipos reflejados: de forma que según va separándose el dibujo del reflejo va desenfocándose como si se tratara de papel mojado.
- 7. Clichés elaborados por Ben Hunt Simplicidad: es buscar la opción que haga la navegación más sencilla y que exijan menos esfuerzo a los usuarios, evitando elementos superfluos y dando importancia a lo que queremos que fijen su atención. Adquiere el color blanco mayor protagonismo, ha pasado de sensación de web poco trabajada a otra de web clara y ordenada. Diseño centrado: el contenido centrado mejorando así la visualización de los contenidos. Menos columnas: el diseño actual tiende dos en los blogs y tres en las páginas de mayor contenido.
- 8. Separar la navegación: mayor claridad para la navegación o de interacción y una serie de contenidos. Navegación simple: Organizar la página para que el usuario navegue intuitivamente y sepa para qué sirve cada elemento y con cuáles puede interactuar. Tipografías más grandes: Fuentes mas grandes sean visualmente atractivas y respetar los principios de la usabilidad. Leads en negrita: Modo de destacar y jerarquizar la información. Iconos atractivos: Es un componente prioritario del diseño web 2.0 es la sutilidad, por eso los íconos es el campo de acción de los diseñadores
- 9. Futuro del diseño web 2.0 El diseño implica referirse a estandarización y contra esto esta lo innovador. Elliot Jay Stocks : Los clichés de diseño siempre han existido, lo importantes es conocerlos, saber por qué existen y cómo evitarlos. Hay que indicar que el Web 2.0 es un concepto … no un diseño estético. Elliot apuestan por utilizar las tendencias actuales estéticas como base para los nuevos cánones web, creando sites en los que no aparezca ninguno de los clichés.
- 10. Evolución tecnológica (y su uso) Navegador Navegadores web: es un programa que se utiliza para acceder a la web. El primero fue NCSA en los principios de los 90. El Netscape consiguió ser el navegador por referencias hasta 1994 y en 1997 Microsoft introdujo Internet Explorer en el S.O. Windows 98. Otros navegadores: para Móviles y para PDA, los navegadores de solo texto…ahora los diseñadores web se ven obligados a que sus páginas puedan ser consultadas por distintos medios.
- 11. Flash Los archivo elaborados con el programa de animación 2D por excelencia en el campo web, Flash hacen posible una web atractiva y más discreta. La utilización de este tipo de animaciones ha pasado a una posición secundaria, las animaciones en las cabeceras de las webs, e los banner o para ilustrar noticias, ahora es un ingrediente más del diseño, pero no como plato único. En el campo de videos en línea se ha convertido en el gran protagonista
- 12. Ajax Es una serie de técnicas y combinación de tecnologías ya existentes, lo popularizo Jesse James Garrett en su artículo “Ajax: A New Approach to Web Applications” Lo que lo hizo popular fue que el usuario descubrió que los contenidos de las páginas podían actualizarce de una manera más amable, sin tener que soportar la recarga completa de la página, se actualizaba solamente lo que el usuario quería. Es una revolución en el concepto de interacción del usuario con la página web, podemos mover las ventanas a nuestro gusto y ponerlas en donde nos apetezca, etc.
- 13. El Internauta 2.0 Es evidente que el surgimiento de las aplicaciones 2.0 los usuarios comenzaron a exigirlas. Manuel 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 alguien al otro lado de la pantalla”
- 14. El Internauta 1.0 2.0 1.- Utiliza IE para navegar por 1.- Utiliza IE, Opera,Safari… la web. 2.- Accede desde su PC, PDA, 2.-Accede siempre desde su Blackberry, Tv, WII… PC. 3.-Se conecta por GPRS, 3.- Se conecta por módem. ADSL, CABLE… 4.- Se fija más en la espectacularidad de la web 4.- Busca la operativa en las que es los contenidos. páginas. 5.- Es un usuario pasivo que 5.- Genera información: solo asimila información. Blogs, páginas personales… 6.- Solo interactúa para 6.- Publica contenido, lo realizar compras, ver el mail y ordena … obtener información.
- 15. Los usuarios son más exigentes: ofrecen muchas menos posibilidades a los sites. Entra, y si no ve nada que le interese, se va. La herramienta Google Analytics ayuda a conocer la experiencia de navegación de nuestros visitantes. Los usuarios saben dónde está o debería estar cada botón: los años ha hecho conocer la estructura de diseño a los usuarios y sino se respeta eso se frustran y se irá. Los usuarios no quieren diseñar. Los usuarios quieren participar: el usuario participa a través de comentarios.
- 16. Los usuarios quieren crear: este es el objetico último de la web 2.0 y se encuentra con una página con mejor o peor resultado sino ante un interface. Cada una de las entrañas debe cumplir con el principio de usabilidad. INTERFACES PARA UN INETRNAUTA 2.0 Usabilidad: la disciplina cuyo objetivo es facilitar la interacción del usuario, siendo el punto clave los internautas y que es lo que los estimula. Jacob Nielsen mide la usabilidad: Aprendizaje: aprenden las utilidades de la web en su primera vez Eficacia: cuando es familiar cuanto tiempo demoran en realizar una tarea Memorización: después de un periodo cuanto tiempo recuperan su habilidad de uso.
- 17. Errores: cuantos errores cometen los usuarios y cuanto tardan en recuperarse. Satisfacción: cuán agradables es interactuar con el diseño PRINCIPIOS DE LA USABILIDAD Eduardo Manchón interpreta y esquematiza los principios de la Usabilidad de Bruce Tognazzini: Anticipación: el sitio web debe anticiparse a las necesidades del usuario. Autonomía: Los usuarios deben tener el control sobre el sitio web. Los colores han de utilizarse con precaución: para no dificultar el acceso a los usuarios con problemas de distinción de colores.
- 18. Consistencia: las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo. Eficiencia del usuario: los sitios web se deben centrar en la productividad del usuario y no en la del propio sitio web. Reversibilidad: debe permitir deshacer las acciones realizadas. Ley de Fitts: a menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción. Reducción del tiempo de latencia: hace posible optimizar el tiempo de espera del usuario.
- 19. Aprendizaje: deben requerir un mínimo proceso de aprendizaje y poder ser utilizados desde el primer momento. Uso adecuado de metáforas: facilita el aprendizaje de un sitio web, si es erróneo dificulta el aprendizaje. Protección del trabajo de los usuarios: es prioritario. Legibilidad: debe haber un buen contraste y el tamaño de la fuente debe ser suficientemente grande. Seguimiento de las acciones del usuario: permite al usuario realizar operaciones frecuentes de manera más rápida. Interfaz visible: se debe evitar elementos no visibles de navegación que han de ser inferidos por los usuarios.
- 20. Usabilidad frente al diseño Ninguna web puede prescindir de la usabilidad. Si no es atractivo visualmente no se desarrollará como producto. Son dos disciplinas que se necesitan una a la otra. Aparecen los Wireframes: son esquemas previos al diseño donde se refleja la organización de los contenidos y la interacción entre las distintas páginas de un site.
- 21. Arquitectura de la Información El arte y la ciencia de estructurar y clasificar sitios web con el fin de ayudar a encontrar y manejar la información de Louis Rosenfield y Peter Morville. Tomando el artículo de Lain Barker podemos definir: Entender el contenido de la web, determinar los servicios que se ofrecen y a quién está dirigida la web. Realizar card sorting, el usuario lo organiza según sus esquemas mentales. Elaborar un árbol de la web, agrupando y estableciendo jerarquías de la información. Evaluar nuestro árbol con el card sorting.
- 22. Crear el mapa del sitio. Definir la funcionalidades de la página y cómo se llega a ellas. Contrastar la organización de la información con el resto de miembros del equipo. Elaborar el Wireframe que pasará al departamento de diseño y programación. BENEFICIOS DE ORGANIZAR LA INFORMACIÓN: Los clientes pasarán más tiempo navegando. Mejorará la imagen de la marca, ya que percibirán la página positivamente y no se frustarán por no encontrar lo que buscan. Aumenta la fidelidad, es más probable que vuelvan.
- 23. Estándares Es el conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C). El poder de la web está en su universalidad. Derivado de los estándares nació el concepto de accesibilidad para las personas minusvalidas. En su papel de guía de los desarrolladores web, la W3C recomienda el uso de dos estándares: CCS y XHTML.
- 24. CCS Las hojas de estilo en cascada (Cascading Style Sheet, CSS) son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. Ventajas: Es más sencillo realizar cambios globales: modificando un solo archivo. El estilo del site se mantiene en toda su extensión: salvo que marquemos lo contrario. El site es más accesible: pueden crearse distintos formatos para que cada navegador lo interprete como le señalemos. Rápida descarga: las páginas son más ligeras.
- 25. Separación del diseño y la programación: ambos puede trabajar en la web sin interrumpirse. Esta optimizado para buscadores: menos código en los archivos y más fácil para el buscador encontrar palabras clave. El usuario puede usar sus propias normas de estilo. Una mayor libertad en la maquetación: La CSS se basan en posiciones.
- 26. XHTML Lenguaje de marcado de hipertexto extensible, pensado para sustituir al HTML. 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 lo puedan soportar como los móviles. Ventajas: La compatibilidad con navegadores antiguos. La independencia del diseño. Pudiendo adoptar presentaciones distintas según el dispositivo. Facilidad de edición del código y su mantenimiento. Mejoras de rendimiento.
- 27. Conclusiones El estilo de diseño 2.0 se esta convirtiendo en un referente del diseño digital. 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 a redefinir la usabilidad, el aspecto visual y en conjunto la interacción.