Entradas con la etiqueta ‘diseño web’

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.
 

Optimizacion de contenidos y usabilidad web

Martes, 16 de Febrero de 2010

La forma en que se presenta el material es de gran importancia a la hora de lograr que un texto transmita un mensaje definido. Es decir, más que las palabras o el texto en sí, la optimizacion del contenido también pasa por lograr la mejor usabilidad web. Y este factor está directamente relacionado con la forma en que la información se presenta y el diseño seleccionado para tal fin.

 

Nielsen, un estudioso que presentó múltiples trabajos relacionados con estos temas, y se interesó por la manera en que las personas “aprehenden” la información, es decir se apropian de ella, la elaboran y la sintetizan, realizó un estudio sorprendente. El mismo se trató de ofrecer la misma información con diferentes formatos a varios grupos de usuarios, y ver qué eran capaces de retener de los textos, al intentar responder un cuestionario, donde debían dar cuenta de la información leída.

 

Nielsen concluyó, sin lugar a dudas, que la experiencia del usuario, es decir, la usabilidad web, afecta directamente la capacidad de rememoración, más allá de la mayor o menor facilidad individual que cada usuario pueda tener en cuanto a su propia capacidad mnémica. Así, la forma en que los textos deben estar estructurados para la web debe estar determinado por motivos funcionales, más que por elecciones estéticas o de diseño.

 

Las aplicaciones más comunes para gestion de contenidos disponen de amplias herramientas y funciones que posibilitan una estructuración adecuada de los textos, lo cual influirá directamente en su nivel de aceptación por parte de los usuarios, y su grado de satisfacción con los mismos. Si buscamos crear textos que sean fácilmente propagables a través de las distintas redes sociales, entonces deberemos prestar especial atención a estos temas.

 

Nielsen descubrió que la redacción promocional es la que presenta resultados más pobres en cuanto a usabilidad web por parte de los usuarios. Es decir, quienes creen que la manera promocional es la mejor para redactar textos, están equivocados. Por otra parte, una forma combinada de texto escaneable y conciso, y lenguaje objetivo, es la mejor para facilitar la fácil rememoración por parte de los usuarios. Un texto es escaneable, cuando a simple vista, es posible detectar el tema (mediante una correcta decodificación del título) y los subtemas que la componen (marcados por subtítulos o apartados bien demarcados). Las herramientas más usadas para lograr este efecto son los subtítulos, las viñetas y las enumeraciones.

 

Sería una lástima ver que un buen material se pierde porque no se han considerado estos aspectos relacionados con la usabilidad web, o se insiste en hacer coincidir el formato de los artículos con el diseño general del sitio. 

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. 

El diseño web de páginas textuales

Martes, 26 de Enero de 2010

Uno de los elementos de nuestras páginas que más contribuyen al posicionamiento en buscadores es el material textual. Esto es así, debido a los nuevos lineamientos semánticos que los buscadores siguen. En definitiva, y para decirlo más sencillamente, el texto incluido es uno de los factores que más ayudarán a lograr un buen posicionamiento en buscadores, con las palabras claves que hayamos elegido, es decir, en búsquedas semánticamente relevantes para nuestra web.

 

Una de las herramientas más útiles para ayudarnos a diseñar correctamente las páginas textuales (noticias, artículos, blogs) son los estudios sobre usabilidad web y Eye tracking. Este tipo de estudios, llevados a cabo por empresas privadas, se basan en el registro de sesiones con muchos usuarios, que se dedican a leer sitios web, provistos de unas gafas especiales que registran los “hot spots”, o puntos de mayor fijación de la mirada. También al analizar los datos, es posible extraer “áreas de interés”, ilustradas a través de gráficos de color que se aplican sobre el mismo sitio, y permiten identificar las áreas de mayor fijación visual.

 

Queda claro que estos datos ayudan enormemente a la concreción de páginas web mucho más efectivas desde un punto de vista fisiológico y conductual, ya que las mismas se realizan siguiendo los patrones normales de lectura de los usuarios. Una pregunta que estas herramientas ayudan a responder es qué leen realmente los usuarios cuando están frente a un texto online. Jakob Nielsen, un estudioso de estos temas concluyó que un usuario con un alto nivel de educación puede leer 250 palabras por minuto, mientras que los de menores niveles educativos llegan a las 200 palabras. Estos datos son importantes porque si calculamos que lo máximo que un usuario puede llegar a permanecer en una misma página no pasa de los 3-4 minutos, queda claro que los textos de más de 1000 palabras son altamente desaconsejados, pues están por fuera del umbral fisiológico del ser humano.

 

Un claro ejemplo de diseño web Madrid que respeta estas consignas y ha logrado el diseño exitoso de páginas con alto contenido de texto es El País en su versión online. Al examinar el lay out de las páginas con artículos, notamos que las notas más largas no superan las 800 palabras. El diseño es muy sencillo, sin gráficos que distraigan la vista del texto, las imágenes (de gran tamaño) están colocadas en los laterales, y la fuente es lo suficientemente grande como para no tener que forzar la demasiado la vista.

Tips para elegir la tipografía adecuada para nuestros textos

Jueves, 10 de Diciembre de 2009

Uno de los componentes más importantes y relevantes a la hora de llevar a cabo una redacción web poderosa, efectiva y sin fisuras es la tipografía elegida. Cuando tenemos material original, interesante y que puede atraer potencialmente gran cantidad de lectores, es una lástima que la presentación del mismo se vea deslucida por elecciones desafortunadas en cuanto a tipografía y presentación. He aquí algunos datos que podrán ayudarnos a elegir la mejor manera de presentar nuestros posteos.

 

Poco espacio entre las palabras. Depende qué interfaz usemos para subir los posteos, en algunos casos tenemos la posibilidad de cambiar el espacio entre las palabras. Tiene mucho que ver la fuente a ser usada en nuestra redacción web, ya que con algunos tipos de letra se ven naturalmente más “juntas” que otras. Si nuestro editor nos lo permite, es bueno separar la distancia entre las palabras, para favorecer la lectura. En el Word, es posible modificar el espacio entre caracteres, así que podemos apelar a esta herramienta.

 

Usar tipografía San Serif para posteos muy largos. Serif es esa pequeña colita que tienen las letras, en la línea de base, como en la línea superior, como por ejemplo Times New Roman. En cambio una tipografía Sans Serif es Arial. Siempre conviene usar tipografías con serif para textos largos, y tipografía sans serif para títulos y textos destacados. La tipografía serif favorece la lectura y reduce la fatiga visual.

 

Marginar mal. Cuando nos abocamos a la redacción web nos sentimos más tentados a no respetar las mismas consignas que naturalmente seguiríamos como cuando componemos un texto que va por escrito, como una carta. Como a nadie se le ocurriría escribir una carta con largos párrafos centralizados, tampoco debemos aplicar este formato a la redacción web. Siempre es conveniente que los textos estén marginados sobre la izquierda, y libres sobre la derecha, es decir, que la línea de comienzo sea fija, con un borde irregular del párrafo sobre la derecha.

 

Líneas muy largas. Es conveniente tratar de diseñar nuestros sitios web, o modificar nuestras CSS para que no queden los textos con líneas muy largas. Para eso, podemos apelar a barras laterales, para limitar la longitud de línea, o, formatear el texto en dos columnas. La líneas demasiado largas exigen un esfuerzo extra por parte del lector, y eso es desaconsejable.

 

Siguiendo estas simples consignas, veremos cómo es posible darle mayor legibilidad y claridad a nuestros posteos, un hecho que sin duda los hará más accesibles para nuestros lectores. 

Para qué sirve la redacción SEO

Jueves, 3 de Diciembre de 2009

 

Como ya lo hemos mencionado, la necesidad de contenido de calidad se impone a la hora de tratar de posicionar nuestros sitios web. Pero no cualquier contenido es apto para ser presentado en la internet. Para lograr que los textos logren transmitir su mensaje deben tener una redacción web, acorde al soporte. Las razones son varias, pero fundamentalmente son de orden fisiológico. Es un hecho que la capacidad de lectura y decodificación de la palabra escrita no es igual cuando es soporte es gráfico que cuando lo vemos en la pantalla de la computadora.

 

Es sabido que la manera en que los seres humanos recorren el texto escrito no es lineal, sino que de un golpe de vista decodifican las palabras más importantes del texto. Las palabras menos relevantes (conectores, nexos coordinantes) son prácticamente ignoradas. En definitiva, la manera en que nos aproximamos al texto escrito es guestáltica, el todo importa más que las partes. Para comprender este concepto, le propongo un pequeño ejercicio. Abra un documento de Word, deshabilite el corrector automático de faltas de ortografía e intente escribir un texto más o menos largo. Seguramente el nivel de errores de tipeo y faltas de ortografía será enorme. No obstante, se podría extraer el significado de lo que escribió sin problemas, haciendo una lectura general del texto, a pesar de los errores que contiene, los cuales pasarán desapercibidos en la mayoría de los casos.

 

Por eso, la redacción web se apoya grandemente en el contenido visual, más que en las palabras, para transmitir el mensaje. Por eso, en la redacción web, los elementos no lingüísticos cobran una relevancia suprema. Así, tamaño de fuente, colores, diagramación, titulado, y espacios en blanco pasan a tener gran peso a la hora de producir textos para la web.

 

En consecuencia, cuando nos embarcamos en la producción de textos de redacción web, es casi más importante el cómo que el qué. Una de las limitaciones más importantes que nos plantea la pantalla es la extensión de los textos. La redacción web nos obliga a textos más cortos. Si pretendemos que el lector llegue al final del texto, no deberemos sobrepasar en un solo bloque de texto, las 600 palabras como mucho. Si surge la necesidad de incluir más material, deberemos hacer dos posteos, o dos capítulos, o dos pantallas. A los usuarios de internet no les gusta leer. Pero si lo hacen, no les gusta hacer scroll. Por eso, lo ideal es que los textos destinados a la redacción web entren en una sola pantalla. 

Claves para un diseño web más efectivo

Martes, 17 de Noviembre de 2009

Uno de los temas más importantes, aún más que el propio motivo que lleva a la creación de un sitio, es el diseño web mismo de la página. Por más que usted tenga la idea más genial en cuanto a la creación de un sitio web del siglo XXI, si no logra expresarlo de manera profesional y efectiva, el proyecto morirá antes de germinar.

 

He aquí algunos consejos tendientes a lograr un diseño web poderoso, pero simple y efectivo.

 

1.       Simplicidad

Un ejemplo paradigmático de esto es Twitter. Una idea poderosa, con una interfaz bien sencilla. Haga las cosas simples para usted mismo y para sus usuarios. Como premisa fundamental, entonces, es tener bien en claro qué se busca lograr que haga el sitio. Ejemplos: recabar información de los usuarios, vender un producto, promocionar una empresa, ofrecer contenido de calidad, prestar un servicio de atención al cliente, informar, servir como plataforma de una comunidad específica, etc. Los ejemplos podrían multiplicarse hasta el infinito. Sentido común: si mi idea es promocionar un producto, no es necesario incluir una página para que el usuario se loguee con infinitos campos de rellenado obligatorio y Captcha.

 

2.       Orden

Esto se debe aplicar tanto al diseño de cada página en particular como al esquema general del sitio. En cuanto a cada página, use CSS. No sólo reduce los tiempos de carga sino que le da al sitio un look más prolijo y profesional. En cuanto a la estructura en si del sitio, trata de pensarla como una casa con varias puertas de entrada. No diseñe su sitio como para que sólo se pueda entrar en él por la home. Trabaje con el concepto de landing page.

 

3.       Algunas verdades

A ningún usuario le gusta esperar. Este es el camino más directo fuera del sitio (hacia el de sus competidores).

A ningún usuario le gusta hacer scroll down. Trate de presentar todo en una sola pantalla. Evite los textos o posteos kilométricos.

La gente es vaga, por naturaleza, y esto dicho con todo respeto. Evite los parlamentos muy largos, porque serán pocos los visitantes que lleguen hasta el punto final.

 

Con estos preceptos en mente, es posible lograr un diseño web simple, moderno y efectivo. 

Cómo mejorar el posicionamiento web sin grandes esfuerzos

Domingo, 15 de Noviembre de 2009

 

Ya dicen que pequeñas cosas hacen grandes diferencias. También sucede así con el posicionamiento web. Existen pequeños cambios que se pueden implementar en los sitios que definitivamente contribuyen a mejorar el posicionamiento en buscadores. Su implementación es muy sencilla y pueden ayudar grandemente a mejorar sensiblemente en el listado de los resultados naturales.

 

Titula las páginas. Es increíble la cantidad de sitios que aún hoy conservan sus páginas sin título, o con un título inadecuado. Lo mejor es incluir al menos alguna de las keywords en el mismo. Evita titular todas las secciones con el mismo título.

 

Incluye texto en la sección H1. El mismo es muy valorado por los crawlers. Muchos diseñadores directamente saltean esta parte de la estructura de la página, ya sea porque no tienen el hábito de darle importancia, o porque usan templates que no las presentan. No desperdiciar esta sección, en incluir texto relevante en la misma.

 

Negrita e itálica tienen mayor relevancia, no sólo para el lector, sino para los crawlers. Acostumbrarse a incluirlo en el diseño de las secciones con texto.

 

Usar solamente enlaces SRC y HREF. Incluye asimismo un mapa del sitio.

 

Prestar especial atención a los archivos bots.txt, las tags de no-follow y do-follow.

 

Compensar las secciones con demasiados scrips, como botoneras de java o plug ins de flash con suficiente texto. Recordar que el texto es el alimento favorito de los bots.

 

Recordar incluir texto descriptivo en los enlaces (ese pequeño cartelito amarillo que aparece cuando pasamos el ratón sobre el link).

Evitar nombres sin contenido para las imágenes, es decir en vez de sjsjdg124.jpg, poner algo bien referencial al contenido de la imagen (por ejemplo alcatelOT710.jpeg).

 

Densidad de keywords. Ni mucho ni poco. Más de 9% puede ser penalizado, lo ideal es que ronde alrededor del 2%, especialmente en la landing pages.

 

Incluir <description>, <keywords> y  <title>.

 

Con estos pequeños cambios, que a lo sumo puede llevar un par de horas su realización, veremos como el posicionamiento web mejorará sensiblemente. 

PPT

Miércoles, 11 de Noviembre de 2009

Posicionamiento Web

 

Al momento de realizar las acciones tendientes a lograr un mejor posicionamiento web, son muchas voces las que se alzan con consejos, o ideas que teóricamente podrían ayudar a que un sitio mejore en su pagerank y por consiguiente en su posición natural en buscadores..

Luego de hacer algo de research en internet, es bastante simple armarse con una lista de tareas que pueden ser realizadas a fin de conseguir lo que estamos buscando. Pero ¿por dón de comenzar? He aquí un plan infalible para lograr mejor posicionamiento web. Lo hemos denominado PPT:

  •  P: Planificación

Las tareas a realizar son muchas. Pero como con todo, sin un plan definido de acción no se podría ni siquiera comenzar. Para ayudarnos podemos dividir la lista de “to do’s” en dos grandes áreas: intrasitio y extrasitio.

Los factores intrasitio son los que deben ser atendidos primero. Se trata de optimizar el sitio, con todo lo que esta palabra significa.

A grandes rasgos, los puntos fundamentales de esta etapa son:

o   Aspectos estéticos y comunicacionales. ¿Necesita el sitio algún cambio de diseño, ya sea para mejorar la premisa del call to action o para promocionar determinados productos o servicios que antes no estaban? ¿Tiene el sitio un look and feel poco profesional? ¿Se respetan los colores institucionales? ¿Se registra una armonía visual? ¿Tiene claridad el mensaje que intentamos transmitir?

o   Desarrollo de contenido relevante

o   Optimización del código: Keywords, tags en general, tags de imágenes.

o   Validación del código, y, por supuesto, verificación de la inexistencia de enlaces rotos

 

Factores extrasitio: Básicamente esta etapa se puede dividir en dos grandes áreas.

o   Conseguir enlaces externos (Social Media, viralización de contenidos, participación en directorios, etc)

o   Campañas de SEM propiamente dichas (Adwords y Adsense, fundamentalmente)

.

  •  P: Paciencia. Simplemente se trata de eso. Las mejoras en el posicionamiento web no son instantáneas. Es cierto que hay casos donde en pocos meses se puede registrar una mejora, pero para llegar a los primeros sitios, lleva tiempo. No olvidar que la antigüedad del sitio es uno de los factores más relevantes que conforman el índice de Pagerank, junto con los incoming links.
  •  T: Trabajo duro. Como lograr buenos abdominales, todos los días es necesario dedicarse a escalar posiciones en los buscadores. Un sitio al que no se lo trabaja es como un negocio sin publicidad ni carteles en la acera. No es sabio sentarse a esperar que entren los clientes.