10 páginas de aterrizaje receptivas que dejan boquiabierto
'Responsive' es el último movimiento en el desarrollo web, y uno que se necesita bastante. Todos los días aumenta la cantidad de dispositivos, plataformas y navegadores que se utilizan para acceder a Internet. Y aunque la mayoría de los usuarios todavía acceden a la web desde las plataformas tradicionales, la demanda de sitios web fluidos y adaptables es más sólida que nunca.
Muchos diseñadores se están tomando en serio este cambio y están creando algunas piezas espectaculares que prosperan en los entornos de dispositivos móviles, tabletas y computadoras de escritorio.
Los siguientes sitios fusionan la belleza con técnicas de diseño web receptivas y realmente muestran lo que se puede lograr con un poco de innovación. Así que toma algunas palomitas de maíz y una libreta, vas a querer prestar atención.
StephenCaver.com
Cuando abres este sitio en su escritorio, es inmediatamente cautivador. El encabezado audaz, negro y justificado contrasta maravillosamente con la calidad casi acuarelada del fondo del desierto de Mojave. Cuando este sitio se adapta al tamaño del móvil, el cambio es significativo y el sitio aún se ve muy bien.
FoodSense.is
Con su diseño amplio, las líneas limpias y la estructura simple este sitio es un ejemplo fantástico de diseño web minimalista. Cuando se visualiza en una tableta o dispositivo móvil, se ajusta sin comprometer la composición o el flujo.
Warface.co.uk
El uso del color es llamativo y la colocación innovadora de las figurillas 3D en el primer plano del sitio realmente atrae al espectador. El sitio es único y emocionante, y no se pierde el impacto en los dispositivos móviles.
DanielVane.com
Nuevamente, aquí el diseñador deja que su trabajo hable por sí mismo. La página de inicio es hermoso en su simplicidad de tamaño completo y esto se lleva perfectamente en el móvil, dejando una ilustración particularmente llamativa que incluye un logotipo sutil.
SasquatchFestival.com
Este sitio es divertido y lúdico y único entre los otros sitios en esta lista. Renuncian a la simplicidad limpia para divertirse con el color, las imágenes y los íconos de una manera que aún se las arregla para ofrecer estilo. Esto puede ser difícil de hacer en un espacio pequeño, pero los diseñadores de Sasquatch se manejan sin esfuerzo.
GravitateDesign.com
El uso de la forma en este sitio se destaca de inmediato. Al evitar el uso de bordes y cuadros de contenido, han logrado crear un sitio que muestra su trabajo al máximo.
VisualSupply.co
De manera similar a Warspace, es la imagen que realmente funciona para este sitio web . Está perfectamente estructurado y se ve hermoso en todos los dispositivos.
StudioMds.co
Los colores oscuros a veces pueden pasarse por alto en el diseño web, pero Studio Mds mejorar su contenido con su decisión audaz. El diseño se ajusta para adaptarse a un tamaño de pantalla más pequeño y no pierde nada más que enlaces superfluos.
ForefathersGroup.com
Este sitio tiene una gran sensación vintage y utiliza texturas, imágenes y fuentes para crear eso. Se desliza maravillosamente (pero es una pena perder ese mono).
MapBox.com
El esquema de colores y el uso de fotos dan Mapbox un espacio limpio en el que mostrar su producto. De nuevo, la simplicidad gana frente al diseño complejo o quisquilloso, y es precisamente por eso que funciona bien en una pantalla más pequeña.
Cosas a tener en cuenta al diseñar
Entonces, ahora que ha visto algunos sitios de respuesta estelar, probablemente esté ansioso por comenzar a diseñar el suyo propio. Pero antes de salir corriendo, aquí hay algunas cosas para recordar.
Fotos
Un obstáculo para el diseño receptivo es cómo los dispositivos muestran fotos. Una MacBook Pro con una pantalla Retina va a mostrar una imagen a una resolución mucho más alta que un teléfono móvil, que a menudo puede crear problemas. Una forma de evitar este problema es subir copias de alta y baja resolución de sus fotos. Con CSS, puede determinar qué imagen se carga en función de la resolución de pantalla del dispositivo. Si está utilizando fotos de archivo, asegúrese de derrochar por la opción de mayor rez.
Determinación de puntos de interrupción
A menudo, los diseños receptivos se basan en lo que se conoce como "puntos de ruptura", o la resolución a la que cambia el diseño, basados principalmente en los tamaños de pantalla comunes del dispositivo. El problema con este enfoque, sin embargo, es que no toma en cuenta cuán diversos son realmente los tamaños de pantalla. Ya no hay un tamaño "universal". Por lo tanto, en lugar de predeterminar puntos de interrupción en 360px (móvil), 768px (tableta) y 1024px (computadora de escritorio), es mejor dejar que su diseño hable por sí mismo. Comience con un diseño terminado y luego cambie el tamaño de su ventana hasta que el diseño se rompa: haga que este sea uno de sus puntos de interrupción y luego continúe. Descubrirá que su sitio fluye mucho mejor.
¿Has encontrado una fantástica página de inicio receptiva? ¿Has diseñado uno tú mismo? Háganos saber en los comentarios.