diseño web – Marketing.es

Nociones básicas de diseño web …

Ya es por todos conocido que el sitio web corporativo es un elemento muy importante para la imagen de marca de la empresa. Y, como se citó en un post anterior, es una de las responsabilidades del community manager el conocimiento de ciertas cosas relativas al diseño de la web para favorecer el posicionamiento SEO en buscadores.

En primer lugar citaremos el logo corporativo. Ha de ser único y contundente, ya que va a ser la imagen visual de la empresa en documentos y elementos digitales.

También ha de citarse la importancia del color. Los colores del sitio web tienen que respetar ciertos estándares de armonia de colores y es aconsejable que se compaginen bien con los del logo.

La estructura de la web también es importante para que los usuarios sepan donde encontrar lo que buscan y conozcan en todo momento en que lugar del mapa web se encuentran.

Es recomendable que incluya un buscador si el catálogo de productos o servicios es muy amplio.

Deberá contener algún formulario de contacto para que los clientes puedan hacer sus comentarios o preguntar sus dudas.

Hasta aquí cosas de cierto componente de sentido común. Pero también existen ciertas cuestiones técnicas más especializadas.

Se trata de herramientas auxiliares que ayudarán a mejorar el sitio web

¿Cómo puede conocerlas un community manager?

Existen el mercado herramientas que ayudan a conocer las “tripas” de un sitio web y que hacen recomendaciones para su mejora.

Por ejemplo, Simply Testable hace un análisis de tu sitio web, mediante el sitemap.xml de tu web explora todas las páginas en búsqueda de errores de validación, falta de atributos alt, existencia del archivo robots.txt y unas cuantas cosas más.

RANKS.NL analiza en profundidad un sitio web: elementos, enlaces salientes, enlaces entrantes.

Metricspot analiza el grado de optimización de tu sitio web …

WOOrank realiza un análisis profundo de un sitio web, y sugiere las mejoras.

Herramientas seo chat para ayudarte a posicionar tu sitio web en los buscadores.

SEO SiteCheckup informa sobre diversas características de un sitio web: estadísticas de página, de datos, metatags, etc

GTmetrix analiza la velocidad de carga de un sitio web …

Y muchas herramientas más … aunque es de justicia decir que, sí o sí, un community manager que se precie debe conocer la herramienta más práctica de todas: Google Analytics, la más importante para todo lo relativo a métrica y analítica web. Pero eso ya será motivo de un próximo post.

Comparto mi tablero de Pinterest sobre diseño web.

Saludos, aporta tus comentarios si lo deseas …

¿Te han parecido interesantes estas herramientas web?

Una web manejada únicamente por voz

En una sociedad cada ves más visual, las palabras han quedado apartadas a un segundo plano. Dando la vuelta a este concepto, la empresa de producción de audios “Croacia Audio” ha decidido prescindir de ellas para centrarse en lo que mejor saben hacer: mostrar su contenido web a través de un sistema de voz.

[youtube http://www.youtube.com/watch?v=3I1I_MmnGGE]

Sólo sonido. Eso es lo que te encontrarás al entrar en la web de esta empresa. El usuario navega por el site interactuando a través del micrófono de su ordenador, únicamente por el sistema de voz. La web ha sido creada por la agencia de Brasil Loducca, desde la que únicamente se puede entrar utilizando Google Chrome.

Activa el micrófono de tu ordenador y pruébalo. Hemos de decir que engancha.

Visto en ADWEEK

Usabilidad en diseño web (pequeños apuntes parte 2)

En el anterior post os hablé un poco sobre la importancia de la usabilidad en diseño web y de 5 aspectos que se debrían cumplir para que una página web o app sea “perfecta” en este aspecto: Los 5 aspectos son: rapidez, sencillez, indexabilidad, compatibilidad y actualización constante.

Hoy os daré unos pequeños consejillos y truquillos por si estais un poco perdidos o teneis dudas de si lo estais haciendo bien:

El Color

Debemos vigilar el uso del color, saber cual es nuestro target u objetivo. Seguramente no usarías la misma paleta cromática si te vas dirigir a un público adulto (tendencia a los colores oscuros/serios) que a un público infantil (tendencia a una paleta de colores más vivos)

Diferenciaos, destacad, los dispositivos móviles son un pequeño escaparate y nosotros cada vez tenemos menos tiempo (y paciencia) así que o nos ven o no existimos.

La tipografía

Actualmente se puede “jugar” con la tipografía casi al mismo nivel que se hace en el diseño impreso, pero si tienes dudas y quieres ir a lo seguro la tipografía “Verdana”, y otras tipografías “sin serifas” son las que consiguen una lectura más rápida.

Así mismo el uso de negritas para destacar ciertas palabras o frases del texto ayudará ya que Google valora destacar texto concreto. Pero no abuses.

El color del texto

Lo ideal para la legibilidad es el uso del contraste del texto color negro sobre fondo blanco. Pero muchas veces este alto contraste puede provocar “vibraciones” en la lectura en pantalla por lo que para evitarlo se puede poner un negro al 5% para el fondo.

Frases cortas

Una página web NO es un libro, sé directo. Saber explicar a qué te dedicas o cuál es tu negocio en pocas palabras es signo de que sabes perfectamente qué ofreces o a qué te dedicas. Hay que tender hacia las frases cortas ya que los usuarios “usan cortos tiempos de atención” por lo que si se muestra un texto farragoso seguramente les ahuyentaremos.

Las imágenes

A todos nos ha pasado: estas buscando un hotel para tus vacaciones y cuando eliges uno y vas a la galería de imágenes te encuentras con una imagen minúscula donde se ve una mesilla y la lamparita de noche… de repente ya no te fías de ese hotel… te preguntas qué oculta y te genera desconfianza. Bien, pues no hagas lo mismo y huye de las imágenes predeterminadas de apretones de manos y gente con corbata. Muestra tu oficina o lugar de trabajo, eso dará sensación de transparencia.

Usa imágenes grandes ya que reciben más atención y se apreciarán claramente los detalles y la información.

Lo aconsejable es que sean sencillas, limpias y amigables.

Los botones/menú

Diseño: Tendremos que dedicarle tiempo puesto que suponen el correcto uso de nuestra aplicación o página web.

Ubicación y color: botones que aparecen y desaparecen, que flotan o cambian de color… NO, no y no. Busca la ubicación ideal (suele ser arriba o en un lateral) y ya no los muevas de ahí, si quieres que algo baile que lo hagan tus pies.

Tamaño: diseñaremos los botones con un tamaño que podamos pulsarlos con la mayor comodidad posible y que sean bien visibles y legibles.

Espacio en blanco

No es necesario ni aconsejable llenar todos los huecos y esquinas de la página, los sitios con demasiado contenido tienden a ser molestos e incluso pueden llegar a dar la sensación de ofrecer algo fraudulento.

No recargues tu página o app con fondos que no permitan la correcta visualización de la información central, que nada desvíe la atención de lo verdaderamente importante: El contenido.

Deja espacios visuales limpios para no agobiar al usuario y provocar su abandono.

Como se suele decir en diseño:

¡Dame aire!

Beneficios de la usabilidad

1- El usuario (nuestro potencial cliente) sabe usar nuestra app o página y no necesita que le ayudemos a entender nada. ¡Bien hecho!

2- Como la entiende perfectamente esta más satisfecho y cómodo, lo que se traduce en: me gusta como funciona así que vuelvo.

3- Como nuestro usuario esta a gusto y vuelve por nuestra web aumentan las probabilidades de que compre o contacte contigo.

4- Todo lo anterior provoca la optimización de los costes de diseño, rediseño y mantenimiento. Vamos, que te ahorras dinero haciendo bien las cosas desde el principio.

Y Todo esto: Mejora la imagen y el prestigio de tu negocio, empresa o app.

Usabilidad en diseño web (pequeños apuntes parte 1)

Usabilidad: Se refiere a la facilidad de uso/interacción y comprensión de una página web/ app por parte del usuario, lo cual se traduce en: “mi site lo entiende todo el mundo y hacen lo que yo quiero que hagan, que normalmente es acudir a la zona de contacto o comprar”.

Para que esta usabilidad sea perfecta (o por lo menos sea lo mejor posible) tendremos que cuidar varios aspectos que pueden hacer que nuestra página o app sea todo un éxito o al contrario… que no hablen tan bien de nosotros…

1.-Rapidez

La carga de la página debe ser lo más rápida posible. Cada vez vamos más acelerados en todo y el uso de dispositivos móviles para navegar hace que este tiempo de carga sea crucial.

2.-Sencillez

Leer un libro es muy sencillo, paso una página y en la siguiente hay más letra, ergo sigo leyendo. Aplica este principio a tu web, no obligues al visitante a realizar caminos raros y no abuses de animaciones e intros, esto puede aburrir y cansar la vista. No olvides que estamos ante una pantalla.

3.-Indexable

Los motores de búsqueda buscan el texto real. No prestan ninguna atención a los gráficos y al código de programación (como el Javascript). Como en (casi) todo, el contenido legible es lo que hará que tu web sea más o menos relevante.

4.-Compatibilidad

Los sites necesitan ser compatibles con todos los navegadores y ordenadores para su fácil usabilidad. El uso de Flash ya no es una opción y hoy en día con HTML5 y el CSS3 el terreno de la creatividad dentro de la web esta más que cubierto.

5.-Actualiza (¡¡¡Esto es muy importante!!!)

Seguro que más de una vez has entrado en una web para hacer un pedido o contratar un servicio y has dudado de si eso “sigue vivo” … es probable que te dé la sensación de que tardarán en responderte y muy probablemente acabarás buscando otra página donde creas que te van a dar un servicio más inmediato.

Para que estos 5 aspectos se cumplan ( o por lo menos nos acerquemos) os daré algunos consejillos que son “sota, caballo y rey” en el plano del diseño. Pero esto ya será en el siguiente post.

Infografía: Diseño print vs Diseño web

¡Hola de nuevo! Hoy os traigo una infografía que he realizado inspirada en mi trabajo diario y en las dudas que me han planteado algunos clientes a lo largo de mi experiencia. También puede ser útil para aquellos que estáis estudiando diseño y no tenéis muy clara la diferencia entre uno y otro o no sabéis qué aspectos hemos de tener en cuenta a la hora de diseñar para cada uno de estos soportes.