Diseño web semana 3

229 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
229
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseño web semana 3

  1. 1. DISEÑO
  2. 2. INTRODUCCIONCuenta la historia1, en nuestro caso, la Wikipedia, quela primera web fue publicada en el año 1991 por TimBerners-Lee. El padre de la World Wide Web elaboróun documento informático que rompía con lo anteriorporque contenía hipervínculos, es decir, ofrecíaposibilidad de ir a otro texto al pulsar sobre unapalabra.Trece años después, en el año 2004, el descubrimientode Berners-Lee se reinventó, y no porque cambiara deun día para otro, sino porque, como suele ocurrir en elmundo de Internet, alguien le puso un nuevo nombre:Web 2.0
  3. 3. Diseño y Web 2.0 La llegada de la Web 2.0 ha supuesto una revolución en el diseño, tanto en lo que se refiere a la concepción artística como en las interfaces. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneador de contenidos para ser el que elige, el que participa e incluso el que crea esos contenidos.
  4. 4. Desde el punto de vista visual este nuevomodo de hacer webs ha supuesto unaestandarización. Mientras en la Web 1.0 losdiseñadores realizaban páginas sin apenasbase previa, ya que existían pocas referenciasde diseño digital, la Web 2.0 ha supuesto elnacimiento de los estilos.Todos sabemos que nos encontramos en unapágina actual porque reconocemos una serie decánones repetitivos: bordes redondeados,degradados, un fondo con diagonales y el logoreflejado.
  5. 5. Las páginas han evolucionado, pero los usuarios más.Cada día son más exigentes a la hora de elegir eltiempo que pasan en cada site. Gracias a estademanda el diseño2.0 se ha visto obligado a incluir como disciplina nosólo la elección de formas y colores, sino también apensar en el individuo que va a interaccionar. Así nacela Usabilidad, un término que también surgió cuandoalguien le puso nombre, en concreto fue JacobNielsen
  6. 6. La Web 2.0 ha supuesto la creación deuna serie de clichés de diseño, deelementos comunes, que configuran unestilo propio, hasta el punto de que a lahora de abordar el diseño de una páginase habla del grado de aplicación delarquetipo 2.0 que debe tener.
  7. 7. Aunque existen unas característicasconcretas, que abordaremos acontinuación, podemos definir eldiseño 2.0 como una conjunción deestilos cuya máxima es la sutileza y lacombinación de elementos dispares.Grandes masas con volumen, utilizandotécnicas de 3D, a la vez que figurasplanas; pequeños detalles de luz odegradados delicados, con grandestipografías. IMAGEN 3D
  8. 8. 1- Uso de colores vibrantes y contrastados:además de por criterios puramente estéticos, laWeb 2.0 se caracteriza por el uso colores conmucho contraste que facilitan la jerarquización dela información y, por lo tanto, la lectura. Colorescontrastados pero, al mismo tiempo, en menornúmero.
  9. 9. En ninguna web se suelen emplear más dedos colores, uno de ellos habitualmenteoscuro como el negro o gris, junto a otromás vivo como el verde o el azul y,aumentando la variedad cromática,diferentes tramas de estos dos colores.Como si se tratara de una identidadcorporativa tradicional, los diseñadoresseleccionan los colores y los aplican atodos los elementos de la web: iconos,menús, efectos de los enlaces, etc.
  10. 10. 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, una promoción o “un gran mensajede Beta”4, es decir, indica que se trata deuna versión no definitiva de la web.
  11. 11. 3- Brillos, destellos y reflejos:tanto los logotipos como las barrasde menú y los distintos elementosde las composiciones cuentan condestellos de luz y pequeñas zonassobreexpuestas, que aportanvolumen a los diseños. Al mismotiempo, las webs se llenan deobjetos con un reflejo de él mismosobre su base.
  12. 12. 4- Bordes redondeados: la llegadade la Web 2.0 ha supuesto el fin delas esquinas, dando paso a un nuevoarquetipo en el que todos los bordesson redondeados. Bien sea a travésde los programas de diseño o a travésde las hojas de estilo CSS; inclusohan surgido una gran cantidad deaplicaciones online que redondean losdiseños por nosotros.
  13. 13. 5- Degradados: sin duda es una de lastécnicas visuales que más han caladoentre dos diseñadores de Web 2.0. Máspronunciados o más sutiles, los gradientesde color son empleados desde los fondosde las páginas hasta los favicones, lospequeños iconos que se muestran junto ala dirección web en el navegador deInternet.
  14. 14. 6- Líneas diagonales: se empleanespecialmente en los fondos de laspáginas y en los de los titulares, comomotivos decorativos que se repiten.Estos patrones rayados se componenhabitualmente de un color y una trama deeste, es decir, una versión más oscura omás clara de la misma. El contrastesiempre es leve para no dificultar lalectura ni centrar la atención sobreelementos decorativos.
  15. 15. 7- Desenfoques: se hacenespecialmente patentes en lassombras. En lugar de sersombras duras, los diseñadoresutilizan leves desenfoques.
  16. 16. 8- Logotipos reflejados: durante untiempo se convirtieron prácticamenteen un estándar los logotipos reflejados,de forma que según va separándose eldibujo del reflejo va desenfocándosecomo si se tratara de papel mojado.
  17. 17. CONCEPTOS DE DISEÑO GENERAL:1. Simplicidad: “en igualdad de condiciones lasolución más sencilla es probablemente lacorrecta”6. Este principio, conocido como elde la Navaja de Occam, se ha convertido enla base del diseño. Buscar la opción que hagala navegación más sencilla y que exijan menosesfuerzo a los usuarios, evitando lasinterferencias de elementos superfluos yotorgando una mayor importancia a aquellosen los que queremos que fijen su atención.
  18. 18. Esta simplicidad ha tenido como consecuenciatambién que el color blanco adquiera un mayorprotagonismo: a nadie le asusta ya ver unapágina con fondo blanco (Google es blanco) y,en general, ha pasado de proporcionarsensación de web poco trabajada a otra deweb clara y ordenada
  19. 19. 2. Diseño centrado: mientras en la web1.0 todo el contenido se alineaba a laizquierda, las páginas 2.0 siempre estáncentradas, mejorando la visualización delos contenidos en cualquier tipo deresolución de escritorio.
  20. 20. 3. Menos columnas: antes la páginas seestructuraban en un mayor número decolumnas, imitando tal vez el estilo de losperiódicos; el diseño actual tiende haciados, en el caso de los blogs, y tres en elcaso de las páginas con un mayor volumende contenido.
  21. 21. 4. Separar la navegación: aunque siemprefueron distintas la zona superior y lainferior, ahora se marca más visualmente. Almismo tiempo, cada área está claramentedefinida para un tipo de navegación o deinteracción y una serie de contenidos.
  22. 22. 5. Navegación simple: el conceptode Usabilidad en sí mismo.Organizar la página para que elusuario navegue intuitivamente ysepa para qué sirve cada elemento ycon cuáles puede interactuar.
  23. 23. 6. Tipografías más grandes: tras unperíodo en el que la tendencia eraemplear fuentes pequeñas, comoindicativo de elegancia, se ha pasado a unmodelo en el que se consigue que lasfuentes grandes también seanvisualmente atractivas. Los sites puedenser bonitos y a la vez respetar losprincipios de la usabilidad.
  24. 24. 7. Leads en negrita: en general, la negritase ha convertido en el modo más eficientede destacar la información sin recurrir acolores que ensucien la identidadcorporativa de la página. Esto, unido a lanecesidad de jerarquizar los contenidos, haderivado en los tagline, es decir, frases queresumen el contenido de la página o de laempresa, así como entradillas queesquematizan los servicios o contenidos dela entidad o de la aplicación.
  25. 25. 8. Iconos atractivos: han dejado deser un elemento auxiliar del diseñopara convertirse en un componenteprioritario. En general, se puededecir que la principal característicadel diseño 2.0 es la sutilidad, lospequeños detalles, y por ello losiconos son uno de los campos deacción más interesantes para losdiseñadores.
  26. 26. Hablar de diseño implica en generalreferirse a una estandarización, hablar deescuelas, de tendencias, de modos de actuargeneralizados, pero, al mismo tiempo, deruptura y originalidad. Todos losmovimientos artísticos se caracterizanporque mucha gente hace lo mismo, hastaque alguien lo rompe y crea algo másinnovador. Por esta razón la Web 2.0 estágenerando un movimiento en contra de estosestándares.
  27. 27. Un navegador es un programa que se utiliza para acceder a laweb. Desde el primer explorador, llamado NCSA Mosaic deprincipio de los noventa hasta hoy, la evolución ha sidoespectacular.Netscape consiguió ser el navegador de referencia desde el1994 hasta que, en el año1997, Microsoft introdujo el Internet Explorer en elSistema Operativo Windows 98.El dominio que ejerció IE fue tal que el desarrollo web seorientó totalmente a la visualización en este navegador.Nacieron frases como “Optimizado para Internet Explorer”,que venía a significar en muchos casos que si no usabas elExplorador de Windows, no ibas o poder ver la página oalgunos servicios no iban a funcionar.
  28. 28. FLASHLos archivos elaborados con el programa deanimación 2D por excelencia en el campo web, Flash,han pasado de ser la solución definitiva cuandodeseamos hacer una web visualmente atractiva, auna posición mucho más discreta.Durante algún tiempo muchas páginas consistían enun gran archivo de Flash que contenía todos losmenús, textos, fotos, etc. Esto supone un granproblema de accesibilidad, ya que cualquiera quevisite la página desde un navegador no gráfico, comopueden los lectores para personas ciegas, o muchosmóviles y PDA, no veían nada.
  29. 29. El término AJAX (Asynchronous JavaScript And XML), aligual que el de Web 2.0, no es ningún invento, ni un granavance tecnológico, es el nombre que se le puso a una serie detécnicas y combinación de tecnologías ya existentes. Poco apoco se ha convertido en una palabra de moda, que popularizóJesse James Garrett en su artículo “Ajax: A New Approachto Web Applications”8.El ejemplo que popularizó el uso de esta tecnología fue comocasi siempre, al hablar de web hoy en día, de la mano deGoogle, con sus aplicaciones GMaps y Gmail. De repente, elusuario descubrió que los contenidos de las páginas podíanactualizarse de una manera más amable, sin tener quesoportar la recarga de completa de la página. Se actualizabasolamente lo que el usuario quería.
  30. 30. El uso de Ajax ha supuesto una revoluciónen el concepto de interacción del usuariocon la página web. Ya podemos mover lasventanas a nuestro gusto y ponerlas endonde nos apetezca, eliminarlas de la vistao añadir nuevas ventanas con nuestras RSSfavoritas en servicios como Netvives oIgoogle.
  31. 31. ¿Qué evolucionó antes? ¿El internauta o la web?Como en el famoso caso del huevo y la gallina, noestá claro quién nació antes, pero parece evidenteque con el surgimiento de las aplicaciones 2.0 losusuarios comenzaron a exigirlas. Entre una webdonde ver vídeos y otra donde además de vervídeos puedo comentarlo, compartirlo y subir losmíos propios, el usuario elegirá siempre la segundaopción.
  32. 32. Características al Internauta 2.0* 1. Utiliza IE, Firefox, Opera, Safari…* 2. Accede desde su PC, PDA, Blackberry, TV, WII…* 3. Se conecta por GPRS, ADSL, Cable…* 4. Busca la operativa en las páginas* 5. Genera información: Blogs, páginas personales…* 6. Publica contenido, lo ordena…
  33. 33. UsabilidadEl considerado gran gurú de la Usabilidad, JacobNielsen, la definió así en el año2003: “El atributo de calidad que mide lo fácilesque son de usar las interfaces Web”11.Se trata en una disciplina cuyo objetivo es facilitarla interacción del usuario y, por esta razón, eslógico que naciera o, más bien, cobrara fuerza, conla llegada de la Web 2.0. Si el mundo web sesustenta en que los internautas participen, esnecesario estudiar qué es lo que los estimula.
  34. 34. “El arte y la ciencia de estructurar yclasificar sitios web e intranets con elfin de ayudar a los usuarios a encontrar ymanejar la información”. Así definieronLouis Rosenfield y Peter Morville estadisciplina en su libro “InformationArchitecture for the World Wide Web:Designing Large-Scale Web Sites”.
  35. 35. PASOS:1. Entender el contenido de la web, determinar los serviciosque se ofrecen y a quién está dirigida la web.2. Realizar estudios de card sorting. Se trata de un ejercicioque consiste en utilizar a usuarios potenciales de nuestra paraweb para que organicen el contenido a través de fichas,ordenándolo según sus esquemas mentales. Esto hace que laestructura resultante se adecúe más a lo que el internautaespera encontrarse.3. Elaborar un borrador del árbol de la web, agrupando lainformación y estableciendo jerarquías.4. Evaluar la correspondencia entre nuestro árbol y losresultados del card sorting.5. Crear el mapa del sitio.6. Definir las funcionalidades de la página y cómo se llega aellas.7. Contrastar la organización de la información que hemospropuesto con el resto de miembros del equipo.
  36. 36. “El poder de la web está en su universalidad. El accesoa la web para todos, independientemente de sudiscapacidad, es un aspecto esencial.” Esta frase deTim Berners-Lee representa a la perfección lo quesuponen los estándares web: que la red no suponga unabrecha con ningún colectivo por no disponer al cienpor cien de sus sentidos, ni por navegar en un soportedistinto a un plasma de 17”.Derivado de los estándares nació el concepto deaccesibilidad, orientado precisamente a integrar en laweb a las personas con minusvalías mentales o físicas.
  37. 37. Las hojas de estilo en cascada (CascadingStyle Sheets, CSS) son un lenguaje usadopara definir la presentación de undocumento estructurado escrito en HTML oXML. Consiste en uno o varios documentosen los que se escriben las característicasque va a tener cada uno de los elementos dela página: titulares, párrafos, columnas,enlaces, etc., de modo que afectan o puedenafectar al conjunto del site.
  38. 38. El XHTML (Lenguaje de Marcado de HipertextoExtensible) es el lenguaje de marcado pensado parasustituir al HTML, pero aún le queda camino porrecorrer. Cuando se daba por muerto el HTML 4.0surge una nueva revisión del W3C el HTML 5.0 lo quehace que seguramente convivan durante un largoperiodo de tiempo ambos.El XHTML es una versión más estricta del códigoHTML para conseguir reducir las posibilidades de suuso y que la interpretación por los distintosdispositivos sea más simple, y que pequeñosdispositivos, con menor capacidad que losordenadores de mesa tradicionales puedan soportar,como los móviles.
  39. 39. Las principales ventajas que aportan son:• La compatibilidad con navegadoresantiguos• La independencia del diseño. Pudiendoadoptar presentaciones distintas segúnel dispositivo.• Facilidad de edición del código y sumantenimiento• Mejoras de rendimiento.

×