Category Archives: Diseño Web

Cursos online gratis para crear tu página web desde cero

cursos Desarrollo Web Diseño Web Educación educación online formación Programación Trending
Cursos online gratis para crear tu página Web desde cero

¿Quieres diseñar y lanzar tu propio blog, plataforma o medio de comunicación desde cero pero no sabes cómo? Recopilamos una serie de los mejores cursos online gratis para crear tu página web paso a paso.  Si quieres sentar los cimientos de tu proyecto de página web y crearla desde cero, tienes numerosos recursos a tu […]

Powered by WPeMatico

Published by:

Motivos usuales para decidir crear un sitio web

Aunque crear un sitio web puede ser sencillo al hacerlo mediante una plataforma especializada o simplemente averiguando un poco más sobre el proceso para selección de dominio y hosting, tal vez aún te preguntes por qué deberías tener un sitio web propio o para tu marca. En este artículo te mencionamos algunas de las razones por las que empresas y personas deciden crear un sitio web propio.

Para generar presencia en línea

Una de las principales razones por la que una empresa decide crear un sitio web es porque es uno de los primeros pasos para generar una presencia en línea. En la actualidad, incluso pequeñas y medianas empresas pueden crear un sitio web ya que los costos de dominio y proveedor de hosting son bastante accesibles. Adicionalmente, pueden optar por utilizar gestores de contenido y comprar temas que pueden personalizar rápidamente si desean lanzar su sitio web en un menor tiempo. Estos gestores de contenido no solo poseen una gran variedad de temas en diferentes mercados en línea, sino que también cuentan con plugins que permiten extender la funcionalidad del sitio. De manera que, sin importar qué tipo de función sea necesaria en el sitio, probablemente pueden implementarla mediante plugins.

El sitio web puede ser el paso inicial para generar presencia en línea y posteriormente deberás invertir tiempo también en la publicación en redes sociales, pero sin duda alguna es una pieza importante de tu estrategia y no debería ser dejada de lado.

Para mostrar tus proyectos personales o por encargo

Si eres un fotógrafo, tipógrafo, desarrollador, ilustrador o perteneces a una carrera o campo creativo, entonces sabes lo importante que es tener un portafolio. Es probable que ya cuentes con uno en Behance u otra plataforma parecida. Este portafolio permite que tus clientes potenciales y otras personas relacionadas a tu carrera aprecien tus mejores proyectos, tanto por encargo como personales.

Aparte de tener un perfil en Behance, contar con un sitio web en donde puedas extender la información que has colocado en tu perfil y explicar detalladamente el proceso que has seguido para cada proyecto. Además, puedes añadir testimonios y darle tu propio toque al diseño del sitio. De esta manera, es más sencillo diferenciarse del resto, por lo que es recomendable optar tanto por un portafolio en plataformas como Behance y por un sitio web propio.

Para tener un medio de contacto directo

En la actualidad, trabajar a distancia no es un problema. Existen muchas herramientas que puedes utilizar para organizar conferencias, enviar archivos, programar tareas pendientes, etc. Sin importar a qué tipo de carrera o especialidad te dediques, existe la posibilidad de trabajar en línea.

Con un sitio web, no sólo das a conocer tu trabajo, sino que también le das la posibilidad a tus clientes de un medio directo para contactarte. En plataformas como Behance o incluso en redes sociales, es necesario que tengas una cuenta para poder enviar un mensaje a cierta persona. En cambio, en un sitio web puedes incluir un formulario de contacto, de esa manera, cualquier persona puede escribirte si quiere un presupuesto o está interesada en el tipo de proyectos que has realizado.

Para generar credibilidad

Un sitio web no solo puede ayudarte a mostrar tus trabajos o darte a conocer como marca, sino que también se puede utilizar como una herramienta para establecer credibilidad entre tu público objetivo. De por sí, un sitio web con un buen diseño genera confianza y da cierto sentido de profesionalidad, dos características deseables para cualquier experto que desee destacarse entre el resto. Sin embargo, para que los visitantes de tu sitio puedan reconocerte como un experto debes presentar de forma adecuada tus proyectos, así como otros componentes de credibilidad. Estos elementos pueden ser testimonios, lista de clientes reconocidos con los que has trabajado, estudios de caso, menciones en artículos impresos o en línea e incluso tutoriales y entradas de blog. Todos estas son piezas importantes para generar mayor credibilidad mediante tu sitio web.

Para tener control sobre el aspecto del sitio

Si bien tener un perfil en plataformas para portafolios en línea es una buena manera de presentarse como un profesional debido a la popularidad de ciertas plataformas. Y éstas cuentan con estadísticas básicas de vistas y valoraciones de proyectos, información básica sobre la experiencia profesional y diversos enlaces a redes sociales. Pero, al crear tu propio sitio web puedes generar en realidad una presencia de marca y tener control sobre el aspecto de tu sitio, tanto el layout como los colores y la tipografía. Todos los componentes de tu sitio web pueden ser modificados según tus preferencias y las características que hayas definido para tu marca.

Aunque se tiene aún mayor control cuando optas por contratar a un diseñador y desarrollador o hacerlo tú mismo si tienes conocimiento sobre el tema, existen ciertos temas WordPress que son bastante flexibles e incluso algunos que cuentan con una serie de preferencias para personalizar a fondo el aspecto del sitio web.

En conclusión…

Como ves, las razones para crear un sitio web son variadas, pero cada una de ellas igualmente poderosa dependiendo del objetivo específico de la empresa. En ciertas situaciones, el sitio web puede ser solo una pieza más de una gran estrategia de marketing, pero este hecho no implica que no se trate de un componente importante dentro de esa gran estrategia.

Este artículo Motivos usuales para decidir crear un sitio web ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by:

Usos efectivos de la ilustración en una interfaz web

Las imágenes son un recurso esencial en todo sitio web. Aunque existen ciertas páginas que posee un mayor volumen de contenido textual, las fotografías siguen siendo parte del contenido en un sitio web, sin importar el porcentaje en el que se encuentren. La razón principal por la que se emplean imágenes no es solo porque pueden captar la atención de los usuarios, sino que también pueden transmitir un mensaje de forma más rápida que un texto.

Emplear fotografías se ha vuelto una buena práctica común en toda interfaz, sin embargo, hay sitios web que optan por ilustraciones. Las ilustraciones dan a los diseñadores mayor libertad en referencia al estilo y los conceptos que se ven representados si desean realizar la ilustración desde cero.

En este artículo te mencionamos cuáles son los principales usos de la ilustración y cómo puede optimizar la experiencia de usuario.

A modo de bienvenida en la página de inicio

Es probable que un porcentaje considerable de tus visitantes lleguen primero a la página de inicio. En esta página se presenta brevemente el servicio o la empresa y se ofrece un resumen de los principales beneficios. En tiendas online se emplean para colocar promociones o productos de temporada que podrían captar la atención de los visitantes. El contenido que coloques en tu página de inicio dependen bastante de los objetivos que tiene la empresa.

Aunque es efectivo colocar una o más fotografías en la página de inicio, poner ilustraciones podría ser más efectivo si te dedicas a un campo creativo o artístico. No cabe duda que debes añadir ilustraciones si esa es tu profesión, pero aunque no lo sea también puedes agregarlas si deseas destacar tu creatividad o imaginación. Dependiendo del estilo, estas ilustraciones puede diferenciarte de los competidores y mejorar no solo la primera impresión que tienen los visitantes, sino también poder quedarte en su memoria por un tiempo más prolongado.

Para representar mascotas

Las mascotas son aquellos personajes que las marcas utilizan para crear una interacción más directa con los usuarios. Es usualmente esta mascota la que ofrece los primeros recorridos por la aplicación o plataforma, te guía por los tutoriales y te muestra consejos para que tu experiencia por la interfaz sea lo más sencilla posible.

No todas las empresas tienen la misma posibilidad de crear una mascota ya que es más adecuado para marcas que van dirigidas a un público joven o tal vez se caracterizan por ser divertidas o incluso creativas. Sin embargo, aquellas que sí tienen el poder para tomar esta decisión, pueden obtener grandes oportunidades si le asignan una personalidad apropiada a su mascota y la emplean de forma correcta.

Como es de esperarse, esta mascota puede ser un animal o persona, pero siempre se encuentra ilustrada en cada sección donde se ha designado, de acuerdo al estilo particular que se ha seleccionada para ella.

Para explicar procesos en tutoriales y destacar beneficios

Las ilustraciones, al igual que las fotografías, son elementos que sirven como apoyo visual al transmitir un mensaje. Las imágenes en general, como ya debes saber, son procesadas con mayor rapidez por el cerebro humano y por esta razón son un excelente recurso cuando se desea expresar una idea o concepto.

Ya que las imágenes son de gran ayuda para comunicar un mensaje, no es sorpresa que se empleen en tutoriales como material de apoyo para explicar las acciones que debe tomar el usuario. Los tutoriales presentan texto también, pero esta no es razón para negar el gran poder que presentan al ser empleados de esta manera. Gracias a las ilustraciones, el tutorial puede ser realmente interesante y agradable para los usuarios.

No sólo pueden ser un recurso de gran utilidad en tutoriales, sino también para explicar claramente los beneficios de un servicio. Muchas empresas emplean esta técnica en sus sitios web y utilizan iconos para representar las ventajas de sus productos o servicios. Por supuesto, también se utiliza el texto, pero las ilustraciones ayudan a reforzar el mensaje que se desea transmitir.

En pantallas de logros y premios

En ciertas aplicaciones o plataformas, contar con un sistema de recompensas o premios puede ser ideal para animar a los usuarios a seguir utilizando la aplicación. Se puede dar esta situación en plataformas dedicadas al aprendizaje, tiendas en línea e incluso videojuegos en donde se listan una serie de objetivos y se ofrecen medallas o trofeos virtuales por completar cada objetivo. Algunas de ellas pueden requerir mayor esfuerzo, por ejemplo, en una plataforma educativa el objetivo puede ser completar una unidad, mientras que en un juego se pueden ofrecer premios por ingresar a la aplicación diariamente.

Sin importar que tipo de sistema hayas utilizado, debes informar al usuario para que reclame su premio en la sección respectiva o en todo caso para que sepa que ha alcanzado un objetivo. En este tipo de mensajes, aunque se pueden colocar fotografías o iconos simples, también podrías optar por una ilustración si realmente se alinea a la imagen de la marca.

El hecho de ofrecer premios o informar sobre logros en una interfaz, da cierta satisfacción al cliente y permite conectar con él por un breve momento. Se trata de reconocer el esfuerzo de los usuarios y muchas veces desean compartir dicho logro con los demás mediante redes sociales, lo cual nunca está de más pues es un buen medio de promoción.

En conclusión…

La ilustración es una herramienta poderosa que permite fortalecer los efectos de tu interfaz si se utiliza con un propósito claro y de forma apropiada. Asimismo, te da mayor libertad creativa y es capaz de transmitir esta característica a los usuarios, así que si la creatividad es una peculiaridad de la marca o empresa, la ilustración puede reforzar esta característica en tu interfaz.

Este artículo Usos efectivos de la ilustración en una interfaz web ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by:

Patrones de navegación que son populares este año

Cada año trae una serie de tendencias en diseño web. A menudo solo nos fijamos en las tendencias que afectan a nivel estético como pueden ser las animaciones o nuevos estilos de diseño. Sin embargo, también se presentan tendencias en cuanto a la navegación y en este artículo exploraremos 5 de dichas tendencias que se mantienen vigentes.

Barras de navegación fijas

Esta barras de menú, como su nombre indican, siempre se mantienen fijas y visibles en la parte superior del navegador, el lugar común del menú en un gran número de sitios web. De esta manera, no importa en que sección o lugar del sitio web se encuentre el usuarios, siempre tiene a su disposición la barra de menú y puede ir directamente a cualquier otra sección que prefiera utilizando el menú.

Contar con la navegación siempre visible es una gran ventaja para los usuarios, especialmente si el desplazamiento vertical es extenso. Tanto en ordenadores como en móviles se puede utilizar esta técnica y puede ser especialmente apreciada en móviles (en donde el desplazamiento vertical puede ser más extenso que en los ordenadores) pues los usuarios no deben desplazarse hacia arriba en busca del menú si desean visitar otra sección del sitio web.

El uso común de estas barras de navegación es que no se notan claramente hasta que el usuario de desplaza hacia abajo. Es decir, se presentan como un menú, pero su fondo es transparente, de modo que se ve la fotografía o color que se emplea en la página de inicio. Una vez que el usuario se desplaza hacia abajo, el color de fondo de esta barra cambia y la navegación se hace más visible.

Mega menú

Este tipo de menú hace referencia a un menú desplegable que puede contener categorías, sub-categorías y otro tipo de enlaces, todo en un espacio. De tal forma que el usuario pueda acceder a cualquier sub-categoría sin necesidad de buscarla en otro menú desplegable. Puede ser particularmente útil en tiendas online, en donde incluso se pueden incluir imágenes de productos junto a elementos del menú como una forma de promoción.

Este tipo de menú es solo efectivo cuando se cuenta con un gran volumen de contenido y debes organizar todo en diversas categorías y sub-categorías. Su mayor ventaja es que permites al usuario acceder a diversas secciones del sitio mediante un par de clicks, lo que hace una diferencia mínima de segundos en comparación con otro tipo de menú, pero el usuario estará agradecido.

Su principal desventaja es que ya que contiene una gran cantidad de elementos puede ser abrumador para el usuario o incluso le puede costar encontrar el producto que buscaba si las categorías no se encuentran organizadas de forma apropiada. También es problemático trasladar este tipo de menú a dispositivos móviles pues ocupan demasiado espacio horizontal.

Barra de navegación vertical

La barra de navegación vertical, como su nombre indica, hace referencia a tomar parte del espacio en pantalla para colocar la navegación de manera vertical, un elemento bajo otro, a diferencia de la navegación común donde se colocan lado a lado.

Una gran ventaja de utilizar este tipo de navegación es que la barra de menú siempre se mantiene visible y a disposición de los usuarios. De manera que fácilmente el visitante puede ir a otra sección si así lo desea. Es una forma bastante práctica de presentar la barra de menú.

Esta barras se suelen utilizar cuando existen pocos elementos en el menú, aunque definitivamente se puede colocar más elementos de primer nivel que en una barra horizontal. Es recomendable que se utilice cuando la navegación es de un solo nivel, pues de lo contrario se podría crear una barra para desplazarse en esta zona lateral y este uso no es muy práctico.

Barra de navegación sin botones

Como su nombre indica, en este caso la barra de menú no contiene ningún elemento que luce como un botón, solo los textos de cada sección del menú. Dado a la posición en la que se encuentran, el usuario ya reconoce que se trata de la barra de menú y por lo tanto sabe que puede interactuar con dichos elementos, a pesar de que no existe ningún indicador. O mejor dicho, el único indicador en estos casos es la ubicación de estos textos y posiblemente el nombre de cada sección que en ciertos casos es común para muchas páginas.

Con este tipo de navegación se puede fusionar el menú con el fondo, lo que es particularmente útil en los pantallazos iniciales, donde deseas que el usuario preste toda la atención necesaria a la imagen y título que estás presentando.

Este tipo de menú puede ser bastante adecuado si estás creando algún diseño minimalista y solo posees colores planos como fondo en tu sitio, de manera que los elementos del menú son completamente visibles.

Sin ningún tipo de enlace

Aunque parezca imposible, este tipo de tendencia existe y se usa particularmente en diseños de una sola página, en donde el contenido es mínimo y va enfocado a un solo y único objetivo como puede ser las páginas de startups o aplicaciones que se encuentran en la Play Store y App Store. El usuario solo puede conocer sobre el producto en estas páginas, pero para descarga y utilizar la aplicación, debe hacerlo desde su mercado de aplicaciones respectivo.

Cabe destacar que el diseño de una sola página no solo se utiliza para startups o aplicaciones y en algunos casos también se incluye un menú y al seleccionar alguna de las secciones la pagina inmediatamente se desplaza hacia abajo para que tengas acceso a esa zona especifica del sitio web. Sin embargo, es bastante común que se obvie el menú, los usuarios que ya tienen conocimiento sobre tecnología y se encuentran familiarizados con los dispositivos móviles ya están acostumbrados a este tipo de navegación. Aún así, siempre se coloca algún elemento reconocible en la parte superior, como el logo de la aplicación o marca, por ejemplo.

En ocasiones el menú se encuentra en la parte lateral derecha, pero sin ningún tipo de texto, solo círculos uno debajo de otro que el usuario puede seleccionar para ir a la siguiente sección de la página.

En conclusión…

Existe otros patrones de navegación, pero solo hemos mencionado algunas de las tendencias que se mantienen vigentes este año. Todos los patrones de navegación son bastante populares así que es probable que los hayas visto en diversas páginas web. Algunos de ellos tienen mayor tiempo de vigencia, mientras que otros se popularizaron con la llegada de los dispositivos móviles. De cualquier manera, cada uno de ellos tiene una ocasión específica de uso que debes considerar si en algún punto deseas aplicarlos a tu propio sitio web o a algún proyecto por encargo.

Este artículo Patrones de navegación que son populares este año ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by:

¿Qué son las tipografías de colores y cuál es su uso adecuado?

Las tipografías de colores es una técnica de diseño actual, aunque su popularidad aún no es muy destacable en comparación con otras tendencias. Sin embargo, hay diseñadores web que deciden “arriesgarse” al tomar esta ruta y logran resultados positivos. Esta situación se da, tal vez, porque en principio no hubo ningún riesgo pues se ha empleado este tipo de fuente con un propósito específico.

En este artículo te contamos un poco sobre las tipografías de colores y cómo deberían ser empleadas en tu proyecto de diseño web.

¿Qué es exactamente una tipografía de colores?

Las tipografías de colores hacen referencia a aquellas que contienen su propia combinación de colores, a menudo, cada carácter es de un color o incluso parte de un bastón posee un color diferente. Asimismo, también es común que se empleen transparencias, gradientes e incluso texturas. No necesariamente se emplean todos estas técnicas de diseño al mismo tiempo, pero sí que son tipografías vistosas.

Estas fuentes suelen ser desarrolladas mayormente con propósitos experimentales, por lo que es bastante probable que se incluyan paquetes que contienen archivos vectoriales o imágenes en mapa de bits que podrían ser más pesados que un archivo de fuente común, particularmente para las imágenes en mapa de bits.

Usualmente para estas coloridas fuentes se emplea el formato OpenType, a pesar de que existen otros formatos disponibles para Windows y Apple. Aún no existe un formato que se considere el estándar para estas fuentes, lo que definitivamente puede ser una desventaja al trabajar con tipografías de este estilo en la web.

¿Realmente se pueden utilizar las tipografías de colores en proyectos de diseño web?

Emplear una fuente con las características previamente mencionadas parece ir en contra de todos los principios del buen diseño web y selección de tipografías. Sabemos que es muy común valorar una fuente por su legibilidad y esta es una acción totalmente válida pues el mensaje debe ser transmitido con claridad.

A pesar de las prácticas de diseño y las técnicas para selección de fuente comunes, estas coloridas tipografías tienen un espacio en el diseño web. Eso sí, son ocasiones escasas en las que el uso de estas fuentes puede ser realmente efectivo y estar justificado, pero si se realiza un diseño adecuado, podrás captar la atención fácilmente mediante la tipografía. A continuación, te mencionamos algunas de estas situaciones excepcionales:

  • Para destacar alguna palabra corta
  • Para añadir un elemento parecido a un icono o logo
  • Como letra capital que inicia un bloque de texto
  • Para destacar los títulos en un diseño minimalista
  • Para destacar una palabra específica en un bloque de texto
  • Cuando el diseño en general es simple
  • Cuando te enfocas en la tipografía en tu diseño
  • Cuando el proyecto requiere una forma inusual de captar la atención del usuario

Así como existen ocasiones especiales de uso de estas fuentes, también hay situaciones en las cuales deberías considerar su uso como vetado. Te mencionamos cuáles son para que las tomes en cuenta y evitas utilizarlas en estas situaciones particulares:

  • En conjunto con imágenes o fotografías como fondo
  • Con fondos que poseen texturas visibles, videos o simplemente contienen diversos elementos
  • En toda la extensión de un largo bloque de texto
  • En conjunto con otras técnicas de diseño como animación. El color y forma de estas fuentes es suficiente para causar un impacto visual
  • En conjunto con otras fuentes que poseen un diseño particular o experimental

Como ves, el objetivo de esta técnica es captar la atención de los visitantes, pero para ello se requiere que se tenga un diseño limpio, con un fondo plano para incrementar el impacto visual que tienen estas fuentes en el los usuarios. Existen limitadas ocasiones de uso para estas fuentes, pero podrían ser de utilidad en alguno de tus proyectos.

Una tendencia que tiene espacio para crecer

Las tipografías de colores son un elemento que recién ha comenzado a ganar terreno en el diseño web, a pesar de la falta de un estándar. Para este tipo de fuente, existen 5 posibles formatos que podrían emplearse, los cuales mencionaremos a continuación:

  • SBIX: Versión de mapa de bits con compatibilidad nativa en Mac OS e iOS
  • CBDT: Versión de mapa de bits con compatibilidad nativa en Android
  • COLR: Versión en vectores con compatibilidad nativa en Windows 8.1 y superiores
  • SVG: Versión en vectores y mapa de bits
  • OpenType SVG: Versión en vectores y mapa de bits que permite el uso de formas en SVG para fuentes de tipo OpenType

Tanto Adobe como Mozilla han decidido optar el formato OpenType SVG para este tipo de fuente. De esta forma, una fuente OpenType puede contener caracteres en formato SVG. Este formato permite que se puedan colocar gradientes y colores múltiples en un solo carácter, al mismo tiempo que pueden ser indexados y editados.

A pesar de estas increíbles propiedades del formato OpenType SVG, pueden no presentar compatibilidad con diversos programas, de manera que no se muestran coloridas cuando deseas editarlas. Por el contrario, se muestra de un solo color, como es usual con todas las fuentes. Pero sí puedes cambiar el color, ya que es una fuente OpenType.

Ya que importantes y reconocidas empresas están adoptando y creando un formato, es posible que se desarrolle un estándar y por esta razón las tipografías de colores todavía son una tendencia que puede expandirse, a pesar de no ser muy popular de momento. Una adopción mayor y compatibilidad de los navegadores es necesaria para que esta tendencia se popularice.

Este artículo ¿Qué son las tipografías de colores y cuál es su uso adecuado? ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by:

Consejos prácticos para crear botones de llamada a la acción realmente efectivos

Los botones son elementos bastante comunes en una gran variedad de sitios web. Parecen ser un elemento pequeño, mínimo y simple en una interfaz web, sin embargo, existen ciertas características que todo botón debe tener. Asimismo, al ser un importante elemento que impacta directamente en la tasa de conversión, debes tomar ciertas consideraciones en cuenta. En este artículo te mencionamos algunos consejos prácticos para mejorar el diseño y crear botones de llamada a la acción efectivos.

Diferenciarlos como botones

Uno de los primeros pasos para diseñar botones es que debes hacerlos lucir como elementos interactivos. Es decir, que los botones luzcan como tal para que no haya duda de que se puede interactuar con ellos.

Los usuarios ya tienen ciertas expectativas en referencia a los botones de llamada a la acción, todas ellas en base experiencias previas con otras interfaces. Así que es recomendable seguir con los estándares de diseño de botones. Tanto la forma como la ubicación son indicadores para los usuarios de que es un botón lo que ven en la interfaz. Es usual que los botones sean rectangulares pues hay más espacio para escribir una frase de llamada a la acción. En ciertos casos los botones son largos, pero posee esquinas redondeadas.

Es importante también que al decidir la forma de los botones tomes en cuenta la coherencia pues ese mismo diseño debe mantenerse en todos los botones.

Añade frases claras

Aparte de considerar la forma de tus botones, la frase que se indica dentro del botón es importante. Sin esta frase, los usuarios no saben qué resultado esperar al hacer click sobre un botón.

La frase debe ser descriptiva y específica, debes evitar colocar “click aquí” pues aunque es un indicador de que deseas que el usuario haga click sobre el botón, no le estás informando sobre el resultado, es decir, no sabe exactamente para qué sirve el botón a menos que lea algún texto de apoyo que seguramente has incluido en alguna zona cercana al botón. Así que, en vez de emplear este tipo de frases opta mejor por acciones específicas como “Suscribirme ahora” o “Quiero una prueba gratuita”.

La frase debe ser directa, corta y simple. Así que debes analizar que verbo expresa de mejor manera la acción específica que deseas que el usuario realice.

Ubica los botones en un lugar visible

 

Un botón efectivo no solo se logra mediante una frase directa, mucho tiene que ver la ubicación del mismo. La práctica común suele ser colocar el botón en el primer pantallazo, de esta manera es visible no bien el usuario acceda a la página principal del sitio. Sin embargo, ¿qué tan común es que un nuevo visitante acceda a una prueba gratuita? Pueden existir usuarios que ingresen al sitio web y accedan inmediatamente a una prueba gratuita pues ya conocen previamente sobre el producto o servicio. Pero también se puede dar el caso de nuevos visitantes que ingresan a tu sitio web por primera vez para conocer más sobre el servicio o la plataforma.

Para poder complacer a ambos tipos de usuarios, la técnica que puedes utilizar es colocar el botón de llamada a la acción en el pantallazo inicial y también al final de la página de inicio. En sitios web que solo se han creado con el propósito de promocionar un servicio o plataforma, se suelen colocar estos botones tanto al inicio como al final de la página. Ya que no hay un gran volumen de contenido, puedes utilizar esta técnica.

Toma en cuenta el color

Los botones de llamada a la acción son elementos que deben captar la atención de los usuarios y diferenciarse del resto los elementos que forman parte del sitio web y con los que el usuario no puede interactuar. La ubicación, en cierto modo, logra este objetivo pues usualmente un botón se encuentra ligeramente separado del cuerpo de texto y se utiliza otra tipografía para escribir la frase de llamada a la acción. Pero aparte de considerar estas características, debes tener en cuenta además el color de los botones, más específicamente el contraste que presenta el botón con el resto de la interfaz.

Es este contraste el que permitirá destacar dicho botón. Así que considera los colores utilizados en la interfaz y emplea alguno que haga contraste con el fondo para tu botón. Existen ciertos estilos de botones que no tienen relleno, llamados botones fantasma. También puedes utilizar este estilo, solo recuerda que el color de texto para la frase colocada debe tener alto contraste con el fondo.

No olvides las micro-interacciones

Aparte de considerar la forma, frase y aspecto general de tus botones, debes tener en cuenta también cómo se dará la interacción con los usuarios. Como ya debes saber, los botones poseen diferentes estados. Cuando se encuentran visibles y pueden ser activados por los usuarios, cuando el cursor se posa sobre ellos, cuando son activados mediante un click y finalmente cuando el usuario deja de hacer click.

Usualmente se suele cambiar el color ligeramente para indicar que el cursor se encuentra sobre el botón. Por otro lado, cuando se hace click sobre el botón, también suele cambiar ligeramente de color y regresa a su color normal cuando el usuario ha dejado de hacer click. Este cambio de color es indicador de la interacción que ha tomado el usuario con este elemento en particular y como muchas otras micro-interacciones son esenciales para informar al usuario de forma visual.

En conclusión…

Aunque el botón es tan solo un elemento en un sitio web, no se puede negar su importancia y el impacto que posee su buen diseño en la tasa de conversión. Por esta razón, debes analizar las características que tienen los botones de llamada a la acción que decidas colocar en un sitio web.

Este artículo Consejos prácticos para crear botones de llamada a la acción realmente efectivos ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by:

Tendencias actuales en diseño de portafolios en línea

En la actualidad es común que no solo diseñadores web, sino personas de diferentes profesiones decidan crear su propio portafolio en línea. Algunos pueden ser fotógrafos, pintores, redactores creativos, escritores, directores de arte, animadores, etc. Mediante su portafolio en línea no sólo dan a conocer al mundo su trabajo, sino que también expresan su personalidad y sus intereses, y demuestran su pasión.

Estos portafolios en línea no solo deben expresar la personalidad de cada profesional, sino que también deben lucir modernos y ser funcionales. Por lo que es necesario tener en cuenta las últimas tendencias de diseño web. En este artículo te mencionamos las tendencias actuales en el diseño de portafolios en línea.

Diseño de una sola página

Los diseños de una sola página son populares no solo cuando se trata de portafolios. Esta técnica de diseño es bastante práctica cuando no se tiene un gran volumen de contenido. En general, un portafolio no tiene muchas secciones, las básicas son solo 4: Inicio, Sobre mí, Proyectos y Contacto. Adicionalmente, se pueden añadir secciones para estudios de casos, blog y testimonios, en el caso de agencias.

Pero si solo se tienen las 4 secciones básicas y hay un número mínimo de proyectos que deseas presentar, entonces puedes utilizar esta técnica para presentar tu portafolio.

Una gran ventaja de utilizar esta tendencia es que facilitas a los visitantes que echen un rápido vistazo a la página y esta es un hábito común de los usuarios al revisar un sitio web. Lo ven rápidamente hasta encontrar algún elemento que llame su atención en particular.

Enfoque en la tipografía

Aunque un portafolio en línea suele estar más centrado en la galerías e imágenes del proyecto, considerando tanto el resultado final como documentación de los bocetos u otras fases del proceso, existen ciertos diseñadores que han prestado mayor atención de la usual a la tipografía. Es que la tipografía puede ser un elemento visual poderoso si se utiliza apropiadamente. Dependiendo del tipo de fuente, el color, el tamaño y la alineación podrías lograr resultados realmente sorprendentes. No solo puedes obtener un impacto visual mediante la tipografía, sino que también puedes transmitir un mensaje textual de forma efectiva.

Para enfocarte en la tipografía no es necesario que presentes el texto en fondo blanco, también es posible que presentes imágenes, de hecho, ya que se trata de un portafolio en línea, es indispensable emplear imágenes. Así que utilizar fotografías de fondo o a un lado es totalmente válido, pero utilizas técnicas para que de alguna u otra manera el texto cobre mayor importancia.

Galerías poco convencionales

Pese a que es común que se opten por galerías organizadas en una cuadrícula, existen otras formas de presentar tus proyectos en tu portafolio en línea. Si bien la cuadrícula suele ser bastante práctica al momento de presentar vistas previas en tu galería pues se ve organizado y permite añadir un número considerable de imágenes lado a lado, existen otros métodos menos conocidos, pero igual de impactantes.

Un ejemplo de ello es presentar las vistas previas de los proyectos en imágenes que ocupen todo el ancho de la pantalla, una debajo de la otra. De esta manera, aunque no puedes coloca tantos proyectos en tu portafolio, cada uno de ellos capta la atención pues cuenta con mayor espacio. Una variación de esta misma técnica podría ser tomar un pequeño espacio de alto y hacer que el nombre del proyecto se active cada vez que el usuario pose el cursor sobre la fotografía.

Aparte de la técnica mencionada, existen muchas otras que podrías aplicar en tu portafolio en línea. Solo debes experimentar con este tipo de enfoque para lograr un efecto impactante.

Efectos sutiles

No hace falta una gran animación o efecto para captar la atención de tus visitantes. Es cierto que suele ser una estrategia común, pero los efectos sutiles son igualmente apreciados por los usuarios y en algunos casos pueden ser más efectivos pues permite que se logre una inmersión en la experiencia.

Estos efectos pueden ser transiciones simples al desplazarse hacia abajo como que el texto aparezca por uno de los lados y desaparezca de la misma manera. Tal vez ni es tan llamativa como una animación completa o video como fondo en la página de inicio, pero en ciertos casos puede ser igual de efectiva.

Así que antes de emplear animaciones llamativas, pregúntate primero si efectos pequeños pueden cumplir el mismo objetivo e incluso lograrlo de forma más eficiente. Particularmente si el sitio web se identifica con el minimalismo u otra corriente en donde la simpleza es lo más importante.

Animaciones en la página de inicio

A pesar de hemos mencionado que puede se runa buena idea optar por efectos sutiles en vez de animaciones, en ciertos casos las animaciones pueden ser adecuadas. Por ejemplo, si se trata del portafolio en línea de un experto en modelado 3D o un animador, ya sea que trabaje en 2D o 3D. Debido a su propia línea de trabajo es bastante obvio que querrá añadir animaciones que reflejen su experiencia.

Así que en estos casos, añadir animaciones en 2D o 3D tiene muchos sentido. El visitante sabe que estas animaciones no solo se añaden para tener un factor sorpresa, sino que se relacionan con el tema del portafolio en sí.

También puedes añadir animaciones en los portafolios en línea de diseñadores de experiencia de usuario o aquellas personas que se identifican con el movimiento o dinamismo. Solo recuerda que debe existir un propósito claro para estas animaciones, así que pregúntate cuál es este objetivo antes de añadirlas.

En conclusión…

Como ves, muchas de las tendencias mencionadas en este artículo pueden ser aplicadas al diseño web en general, pero algunas de ellas cobran más sentido cuando se trata de portafolios en línea, como el hecho del diseño de una sola página, por ejemplo. Ya que el volumen de contenido es mínimo, emplear este tipo de diseño puede ser bastante efectivo y permite que el portafolio no luzca vacío o incompleto. Así como esta tendencia, cada una de ellas puede ser particularmente efectiva en el diseño de portafolios en línea, pero debes utilizarlas con un propósito específico.

Este artículo Tendencias actuales en diseño de portafolios en línea ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by:

Elementos con los que puedes optimizar la tasa de conversión de tu tienda online

Una tienda en línea tiene componentes básicos que posee todo sitio web, así como algunos especiales y otros que simplemente cobran más importancia cuando se trata de realizar compras en línea. Incluso si decides no diseñar tu tienda en línea desde cero y optar por un gestor de contenidos y un tema que puedas personalizar, debes asegurarte que este tema posea todos los elementos necesarios para tu tienda. En este artículo te mencionamos cuáles son esos elementos que pueden optimizar tu tienda en línea.

Diseño optimizado para móviles

Un diseño optimizado para dispositivos móviles se ha vuelto un estándar en la actualidad. Es que muchos usuarios deciden acceder a internet desde estos dispositivos, ya sea porque no tienen su ordenador o portátil a la mano o simplemente porque lo prefieren y lo consideran más cómodo. Así que no se puede descartar del todo la posibilidad de que usuarios accedan a una tienda en línea desde un dispositivo móvil. Incluso si no completan el proceso y solo guardan los artículos que les agradan para comprarlos más tarde desde su ordenador, debes asegurarte que el diseño se encuentre optimizado para dispositivos de diversos tamaños.

La respuesta más popular a la optimización para móviles suele ser el diseño responsive, pero existen otras opciones disponibles para ti, cada una con sus ventajas y desventajas. Averigua sobre cada una de ellas y elige la que sea más adecuada según el sitio web que estás creando.

Tiempo de respuesta inmediato

El tiempo de respuesta de la página también es un estándar en cualquier tipo de sitio web. Sin importar si se trata de un blog, una página corporativa o una tienda en línea, los usuarios esperan una página que cargue rápidamente. De lo contrario, no pueden evitar preguntarse si hay algo malo con su conexión a internet o si la página a la que han accedido simplemente no funciona. Es probable que refresquen la página una vez para verificar si es la conexión, pero después de esta segunda oportunidad abandonaran la página.

Verifica la velocidad de carga de tu sitio y asegúrate que la respuesta sea inmediata. Te recomendamos utilizar PageSpeed Insights de Google pues no sólo te indica si la velocidad de tu página es óptima, sino que te da recomendaciones para mejorar el tiempo de respuesta de tu sitio.

Navegación sencilla

El menú de navegación es el componente principal que utiliza el usuario para acceder a diferentes secciones y páginas dentro del sitio web. De por sí, el menú de navegación es importante en un sitio web y en una página con poco contenido puede ser bastante sencillo, aunque aún así debes ser cuidadoso. En una tienda online se deben considerar la categoría de productos para poder agruparlos de forma correcta. La estructura y organización se hacen mucho más relevantes en una tienda online, así que debes analizar atentamente si los productos están correctamente agrupados.

Otro punto a tener en cuenta sobre el menú de navegación es el número de niveles que tiene. Un menú de 2 niveles es común en tiendas online que poseen una gran variedad de productos e incluso pueden añadir un tercer nivel para ser aún más específicos sobre el producto. Aunque controlar este tipo de menú no puede ser tan problemático en ordenadores, el dilema se encuentra al trasladar ese menú a pantallas más pequeñas. En vez de utilizar tantas sub-categorías, puedes añadir filtros de búsqueda. De esta manera, mantienes el menú con un número mínimo de elementos y permites al usuario acceder a la categoría o productos específicos que desea ver mediante los filtros de búsqueda.

Proceso de compra simple y rápido

Aparte de la navegación, que es un elemento común en todo sitio web, existe un componente de toda tienda en línea que no se debe dejar de lado: la cesta de compras.

Mediante el menú de navegación el usuario puede encontrar los productos que quiere comprar y obtener mayor información sobre ellos. Una vez que ha decidido obtener el producto lo añade a su cesta de compra, usualmente mediante un botón CTA colocado en un lugar visible en la página del producto en cuestión. Sin embargo, que un usuario coloque uno o más productos en su cesta no implica una compra seguro. Es posible que se abandone el carrito de compra ya sea porque los precios de envío son demasiado altos, no se presenta la política de privacidad, los medios de pago no son adecuados para el usuario, etc. En muchos casos el abandono de la cesta de compra puede suceder porque le proceso en sí es demasiado complejo para el usuario. No implica que el usuario no lo entienda, sino que simplemente son demasiados pasos o limitaciones.

Inspecciona tu proceso de compra, desde la adición de productos a la cesta de compra, la selección de productos o modificaciones desde la página de compra y el proceso que finaliza la transacción. Verifica que estés informando al usuario sobre la orden que se va a procesar antes de finalizar el proceso para que éste pueda hacer cambios de ser necesario.

Política de privacidad

En una tienda online los usuarios comparten información privada para poder realizar compras. Así que la confianza que pongan sobre tu tienda es esencial. Debes asegurarte que se genere confianza y que cumplas con las expectativas de tu cliente en cuanto a temas de seguridad.

Colocar un enlace a la política de privacidad puede ser de ayuda para hacer entender al usuario que su información personal se encuentra segura y que no será utilizada o enviada a terceros. Asimismo, informar al usuario sobre la seguridad de la tienda en general puede ser una buena. Añadir certificados de seguridad puede ser una opción viable, así como añadir un protocolo seguro para garantizar la protección de datos de tus clientes.

Sección de Preguntas Frecuentes

Aunque el proceso de compra sea sencillo e intuitivo, es bastante probable que los usuarios tengan preguntas el respecto como el número de días en el que se realiza el envío, los medios de pago disponibles, el tipo de moneda que se aplica a los precios, si el envío está disponible de forma internacional, etc. Como ves, todas estas preguntas relacionadas al proceso de compra o funcionamiento de la tienda en línea son importante para tu cliente antes de comenzar siquiera a comprar. Deben tener todos estos detalles claros para asegurarse que la tienda en línea funciona como se espera. Se trate de un usuario que realiza compras en línea por primera vez o alguien más experimentado, es probable que tenga un par de dudas al respecto.

Organiza tu sección de preguntas frecuentes por categorías para que los usuarios puedan encontrar fácilmente la respuesta que estaban buscando.

En conclusión…

Añadir o revisar si todos los componentes y elementos mencionados en este artículo funcionan correctamente es parte importante de optimizar tu tienda en línea. Estos permiten que un usuario nuevo tenga una buena primera impresión sobre el negocio, actitud que puede hacer que regresen más adelante. De tal forma que aunque no necesariamente realicen una compra en la primera visita, si regresan más adelante se encuentran más cerca de completar una compra.

Este artículo Elementos con los que puedes optimizar la tasa de conversión de tu tienda online ha sido creado por el Blog Aula Formativa.

Powered by WPeMatico

Published by: