por Omar Benyakhlef | Diseño Web, UI, Usabilidad, UX
El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla.
Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños desktop.
Tiene muchos detractores que alegan que ocultar accesos de contenidos perjudica la usabilidad, porque obliga al usuario a hacer un clic más, e incluso que es sólo un capricho de los diseñadores.
Personalmente, no puedo estar más en desacuerdo, os explico por qué.
Hace años quizás podría ser arriesgado, hoy en día cualquier usuario lo tiene perfectamente identificado, todos sabemos que ahí accionamos el menú.
En cuanto al hacer un clic más, creo que hay demasiado «gurú» que se ha aprendido un guión y ha dejado de lado el sentido común. La usabilidad efectivamente se ve favorecida cuantos menos clics necesites para acceder a un contenido, pero creo que tenemos que ver todo en conjunto y no pararnos en pequeños detalles.
En mis diseños siempre tengo en cuenta que el usuario haga los menos clics posibles para llegar al contenido que está buscando, pero tenemos que tener también en cuenta, que esta máxima de la usabilidad viene de cuando para pasar de una vista a otra tenías que cargar una nueva página, con una conexión lenta un solo clic podía suponer varios segundos de espera. Hoy podemos utilizar CSS por ejemplo para mostrar y ocultar ese menú, accediendo de forma instantánea a ese contenido. Así pues, no tengas miedo de lo que dice el «gurú», nadie se marchará de tu web por pulsar en la hamburguesa 😉
En cuanto a que el diseñador busca más la estética que la usabilidad, le pese a quien le pese, el diseño es fundamental sobre todo en la primera impresión, no hay nada más agobiante que una web con una barra repleta de enlaces, iconos de redes, banners,… Los espacios limpios también juegan un papel importantísimo en la usabilidad, una cabecera repleta de enlaces, produce más estrés que el tener que hacer un clic más para llegar a un contenido.
Al tener más espacio para mostrar los enlaces del menú, podemos distribuirlos de un modo que sean más legibles y más grandes que en un menú tradicional, ¿acaso el tamaño de letra no influye en la usabilidad?. Podemos meter textos grandes, acompañados de iconos, …. mil posibilidades que en una barra no es posible. Por supuesto que agradezco encontrarme un menú hamburguesa, incluso porque me apetece ver qué ha pensado el diseñador para sorprenderme.
Una vez acabado este alegato en favor de la hamburguesa, pasamos a animarlo, cosa que seguro que también leeréis por ahí que no es usable…
Aquí podéis ver varias muestras de animación. Simplemente copiad los códigos que necesitéis, es gratis 😉
See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.dark
Pulsa en los menús para ver la animación.
Si no podéis verlo bien, seguid este enlace.
por Omar Benyakhlef | jQuery, Usabilidad
Menú con jQuery y CSS
En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.
La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.
Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.
Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.
por Omar Benyakhlef | jQuery
Menú desplegable efecto 3D
Espectacular, mucho, ¿dónde colocarlo? eso ya es otra cosa…
El caso es que si quieres incorporar a tu diseño web un menú con efecto «persiana 3D», este es el código que necesitas.
Tanto el efecto de desplegar como el de plegar, simulan gravedad. Además, podemos colocarlo de frente o simulando profundidad, creando así aún más sensación de elemento 3D. La fluidez del movimiento es muy buena y eso le hace más real.
Estoy seguro de que más de uno lo va a tener en cuenta para su próximo diseño web, y sobre todo que a nadie dejará indiferente 😉
(más…)
por Omar Benyakhlef | CSS
El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.
La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.
Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.
Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.
A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.
(más…)
por Omar Benyakhlef | CSS, Trucos CSS
Menús con animación en CSS3 Gratis
Todo lo que antes era impensable en un diseño web, ahora es fácil con CSS3, y más si te ofrecen el código para que te lo descargues gratuítamente !!
Tympanus.net nos deja 10 ejemplos espectaculares para que hagas tu menú más atractivo para el usuario. Se trata de varios ejemplos que juegan con los tamaños y animaciones de fuentes, colores e iconos, seguro que encuentras el que andabas buscando !!.
por Omar Benyakhlef | Ajax, Mootools
SlideMenu con Mootools
Mootools es una de las librerías que más soluciones nos aportan en el diseño web. Su ligereza hacen que podamos hacer las webs más usables y vistosas.
En un post anterior, vimos cómo hacer un SlideMenu con CSS, esta vez el mismo ejemplo pero con Mootools, más fluido y con la posibilidad de añadirle más efectos. Podemos hacerlo tanto horizontal como vertical, activarlo con un clic o con un mouseover, modificar el ancho de expansión de las imágenes activas, dar efecto rebote a las aperturas, …
Pesa sólo 7,83 kb y necesitaremos la librería Mootools v1.2
Ver post completo y descarga en byScripts.info
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
Menús gratis en JQuery, Ajax, CSS,...
Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.
Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.
Podemos hacer «trucos» con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.
En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
Hacer un menú con CSS puede ser igual de vistoso que con cualquier otra aplicación pero con un añadido, es mucho menos pesado.
Gracias a las CSS conseguimos con una misma imágen hacer un rollover, simplemente con modificar las coordenadas de esta al ponernos encima. Un efecto que hasta ahora había que desarrollar con javascript o directamente en flash. Y como estas muchas más formas de hacer un buen menú con CSS.
En esta web podréis ver varios ejemplos de menús, tanto horizontales como verticales. También tienen ejemplos para diseñar galerías de imágenes, maquetar con columnas en CSS,…
dCSSLibray es una sección más de la imprescindible web Dynamic Drive. Una web en la que podréis encontrar cientos de códidos no sólo en CSS, también en Javascript, Dhtml, o Ajax. Desde hacer desaparecer textos en forma de acordeón con Ajax, a crear calendarios para formularios,…. mil formas de hacer tu web o blog más usable y vistoso.
Además se trata de una web muy usable aún sin dominar el inglés. Te indican el código que debes de descargarte, dónde copiarlo y cómo modificarlo.
Sin duda es una web de consulta obligatoria.
por Omar Benyakhlef | accesibilidad, Diseño de páginas web, Diseño para móviles, Diseño Web, Mobile, responsive, Usabilidad, UX
Actualmente la conectividad es omnipresente y los usuarios acceden a la web desde una multitud de dispositivos, el diseño web adaptable se ha convertido en una necesidad. Dentro de esta filosofía de diseño, surge un enfoque revolucionario: Mobile First (Primero Móvil), una estrategia que coloca la experiencia del usuario en dispositivos móviles en el centro del proceso de diseño. En este artículo, exploraremos en qué consiste el diseño Mobile First, sus beneficios y cómo implementarlo eficazmente.
¿Qué es el diseño Mobile First?
El diseño Mobile First es una metodología que prioriza la optimización de la experiencia del usuario en dispositivos móviles antes que en ordenadores de escritorio. Esto implica diseñar y desarrollar primero para pantallas pequeñas y luego adaptar el diseño a pantallas más grandes.
Beneficios del enfoque Mobile First:
- Mejora la experiencia del usuario (UX): Dado que cada vez más usuarios acceden a la web a través de dispositivos móviles, es crucial ofrecer una experiencia optimizada en estas plataformas. El diseño Mobile First garantiza que la interfaz sea intuitiva, fácil de navegar y rápida de cargar en dispositivos móviles, lo que conduce a una mayor satisfacción del usuario.
- Mejora el rendimiento y la velocidad: Al diseñar para dispositivos móviles primero, nos vemos obligados a simplificar el diseño y optimizar el rendimiento del sitio. Esto se traduce en tiempos de carga más rápidos y una experiencia de usuario más fluida, lo que a su vez va a mejorar el posicionamiento en los resultados de búsqueda.
- Fomenta un enfoque centrado en el contenido: Al comenzar con el diseño móvil, se hace hincapié en identificar y priorizar el contenido más importante para los usuarios. Esto promueve un enfoque centrado en el usuario, donde el contenido relevante se destaca y se presenta de manera clara y concisa.
- Facilita la adaptación a dispositivos más grandes: Diseñar primero para dispositivos móviles hace que sea más fácil adaptar el diseño a pantallas más grandes. Esto permite una transición fluida del diseño en dispositivos móviles a dispositivos de escritorio, sin comprometer la coherencia ni la calidad de la experiencia del usuario.
¿Cómo implementar el diseño Mobile First?
COMPRENDER LAS NECESIDADES DEL USUARIO
Antes de empezar, debemos conocer el comportamiento y las preferencias de los usuarios en dispositivos móviles para identificar las características y funcionalidades clave que deben incluirse en el diseño.
-
1. Contenido Relevante y Personalizado
Los usuarios móviles valoran el contenido que es relevante para sus intereses y necesidades. Prefieren experiencias personalizadas que les brinden información o productos que se alineen con sus preferencias y comportamientos anteriores.
-
2. Diseño Responsivo y Navegación Intuitiva
La navegación en dispositivos móviles debe ser intuitiva y fácil de usar. Los usuarios aprecian los diseños responsivos que se adaptan a diferentes tamaños de pantalla y dispositivos. Los menús de navegación simples y los botones táctiles grandes son preferidos por los usuarios móviles, ya que facilitan la navegación con los dedos en pantallas táctiles. Además, es crucial optimizar la velocidad de carga del sitio para garantizar una experiencia de navegación fluida y sin interrupciones.
-
3. Diseño Visual Atractivo
El diseño visual desempeña un papel importante en la atracción y retención del usuario en dispositivos móviles. Los usuarios prefieren interfaces limpias y atractivas que utilicen imágenes y gráficos de alta calidad para complementar el contenido textual. El uso de una paleta de colores atractiva y una tipografía legible mejora la estética general del sitio y facilita la lectura en pantallas pequeñas.
-
4. Contenido Multimedia y Experiencias Inmersivas
Los usuarios móviles disfrutan del contenido multimedia, como imágenes, videos y contenido interactivo, que enriquece la experiencia de usuario y captura su atención de manera efectiva. Las experiencias inmersivas, como los recorridos virtuales y las historias multimedia, son cada vez más populares entre los usuarios móviles que buscan contenido envolvente y entretenido.
-
5. Facilidad de Compartir y Acceso Social
La capacidad de compartir contenido fácilmente en redes sociales y plataformas de mensajería es valorada por los usuarios móviles. Los botones de compartir social integrados y las opciones para compartir contenido a través de aplicaciones de mensajería facilitan que los usuarios compartan contenido interesante con sus redes personales. Además, el acceso rápido a comentarios y reseñas sociales puede influir en las decisiones de los usuarios al interactuar con contenido en dispositivos móviles.
OPTIMIZAR EL RENDIMIENTO
Optimizar el rendimiento del sitio mediante la compresión de imágenes, la minimización de archivos CSS y JavaScript, y el uso de técnicas de carga progresiva para garantizar tiempos de carga rápidos en dispositivos móviles. Garantizar una experiencia de usuario rápida y fluida en dispositivos móviles es fundamental para el éxito de tu web. Además la rapidez de carga afecta directamente al posicionamiento en Google.
Las imágenes y los archivos multimedia pueden ralentizar significativamente la velocidad de carga de una página web en dispositivos móviles. Para optimizar el rendimiento, es importante comprimir y optimizar todas las imágenes y archivos multimedia para reducir su tamaño sin comprometer la calidad. Se pueden utilizar herramientas de compresión de imágenes y técnicas de codificación eficientes para minimizar el tamaño de los archivos y mejorar los tiempos de carga en dispositivos móviles.
Utiliza los svg para imágenes planas, es decir, para logos, iconos, y toda clase de imágenes que normalmente guardas como png. Esto hará que además de pesar menos, podrán adaptarse a cualquier tipo de pantalla sin pérdida de resolución.
PRUEBAS Y MONOTOREO CONTINUO:
Es fundamental realizar pruebas exhaustivas en una variedad de dispositivos móviles para identificar y corregir posibles problemas de diseño y usabilidad. Para ello sería conveniente probar tu diseño en diferentes terminales, pero como esto no siempre es posible, existen muchas herramientas que simulan el comportamiento de tu diseño en distintos modelos móviles, no son eficientes 100% pero se acercan mucho.
Además, también es muy importante tener feedback con el usuario , recopilar comentarios de los usuarios y utilizarlos para combprobar y mejorar continuamente el diseño.
El diseño Mobile First es una filosofía de diseño centrada en el usuario que puede mejorar significativamente la experiencia del usuario, el rendimiento del sitio y la capacidad de adaptación a dispositivos móviles. Al adoptar este enfoque desde el principio, los diseñadores y desarrolladores pueden desbloquear todo el potencial de la web moderna y ofrecer experiencias digitales excepcionales en cualquier dispositivo.
por Omar Benyakhlef | Diseño Web, responsive
El diseño responsivo es una filosofía de diseño web que busca crear experiencias de usuario óptimas en una amplia gama de dispositivos y tamaños de pantalla. En lugar de diseñar múltiples versiones de un sitio web para diferentes dispositivos, el diseño responsivo utiliza técnicas como rejillas fluidas, imágenes escalables y medios consultivos para adaptar dinámicamente el diseño y el contenido según el dispositivo del usuario. Esto garantiza que el sitio web se vea bien y sea fácil de usar, ya sea en un teléfono inteligente, una tableta, una computadora portátil o una pantalla de escritorio. Al adoptar el diseño responsivo, los diseñadores pueden crear experiencias coherentes y atractivas que satisfagan las necesidades de una audiencia cada vez más diversa y móvil.
En este post vamos a ver los puntos más importantes a tener en cuenta en un diseño responsivo.
DISEÑO PARA DISPOSITIVOS MÓVILES PRIMERO (Mobile-First)
El enfoque de «Diseño para Dispositivos Móviles Primero» es una estrategia de diseño que prioriza la creación de experiencias óptimas para usuarios de dispositivos móviles antes de considerar los de escritorio. Reconociendo la creciente prevalencia de los dispositivos móviles para acceder a la web, este enfoque se centra en la simplicidad, la velocidad y la funcionalidad en pantallas más pequeñas. Al comenzar con un diseño móvil, los diseñadores nos vemos obligados a tomar decisiones claras sobre qué contenido y características son esenciales, lo que a menudo conduce a interfaces más limpias y eficientes. Este enfoque también facilita la adaptación del diseño a pantallas más grandes, ya que se pueden agregar gradualmente características y elementos adicionales para mejorar la experiencia en dispositivos de escritorio. En última instancia, el diseño para dispositivos móviles primero ofrece una forma efectiva de satisfacer las necesidades de una audiencia cada vez más móvil y garantizar una experiencia de usuario consistente y satisfactoria en todos los dispositivos.
DISEÑO FLUÍDO Y FLEXIBLE
El diseño fluido y flexible es una técnica de diseño web que se centra en crear interfaces adaptables que se ajusten de manera dinámica a diferentes tamaños de pantalla y dispositivos. En lugar de fijar dimensiones absolutas, como píxeles, este enfoque utiliza unidades relativas, como porcentajes o EMs, lo que permite que los elementos de la página se expandan y contraigan según el tamaño del viewport del usuario. Esto garantiza una experiencia de usuario consistente y agradable en una amplia gama de dispositivos, desde teléfonos inteligentes hasta ordenadores de escritorio. Además de mejorar la accesibilidad y la usabilidad, el diseño fluido y flexible también facilita la adaptación del contenido a futuros dispositivos y resoluciones de pantalla, lo que lo convierte en una práctica esencial en el diseño web moderno.
GRÁFICOS VECTORIALES E ICONOGRAFÍA
La conveniencia del uso de gráficos e iconos vectoriales en el diseño web radica en su capacidad para adaptarse fácilmente a diferentes tamaños de pantalla sin perder calidad. A diferencia de las imágenes rasterizadas, que están compuestas por una cuadrícula de píxeles y pueden pixelarse al ampliarse, los gráficos vectoriales son representaciones matemáticas que conservan su nitidez y claridad independientemente del tamaño de visualización. Esto significa que los iconos y gráficos vectoriales pueden escalar suavemente para adaptarse a dispositivos de alta resolución, como pantallas Retina, así como a dispositivos más pequeños, como teléfonos inteligentes. Además, al utilizar gráficos e iconos vectoriales, los diseñadores web podemos reducir el tamaño de los archivos y mejorar el rendimiento del sitio, ya que estos elementos suelen ocupar menos espacio en comparación con sus contrapartes rasterizadas. El uso de gráficos e iconos vectoriales no solo garantiza una experiencia visualmente atractiva y consistente para los usuarios, sino que también simplifica el proceso de diseño y optimización del sitio web.
GRID LAYOUTS Y FLEXBOX
Los sistemas de diseño de Grid Layouts y Flexbox son herramientas fundamentales en el diseño web moderno, permitiendo a los diseñadores crear diseños complejos y flexibles con facilidad y precisión.
El Grid Layout ofrece una estructura de rejilla bidimensional, que permite organizar elementos en filas y columnas, proporcionando un control detallado sobre el diseño de la página. Esto permite crear diseños complejos y alineados con precisión, adaptados a una variedad de tamaños de pantalla y dispositivos.
Por otro lado, Flexbox es un modelo de diseño unidimensional que se centra en organizar elementos en una sola dirección, ya sea en fila o en columna. Flexbox es especialmente útil para diseñar componentes individuales y controlar su alineación, distribución y orden dentro de un contenedor.
Ambas herramientas son complementarias y se pueden usar juntas para crear diseños web altamente adaptables y responsivos. La combinación de Grid Layout y Flexbox nos brinda a los diseñadores una gran flexibilidad y control sobre la disposición y el diseño de los elementos en una página web, lo que resulta en interfaces de usuar
TIPOGRAFÍA ESCALABE
La necesidad de tipografía escalable en diseño web radica en garantizar una experiencia de lectura óptima y accesible para todos los usuarios, independientemente del dispositivo o tamaño de pantalla que estén utilizando. Utilizar fuentes web escalables significa seleccionar tipografías que se ajusten automáticamente al tamaño de la pantalla del usuario, manteniendo la legibilidad y la estética del texto en diferentes dispositivos.
La tipografía escalable no solo mejora la accesibilidad y la usabilidad del sitio web, sino que también contribuye a la coherencia visual y la identidad de marca.
IMÁGENES ADAPTATIVAS
Implementar técnicas como el elemento <picture> y el atributo srcset en HTML para proporcionar diferentes versiones de una imagen según el tamaño y la resolución de la pantalla del dispositivo. Así no tendremos que cargar imágenes muy pesadas escaladas, usaremos el tamaño justo con la consiguiente rebaja de peso y de tiempo de carga.
COMPONENTES REUTILIZABLES
El uso de componentes reutilizables en diseño web ofrece una serie de ventajas significativas tanto para diseñadores como para desarrolladores. Estos componentes son elementos de interfaz de usuario que se pueden utilizar en múltiples partes de un sitio web, lo que permite una mayor eficiencia y coherencia en el proceso de diseño y desarrollo.
Una de las principales ventajas es la consistencia visual y funcional que ofrecen los componentes reutilizables. Al utilizar los mismos componentes en diferentes partes del sitio web, se garantiza una apariencia coherente en toda la plataforma, lo que mejora la usabilidad y la experiencia del usuario.
Además, los componentes reutilizables pueden ahorrar tiempo y esfuerzo durante el proceso de diseño y desarrollo. En lugar de crear cada elemento de la interfaz desde cero, usaremos componentes existentes y los adaptaremos según sea necesario, lo que acelera el proceso de creación y reduce la posibilidad de errores.
Otra ventaja importante es la facilidad para realizar actualizaciones y cambios en el diseño. Al utilizar componentes reutilizables, los cambios realizados en un componente se aplicarán automáticamente en todas las instancias en las que se utilice, lo que simplifica la gestión y la actualización del sitio web a largo plazo.
DISEÑO ASIMÉTRICO
Romper con la rigidez de los diseños simétricos y explorar diseños asimétricos que se adapten mejor a diferentes dispositivos y pantallas.
El diseño asimétrico en diseño web desafía la tradicional simetría al ofrecer una estética dinámica y atractiva que captura la atención del usuario. Al romper con la disposición estándar de elementos en un diseño, el diseño asimétrico crea una experiencia visualmente impactante y memorable.
INTERACCIONES TÁCTILES Y GESTUALES
Diseñar interacciones y controles que sean intuitivos y fáciles de usar en pantallas táctiles, teniendo en cuenta gestos como deslizar, pellizcar y tocar. Existen multitud de bibliotecas para conseguir todo tipo de interacciones de pantalla muy fáciles de implementar en tu diseño, hay que usarlas, es estúpido meter flechas en un slide mobile cuando todos tus usuarios lo primero que van a hacer es intentar desplazarlo con el dedo.
PRUEBAS CONTINUAS Y OPTIMIZACIÓN
Si queremos mantener vivo nuestro sitio web, deberemos realizar pruebas periódicas en una variedad de dispositivos y tamaños de pantalla para identificar y corregir problemas de diseño responsivo, y continuar optimizando la experiencia del usuario a medida que evolucionan las tecnologías y los dispositivos.
Es tan grande la variedad de resoluciones en las que pueden verse nuestros diseños, que siempre habrá que hacer algún ajuste para esa resolución en la que no se ve como quisiéramos.
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, responsive, Taller Web, Trucos CSS
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:
- capa1 y capa2; son los contenedores de los dos módulos. En este ejemplo de web he usado dos módulos full screen.
- height: 100vh; con esta orden, le decimos a la CSS que el alto de la imagen tiene que ocupar el 100% del alto de la ventana del navegador.
- background-size:cover; indicamos que la imagen debe ocupar todo el contenedor, incluso si tiene que estirarse.
- background-position: center top; aquí indicamos que la imagen crezca o encoja desde el punto situado en el eje central de la imagen y desde su punto superior.
- padding: 200px 0 0 10%; para colocar el texto, he decidido separarlo 200px del top y un 10% del ancho de pantalla del margen izquierdo.
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.
por Omar Benyakhlef | Diseño de páginas web, Diseño Web
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».
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.
DISEÑO MINIMALISTA
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 😉
por Omar Benyakhlef | Descargas, Diseño Web
Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario.
Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta movimientos de lo más discretos, todo siempre dependiendo del producto que tengamos que vender. En cualquier caso, los efectos interactivos con el scroll, lo que nos permiten como usuario, es tener un control sobre la página del que rara vez solemos disfrutar. Los contenidos no se muestran sin más, gracias a esa interactividad con la profundidad del scroll, podemos controlar la aparición de contenidos, imágenes o animaciones cuando nosotros queramos, incluso echar hacia atrás para ver cómo se ha producido ese efecto.
Esa interacción también promueve la viralización de nuestras páginas, por lo que, como he dicho al principio, siempre teniendo en cuenta el tipo de producto que estamos vendiendo, recomiendo 100% el uso de estas interactividades, al usuario le va a agradar y a nosotros nos permite desarrollar algo más nuestra creatividad.
EJEMPLOS
MAKE YOUR MONEY MATTER.
Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO
EVERY LAST DROP
Otro producto vendido a través de una historia bien ilustrada, otro claro caso de cómo la información va a ser mejor aceptada por el usuario y como decía al principio del artículo, muchas probabilidades de que sea compartida tu página.
VER EJEMPLO
PORSCHE EVOLUTION
En este caso podemos ver cómo ha solucionado Porsche su web para mostrar la evolución de sus vehículos a lo largo de los años y de la música, todo con un efecto parallax activado por el scroll.
VER EJEMPLO
PEUGEOT HYBRID
Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO
CLOSER
Esta web la puedes navegar como cualquier otra, a través de su menú, o la puedes recorrer entera haciendo scroll. Todo tipo de animaciones para tomar ideas.
VER EJEMPLO
COLOR OF THE YEAR
Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO
MELANIE DAVEID
Lo interesante de esta web es observar cómo los contenidos están divididos en dos columnas y cómo una columna espera a la segunda para seguir mostrando contenido, todo ello por supuesto con la ayuda del scroll.
VER EJEMPLO
BAGIGIA
Esta web es antigua, pero la coloco en este listado, para mostrar cómo a través del scroll van cargando distintas imágenes para recrear una animación de un objeto, dando una sensación 3D
VER EJEMPLO
DESCARGAR CÓDIGO
Una de las mejores galerías, podéis ver todos los efectos posibles en http://scrollmagic.io/examples/index.html
Todo tipo de efectos con textos
Una librería tanto para web y móvil. Permite establecer un easing personalizado, rotaciones 3D, …
Librería JS con timelines para generar animaciones mucho más suaves.
Animaciones para transformaciones de escala, rotaciones, animaciones 3D,…
Compatible con cualquier tipo de dispositivo, y perfecto para hacer una demostración de un producto realizando un 360 grados cuando el usuario hace scroll.
Pasa con el scroll de sección en sección con diversos tipos de animaciones
He colocado esta galería porque además de ser un menú muy vistoso y útil, nos muestra cómo van cambiando los puntos según avanzamos en el scroll
Detecta la dirección del scroll mostrando una capa arriba o abajo.
Muy interesante, permite el desplazamiento desigual entre columnas al hacer scroll.
por Omar Benyakhlef | Android, Diseño de páginas web, Diseño para móviles, Diseño Web, Google, Usabilidad
El color es un elemento indispensable a la hora de diseñar una App, una web, publicidad… Puede determinar de modo determinante la usabilidad de tu aplicación o sitio web.
El color ayuda a hacer visible la jerarquía, la navegación o arquitectura de un diseño, hace que el usuario muestre más o menos interés en nuestros contenidos y una vez interesado, puede hacer que la experiencia sea positiva o que no vuelva a usar nuestro diseño nunca más.
(más…)
por Omar Benyakhlef | jQuery, Usabilidad
Navegación web con jQuery
La navegación web en una sola página es una forma de dar al usuario una transición entre secciones natural y muy vistosa.
Para ello existen multitud de plugins jQuery que facilitan el uso de este sistema de navegación.
Todas las áreas de contenido se encuentran en la misma página, y gracias al menú nos vamos desplazando por cada una de ellas.
(más…)
por Omar Benyakhlef | Diseño Web
Imagen tomada de appleweblog.com
Nadie en este mundillo es ajeno a la tremenda influencia de Apple en el diseño web.
Estoy seguro que aparición del iOS7 en el mercado, volverá a dar un cambio de aires al diseño web.
Es cierto que podemos ver una clara inspiración en el diseño más plano de Windows o Google, pero eso si, con el toque especial que siempre Apple da a sus diseños. El responsable, Jonathan Ive.
El cambio ha sido radical, pasando del skeuomorphism (que representa el arte de imitar la realidad) a un diseño totalmente minimalista, es decir, de Steve Jobs a Jonathan Ive.
(más…)
por Omar Benyakhlef | Diseño para móviles, iPhone, jQuery Mobile, Mobile, Usabilidad
Diseño de Web para Móviles
El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.
Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.
(más…)
por Omar Benyakhlef | jQuery
Lista desplegable con jQuery y CSS
Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.
El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.
El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo 😉
por Omar Benyakhlef | Photoshop
Seguramente hayáis visto estos «ribbons» o cintas en multitud de diseños, un estilo retro con mucha fuerza en los actuales diseños.
Tanto para cabeceras, titulares, menús o botones, es un recurso al que siempre podréis recurrir.
En este pack podréis encontrar varios ejemplos en diferentes PSD’s, todos los archivos psd de Photoshop están bien repartidos en capas y pueden ser fácilmente editadas. También podréis ver que incluye variaciones de color. Si queréis más variaciones y más tipos, tocará rascarse el bolsillo…
(más…)
por Omar Benyakhlef | Diseño Web, jQuery, jQuery Mobile
los 50 jQuery más usados en 2012
He encontrado en speckyboy.com, un artículo que creo de gran utilidad para tener en cuenta en nuestros diseños web. Se trata de 50 plugins jQuery, de todo tipo.
Entre ellos podrás encontrar plugins para distribuir contenido en la página, plugins para crear efectos, parallax, responsive, menús de navegación, sliders, gráficos, fuentes, etc…
Merece la pena echarle un vistazo, muchos de ellos ya los conoceréis porque los hemos tratado aquí.
