¿Quieres que te llamemos?

captcha

Un buen diseño web

Un buen diseño web con una jerarquía elaborada de contenidos aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, dando posibilidades de contacto directo entre el productor y el consumidor de contenidos, característica destacable de este medio con comportamiento social.

Un estudio previo

El trabajo inicial de todo proyecto web es un estudio para asesorar a los clientes a definir el perfil de identidad, proporcionando una actitud un modo de ser y estar con el que se instalarán en la “red“. Un “brief” para definir lo que se quiere conseguir y transmitir con el diseño web.

En este proceso se deben tener en cuenta factores culturales y de comunicación que permitan atender los entornos en los que se moverá esa organización en internet .

Es necesario poseer conocimientos técnicos adecuados para afrontar los proyectos desde el punto de vista del diseño web.

Establecer jerarquías del contenido

Los clientes, (usuarios web) son personas muy ocupadas que NO leen mucho a menos que sea sobre algo que les interese. La lectura tiene que ser fácil y rápida (decir cosas útiles).
En Nuestro diario web hemos ampliado un poco el tema de Cómo se escribe en web

http://www.coexia.com/como-se-escribe-en-web/

Hay estudios que se deben tener en cuenta a la hora de diseñar para web como lo es “eyetracking“. Este estudio básicamente muestra y estudia donde mira la gente y con esto se consigue fundamentar las decisiones sobre dónde colocar los elementos en la página.

Los usuarios web empiezan a leer por la parte superior izquierda antes de desplazarse hacia abajo y hacia la derecha, generalmente escanean las páginas web en forma de ‘F’. Asegúrate que los elementos importantes de tu contenido se encuentren en estas áreas clave.

Web especialista en estudios de Eyetracking

Buscar la usabilidad y accesibilidad

Hay que intentar conseguir una fácil interacción con los usuarios teniendo en cuenta a los lectores perezosos o usuarios con poca experiencia. El diseño es una herramienta útil para adquirir más tiempo de los usuarios web, despertando su interes.

  • Una primera face es definir una estructura con los elementos más importantes.
  • Destacar los mensajes con formatos (bold, color) y títulos, conseguir que todo sea lo más legible y fácilmente reconocible.
  • Accesibilidad: se refiere a brindar las facilidades para que cualquier usuario pueda acceder y navegar en la página. Esto se logra generando atajos y contenidos alternativos, que se introducen directamente en el código de la página y que son transparentes al usuario.
  • Usabilidad: tiene que ver directamente con la capacidad mediadora del sitio web. Un sistema on-line nace como un vehículo de información, por lo que no debiera tener barreras que impidan que el flujo de la misma entre la pantalla y usuario.

Hay algunos autores que nos señalan algunas pautas a tener en cuenta a la hora de pensar en como navegaran los usuarios en nuestra web y con que problemas se pueden encontrar.
Un libro fácil de entender que muestra el por que es importante invertir en la usabilidad del sitio web: No Me Hagas Pensar, Steve Krug.

Elección de tipografías

En líneas generales puede decirse que en el diseño web todo cuenta, todo debe ser claro, no menos es la selección de las tipografías, letras de formas básicas, pensando NO solo en la legibilidad si no en reforzar conceptos.

Dar formato al texto puede llamar la atención. Para guiar al lector a los puntos más importantes del texto puedes utilizar negrita, mayúsculas, cursiva, color, y texto subrayado. Pero con prudencia, si te excedes dificultará la lectura.

Lo primero que leen los usuarios en una página son los titulares. Asegúrate que no bloqueen otros temas de la página y que estos se destaquen lo suficiente para incitar al lector a seguir buscando.

Utiliza viñetas y texto resaltado a lo largo de la página de manera que incites a los lectores a leer más.

El texto atrae la atención antes que los gráficos. Contrariamente a lo que podría imaginarse, lo primero que un usuario visita en un sitio web no son las imágenes.

La mayoría de los usuarios que llegan a tu web lo hacen buscando información, y no imágenes, así que asegúrese de que tu sitio web este diseñado para que las partes más importantes de tu texto sean lo más destacado.

Es muy importante una navegación fácil para que la gente compruebe todas las tareas, poner los documentos de forma que sean fáciles de encontrar y atractivos visualmente.

Las fuentes ornamentales o caligráficas no deben emplearse más allá de unas pocas líneas, puesto que serían causa inmediata de fatiga visual.

Ahora los nuevos navegadores y las nuevas reglas CSS permiten introducir una fuente en una página web, de forma que podemos utilizar cualquier fuente que queramos.

Aplicación web creada por Coexia:

Tipografía incrustada en la web:
Los formatos necesarios (TTF (o OTF), EOT y SVG y WOFF)

http://www.coexia.com/google-lanza-font-api-y-font-directory/

La solución que Google nos presenta para poder visualizar sus fuentes en web es otra buena opción. Son gratuitas y variadas. No es necesario tener la fuente alojada en nuestro servidor. Tan sólo necesitamos crear un enlace a la web Google Font API especificando las fuentes que deseamos usar y aplicarla mediante reglas CSS.

Web creada por Coexia:

Droid Sans Mono: http://www.pintarparking.com/

Algunas tipos de Google:

ejemplo tipografía google para web

Color de los textos

El color, aplicado discretamente a algunas partes del texto, puede mejorar mucho su legibilidad, darle un mayor peso visual e incluso crear la impresión de mayor variedad de fuentes. Un ligero toque de color en los subtítulos, o remarcando una cita, es un recurso muy útil y elegante, pero hacer un collage de colores en una página de texto que pretende ser serio o informativo pone en evidencia un mal gusto y un escaso sentido común.

Cuando tenemos que buscar un color para asociar a un tipo, lo primero que debemos examinar son los objetivos del trabajo que tenemos que realizar y el público al que va dirigido. No es lo mismo hacer un diseño para una web de helados que para una web de un banco. Son totalmente diferentes y están destinados a públicos con preferencias y necesidades distintas.

Uno de los factores importantes de los textos, que influye sobremanera en la legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se situan. Un contraste adecuado hace que los textos se lean bien y que su lectura no canse al lector, condición muy importante en contenido textual. Si el tipo se disminuye en tamaño, debe incrementarse la fuerza de contraste de color.

Retoque selección de Fotos

Coherencia y calidad en la imagen.

· Las imágenes grandes reciben más atención. Si vas a usar imágenes en tu página, cuanto más grandes mejor. La gente está más interesada en una imagen donde se pueden ver claramente los detalles y la información. Sólo asegúrate de que toda imagen que utilices sea particularmente pertinente a tu texto, de lo contrario es muy probable que sea ignorada.

· Imágenes sencillas y limpias atraen más la atención. Si bien pueden funcionar con tu diseño, las imágenes artísticas no van a obtener mucha atención del lector. Si estás usando fotos con gente, asegurese de que son claras. Cabe señalar también que las fotos con “verdadera” gente y no con modelos, dan mejor resultado.

La gente es naturalmente atraída a mirar las caras, son un gran atractivo para los ojos. Las imágenes de personas son las primeras cosas que mira la gente en general, en particular sus rostros.

Web creada por Coexia:

http://www.upf.edu/studyabroad/

Si quieres saber un poco más sobre las caracteristicas de las fotos tenemos una entrada, En Nuestro diario web http://www.coexia.com/que-ha-de-tener-una-imagen-para-web/

Diseño y enfoque de la Iconografía

Iconos en el diseño web.

Los iconos son uno de los elementos gráficos más usados en el diseño de paginas webs, el principal objetivo de un icono es dar una información visual concreta de forma rapida y entendible para todos.

Aunque a simple vista no lo parezca la eleccion y el diseño de un icono es un proceso de tiempo, No en el desarrollo si no en el concepto que tiene que expresar una figura sencilla.

En el diseño de paginas web encontramos iconos ya estandarizados para representar determinada información, como por ejemplo:
el sobre para envio de e-mails, la lupa para buscar, la casita para la home, o la cesta y el carrito para la compra…etc. Aunque mantengamos su estructura base podemos realizar cambios para adaptarlos a nuestro diseño de web.

Los iconos como elementos gráficos en las páginas web, sirven para identificar secciones, situar puntos visuales interactivos, ampliar la información de enlaces textuales, etc.

Lo más importante que se debe tener en cuenta al usar iconos es manter una unidad en todo el diseño de la web, es decir manter el mismo estilo y color (pudiendo hacer variaciones en zonas que indiquen una acción diferente o que la información se tenga que destacar más que las demás).


http://www.woothemes.com/freebies/

Introducir componentes dinámicos como vídeos y animaciones

El entorno “multimedia” ha introducido un nuevo lenguaje, donde todo es cada vez más visual… los mensaje son reforzados y mezclados con Imágenes, iconos, colores y formas. Todo esto pensando en transmitir, motivar y despertar el interés a hacer click.

También debemos mencionar otros elementos que aportan valores estilísticos, de diseño y de interactividad el vídeo y la animación, o los espacios 3D.

En particular permiten la combinación de los estímulos visuales en acción e incluso los estímulos audibles.

Ahora con la aparición del HTML5, CSS3, JavaScript. tenemos más recurso de efectos que antes solo eran posibles con flash, como por ejemplo el over en los botones, pase de imágenes para banners, o destacar alertas en zonas q nos interesa como puede ser con el recurso de capas.

Web creada por Coexia:
http://www.videoclick.co/

Los usuarios web pasan mucho tiempo mirando los botones y menús.

Debido a esto, tendremos que dedicar algo de tiempo extra para asegurarnos que están bien diseñados. Después de todo, estos no sólo llaman mucho la atención, sino que son uno de los elementos más importantes de la página.

Slide image:

Web en flash:

http://ristorantegiorgio.com/
WordPress:

http://www.domopool.com/

Elegir la mejor opción según el avance de la tecnología, navegadores…

Hasta hace poco si queriamos curvas en nuestros diseños web, tenian que ser solo imágenes, ahora con CSS3 podemos usar curvas sin que sean imágenes:

Webs creadas por Coexia:

Con imagen:

http://www.indcresa.com/

con CSS3 en esta web hemos podido usar degradados, sombras, curvas y capas sin necesidad de usar imágenes.

http://www.picnegre.com/

efectos en textos como sombra (text-shadow)

http://www.coexia.com/ejemplos/index_3_css3.html

http://www.css3.info/preview/text-shadow/

http://www.coexia.com/el-nuevo-internet-explorer-9/

http://www.css3.info/preview/rounded-border/

http://www.coexia.com/ejemplos/index_2_canvas.htm

http://www.craftymind.com/factory/html5video/CanvasVideo.html