¿Estás buscando una forma efectiva de captar la atención de tus visitantes y convertirlos en clientes potenciales? El diseño de una landing puede ser la respuesta que estás buscando. En este artículo, exploraremos los fundamentos del diseño de una landing y cómo puedes crear páginas de aterrizaje efectivas que impulsen el éxito de tu negocio en línea.
En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el código explicado para que podáis hacer la vuestra.
En las web full screen, el contenido llena toda la pantalla del navegador, independientemente de la resolución que estemos usando, son responsive.
Son pantallas con un fuerte impacto visual, ideales para presentar un producto. El menú suele ser de hamburguesa y un icono en forma de flecha o ratón nos indica que la web continúa en navegación vertical.
El diseño full screen suele plantearse solo en el primer módulo de información, pasando luego a una web de navegación vertical, aunque también hay diseñadores que apuestan por hacer todos los módulos de contenido en full screen.
Vamos por partes:
1 BACKGROUND. IMAGEN DE FONDO
Es importante encontrar una imagen que no deje indiferente, que sea impactante y a ser posible «limpia», ya que sobre ella habrá texto, y cualquier detalle pequeño puede no verse. Además aconsejo meter un filtro que oscurezca un poco la imagen para ganar en legibilidad del texto que va encima.
En este ejemplo, he usado dos imágenes con formatos distintos para que veáis la diferencia. La primera (rosa) es vertical y la del segundo bloque apaisada. Si modificáis el tamaño de la ventana del navegador, veréis que el comportamiento de la segunda se adapta mucho mejor a todas las resoluciones desktop, y la primera funcionará mejor en las pantallas mobile.
Vamos al código CSS. Se trata de hacer que la imagen ocupe el 100% de la ventana del navegador:
Como decía antes, es conveniente oscurecer un poco la imagen de fondo para hacer más legible el texto, esto puedes hacerlo de dos maneras, la primera con photoshop o el editor de imágenes que suelas utilizar, la segunda forma de hacerlo es con CSS, le aplicamos a toda la capa un gradiente negro con una opacidad que iremos modificando según nuestra conveniencia, en este caso un 60%
2 FLECHA EN EL BOTTOM PARA CONTINUAR NAVEGACIÓN
En la parte inferior de la ventana de navegación, he colocado una flecha que con un movimiento suave vertical, indica que la navegación sigue más abajo. Además he puesto un enlace en la flecha para que al pulsar sobre ella muestre el segundo bloque, vamos a ver cómo se hace esto:
En primer lugar, en lugar de usar una imagen png para la flecha, usamos una fuente, de ese modo no se pixelará y será más nítida en cualquier resolución. Para ello usamos este icono.
En el código, podéis ver todos los parámetros de la flecha. Con translateY movemos la flecha 20px en vertical. La duración de la animación es de 0.7s y es un loop infinito.
A continuación os dejo el código, espero que os sea útil.
NOTA: coloca el visor en 0.5x para ver bien el efecto
See the Pen
LANDING FULL SCREEN by Omar Benyakhlef Domnguez (@gloobs)
on CodePen.
Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.
Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.
What is my screen resolution
Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!
COMPROBAR RESOLUCIONES
¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.
Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.
Ver y Descargar Efectos Input con CSS
Las tendencias de diseño web están en constante evolución. Las posibilidades técnicas ya no son un obstáculo, lo que invita a experimentar más y encontrar nuevas tendencias. Existen también tendencias que continuarán y que tomarán mayor peso como es el minimalismo y otras que se sumarán a la corriente popular como es el modo oscuro o «dark mode».
En 2018 tras un estudio, Google reconoce que el modo oscuro aumenta en un porcentaje muy alto el rendimiento de sus baterías, los colores predominantes que muestre nuestra pantalla influyen claramente en el consumo. En concreto, los colores azulados consumen más que los colores rojizos. Esta diferencia se acentúa más en el caso del blanco y el negro, el blanco es un color más brillante, consume mucho más que el negro, que es todo lo contrario.
Este estudio arrojó también que no en todos los móviles se producía el mismo ahorro, mucho más visible en los pixels y menor en los iPhone. En todo caso hablar de ahorro de batería ya es motivo suficiente como para que todas las apps más relevantes sacasen su modo nocturno y que todos corriésemos a instalar actualizaciones para disfrutar de la novedad.
Además al ahorro de batería se le suma el uso habitual de dispositivos de noche, en habitaciones poco o nada iluminadas en las que los blancos llega a hacer daño y el modo oscuro se convierte en un beneficio para la usabilidad.
Los diseños web en modo oscuro no solo se ven ultramodernos, sino que además impactan y son agradables a la vista. Los colores, fotos y elementos de diseño destacan más, usando colores oscuros.
Así pues, esto casi seguro de que una de las principales tendencias de 2020 será el diseño oscuro, centrado seguramente en el diseño de la interfaz de usuario, ofreciendo a los usuarios una opción para habilitar el tema oscuro.
El minimalismo, a menudo se subestima o se malinterpreta, no se trata de reducir el diseño a su forma más aburrida, ni tampoco significa usar un fondo blanco, el minimalismo consiste en la simplicidad y énfasis del contenido. Se trata de llegar al usuario con el mínimo peso posible, pero con el suficiente para darle lo que está buscando, a veces será más y otras menos. Nuestro objetivo es darle la mejor experiencia utilizando la menor cantidad de recursos, esa es la esencia del minimalismo.
Evidentemente no es lo mismo diseñar la portada de un periódico digital que una landing para el lanzamiento de un producto, cada caso nos obligará a recurrir a un número diferente de recursos mínimos.
Uno de los beneficios del minimalismo es que crea un diseño elegante y muy atractivo para el usuario. La distracción disminuye y la conversión aumenta.
Los diseños web minimalistas utilizan los elementos de diseños indispensables y lo distribuyen sobre un fondo neutro (espacio negativo) que haga resaltar eso elementos. Debemos crear un equilibrio agradable pero además transmitir el mensaje. La web de Google ya fue hace años un perfecto ejemplo de este minimalismo. En este caso en particular, un espacio blanco que ocupa la mayor parte de la pantalla, hace resaltar lo verdaderamente importante, la caja del buscador. No necesita más, pero tampoco menos. Fijaos como además separa las demás enlaces externos a la búsqueda en los márgenes de la pantalla y en un tamaño de fuente pequeño y con poco peso.
El pantallazo que veis sobre este texto pertenece a boundarysupply.com y hace exactamente lo mismo, tiene los elementos indispensables para su misión, y el mensaje es claro, y si os fijáis el diseñador ha desplazado a la izquierda el texto, de ese modo compensa el peso que provoca la chica (hacia la derecha) sobre fondo casi negro, el resultado es perfecto. Los enlaces salen de la escena principal colocándose en los márgenes de la pantalla, sin demasiado peso pero siendo perfectamente visibles para el usuario.
Según otro informe de Google, los usuarios de un sitio web tardan 17 milisegundos en formar su opinión. Cuanto más simples son las imágenes, más atraen al usuario. Estas imágenes deben ser llamativas, originales y de alta calidad. Estas imágenes son efectivas utilizándolas como elemento principal o como espacio negativo.
Con menos texto en la página, las imágenes grandes se colocan en primer plano y representan el foco principal de la composición. Veréis que en ocasiones el espacio negativo es un video, pero siempre muy sutil, para que siga cumpliendo su misión de hacer resaltar a la imagen o texto que está en primer plano.
En fin, veremos a ver qué nos depara el futuro, ojalá nos sorprenda gratamente 😉
Seguramente más de una vez habrás tenido que crear un gif animado transparente. El resultado es muchas veces desastroso, porque los bordes suelen pixelarse incluso a máxima resolución.
Existe desde hace tiempo una solución, aunque todavía no está muy implantada por culpa de las incompatibilidades con navegadores, el png animado.
El formato de archivo APNG es muy superior en todos los aspectos al gif animado. Soporta imágenes 24 bits y más de 16 millones de colores, mientras que el formato GIF, al soportar 8 bits, está limitado a 256 colores. La diferencia pues es enorme.
Además, el PNG animado, no sólo soporta la transparencia total, sino también la parcial (por capas).
Otra gran diferencia, es que mientras la velocidad máxima en un gif animado es de 10 frames por segundo, en un APNG, la velocidad es ilimitada. He creado esta animación básica, en los dos formatos, a la izquierda el APNG a 20 frames por segundo y a la derecha el gif animado a su máxima velocidad, 10 fps. La diferencia es notable.
Veamos qué sucede cuando le pedimos algo más a la animación, y metemos por ejemplo en lugar de un color plano, un degradado. A la izquierda el APNG y a la derecha el Gif Animado. Como podéis apreciar, al meter transparencia, el gif animado pierde mucha calidad y se pixela.
La duda principal es saber ¿qué navegadores soportan un png animado?. Firefox fue el primero en soportar este formato, pero hoy en día también es compatible con Chrome, Safari y Opera. Una vez más el problema nos lo encontramos con Internet Explorer o Microsoft Edge, que no reproducen este formato. ¿Para cuándo unos estándares de compatibilidad entre navegadores?. En estos casos la única solución que se me ocurre sería meter una imagen alternativa (gif animado) para cuando detectemos este tipo de navegador. Tenéis todas las compatibilidades en Can I use.
¿Solución?, detectar con una función el navegador y mostrar una imagen alternativa para aquellos que no son compatibles.
Si utilizas Photoshop, puedes utilizar el plugin apngasm.
Tienes varias herramientas gratuitas:
Así que esperemos que algún día los navegadores dejen de ir cada uno por su lado y confluyan en unos estándares que nos permitan no volvernos locos a la hora de diseñar y maquetar.
