Con los patrones de diseño se buscan crear estándares que de algún modo dicten las formas adecuadas de mostrar el contenido de un sitio web. Sin embargo no debemos pensar en ellos como reglas o imposiciones sobre la creatividad y alternancia que se puede presentar en un sitio, simplemente son sugerencias para el desarrollo las cuales nos indican qué partes son de mayor interés para la vista de los usuarios.

Son muchos los patrones de diseño que se han planteado a lo largo del tiempo, tenemos que especificar que esto viene de mucho tiempo antes a la creación de las páginas web. Con la imprenta y la creación de los primeros textos mediante este método, se empezaron a utilizar estructuras, las cuales con el tiempo demostraron que hay ciertas áreas donde la gente suele explorar o fijar más la vista.

En la actualidad aún seguimos utilizando esta clase de patrones de diseño web, la diferencia radica en que ahora con las páginas web tenemos más control sobre los tamaños y formas de presentación, por lo que se puede optar por un patrón no tan tradicional.

Diagrama de Gutenberg en diseño web

Este es quizás el patrón de diseño más utilizado en la historia, ya que la estructura que propone se puede ver representada tanto en escritos, carteles, publicidad e inclusive en la televisión. Lo que nos define este diagrama, en principio, es una estructura basada en el movimiento que sigue el ojo humano por inercia, este movimiento hace que se termine presentando más atención a ciertas partes del objeto desplegado, por lo que dichas partes toman más relevancia en el diseño.

Si nos decidimos en utilizar este patrón, entonces a la hora de realizar un diseño web debemos de tener muy en cuenta las siguientes indicaciones para distribuir ordenadamente todos los elementos:

• Nuestra área de exposición estará dividida en cuatro partes.
• Cada cuadrante representa una zona óptica.
• La más importante de ellas es la ubicada en la parte superior izquierda y recibe el nombre de zona primaria.
• La siguiente en la estructura es la zona de barbecho fuerte, que se encuentra ubicada en el extremo superior derecho.
• En la parte inferior izquierda encontramos la zona que presenta menos atención, la zona de barbecho débil.
• Finalmente en la parte inferior derecha se encuentra la zona terminal.

El hecho de utilizar este diagrama para la realización de nuestros diseños, traerá consigo una armonía con la gravedad normal de lectura, permitiendo al usuario seguir una orientación familiar, mejorando de esta manera la comprensión del contenido.

Este resultado se logra gracias a la costumbre, ya que las personas occidentales comúnmente realizan una lectura que va descendiendo por una serie de barridos hasta llegar a la zona terminal.

Para este patrón de diseño las zonas que presentan menor atención son la esquina superior derecha e inferior izquierda, y en caso de querer atraer atención a esas partes es necesario incluir un elemento llamativo que enfatice de alguna manera la zona. Es por esto que el contenido relevante debe seguir la diagonal que va de la esquina superior izquierda a la inferior derecha.

Un uso a este patrón que generalmente se da en los sitios web, es cuando se coloca el logo en la zona principal, el contenido importante se despliega en la zona de en medio y alguna información de contacto o de registro se coloca en la zona terminal.

Es recomendado utilizar este patrón cuando presentamos grandes cantidades de texto, si este no es tu caso y tienes bien definida una jerarquía visual, quizás sea recomendable utilizar otro tipo de patrón.

Patrón Z en diseño web

Como su nombre lo dice, este patrón se encarga de definir el diseño de un sitio en base a la forma de la letra Z. Los usuarios empezarán a percibir la información de la esquina superior izquierda, moviéndose horizontalmente hacia la esquina superior derecha, después de manera diagonal irán hasta la parte inferior izquierda para finalmente terminar con la parte inferior derecha.

Este patrón puede ser considerado como una contraparte al diagrama de Gutenberg, ya que propone un desplace diagonal inverso, y toma en cuenta las dos zonas que el diagrama considera poco relevantes.

Sin embargo, esta contraparte no se ve tan reflejada al momento de determinar las zonas de mayor relevancia, ya que en los dos patrones esta funcionalidad recae en la zona principal y terminal.

El patrón Z es recomendable para páginas con un diseño web simple, con pocos elementos que necesiten de completa atención, pero no por esto queremos dar a entender que sólo debe ser limitado a esta clase de diseños. Este tipo de layout puede ser aplicado a casi cualquier proyecto de diseño web, ya que cumple con las necesidades básicas de cualquier sitio, presentar una marca, tener jerarquía, establecer una estructura y llamar a la interacción.

Existen otros patrones que se derivan de este, tal es el caso del patrón zig zag, que básicamente consiste en un conjunto de patrones Z que se van uniendo a lo largo de la página desplegada para continuar con el mismo seguimiento visual del contenido. Este podría ser considerado el movimiento natural en caso de que el usuario continuará leyendo la información que se encuentra debajo de la primera vista en nuestra página de inicio.

También encontramos al patrón del triángulo rectángulo que básicamente consiste en utilizar el patrón Z dando un movimiento de clausura distinto, en vez de mandar la atención a la zona inferior derecha, regresamos a la zona superior izquierda. De esta forma se forma un triángulo, dentro del cual debe de ir la información más relevante.

La importancia de los dispositivos móviles

Los tiempos en los que internet en el móvil era utilizado sólo para revisar el correo han quedado muy lejos… desde comprar casi cualquier cosa imaginable hasta encontrar negocios cerca de nuestra ubicación, pocas son las cosas que en hoy en día no pueden realizarse en la red desde uno de estos dispositivos.

No obstante y desafortunadamente para usuarios (y para empresas también) los dispositivos móviles no muestran las páginas web de la manera que lo haría un ordenador, llegando incluso a darse diseños web que son totalmente incapaces de ser visualizados ni utilizados en un dispositivo móvil.

Por lo tanto, es muy importante que antes de diseñar una página web se tenga en cuenta el tipo de usuario que va a visitarla y el modo en que éste accede a internet, para decidir así si la versiones móviles de una página web no van a ser una opción a considerar, sino una auténtica necesidad.

De esta manera, diseñadores y desarrolladores tienen que cambiar la forma en la que el diseño web se concibe y el modo en el que a éste se aproximan.

Lo que hoy se puede encontrar

A medida que internet ha ido evolucionando, muchas empresas y diseñadores han desarrollado las malas estrategias de diseño web móvil que hoy en día se puede encontrar. Y esto con suerte, pues son muchos los casos de páginas web que no han sido en absoluto adaptadas, haciendo la experiencia de navegación totalmente desagradable y confusa para los usuarios que acceden a ellas desde sus dispositivos móviles.

Estas estrategias, que han pretendido ser amigables para el usuario móvil, se han basado en adaptar a un formato para móvil todo el contenido que tenían en la versión original de una página web, la versión para ordenador o portátil; dejando de lado lo que realmente es importante: centrarse en mostrar sólo aquello que realmente quiere encontrar el usuario que accede desde su Smartphone

“Pensar en móvil” primero, todo ventajas

Tal y como deja patente Luke Wroblewski en su revolucionario libro sobre la importancia del diseño web para dispositivos móviles, Mobile First, “pensar en móvil” primero es esencial por una sencilla razón: la adaptación web para dispositivos móviles siempre trae problemas, mientras que realizar la versión móvil primero solo puede suponer ventajas.

¿Por qué? Básicamente, porque con sólo 320×480 pixeles en lugar de los 1024×768, los diseños web tienen que se depurados al máximo, hasta quedarse sólo con lo esencial. Diseñadores y empresas deben identificar cuales son las tareas principales que el usuario realizará en la web desde su Smartphone o tableta y deben centrar sus esfuerzos de diseño en ellas.

Realizar este trabajo no sólo será ventajoso para los usuarios, en cuanto a la experiencia de navegación se refiere, sino que también marcará unas bases excelentes para desarrollar una buena versión para ordenador de la página web en cuestión.

Además, “pensar en móvil” en primer lugar ayudará a familiarizarse con la cantidad de oportunidades que el diseño web para móviles supone. Quizás, la más destacable sería la oportunidad de poder diseñar una página que será manipulada con los dedos de los usuarios, gracias a las pantallas táctiles de los dispositivos. Las opciones que este hecho plantea son realmente alucinantes.

Cada dispositivo, una aproximación

“Pensar en móvil” es, en primer lugar, pensar en el usuario como centro del diseño, en su experiencia de navegación satisfactoria; y en segundo lugar, es pensar en diseño web para dispositivos móviles en plural, ya que para cada dispositivo el diseño de una página web deberá ser creado de forma particular, teniendo en cuenta las ventajas e inconvenientes de cada uno de ellos.

Si se diseña una web para smartphones, quizás lo más importante sería recodar que las páginas web creadas con Flash no pueden ser visualizadas en muchos teléfonos móviles, por lo que saber cómo crear una página web en HTML para versiones móviles, será toda una ventaja, ya que es un lenguaje excelente para el diseño web móvil.

Otro de los inconvenientes de los smartphones que se deben tener muy presente a la hora de realizar una web es la velocidad de carga. Las conexiones suelen ser algo lentas, por lo que si una página tarda una eternidad en cargar, los usuarios abandonarán la página e irán a otra optimizada que no les haga perder su tiempo (y la empresa detrás de esa página web pesada estará perdiendo clientes).

Si hablamos de tabletas, a pesar de tener un pantalla mayor que la de los smartphones -lo que posibilita una navegación más satisfactoria a priori-, debe intentar llevarse a cabo un diseño web lo más simple y preciso posible, que se centre en desatar todo el potencial y todas las ventajas de las pantallas táctiles de este tipo de dispositivo.

Es el momento de “pensar en móvil”

Para terminar, y según lo visto en el artículo, comentar que empresas y diseñadores web deben considerar la relevancia para sus negocios de tener una versión adecuada de su página web para dispositivos móviles; y si aun no tienen página web, deberían considerar plantearse la versión móvil de la misma en primer lugar; deberían “pensar en móvil” como primer paso para diseñar sus distintas versiones web.

La lealtad de estos dos grupos se puede convertir en un factor fundamental para que nuestro sitio repunte, debemos tener en claro que nuestros principales clientes generalmente se encontrarán en alguno de estas edades y por ello debemos prestar especial atención en ofrecerles una buena experiencia.

Diseño web para adultos

El grupo de los adultos esta compuesto por personas que han experimentado la web desde sus inicios, han estado en cada paso de la evolución del Internet por lo que son un muy buen grupo para probar funcionalidades nuevas y diseños prototipos. Es a este sector a los que les ha tocado disfrutar o incluso sufrir en algunas ocasiones con los cambios en los patrones de diseño.

Muchos diseñadores toman mucho más en cuenta a este grupo a la hora de realizar sus pruebas de usabilidad, ya que sienten que evaluarán mejor su trabajo y representan más las necesidades que buscan cubrir. Si bien esto no es ninguna mentira, puede resultar un problema, ya que olvidamos al resto de los grupos y nos enfocamos únicamente en el presente, olvidándonos de que los jóvenes de la actualidad serán nuestros clientes principales en el futuro.

El hecho de que esta generación este marcada por el crecimiento en paralelo con el Internet, no garantiza que todos los adultos estén perfectamente educados en esta materia. Aunque la mayoría tiene experiencia con la computadora, sólo aquellos que estuvieron interesados en la tecnología a temprana edad, dominan en cierta medida el tema del Internet.

Para este grupo la accesibilidad sigue siendo un factor relevante, aunque la mayoría de los usuarios en esta etapa ya no son tan dependientes de instrucciones, tienen poca dificultad para tomar decisiones y tienen bien en claro cuales son sus necesidades. Los adultos cuentan con objetivos concretos, por lo que tienden a visitar los sitios web en busca de soluciones específicas, también se caracterizan por la costumbre y fidelidad, siendo más dados a irse a sitios de confianza, antes que experimentar con un sitio nuevo.

La adaptación de un sitio web para adultos suele ser muy sencilla, ya que basta con que sea accesible y utilizable por las normas modernas, para que sea útil para este grupo de usuarios. A diferencia de los usuarios más jóvenes, los adultos son mucho menos atraídos por la animación y el sonido, y a diferencia de los usuarios mayores, se concentran más en obtener respuestas lo más rápido posible.

Diseño web para ancianos (la tercera edad)

Las personas de edad avanzada son las que menos atención reciben al momento de diseñar un sitio web, muchos estudios se realizan para poder identificar como influir y agradar a los otros grupos, incluso existen algunos que se especializan en enseñarnos como hacer sitios para que los niños aprendan a utilizar la computadora, pero nunca se hace hincapié en atender a las personas de la tercera edad. Esto nos hace olvidar que existe un gran número de personas en este grupo de edad que tampoco sabe usar la computadora y representan un buen mercado potencial.

Las personas de esta edad tienden a experimentar un declive en sus habilidades motoras, por lo que su experiencia tiende a ser distinta al momento de utilizar un sitio, esto aunado al hecho de la falta de conocimiento sobre las nuevas tecnologías puede afectar su interacción. Pero no todo es desventaja para este sector, los miembros de este grupo tienen más paciencia que el resto y acostumbran leer detenidamente, por lo que se puede optar más por un contenido textual estático.

Si bien se puede manejar más texto, este debe de tener una presentación adecuada, letras grandes y visibles, los enlaces deben de ser fáciles de accionar y la navegación debe de ser sencilla. Cuando se diseña para este grupo, debemos evitar dar a ellos toda la responsabilidad de corregir o evitar errores, tratar de reducir la confusión tanto como sea posible, y fomentar la interacción mediante una interfaz de usuario atractiva.

Conclusión

Sea cual sea la edad para la que estés diseñado un sitio web, debes tomar en cuenta las características y especificaciones de cada etapa para que las páginas puedan ser percibidas de manera adecuada y realmente utilizadas.

Siempre debemos tener en mente factores básicos como que los niños aún están en desarrollo, las personas mayores pueden confundirse rápidamente y los adultos tienen objetivos muy específicos cuando navegan por la web. Estás características base harán que cada grupo interprete la información de manera diferente, por lo que ser debe utilizar el diseño a su beneficio.

Si no queremos tener un sitio que se centre únicamente en una cierta edad, entonces debemos de tratar generar páginas que cumplan con los criterios mínimos para mantener satisfechos a los adultos, que sean accesibles para las personas mayores, que involucre a los adolescentes y que eduque lo más posible a los niños.

En esta parte estudiaremos a los dos primeros grupos, los más jóvenes de la cadena y sin duda los más influenciables.

Diseño web para niños

El impacto que tiene un sitio web sobre un niño es muy elevado y al igual que otros medios de comunicación, como la televisión, tienen gran influencia sobre el comportamiento de los infantes cuando son utilizados durante gran parte del día. No es raro que este fenómeno ocurra con más frecuencia en la actualidad, el hecho de tener habilidades de computación a temprana edad ya no es un lujo y es por ello que debemos poner especial cuidado cuando nos dedicamos a desarrollar sitios exclusivos para niños.

Hoy en día niños desde los cinco años, o incluso antes, están ganando experiencia utilizando dispositivos complejos y sitios web que quizás no se adecuan totalmente a su forma de ver el mundo, ya que más allá de la educación el principal problema para que estos niños tengan una buena experiencia al entrar a tu sitio es el desarrollo físico.

Los cuerpos de los niños y sus cerebros aún están en un estado de desarrollo, por ello sus habilidades motoras y la capacidad para utilizar el ratón y teclado de la máquina pueden resultar limitadas, nuestros diseños deben de tomar esto en cuenta y ser planeados para que los niños puedan jugar y navegar sin necesidad de estar cambiando mucho entre el ratón y el teclado, no forzarlos a llenar formularios, o escribir mucho para realizar actividades.

El manejo de errores también debe ser distintos, un adulto tiene mejor comprensión de lo que esta realizando por lo que tiene mejor comprensión de cuando ocurre un error, por su parte los niños tienden a omitirlos ya que carecen de los conocimientos o simplemente no les prestan atención porque piensan que son parte normal de la página.

Un diseño para niños debe de ser colorido, sencillo y educativo, cuando un infante encuentre la manera de llegar a su objetivo la aprenderá y la seguirá siempre de la misma manera, es por ello que debemos de planear bien el mapa de nuestro sitio y donde colocaremos los enlaces que lleven a cada sección. No te preocupes por la exploración ya que un niño nunca temerá en ese sentido.

Para garantizar un buen diseño para niños debemos buscar siempre mantener limpia la interfaz de usuario, para que los niños no se distraigan con el desorden, si es posible utilizas iconos grandes que ayuden a identificar con experiencias o cosas de la vida cotidiana. Tenemos que evitar la publicidad no adecuada, y si podemos evitarla en absoluto ya que para los niños es más difícil distinguir entre lo que es publicidad y lo que es el contenido verdadero.

Si tienes habilidades en el diseño con animación y sonido, ponlas en práctica para este tipo de sitios, cualquier tipo de multimedia llama su atención y es ideal para presentarles ideas. Finalmente para darle un buen toque añade mensajes que den al niño una retroalimentación, esto refozará sus buenas acciones y aprenderá mejor lo que hizo bien.

Diseño web para jóvenes adolescentes y preadolescentes

La pubertad y la adolescencia sin duda son las etapas donde se define más nuestra personalidad, experimentamos y buscamos nuevos panoramas por explorar, las habilidades motoras y la comprensión cada vez son menos un factor limitante. La experiencia con las computadoras ya es mayor y por lógica se buscan otros ámbitos, distintos a los juegos o páginas de contenido divertido, se empieza a buscar establecer interacción con otras personas y socializar, aunque esto no significa que sepan cómo funcionan los sitios y los dispositivos en su totalidad.

Los adolescentes y preadolescentes tienden a ser más resistentes a la publicidad y no están tan dispuestos a explorar todo un sitio web, por lo que adoptan un enfoque más metódico, buscando información en vez de descubrirla. Se caracterizan por estar siempre preocupados por interactuar socialmente, ser escuchados y participar en actividades de grupo, como por ejemplo en foros de Internet o redes sociales.

Uno de los grandes beneficios que conlleva el dedicarse a diseñar para jóvenes es que cuentan con mucho tiempo libre, por lo que si les damos las herramientas para que socialicen a través de nuestro sitio pasarán gran parte de su día en nuestras páginas y empezarán a promover tu servicio con sus amigos y así más clientes podrán llegar.

Para lograr un buen diseño para adolescentes debemos tener mucho contenido gráfico y un contenido textual conciso, ya que los adolescentes tienden a leer menos entre líneas y puede perder interés si no les damos lo que buscan de manera rápida. También debemos asegurarnos de que dicho contenido no parezca infantil; en estos casos la animación también puede ser utilizada como aliada, aunque quizás deba utilizarse en menor medida que con los niños pequeños.

Para poder mantenernos a la vanguardia y satisfacer de la mejor manera las necesidades de los usuarios que visitan nuestro sitio debemos estar concientes de que clase de diseños web se adecuan mejor a sus capacidades y gustos, así como identificar el tipo de contenido que más les agrada.

En principio, esto no parece un problema ya que cuando iniciamos un sitio muchas veces nos enfocamos a un objetivo muy específico lo cual va delimitando nuestro grupo de usuarios. Pero qué pasa cuando este sector en especial se va diversificando por edades, un sitio puede estar diseñado para proporcionar un servicio a ciertos usuarios pero si queremos lograr una verdadera popularidad tenemos que pensar en proporcionar lo necesario para audiencias compuestas por distintos grupos de edad.

La edad es un factor muy influyente en la web, no sólo en términos de contenido, sino también es relevante en decisiones de accesibilidad, usabilidad y diseño de la interfaz de usuario. En este artículo nos centraremos en la diferencia de edad como variable que puede afectar el diseño y creación de un sitio web.

Internet para todos: diseño web adaptable

El factor de la diversidad nunca antes se había visto tan marcado como en la actualidad, la web empezó a popularizarse a mediados de la década de los años 1990 pero en ese entonces era más lo que se oía sobre ella que lo que se usaba, el grupo de usuarios verdaderos se reducía a gente especializada o universitarios curiosos, lo que hacía que la interfaz o el diseño web no tomará un aspecto muy relevante, aunado al hecho de que no eran muchas las herramientas y opciones con las que se contaban.

Después las empresas entraron a la red y sus empleados comenzaron a requerir servicios lo que hizo que varios sitios fueran tomando un aspecto más sobrio, fue con el tiempo que los adolescentes tomaron el poder para no dejarlo ir, ya que actualmente representan uno de los principales mercados en lo que a media se refiere, incluyendo por supuesto Internet.

Las escuelas jugaron otro papel importante para lograr esta diversidad, ya que empezaron a impartir cursos relacionados al Internet, lo que le dio acceso a varias personas que no tenían el nivel económico suficiente como para tener una computadora ni mucho menos una línea de Internet. Los modems de 56k fueron quedado atrás y cada vez más casas contaban con una conexión a Internet permanente, por lo que niños que apenas sabían hablar y escribir ya tenían acceso a una computadora conectada a la red, esto abrió otro nuevo grupo de usuarios para completar el ciclo.

Es por ello que la web se ha convertido en parte tan integral en la vida de muchas personas, y precisamente por ello las diferentes generaciones de usuarios han desarrollado diferentes habilidades en la web, debemos tener en consideración a cada una de estas para poder evitar marginar a ciertos usuarios.

Si bien nuestro trabajo va a variar dependiendo del tipo de sitio que manejemos, si como diseñadores web queremos llegar a toda clase de público tenemos que aprender a realizar conjeturas razonables sobre lo que le gusta a cada sector y la manera en que navegan por la red. Si nos tomamos el tiempo para identificar como se ve afectado cada sector seremos capaces de evitar caer en la marginación de usuarios.

Importancia del diseño web para todos

La importancia de diseñar para todos los grupos de edad radica principalmente en la experiencia que generamos en los usuarios, si ponemos como base de nuestros diseños a un grupo específico y nos olvidamos del resto podemos causar malas experiencias que a futuro puedan producir mayores efectos.

Tomemos como ejemplo el caso de los ancianos, son personas que vivieron toda su vida sin un ordenador y apenas están empezando a tomar confianza en los ordenadores; el Internet les ha traído varios beneficios como a casi todo el resto de la humanidad, es por ello que han logrado establecer un vínculo en estos últimos años y han tomado el valor suficiente para empezar a navegar, sería irresponsable de nuestra parte entregarles una interfaz compleja y poco intuitiva, esto nada más los alejará y creará malas experiencias, recuerda que todos eventualmente vamos a envejecer y cuando llegues a ese punto querrás que se te tome en cuenta, pues sigues siendo la misma persona con voz y voto para decidir.

Otro caso se puede presentar con los jóvenes, entre muchos de los adolescentes y niños que entran a nuestra página se encuentran los futuros diseñadores web, si no cuidamos a este sector puede que les creemos malas experiencias y en un futuro tomen esta mala imagen como la percepción de un sitio web y empiecen a diseñar de la misma manera o peor aún se desanimen totalmente a diseñar pues crearon un concepto erróneo.

Con esto no estamos dando a entender que todo el contenido debe ser accedido por todas las edades, es claro que en muchas ocasiones será necesario agregar filtros y restricciones que permitan observar cierto contenido a los mayores de edad únicamente, pero no por ello debemos bloquear totalmente el sitio a un menor que bien puede representar un cliente en el futuro.

Si bien en este artículo estamos catalogando a los clientes en rangos de edad muy generales y simplemente estamos diciendo que existen niños, adolescentes, adultos y ancianos, vale la pena señalar que la diferencia en la capacidad de razonamiento entre un niño de cinco y un niño de diez años será ampliamente diferente, por lo que no puede dar nada por sentado.

El mejor enfoque consiste en definir los grupos de edad a los que queremos llegar y en base a ello empezar a diseñar, <strong<mientras más joven sea nuestro grupo de audiencia principal más específico debe ser el diseño. Con esto en mente, estudiemos las distintas formas de diseñar en base a un grupo de edad.

Explicaremos cada uno de los colores más cómunes en los diseños web, y cual es el significado que nuestro entorno tiende a darles, pasaremos desde un blanco sereno hasta un llamativo rojo.

El alcance del color en diseño web

El tono, la saturación, la oscuridad, la ligereza de un color puede agregar un significado y mensaje, y si un color puede significar algo, entonces tiene el poder de influir sobre aquellos que lo ven, una gran poder que debemos saber utilizar.

Existen muchas teorías sobre los colores, muchas personas tienen opiniones distintas sobre lo que expresa cada uno, pero en busca de un punto de sinergia se puede definir en términos generales lo que expresa cada uno.

A grandes rasgos y basándonos en el color, existen tres grandes grupos de sitios web, aquellos que utilizan el blanco como color principal, los que utilizan el negro y los que utilizan colores básicos como los primarios y el verde. Ahora trataremos de describir que expresan cada una de estas opciones.

El utilizar el color blanco en un diseño web es muy común, sobre todo en lo que se refiere al fondo de la página, ya que esto hace que el resto del sitio resalte más. Es un color que representa frescura y limpieza, y al menos de que el contenido del sitio diga lo contrario, al utilizarlo expresaremos orden.

Por su parte el color negro invoca una sensación más fuerte, es un color poderoso y misterioso que incluso puede tener connotaciones negativas en ciertas culturas, pero que en la actualidad es muy utilizado en sitios que quieren dar sobriedad, manejando un tono elegante y que indica profesionalidad.

Entrando a los colores primarios, tenemos al rojo que es uno de los colores más utilizados no solo en sitios web, si no en la mercadotecnia en general. El rojo generalmente esta relacionado con la pasión, pero se le puede dar otros usos ya se si se le da la tonalidad adecuada puede indicar peligro, urgencia y capta inmediatamente la atención del usuario.

Por su parte el azul es un color que representa estabilidad, sus tonalidades claras generalmente expresan creatividad, mientras que sus oscuros indican una presencia más fuerte pero sin dejar la tranquilidad. En la actualidad son muchos los sitios que utilizan el azul, en gran parte por su versatilidad, basta echar una hojeada rápida para darnos cuenta que muchos de los principales sitios web cuentan con el azul como su color base, tal es el caso de Facebook o Twitter.

El amarillo es un color más cálido, puede significar energía y juventud, ya que por lo general se le considera un color alegre y nos brinda la sensación de energía sin caer en el estrés o el peligro. Es decir, este color puede ser utilizado para recrear la sensación de positivismo.

Finalmente se encuentra el verde, un color que quizás no es tan utilizado como debería y que puede llegar a expresar seguridad, pero que generalmente se vincula con la naturaleza. Es por ello que es más utilizado en sitios relacionados al ambiente o compañas ecológicas, la manera en que el verde transmite la energía será más tranquila incluso que el amarillo.

Conclusión

El color puede tener un profundo impacto en el diseño de nuestros sitios web, siempre debemos tomarlo en cuenta como parte fundamental de la planeación y debemos manejarlo con cuidado una vez que elegimos uno como tonalidad principal.

El hecho de escoger un color es igual de importante como el hecho de desechar otros, debemos tener bien en claro la idea que queremos expresar y el mensaje que queremos dar. Recuerda siempre que el color es uno de los conceptos más poderosos en el diseño, y puede influir mucho en como se percibe tu sitio.

La búsqueda de una paleta de colores adecuada y correcta para nuestros proyectos puede resultar ser una tarea que consuma bastante tiempo, ya que por alguna u otra razón podemos sentir que ciertas tonalidades no van con lo que queremos expresar. Podemos elegir primero un tipo de color para después darnos cuenta que no era lo que buscábamos y así estar cambiando cada cinco minutos, hasta llegar a un punto donde estemos conformes.

También pueden existir ocasiones en que sintamos que encontramos una combinación de colores muy buena, pero no sabemos como lograr hacer que trabajen juntos, es decir en que lugar de la página colocar cada color, definir cual será el principal y los secundarios, determinar si son muchos o pocos los colores con los que contamos, o definir si combinan o no.

¿Cómo llegar a encontrar una buena combinación de colores?

Son muchos los que nos hacemos esta pregunta, vemos sitios web bastante bien diseñados y nos es imposible no plantearnos la duda, cómo es posible que el diseñador haya encontrado tan buena combinación. Si bien no existe una metodología bien definida para determinar cual es el color adecuado para cada sitio, trataremos de dar algunos consejos que ayuden y faciliten este paso de elección.

Muchas veces la respuesta esta en lo básico, explorar algunos de los estilos más popular que se utilizan en el diseño moderno, esto nos da la esperanza de entender por qué ciertos colores se utilizan en ciertas temáticas o enfoques de sitios web.

La importancia del color en diseño web

Como ya definimos el color es un factor muy importante y de gran influencia en el mundo, cada color ha establecido una relación que es muy difícil de cambiar por lo que todos tenemos una idea bien definida de lo que representan. La cultura, la educación y nuestra propia personalidad se han encargado de definirnos cual es nuestro color favorito, que representa y con que relacionamos el resto.

Por ejemplo, es inevitable pensar en un lugar o clima frío sin que vengan a nuestra mente los colores azul claro y blanco, lo mismo pasa con lugares cálidos y los colores amarillo y naranja, todo esto se logra gracias a la influencia que tienen los colores sobre nuestro subconsciente.

Al igual que con los climas, la imagen de cierta empresa se puede cambiar rápidamente en base al color de su logo, ya que las emociones que se evocan al ver un blanco en un logo de una empresa de limpieza no serán las mismas que se logren al ver un gris, ya que el gris lo podemos relacionar con suciedad, polvo, entre otras cosas.

Los colores toman tal importancia en el diseño, que ya no son únicamente vistos como un factor estético, si no que son utilizados como herramientas para transmitir mensajes, que si bien es algo que la mercadotecnia viene manejando desde hace mucho tiempo, en el diseño web no se le había dando tanta relevancia.

Cuando el color no debe de importar en diseño

Si bien plantemos las razones por las que el color toma tal relevancia e importancia en un diseño, la mayoría no tomamos en cuenta o tenemos conocimiento de esos factores, la importancia se la damos por naturaleza, ya es nuestro propio sentido del gusto el que nos hace modificar una y otra vez el diseño hasta encontrar el color que nos agrade más.

Modificamos tonalidades, agregamos brillo, lo hacemos más oscuro, algunas sombras o simplemente cambiamos todo de nuevo, en este punto el color ya se convirtió en una obsesión. Es aquí cuando este tema debe dejar de importar, ya que nos hará perder tiempo valioso y nuestra productividad se puede estancar.

Cuando nos esforzamos por alcanzar una perfección que es imposible, el color se torna en un tema de vanidad, y siempre vamos a encontrar un defecto que nos haga replantearnos nuestras decisiones.

Para estos casos no hay nada mejor que ir con el instinto, ya que suele elegir el color que más se asemejará a la perfección que buscas, es por ello que el primer color que eliges, es por lo general el color con el que estarás más conforme.

En la segunda parte de este artículo escribiremos más detalladamente el significado que puede expresar cada color, incluyendo los mensajes que podemos darle a nuestros usuarios al usarlo dentro de nuestras páginas.

Entre estas sencillas funciones que tenemos que saber realizar y aplicar desde un inicio, se encuentra la elección de tipografías para cada sección y parte de nuestras páginas.

Por coloquialismo, en este artículo nos referiremos a la tipografía como letra.

El uso inadecuado de fuentes puede causar la molestia visual de usuario, por lo que tenemos que ser muy precavidos al momento de elegir, en esta ocasión trataremos de nombrar algunas de las formas y prácticas más convenientes para obtener una tipografía que se adecue a cada situación u objetivo.

Define tu objetivo en la web

Primero que nada debemos tener bien en claro cual es el objetivo de nuestra página, cual queremos que sea la reacción del usuario al momento de leer el contenido que exponemos. No hay que olvidarnos nunca del objetivo de nuestro sitio, ya que nos guiará en los momentos donde tengamos que tomar las decisiones más importantes de adecuación y creación.

Al final sea cual sea nuestro objetivo, en base a él tendremos que llegar a un balance de legibilidad y amenidad, buscar que nuestra fuente sea lo suficientemente clara como para poder leerse y que al momento de leerse entregue de manera adecuada el mensaje. En pocas palabras, debemos de buscar un tipo de letra que sea apropiado para la audiencia y el mensaje.

Establece jerarquías en el texto

Debemos asegurarnos de tener muy buen conocimiento sobre la jerarquía que tiene el contenido de nuestro sitio, es decir, saber identificar que texto tomará más relevancia que otro y escoger un tipo de letra en base a esto.

Después de un análisis de jerarquía tú puedes llegar a la conclusión de cuántos tipos de fuentes necesitas, puede que tu página maneje únicamente encabezados y texto de contenido, pero por otro lado pueden existir sitios donde se requieran cinco distintas fuentes para cubrir encabezados, subencabezados, enlaces en barras laterales y demás cosas.

Claro muchas veces podemos recurrir a utilizar variaciones del mismo tipo de letra, ya sea con negritas, cursivas o manejando mayúsculas y minúsculas, y con esto basta para cubrir lo necesario. Para ello debes hacer este estudio, así sabrás si realmente cuantos tipos de letras necesitas y después podrás pasar a elegir cuales son las más adecuadas para cada nivel jerárquico.

Considera el trabajo de otros

Tenga en mente que quizás muchos ya pasaron por la situación en que tu te encuentras en este momento, es muy probable que algún desarrollador o diseñador ya haya encontrado una manera adecuada de combinar las tipografías que tu quieres manejar, por lo que no es necesario complicarnos la existencia tratando de reinventar la rueda.

Todos quisiéramos ser siempre creativos y entregar algo que sea innovador, pero muchas veces por tratar de llegar a eso terminamos con un producto que altera los nervios de varios y que solo nos hará perder visitas. No descartes tu creatividad pues de ella dependes, pero tampoco descartes el uso de algo que ya este probado, existen razones por las que varias fuentes son utilizadas con tanta frecuencia.

Obtén una segunda opinión

El obtener una segunda e incluso una tercera opinión sobre nuestro producto nos ayudará y beneficiará en gran medida, ya que un ojo imparcial evaluará lo que hicimos y nos permitirá darnos cuenta de muchas cosas que estamos dejando pasar. Incluso las cosas más obvias pudieron haberse dejado pasar por alto, no te confíes pensando que tu producto es perfecto, un par de ojos extra es fundamental para encontrar discrepancias.

Investiga bien el origen de la letra

En muchas ocasiones al utilizar una fuente sobre un sitio temático podemos estar cometiendo errores de precisión cultural, histórica o geográfica, para evitar esto no hay nada mejor que estudiar el trasfondo de una fuente.

Puede parecer exagerado el hecho de que necesitemos estudiar de donde proviene o de que manera se utilizaba dicha fuente, pero en muchas ocasiones esto puede resultar crucial para la apreciación de un sitio. Imaginen tener un sitio de comida mexicana que utilice como base la tipografía “Lithos”, comúnmente utilizada para textos en griego, al momento de leer el contenido del sitio puedes imaginar que este es un restaurante dirigido por personas que realmente no son mexicanas, lo cual te hará conciente o inconcientemente pensar que la comida no es lo suficientemente buena.

Ahora imagina un libro sobre la antigua Grecia que tenga en su portada el título escrito con letra de tipo “Trajano”, comúnmente utilizada para representar textos romanos, en ese momento puedes imaginar que el autor no tiene idea de lo que esta hablando, entonces si no lo hacemos para los libros, ¿Por qué si hacerlo en los sitios web?

Evita lo trillado

Si bien es necesario que la fuente que manejemos tenga relación con el contenido que se muestra en la página, siempre debemos evitar caer en lo trillado, o peor aún en uso de fuentes viejas o poco estéticas solo porque tienen relación con lo que hablo. Se puede dar el caso de que tengas un restaurante de comida griega pero no por eso tienes que manejar siempre la tipografía “Lithos”, busca alternativas que respeten el contenido.

Si haces una invitación a una fiesta no tienes que usar “Comic Sans” siempre, es más por favor no la uses nunca, si haces un sitio de temática Egipcia no tienes que usar la fuente “Papiro” para dar a entender tu punto. Si haces esta clase de cosas puedes dar la impresión de que no tomaste muy en serio tu trabajo y que en menos de 5 minutos habías terminado con el sitio.

Utiliza combinaciones clásicas

Como ya dijimos antes, la innovación es genial pero no lo es todo, si deseas irte por algo seguro no te critiques, no todos llevamos un diseñador por dentro y a veces es mejor irte por lo clásico a terminar probando algo que nunca termine de agradar. La integridad de tu diseño y el mensaje a entregar es lo más importante, no dejes que esto se vea afectado por tratar de combinar patrones que no embonan entre sí.

Si bien existe una amplia gama de tipos de letra, no es malo enfocarnos en unos cuantos y tratar de sacar lo mejor de ellos, hasta los mejores diseñadores tienden a enamorarse con un tipo de letra, aclaramos esto no significa que siempre debas usar el mismo tipo, pero dar variedad a tu sitio utilizando un grupo limitado de fuentes te hará comprender mejor en que situaciones utilizarlas.

La tipografía, es decir, la fuente o el formato de las letras que conforman el texto, tendrá un impacto directo en como la página será recibida por sus lectores.

Una tipografía enrevesada y poco legible agotará a quien visite el sitio web; los mensajes no son claros y por tanto el visitante prefiere salir del sitio.

Si bien es cierto que no hay un método establecido sobre cómo elegir una tipografía adecuada para una web, sí hay ciertos criterios fundamentales a ser tomados en cuenta.

Legibilidad de la tipografía

La legibilidad es un principio básico y necesario cuando se va a elegir la tipografía para una página web.

Parece obvio, pero no es poco común entre diseñadores web poco experimentados que privilegien una tipografía aparentemente más interesante, original o compleja sobre tipografías tradicionales y cuyo uso es casi generalizado en el mundo web.

Ahora bien, las tipografías del primer tipo tienden a tener dos problemas: por un lado, son poco legibles pues están llenas de adornos. En este sentido demandan un mayor esfuerzo y una mayor atención de parte del lector. Por otro lado, suelen distraer al lector del mensaje que se trata de transmitir.

Fuentes tradicionales como Arial, Verdana, o Helvética son las más utilizadas, justamente, porque son fácilmente legibles. De nada sirve parecer original o tratar de que la web se destaque por el uso de fuentes complejas si la información no se transmite fácilmente.

A parte está, el hecho de que tipografías poco comunes no se verán igual en diferentes ordenadores. En el ordenador donde no estén instaladas, se sustituirán automáticamente por una tipografía que sí tenga el sistema. Si quieres que una tipografía se vea igual en todos los ordenadores, la tengan o no instaladas, tendrías que usar el reemplazo de imágenes, nada recomendable por la sobrecarga de imágenes que puede generar en una web, o alternativas más modernas y óptimas como Google Web Fon Directory y font-face.

Combinaciones de tipografías

Una página web no se hace con una sola tipografía. Ciertamente se puede pero no es lo deseado ni lo recomendable.

Generalmente se utilizan distintas tipografías dentro de un mismo sitio web. Se diferencia con la tipografía y el tamaño de la misma a los títulos, o encabezados, del cuerpo del texto o de la barra de menú, por ejemplo.

Debido a esto es que es muy importante el que se hagan combinaciones adecuadas en donde las fuentes utilizadas no sean discordantes entre sí.

Para que esto no suceda es recomendable utilizar distintas tipografías de un mismo diseñador. Así, si se utiliza para el cuerpo del texto la fuente Meta Sans para los títulos y encabezados, se podría utilizar Meta Serif para el cuerpo del texto.

Lo importante en las combinaciones es crear un contraste notorio pero no al punto en el que las tipografías parezcan radicalmente distintas.

El Sentido del Texto

Para elegir una tipografía adecuada para la web es indispensable prestarle especial atención al sentido del texto. Es decir, a quien se dirige y a nombre de quien lo hace.

Hay fuentes que tienden a asociarse a un contenido serio mientras que hay otras asociadas más a un texto lúdico o juvenil. Ejemplos del primer caso sería la tipografía Times New Roman, mientras que para el segundo caso podría funcionar una tipografía como Impact.

Si se está diseñando la página web de una aseguradora o institución financiera, por ejemplo, la tipografía a utilizar será aquella que sea más formal pues será mejor recibida por quienes se interesan en los servicios de este tipo de empresas. La tipografía no puede estar desligada del texto que con ella se escribe y el contexto del mismo.

La Interfaz de la página web

La interfaz, o el “molde” de la página web, influye directamente en la tipografía. Ambos aspectos deberían ser trabajados en conjunto pues la interfaz definirá cómo la tipografía es presentada en cuestión de espacios, locación, y diseño.

Una interfaz mal diseñada, desproporcionada o desordenada, podría arruinar la tipografía por más cuidado que haya habido en su selección.

Por esto, es recomendable trabajar la tipografía junto con la interfaz a ser desarrollada en la página web.

No ha pasado mucho tiempo desde que para promocionarte o promocionar tu negocio y estar al día, solamente necesitabas tener una buena página web. Ahora, con lo rápido que ha avanzado la tecnología, hace falta mucho más que eso, hace falta tener actividad en las principales redes sociales y, sobretodo, contar con un sitio web compatible con dispositivos móviles.

Actualmente un alto porcentaje de las búsquedas en motores tales como Google y Yahoo, se hacen desde dispositivos móviles como iPads y smartphones, y solamente el 1% de los sitios web del mundo pueden ser visualizados en un dispositivo móvil sin ningún problema.

En la Parte 1 de este artículo, dimos algunos consejos para que tu sitio web sea totalmente compatible con dispositivos móviles, a continuación te damos algunos más que harán que tu sitio web móvil sea aún mejor:

• Olvida el auto-play y la auto-descarga:
  Los dispositivos móviles tienen menos capacidades técnicas que los ordenadores y no pueden manejar el mismo flujo de datos. La regla de oro es hacerlo simple.
• Evita la sobrecarga de imágenes:
  Si utilizas menor cantidad de imágenes será mejor para tu sitio web móvil, ya que esto no solamente facilitará la rapidez de las descargas, sino también hará que las imágenes que si sean necesarias sean mucho más fáciles de ver. ¿Quieres un dato técnico? Mantén tus imágenes aproximadas a los 72 dpi, 640px en 960 de altura.
• Ajustar los elementos visuales:
  Reducir los tamaños de los textos y el tamaño de las imágenes para que tu sitio web móvil tenga un correcto funcionamiento y sea rápido al cargar no es lo único que necesitas. También es importante que utilices imágenes de menor resolución, videos más cortos y elementos visuales mucho más sencillos.
• Navegación vertical:
  Siempre utiliza una misma dirección para el scrolling, pues si ya es bastante incómodo manejar un scrolling en doble dirección en una página web estándar, lo será mucho más en un sitio web móvil.
• Olvídate del Flash o Javascript:
  No todos los dispositivos móviles son compatibles con Flash o Javascript, así que la recomendación es que toda tu información se encuentre en HTML / CSS para lograr la mejor funcionalidad de tu sitio web en los dispositivos móviles. Hay que primar la usabilidad y accesibilidad más si cabe que en un ordenador.
• Decide correctamente los colores que usarás:
  En una web estándar los colores son de importancia para resaltar el contenido de tu información, pero recuerda que la pantalla de algunos dispositivos móviles puede ser de bajo contraste y eso hará que los colores y, por consiguiente, tu sitio web no se visualice tal como lo esperabas. Asegurate de que los textos y colores que utilizas son los adecuados y tengan un buen contraste.

Teniendo en cuenta que la tecnología WAP está en constante desarrollo y crecimiento, es inevitable que requiera de sitios web diseñados cumpliendo todos los requisitos básicos para complacer a la creciente cantidad de usuarios que día a día se hace más extensa.

Diseñar sitios web para dispositivos móviles exige un gran desafío y requiere un enfoque estratégico del diseñador web y el desarrollador.

La mayor ventaja del internet móvil es que puedes acceder a él desde cualquier lugar que te encuentres: desde el coche, el autobús, el supermercado, el campo de fútbol o los lugares menos pensados. Por esta razón estamos seguros que, en poco tiempo, aquel 1% de sitios web totalmente visibles en dispositivos móviles crecerá de tal manera, que llegará el momento en que la gran mayoría de accesos a internet será mediante estos dispositivos y entonces el porcentaje de sitios web móviles será incluso mayor al de sitios webs convencionales. Y este futuro no es lejano.