Entradas con la etiqueta ‘diseño web madrid’

F: El patrón de comportamiento visual

Jueves, 11 de Marzo de 2010

 

En la imagen superior se puede observar un mapa de colores denominado heat-map que es un procedimiento utilizado en los estudios de Eyetrack para analizar las zonas de la pantalla que más observan los usuarios de Internet. Con el color rojo se señalan las zonas en donde se centra más la mirada, y con el azul los lugares que dejan de lado los usuarios.

 

Por lo tanto a la hora de diseñar nuestro sitio Web es importante tener en cuenta el patrón de lectura que tienen los usuarios en el momento de leer el monitor.

 

Según el estudio de EyeTrack realizado en 2006 existe una zona con forma de F que es la que más se observa en la pantalla. Con este comportamiento el usuario primero realiza una lectura horizontal completa en la parte superior, después una realiza una mirada también horizontal, pero más pequeña en la parte media y después la vista se dirige hacia una posición vertical descendente.

 

Este patrón puede cambiar, y la F puede adquirir forma de E o de L invertida. En estos casos se hacen 3 lecturas horizontales o una lectura horizontal, seguida de una vertical.

 

Ya, con anterioridad a este estudio, se sabía que el ojo de los usuarios se detenía en primera instancia en la parte superior e izquierda de la página o que la vista se dirigía hacia el titular principal.

 

Generalmente los titulares captan la atención de los lectores menos de 1 segundo, y si las primeras palabras no los enganchan el tiempo es aún menor.

Otros métodos que utilizan los usuarios en el momento de mirar una pantalla son:

  • Exploración: para buscar información en general
  • Localización: este método tiene una meta específica, por lo tanto la atención de los usuarios es mayor.
  • Recolección: de diferentes extractos o sectores dentro de un mismo texto.

 

Según los estudios de la empresa Xerox PARC, los principales comportamientos de los usuarios son ´comparar y escoger´ (en este caso evalúan muchas páginas para ver cual le resulta más convincente y apropiada a sus fines) ´adquirir´ (esto significa que han localizado o encontrado lo que estaban buscando) y por último ´entender´ (que quiere decir que comprendieron lo que la página les ofrecía).

 

Es importante recordar y conocer la manera en la que los usuarios de Internet se comportan frente a un monitor ya que deberá ser un punto clave en el momento de planificar el diseño Web Madrid de su página.

Las 6 fases del diseño Web

Jueves, 4 de Marzo de 2010

 

 

 

 

No existen recetas o fórmulas mágicas para realizar una buena página Web, sin embargo los mejores diseñadores Web recomiendan tener en cuenta 6 fases durante el armado de una página:

 

 

1. DETERMINAR OBJETIVOS E IDEA DEL SITIO: este paso es fundamental ya que se debe precisar y tener bien en claro las metas que se quieren alcanzar con la página, y el público o destinatarios a los cuales se apunta.

 

2. PLANIFICAR EL ÁRBOL DE LA NAVEGACIÓN: para ello los especialistas en diseño Web Madrid aconsejan establecer en una hoja de papel la estructura general del sitio. Esto incluye determinar el número de páginas, los enlaces, los contenidos, etc. Además deben asignarse un nombre para cada página, asi como todos los archivos que estén incluidos en la misma. Esta rotulación y asignación de lugares y contenidos ayudará a aportar innovaciones o servirá para enmendar errores o realizar modificaciones.  Generalmente los buenos diseñadores además asignarle  un nombre a cada página, las numeran para que el trabajo sea más fácil.

 

3. REALIZAR LA PÁGINA: es la concreción de los pasos anteriores. Si se utiliza html lo primero que se diseña son los gráficos., después deben recortase las imágenes y escribir el código html (estas tareas se pueden realizar con la ayuda de los programas específicos). En esta fase es necesario, hacer los enlaces entre las diferentes páginas, entre imágenes, o todo tipo de material que esté incluido en ella. El consejo más común para simplificar las tareas es guardar todo lo que se vaya a utilizar en la página dentro de una carpeta y nombrar a la home page  como index.html.

 

4. REVISIÓN: hay que tener en cuenta lo siguiente:

  • Que la velocidad de carga de la página sea rápida: lo ideal es que el peso sea igual o inferior a 50k
  • Que el código de la página sea compatible con navegadores distintos: principalmente con los más utilizados como lo son Internet Explorer, Netscape, Safari, Firefox y Opera.
  • Que los enlaces funcionen correctamente y que el contenido sea el indicado: en este caso la recomendacion es que una persona ajena abra la página en otro ordenador.
  • Que los videos puedan ser visualizados correctamente: Con respecto a la resolución la más utilizada es 1024×768

 

5. ELECCIÓN DEL DOMINIO: debe ser fácil de entender, atractivo, que se adapte al proyecto y que el impacto a nivel marketing sea positivo.

 

6. PUBLICACIÓN: Es la fase final en donde se transfiere la página al servidor remoto por medio del protocolo ftp.

La teoría del color aplicada al diseño web

Viernes, 26 de Febrero de 2010

 

 

 

 

Existe toda una teoría acerca de las sensaciones y emociones que transmiten los colores. Por eso es necesario tener en cuenta determinadas cuestiones a la hora de pensar en el diseño Web de nuestro sitio.

 

Quizás en alguna oportunidad se hayan cuestionado por qué la mayor parte de los sitios Web utilizan en su fondo colores claros. La respuesta es simple: los colores claros son más legibles, y en consecuencia provocan un menor esfuerzo visual por parte de los lectores. Pero además estos tonos, como el blanco, provocan un efecto de expansión a diferencia de los oscuros que comprimen las figuras.

 

Por otro lado los especialistas en diseño Web recomiendan utilizar colores que formen parte de una misma gama para dar armonía al sitio.  Sin embargo si se desea destacar algún sector especial se debe recurrir a colores contrastantes, como por ejemplo los efectos que causa la combinación de los claros con los oscuros, o los fríos con los cálidos.

 

Pero lo más interesante en la teoría de los colores es el significado que se le atribuyen a cada uno. Aquí una pequeña guía para su uso en el diseño web Madrid:

 

•    Blanco: es el color universal utilizado en la gráfica. Está dentro de la gama de los grises y representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia los colores que lo acompañan.

 

•    Negro: se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el silencio, y el misterio. Es un color que sirve para otorgar elegancia y distinción.

 

•    Gris: Representa la indecisión y la duda. Dan la sensación de frialdad metálica, sin embargo por su asociación con los metales preciosos también puede dar sensación de brillo, lujo y estilo.

 

•    Amarillo: es un color luminoso, cálido y expansivo. Es de los más energéticos por lo tanto se desaconseja utilizarlo como fondo de un sitio, ya que esto provocaría fatiga visual.

 

•    Naranja: al igual que el amarillo posee gran fuerza expansiva, aunque es más acogedor y estimulante. Posee una gran fuerza energética.

 

•    Rojo: este color simboliza la vitalidad, se asocia con el color de la sangre, de la vida, del fuego. Sugiere sensualidad y el erotismo, aunque su uso excesivo puede resultar agresivo.

 

•    Azul: expresa armonía, sosiego, se relaciona con el mar, el aire y el cielo. Genera un efecto de calma.

 

•    Verde: es el color más relajante. Simboliza la naturaleza y la vegetación.

 

•    Marrón: es un color agradable, ya que recuerda al ambiente de los otoños y la madera. Es un color realista que da la sensación de equilibrio.
 

Hacia un diseño más intuitivo

Lunes, 8 de Febrero de 2010

 

Realizar una mirada un poco más analítica a los sitios que tienen éxito nos dará una idea de cuáles son los factores que contribuyen a un mejor posicionamiento web, y, fundamentalmente a lograr un tráfico masivo.

 

La lista la encabeza, obviamente, Google. Es sabido que el sitio tiene como política directriz de todas sus acciones trabajar intensivamente en la usabilidad web. Manteniéndose siempre en el mismo estilo de home, cuyos derechos de autor Google se encargó de registrar, la última actualización realmente notoria data de hace algunas semanas, cuando el portal decidió ocultar la barra de vínculos superior –“La Web, Imágenes, Videos, Noticias”, etc..- que conducen a las diferentes secciones para hacer más “espacioso” el diseño. En consecuencia, al abrir el buscador, sólo se ve la barra de búsqueda –cuya capacidad también fue ampliada al aumentar el número de caracteres el último mes de Septiembre- y los dos botones clásicos. Como ellos mismos lo definen en su blog, se trata de un diseño web bastante minimalista. Pero parece que les ha rendido muy buenos frutos.

 

Facebook es el segundo sitio con más visitas del mundo. El portal también busca un diseño web más intuitivo. De  hecho, es moneda corriente abrir el sitio y encontrarse con mensajes como “Tu nueva página de inicio simplificada”. El último cambio en este sentido consiste en un aviso más visible de los mensajes en la bandeja de entrada y un acceso más rápido a ellos. También han modificado la ruta hacia las configuraciones de seguridad –talón de Aquiles de Facebook-, para poder entrar a esta sección con mayor facilidad.

 

Visualmente la home de los usuarios de Facebook puede dividirse en tres columnas. En la izquierda, la de información y links a las secciones más importantes –Información, Amigos, Fotos, etc. En el centro, el muro, con los mensajes propios y de los contactos, y en la izquierda la columna de publicidad. La accesibilidad a las distintas secciones está garantizada por la multiplicidad de links y pestañas que permiten recorrer el sitio rápidamente. El tiempo de carga se optimiza constantemente, otra de las debilidades del portal.

 

Estos son solo dos ejemplos, pero sirven para mostrar que el diseño web Madrid, New York o en cualquier lugar del mundo tiene un denominador común en los sitios de más tráfico: máxima usabilidad web y navegabilidad intuitiva. Los sitios excesivamente cargados, de links o imágenes, tardan más en cargar, y este es uno de los factores que atentan contra el tráfico, y elevan el bounce rate, es decir la tasa de rebotes.