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 | accesibilidad, Diseño de páginas web, Diseño Web, Usabilidad
¿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.
(más…)
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 | capas, CSS, Diseño Web, responsive, Taller Web, Trucos CSS, Usabilidad
Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio.
Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo:
.box {display: flex; align-items: stretch; flex-wrap: wrap;}
Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo:
.uno, .dos, .tres, .cuatro, .cinco, .seis {padding:50px; color: #fff; width: 150px; font-family: ‘Bebas Neue’, cursive; font-size:30px}
.uno {background-color: #fdd129}
.dos {background-color: #c91818}
.tres {background-color: #2d4f62}
.cuatro {background-color: #498356}
.cinco {background-color: #f18f39}
.seis {background-color: #000}
Simplemente hemos dado a cada capa un color y a todas unas características de ancho, tipo de fuente y padding.
En el HTML, colocamos la capa principal y contenedor (box) y dentro las capas que van a ir alineadas.
<div class=»box»>
<div class=»uno»>Uno</div>
<div class=»dos»>Dos</div>
<div class=»tres»>Tres
<br>tiene
<br>texto
<br>extra
</div>
<div class=»cuatro»>Cuatro</div>
<div class=»cinco»>Cinco</div>
<div class=»seis»>Seis</div>
</div>
Y ya está !!!
Ahora entra en el siguiente enlace para verlo funcionando y prueba a hacer más grande y pequeña la ventana del navegador, para comprobar cómo se va adaptando automáticamente a cualquier resolución de pantalla, colocando las que no entran en la siguiente línea.
VER EJEMPLO FUNCIONANDO
por Omar Benyakhlef | CSS, Diseño Web
La animación de contenidos en la web es una práctica habitual en el diseño web. Desde hacer que las fotos aparezcan suavemente, a que la página se vaya formando según hacemos scroll, apareciendo los contenidos por los lados… Se trata de enfatizar contenidos o llamar la atención del usuario y mostrarle un diseño atractivo.
Existe una forma muy fácil de hacer todos estos efectos y que no suponen excesivo peso para la página, vamos a ver cómo.
Animate.css es una biblioteca de animaciones listas para usar en tus proyectos web.
Si entras en https://animate.style/ a la derecha podrás ver un montón de efectos que se aplican en tiempo real al contenido central de la página.
Vamos a ver cómo usarlo:
Para empezar hacemos la llamada a la librería, puedes descargarla y alojarla en tu host o puedes llamarla así:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
Luego, añade a tu texto o imagen la clase que quieres aplicar del siguiente modo:
<img src="imagen.png" class="animate__animated animate__rubberBand">
siendo rubberBand el efecto que quieres aplicar y que puedes sustituir por cualquiera de estos:
- bounce
- flash
- pulse
- rubberBand
- shake
- headShake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
|
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
|
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- jackInTheBox
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
|
Prueba estas animaciones tanto en textos como imágenes, incluso puedes aplicarlo a un div para mover varios objetos a la vez.
En próximos post veremos cómo controlar estas animaciones, modificando la duración de la animación o el delay, unas opciones que incluso nos pueden servir para crear banners.
