Diseño web: un elemento fundamental, la tipografía

Como ya sabemos, la elección del diseño web es de una importancia capital a la hora de crearla, puesto que supone la tarjeta de presentación de una marca, es lo primero que van a ver nuestros clientes cuando quieran conocernos o ya nos conozcan a la hora de adquirir o contratar nuestros productos.

Ya hemos hablado anteriormente de la importancia de los distintos elementos de una página web, en la que cada elemento cumple una función y, todos juntos, componen el engranaje perfecto en el que basar nuestra presencia online como receptor de las visitas de nuestros usuarios.

No sólo es importante la estructura, el color o las imágenes que utilicemos, sino también la tipografía que usamos en nuestra web, ya que, no olvidemos, la web no sólo es un cúmulo de imágenes y colores, sino que en ella la letra, la tipografía, ocupa un lugar esencial al ser el medio principal mediante el cual lanzamos nuestro mensaje, por lo que debemos ser especialmente cuidadosos a la hora de escoger un tipo de letra para nuestra web.

Lo primero que debemos hacer antes de decantarnos por una tipografía es pensar el medio en el que se implantará, en este caso, una web, lo que significa que será visualizada por los usuarios en una pantalla de ordenador, lo que seguramente, nos hará descartar las tipografías de la familia Serif, con origen en la escritura antigua, y adecuada principalmente para los medios impresos, puesto que nos permite establecer una línea de lectura muy cómoda en libros, por ejemplo, siendo algunos tipos de esta familia la Book Antiqua o la Bookman Old Style. Sin embargo, la mejor opción para nosotros es cualquier tipografía de la familia Sans Serif, como por ejemplo, Arial, por su alta legibilidad en una pantalla de ordenador a cualquier tamaño.

Pero no sólo debemos considerar el tipo de letra, sino también su color y tamaño. Existen muchos ejemplos en los que la letra y el fondo no son adecuados, simplemente, porque no se conjuntan. Son ejemplos en los que la letra se confunde, no se lee bien o, simplemente se pierde en un fondo que imposibilita la lectura de esa tipografía. Por este motivo, no sólo debemos elegir bien el tamaño y color de la tipografía, sino un fondo que permita ser leída adecuadamente.

No podemos perder de vista que en una página web es fundamental establecer una estructura clara, por lo que necesitamos escoger una tipografía que permita definir una jerarquía del texto clara, que sea fácil de seguir, siendo una buena opción escoger una tipografía diferente para una parte del texto que queramos resaltar en concreto, con el simple objetivo de llamar la atención del usuario.

Como conclusión y consejo, es una buena práctica leer el texto nosotros mismos para ver si el aspecto que da la tipografía es adecuada para nuestra web, si va acorde con el mensaje que queremos transmitir y, sobre todo, si es legible. En caso de que la respuesta a cualquiera de estas cuestiones sea negativo, es mejor volver atrás y plantearse cambiar la tipografía.

¿Crees que la tipografía es tan importante en una web?

 

Foto: cosassencillas.com

Diseño web, una mirada atrás

No cabe duda ya de que el diseño web es un elemento muy importante a la hora de crear un sitio web o blog para una marca o empresa que quiera tener una presencia activa en internet y tener un soporte para darse a conocer.

El diseño web supone la cara que damos a los usuarios de nuestra marca, por lo que es preciso que sea lo más agradable posible tanto para navegar por ella como por las sensaciones que nos provoca con el uso de las tipografías, imágenes y colores (de los que ya hablamos en posts anteriores).

Pero el diseño web ha ido evolucionando con los tiempos.

Los inicios del diseño web se remontan a un lejano ya 1990, año en el que aparece el lenguaje HTML, que supuso toda una revolución en cuanto a diseño y que rompía con lo anterior, puesto que ofrecía una nueva forma de construir las webs, en bloques básicos de código. Pero no fue hasta un año más tarde cuando apareció la primera web construída con HTML, creada por Tim Berners- Lee.

En el año 1992 llegará otra forma de entender la web que pronto se haría con el mercado, el diseño basado en tablas, que mantuvo su hegemonía hasta el año 1994, año en el que apareció el consorcio World Wide Web, cuyos principios y objetivos perduran aún hoy en día.

Entre los años 1995 y 1996 aparecen los archiconocidos Flash y JavaScript, que introducen animaciones y los efectos especiales en las páginas web, haciéndolas mucho más interactivas.

En 1996, con más de 74 millones de usuarios de internet, hace su aparición la hoja de estilo CSS, que mejoró la accesibilidad de la web e hizo del HTML un código más semántico que de presentación. En el mismo año los Frames  se hicieron muy populares, ya que permitían mostrar dos o más webs o elementos multimedia en la misma ventana del buscador.

Pero el diseño web siguió avanzando y en 1998 aparece PHP, que facilita el camino a las webs dinámicas, lo que da la entrada en el año 1999 a CSS3, que introduce nuevas funciones y cambia la forma de desarrollar y diseñar una web, en un contexto en el que hay 279 millones de usuarios en internet y más de dos millones de páginas web.

En el 2003 y con más de 38 millones de webs, aparece la llamada web 2.0, que soporta las redes sociales que hoy conocemos, wikis y blogs.

2008 es el año del open source y el diseño móvil, ya que es en este año cuando los usuarios empiezan a acceder a internet desde otros dispositivos, y cuando el software libre empieza a ganar adeptos.

HTML5 aparece en 2010, e introduce un lenguaje mejorado con posibilidad de soportar los recursos multimedia más avanzados. Es más fácil de usar para las personas y más fácil de leer para los ordenadores.

Posteriormente, la responsive web hace su aparición como consecuencia del cada vez mayor crecimiento del acceso a internet a través de dispositivos móviles como tablets o smartphones.

¿Qué será lo próximo?

Photo credit: pixelincloud.com

Diseño web: cada vez más usuarios móviles

Ya es un hecho que, cada vez más, la consulta de internet se hace desde otros dispositivos que no son nuestros ordenadores, como pueden ser smartphones o tabletas, de ahí la creciente importancia de realizar webs que se adapten perfectamente a este tipo de dispositivos, creando webs responsive.

Debido, precisamente, a que el usuario utiliza estos dispositivos cada vez más, cada vez son más las empresas que son conscientes de que necesitan realizar acciones para los usuarios móviles, ya que son un target más que importante.

Pero, ¿cómo podemos crear una web que sea amigable con nuestros dispositivos móviles?

Bueno, es algo muy necesario que nuestra página web sea rápida a la hora de cargarse, puesto que la velocidad de carga adecuada favorecerá un mejor funcionamiento de nuestra web en nuestros smartphones y tabletas, por lo tanto, diseñémosla con este objetivo y, hagamos que sea fácil de rastrear.

Hacer más fácil y más simple la navegación por nuestra página es otra de las prácticas más que recomendadas para hacer más amigable nuestra web para el móvil, puesto que, al tratarse de dispositivos con menos tamaño, la visión de la misma es más difícil, por lo que cuanto más simplifiquemos y hagamos más simple la navegación por ella, más fácil será visualizarla en nuestros dispositivos móviles.

Necesitamos que sea fácil de leer, lo que también se ve favorecido por la simplicidad del diseño de la página web, y, por supuesto, es imprescindible que sea perfectamente accesible desde otros dispositivos, además de añadir algún modo de contacto en la misma perfectamente visible y claro para nuestros móviles y tablets.

Haz que tu web esté en plataformas de geolocalización tales como Foursquare, Google Local o Facebook Places y aprovecha todo su potencial. Si habilitamos un perfil en estas redes sociales para nuestro negocio, haremos mucho más fácil que otros usuarios nos encuentren y que puedan interaccionar con nosotros.

Por supuesto, debemos asegurarnos de que nuestra web no sólo tiene una versión móvil, sino que además, cuando alguien pincha en el enlace que lleva a nuestra página web es redireccionado a la versión móvil de nuestro sitio, de forma y manera que la página se visualice adecuadamente en el dispositivo móvil del usuario.

Es muy importante que utilicemos el mobile marketing como parte de nuestra estrategia, y que el diseño de nuestra página web sea amigable con los distintos dispositivos móviles, puesto que de esta forma, lograremos también que los usuarios visiten nuestra página no sólo desde el ordenador, sino desde cualquier parte.

¿Y tu web, lo es?

Diseño web: azul, mucho más que un color

En el post anterior vimos la gran influencia que tienen los colores a la hora de realizar nuestros trabajos, cómo influyen los colores en la mente y en el ojo de los usuarios, cómo son percibidos por ellos y hacen que una web tenga un mayor o menor éxito.

Hoy nos centraremos en uno de los colores más usados de la gama cromática, el azul.

El color azul es utilizado principalmente por sitios sociales, y tenemos el ejemplo claro de Facebook y de Twitter, que usan este color dentro de su imagen corporativa por el impacto que provoca en el usuario, que asocia la comunicación y el hecho de compartir a este color.

También se asocia al azul en cualquiera de sus tonalidades, el progreso y la innovación, por lo que es idóneo para compañías tecnológicas, como vemos en el logo, por ejemplo, de Samsung, Intel o HP, además de sugerir a los usuarios confianza y un sentimiento de unidad, lo que lo hace perfecto para que las compañías aéreas lo adopten como parte de su identidad corporativa, pongamos como ejemplo la identidad corporativa de American Airlines, o de diferentes partidos políticos, de lo que podríamos poner el ejemplo español del logo del Partido Popular.

Por otro lado, el color azul forma parte del grupo de colores primarios, compuesto además de éste, por el rojo y el verde, lo que hace de él un color preferido a otros al ser natural, no “artificial”. El color azul es muy útil para crear una respuesta emocional en el usuario, permite que el visitante se enfoque en el contenido y no en el continente, además, propone un nuevo enfoque para la elección de los colores.

Tanto hombres como mujeres prefieren los sitios web en los que el color azul tenga papel protagonista, ya que ofrece un efecto tranquilizador.

También da buen resultado a la hora de mezclarlo con otros colores, como se ve en muchísimos sitios web. Así, la mezcla del azul con otros colores también provoca sensaciones y emociones en los usuarios que los visitan.

La combinación celeste con rosa o naranja una sensación alegre y divertida en una web, mientras que si unimos el azul con el verde, resulta una unión perfecta a la hora de querer transmitir la idea de naturaleza, ecología. También podemos conseguir una sensación de confort uniendo el celeste a cualquier color oscuro, y damos una imagen atractiva si unimos el azul y el amarillo.

Para los usuarios más eco-friendly es la mezcla del azul y del marrón, para los más elegantes, el azul y el gris, mientras que para los más románticos, la combinación perfecta es celeste y blanco.

Los colores usados de forma adecuada nos pueden ayudar a difundir un mensaje, una idea.

¿Qué colores usas tú?

 

Diseño web: depende del color con que se mire

Los seres humanos somos complejos.

De igual forma que necesitamos sentirnos atraídos por alguien para iniciar una relación con esa persona, necesitamos sentir que la marca nos seduce para que compremos su producto. Es un hecho.

Ese cortejo, llamémoslo así, empieza por ofrecer una buena imagen, y en una buena imagen, como ya sabemos, influye muchísimo la web corporativa a la que dirijamos a nuestro usuarios, a nuestra clientela, ya sea potencial o de facto.

Ya hemos hablado antes de la mejor forma de construir una web adecuada a nuestras necesidades, pero, sobre todo, a la de los usuarios que nos visitan. Establecimos en posts anteriores la necesidad de poseer una buena arquitectura web, estructura y facilidad en el uso y navegación de la web, usando un diseño atractivo y moderno, pero que a la vez, ofreciera la imagen profesional que nuestra marca pretende transmitir de cara a los consumidores.

Pero, algo que es muy importante y que pasamos por alto en muchísimas ocasiones es la importancia de los colores que utilizamos, puesto que el ojo recoge el color transformándolo en sensaciones. De hecho, más del 85% de los usuarios afirman que el color de un producto es uno de los principales motivos para su posterior compra, según el estudio realizado por June Campbell “The psicology of web performance”.

El color también influye en la imagen de nuestra marca en un 80%, según el mismo estudio, puesto que ayuda al usuario a reconocerla.

Se trata de uno de los elementos más poderosos del diseño que nos transmiten cosas, como por ejemplo, el color amarillo transmite optimismo y jovialidad, además, atrae la atención de los compradores. El rojo, por su parte, transmite la sensación de energía y crea la impresión de urgencia.

Por poner un tercer ejemplo, el azul ofrece confianza y seguridad, a menudo lo usan los bancos, y los negocios, mientras que el verde es el color universalmente asociado a la salud y la naturaleza, además de ser el color más fácil de procesar por el ojo humano.

Tiene la increíble y única capacidad de atraer a determinados tipos de usuarios y de lograr que cambien su decisión de compra. Así, los colores rojo, azul marino y negro atraen a compradores impulsivos, por lo que son perfectos para liquidar productos, mientras que el celeste, el rosa y el morado son los colores de los consumidores tradicionales.

Tenemos un gran aliado en los colores para conseguir atraer a nuestros consumidores, ¿por qué no utilizarlo?

Diseño web adaptado a todos los dispositivos, una necesidad

Las webs y los blogs son una necesidad fundamental para todas las marcas que quieran tener una presencia online consistente, y, como ya hemos mencionado en posts anteriores, es necesario dedicarle a estas plataformas toda la atención que se merecen, puesto que, tanto unos como otros, son parte fundamental de nuestra estrategia de marketing, y, por supuesto, porque suponen la tarjeta de presentación de nuestro negocio para con los clientes.

Ya hemos hablado también de la necesidad de adaptar nuestra web o nuestro blog a las necesidades de los clientes, creando sites en los que la información no esté enterrada bajo toneladas de elementos que distraigan la atención del visitante y dotándolas de una más que aceptable usabilidad.

Pero las marcas necesitan tener en cuenta que cada vez más es el tráfico que se genera a través de los dispositivos móviles que permiten trabajar y consultar internet desde cualquier, tráfico que ha aumentado en los últimos años de forma considerable gracias a la enorme proliferación de smartphones y tablets, por lo que es imprescindible que adapten sus webs y blogs de modo que tengan una correcta visualización en ellos.

Es la responsive web, una web que se adapta a los distintos tamaños de pantalla de los diferentes dispositivos. Lenguajes de programación como HTML5 y CSS3 están especialmente diseñados para ello.

Uno de sus principales argumentos a favor es que los usuarios, como hemos dicho antes, cada vez usan más sus dispositivos móviles para navegar por internet, y si nuestra web no cumple este requisito, el ser adaptable, perderemos una gran cantidad de visitas, además que nos permite ser mucho más competitivos respecto a empresas que tienen más recursos y pueden permitirse crear una versión de la misma web para cada tipo de dispositivo.

El hecho de crear una web adaptable o una responsive web nos permite ahorrar costes, puesto que sólo necesitaremos crear una web que se adapta a todos los dispositivos, y no varias (un punto muy importante, sobre todo considerando en la situación económica en la que nos encontramos en la actualidad).

Por otro lado, otra ventaja es la familiaridad con el site, es decir, cuando creamos varias versiones de una misma web corremos el riesgo de que no sea la misma web, mientras que si lo que creamos es una responsive web el sitio será exactamente el mismo, sólo que adaptado a uno o a otro dispositivo.

Un contra, que no todo van a ser pros, es que la responsive web no tiene en cuenta otro aspecto sino la pantalla del dispositivo en el que vamos a visualizarla, por lo que la funcionalidad puede verse un poco mermada en pro de la correcta vista y es necesario tener un plan B si esto ocurre.

No obstante, adaptar la web o el blog a los dispositivos móviles es un imperativo para las marcas.

¿Tu sitio está adaptado?

Planea, diseña y optimiza tu página web

Como ya sabemos, una página web de calidad para nuestra marca o empresa garantiza que los usuarios y los potenciales clientes van a poder encontrarnos entre la gran cantidad de marcas presentes en la web, aunque eso depende de nosotros, de cómo planteemos la web de nuestra empresa, del escaparate que le proporcionemos al usuario.

Como cuando paseamos por una calle con muchas tiendas, si el escaparate está bien montado, de manera atractiva para nosotros, nos paramos a observarlos.

Lo mismo ocurre con la web, y para ello, vayan aquí unos consejillos.

1. Planea el diseño y estructura de la web:  es fundamental crear y desarrollar un diseño que atraiga la atención de los usuarios. Piensa que el valor de tu web no sólo viene determinado por la forma y el contenido, sino por la manera en la que tus usuarios interactúan con ella, y sin olvidar que su principal función es la de promocionar a nuestra marca.

2. Piensa en cómo quieres organizar la información: esto nos ayudará a plantear la estructura de la web y ver cuántas páginas dentro de ella necesitamos para cumplir nuestros objetivos.  Además debes tener en cuenta que a los internautas no les gustan las webs en las que hay que dar muchos rodeos para ver la información que están buscando, así pues, crea una forma de navegación que permita ver en todo momento dónde estamos, de una forma clara y sencilla. Además ten en cuenta el lenguaje de programación que vas a utilizar para mejorar la indexación y el posicionamiento de tus contenidos.

3. Elige un diseño que sea intuitivo y que permita una visión de la web y favorezca la usabilidad, teniendo en cuenta siempre que la consistencia de nuestra web hace mucho más fácil la navegación, además de primar el pragmatismo. Otro factor a tener en cuenta es la coherencia, que permite manejar la información y realizar las tareas de cada usuario.

Coloca la información en lugares estratégicos, fáciles de localizar y de compartir, utilizando fuentes que sean fáciles de leer y, si fuese necesario, de imprimir.

4. Usa una estrategia en tu web: ten siempre presente de una manera clara los objetivos de tu página Web, no introduzcamos elementos en la web a tontas y a locas, hagámoslo con un criterio determinado y obedeciendo al plan anteriormente realizado. Siempre podemos probar con nuevas características y funcionalidades y, de esta manera obtendremos una información muy interesante por parte de la comunidad en forma de feedback.

Es fundamental asegurarnos de que nuestra web es correctamente indexada por los distintos motores de búsqueda y de que está optimizada.

La web muchas veces es el punto de comienzo en la interacción con nuestros usuarios y potenciales clientes, dale la importancia que se merece.

 

Diseño web: la página perfecta

«Los problemas con el diseño visual pueden provocar que los usuarios abandonen la página muy rápido y que nunca descubran lo que puedes ofrecerles”, Jesse James Garrett.

Hoy en día no hay duda alguna de que todas las empresas y todas las marcas que pretendan obtener cierto éxito deben tener presencia online, y, la carta de presentación a los demás usuarios en internet es una página web bien hecha y optimizada.

Para ello, uno de los aspectos fundamentales a tener en cuenta es el del diseño de la misma. Debe ser atractiva y fácil de manejar. Además, a la hora de diseñar nuestra web, es necesario considerar el hecho de que los usuarios van a acceder a ella a través de los distintos navegadores, por lo que es algo imprescindible que nuestra web sea amigable e indexable para los distintos navegadores. No obstante, si nos encontramos con la imposibilidad de hacerla compatible para todos, al menos, compatibilizarla con los navegadores mayoritarios, que son Google Chrome, Mozilla Firefox e Internet Explorer, aunque este último cada vez está siendo menos usado en beneficio de los dos anteriores.

Igualmente, debemos tener en cuenta el tipo de pantalla en el que el usuario visualizará nuestra web, considerando que, en la actualidad, la mayoría de los ordenadores vienen equipados con pantallas de 24 o 32 bits que pueden mostrar más de 16.000 colores distintos, así como que los monitores más antiguos sólo poseen 16 bits, y la gama de colores es muchísimo más reducida.

Para diseñar y crear correctamente una web, es preciso saber qué tipo de lenguaje es el más popular y el que mejor funciona para los buscadores, siendo ahora mismo los más usados HTML5 y CSS. El uso de estos lenguajes favorecerá la indexación de nuestra web.

Aunque el diseño es importante, no podemos perder de vista que la web está enfocada a proporcionar información a nuestros visitantes, por lo que deben poder acceder a ella de forma sencilla y rápida. Nada de webs que esconden la información entre miles de elementos que, por otro lado, distraen la atención del cliente. Hagamos una web sencilla y clara.

Por otro lado, otro aspecto clave es la usabilidad. No olvidemos que una mala página web es como un vendedor gruñón, hace que te vayas rápido del local. Existen verdaderos atentados a la usabilidad que hace a los usuarios abandonar la web, como los pop ups emergentes, la lentitud de carga o que no exista un botón para cerrarla, aspectos a evitar en todos los supuestos.

Una web de calidad ofrecerá contenidos de calidad para que así aumente su relevancia, y por ende, su SEO, entre los usuarios, proporcionandolo en diferentes idiomas a ser posible, para que ese contenido sea accesible a un público más amplio, siendo el idioma mayoritario y el más recomendable, que no sea el nativo, el inglés.

Además, debe estar avalada por un trabajo SEO de calidad, optimizandola así para un mejor posicionamiento web de la misma.

Para una correcta y adecuada viralización de los contenidos que proporcionamos en nuestra web, ésta debe estar conectada a los perfiles de las redes sociales en las que nuestra marca tenga presencia, colocando los iconos sociales en un lugar fácil de ver y accesible para nuestra audiencia.

También es importante conocer cuántos usuarios llegan a nosotros e interactúan con nuestra página web, analizar estos datos podrá indicarnos si necesitamos hacer algún cambio en ella.

Y algo a tener en cuenta, sólo porque el footer esté al final de la página no significa que debamos descuidar su diseño. Es tan importante como cualquier otro elemento.

Diseño web: claves para la supervivencia

Mientras lee este artículo habrán sido puestas en circulación más de diez nuevas páginas webs. Según un estudio de NetCraft, el ritmo es de casi 600 sitios a la hora. Hablamos a nivel mundial, donde el total de sites supera ampliamente los 450 millones. Una auténtica “selva cibernética” en la que obviamente se impone un particular espíritu de supervivencia. Pero no sólo instintivo. También sensato: las posibilidades de éxito son directamente proporcionales a una práctica eficaz, profesional, en el diseño de nuestra web.

Todo debe estar orientado hacia la interacción efectista y efectiva con el usuario. La usabilidad, la estética y la accesibilidad, por ende, han de articular cualquier proyecto. Son imprescindibles y complementarias. “La perfección no se alcanza cuando no haya nada por añadir, sino cuando no haya nada que quitar”, decía Saint-Exupéry. Éste es el mayor logro de un diseñador: llegarle a los usuarios con productos simples y atractivos sea cual sea la plataforma elegida. Una página asequible pero con mala estética no atraerá la atención de posibles usuarios o visitantes, mientras que una página muy bonita pero que funciona mal terminará generando rechazo.

Ahora bien, detrás del diseño debe converger una planificación de contenidos. Todo debe pensarse y planificarse para que el usuario entienda de qué va el sitio y sepa usarlo, pero también para que sea guiado hacia la información que nos interesa que vea. Por eso el diseño va más allá del arte, que sólo necesita la apreciación del espectador. Ahora se reclama también su implicación en un contexto de uso. De ahí que el diseño, primero, debe lograr que se quede y, segundo, aspirar a que sea conducido por el contenido de la página para cumplir los objetivos de la misma. No es fácil, pero tampoco imposible…

¿Tú qué crees?

Wetransfer o cómo enviar archivos pesados fácilmente

Desde Segundaplanta utilizamos a menudo el servicio gratuito que nos ofrecen desde wetransfer.com . Este, te permite enviar al destinatario de correo que desees archivos de hasta 2 Gb . El archivo se sube a la nube y el remitente recibe un correo electrónico con una dirección desde la que se lo puede descargar antes de dos semanas. Está permitido enviar cualquier tipo de archivo y no necesitas registrarte. Pruébalo y nos cuentas, porque lo simple siempre funciona. 😉