INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 Actividad 3: 10 Consejos para Diseñar una Buena Landing Page1 13 Enero 2015 | Diseño Web Nos centraremos en todas las cosas que debes hacer con el fin de crear una página de aterrizaje que reciba todos esos clics que estás esperando. Manténlo en una página Una página de aterrizaje debería ser sólo eso: una página. Esto no debe ser confundido con un mini sitio con más páginas y elementos que harán de tu landing page algo más complejo y con menos probabilidades de ser útil. Escribe “Llamados a la acción” claros Conseguir esos clics depende de varias cosas, pero un llamado a la acción claro, que vaya al grano y sea atractivo es la clave. Puedes leer más sobre cómo perfeccionar tus Llamadas a la Acción, aquí. Agrega botones que llamen la atención Mientras las llamadas a la acción proporcionan el texto, los botones proporcionan el impacto visual. Lograrás que más personas vean tus llamadas a la acción con botones que serán como un imán para el mouse del visitante. No querrás dejar ninguna duda de que tu botón es 100% clickeable. Trata de añadirle un toque interactivo a tu botón de llamada a la acción utilizando un efecto atractivo como los que puedes conocer aquí. 11 http://es.wix.com/blog/2013/10/mi-primer-sitio-web/ 1 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 Evita el desorden Evita agregar demasiadas imágenes, texto, cajas, botones, iconos, imágenes prediseñadas, videos, etc. en el pequeño espacio que tiene una landing page. Entendiendo conceptos como el del diseño plano y el del espacio en blanco puedes crear un poco de magia, en cuanto a diseño web se refiere. Trata de mantener las cosas en el lado más mínimo y utiliza una jerarquía visual para tus elementos y mensajes más importantes. No utilices muchas fuentes Utilizar dos (o tres como máximo) fuentes es una obligación en el mundo del diseño web. Con tantas fuentes divertidas disponibles. Cualquier experto en branding te dirá que esto está prohibido. Sólo tienes que elegir fuentes que trabajen bien juntas para que te ayuden a transmitir tu marca y tu mensaje con precisión, y claro, que tengan que ver con la personalidad de tu marca. Que todos te puedan leer: texto legible Esas geniales fuentes que elegiste no servirán de mucho si nadie puede verlas. ¡No hagas que tus visitantes achinen los ojos! Asegúrate de revisar todo el texto en tu página de aterrizaje y de que sea fácil de leer. Una buena idea sería pedirle a un amigo que no conoce el texto que lo verifique por ti; si lo ves forzando la vista para entender lo que está escrito, debes tomar un rumbo diferente. Utiliza elementos visuales fuertes Si deseas transmitir un mensaje, será mucho más fácil hacerlo con algo más que solo con palabras. Transmitir un mensaje sólo con el texto es algo muy complejo en el mercado de hoy. La gente quiere obtener al menos la mitad de la historia a través de imágenes. 2 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 Agrega enlaces ancla Las páginas de largo desplazamiento son una gran tendencia en el diseño web de hoy en día. Sin embargo, sin el uso de enlaces ancla, es probable que frustres a más de algún visitante de tu página, y la frustración no funciona bien. Ten un encabezado fijo Esto puede ser una gran manera de mantener la coherencia en una página de largo desplazamiento. No importa donde una persona puede estar en tu página de aterrizaje, siempre verán un encabezado fijo en frente de ellos. Esto significa, por supuesto, que debes poner tu información y mensajería más importante en este espacio fijo. Cómo incorporar el diseño plano a tu página web 16 Julio 2014 | Tendencias Aunque te suene extraño al oído, el término de “diseño plano” es una poderosa tendencia del diseño web de hoy en día, y claro, tiene motivos suficientes para serlo. El diseño plano se basa en la estética de dos dimensiones. Para dar un ejemplo, en el diseño web no plano, los botones suelen tener un aspecto 3D. Para el diseño plano lo que se busca es lo contrario, dependiendo en gran medida de gráficos y diseños simples. 3 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 ¿Cuáles son los beneficios del diseño plano? Hay varias razones que explican el aumento del diseño plano en los últimos años. En primer lugar, es práctico: Los sitios web planos se cargan más rápido que los sitios web que cuentan con animaciones y gráficos complejos. Otra razón es que el diseño plano se puede ajustar fácilmente a diferentes tamaños de pantalla. Con los smartphones ganando más y más terreno como herramientas de navegación web, esta es una gran ventaja para los propietarios de sitios web dirigidos tanto a usuarios situados en oficinas como a aquellos que se mueven por la ciudad. Una tercera razón se relaciona con la estética de diseño plano. Los diseños simples y fáciles de usar son el sello distintivo de diseño plano. Muchos diseñadores y usuarios se sienten atraídos por esta simplicidad y lo prefieren a los diseños con más parafernalia. Una clara indicación de esta preferencia fue la decisión de Apple de abandonar el diseño iOS de la vieja escuela y adoptar un aspecto más limpio. Cómo utilizar el “diseño plano” en tu página web Usar diseño plano puede ser una gran manera de mostrar a tu público que eres parte de las tendencias actuales y que entiendes y aplicas las nuevas convenciones de diseño. Éstos son algunos pensamientos que debes tener en cuenta para asegurarte de que estás recorriendo el camino correcto: 4 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 1. Elige fondos simples: olvídate de las imágenes fuertes o las imágenes con patrones de ladrillo. En el diseño plano, es necesario apegarse a los colores lisos, suaves o a los patrones de colores muy sutiles. 2. Abandona los efectos: olvídate de los degradados y de las transiciones animadas. El diseño plano tiene que ver con evitar cualquier cosa que pueda añadir dimensiones, profundidad o un sentido de movimiento al diseño de tu página web. 3. Muestra íconos: el diseño plano generalmente implica íconos, debido a que ellos funcionan bien con el dogma de una experiencia de usuario sencilla y ágil. Integra los íconos en tu diseño, pero asegúrate de que sean claros y fáciles de entender. 4. Juega con formas: las formas también son populares en el diseño plano. Los círculos, cuadrados y líneas no se utilizan sólo para mejorar el diseño, sino también para crear una división clara de los contenidos y una jerarquía visual que ayuda a los espectadores a entender la estructura de la página. 5 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 5. Considera el uso de colores brillantes y claros: La paleta de colores del diseño plano es fresco, ligero y alegre. Los rosados, azules, verdes y amarillos son muy comunes en este tipo de diseño. Sin embargo, los colores deben ser utilizados escasamente – no más de 2 o 3 en una misma página. 6. Crea una navegación básica: Los menús de navegación, los botones y los enlaces deben verse simples. Retira efectos como sombras o reflejos de tus elementos de navegación. Muy a menudo, el diseño plano utiliza simples cajas como botones y hasta diseños aún más minimalistas, utilizando nada más que el texto en si mismo. ¡Prueba y cuéntanos cómo te va! 6 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS INSTITUCIÓN EDUCATIVA CENTRO FORMATIVO DE ANTIOQUIA - CEFA TÉCNOLOGÍA E INFORMÁTICA 2015 7. Enfatiza la tipografía: Con el diseño plano, las palabras y el texto en tu sitio web obtendrán sus 15 minutos de fama. Este estilo fomenta un uso audaz e innovador de la tipografía porque percibe las letras y caracteres como un elemento protagónico del diseño. 8. Utiliza las plantillas especialmente para “diseño plano”: utiliza estas plantillas para crear tu sitio web y podrás ahorrar tiempo y esfuerzos innecesarios: 7 Elaborado por Luz Dary Cano Blandón CEFA 80 AÑOS