04-12-páginas-web-responsive-que-te-inspirarán

¿ Tu página web es tan chévere como estas? Echa un vistazo a estos geniales ejemplos de cómo diseñar una página web responsive de la manera correcta…

Te guste o no, las personas juzgan el libro por su portada y tu página web es crucial en cómo tu empresa es vista por el mundo exterior.

Y la tarea de crear una página web con una apariencia genial que ofrezca una buena experiencia de usuario se ha convertido en algo aun más complejo en los últimos años debido al incremento en el número de smartphones y tablets.

El arte del diseño de web responsive ha evolucionado para hacer que tu página web se vea bien en un variedad de dispositivos, sin tener que codificar páginas para cada uno. Si buscas ejemplos de inspiración sobre esta práctica, entonces no busques más allá de estas páginas web responsive, que juntan todas las cajas de usabilidad y, aun así, se ven fantásticas.

01. Pinch/Zoom

01-12-páginas-web-responsive-que-te-inspirarán

Pinch/Zoom es una empresa de diseño web dirigida por el renombrado experto en móviles Brian Fling, y tiene una excepcional página web que rinde junto con el eje x, el camino menos trillado de la web, en presentaciones anchas. El diseño hace uso de columnas CSS, que puede ser difícil de controlar en páginas web responsive, la presencia de barras de desplazamiento horizontal; sin embargo, prevalece la forma de mover los dedos como pinza y hacer acercamientos, y la elegancia aborda el problema con algunos diseños verticales responsive.

El contenido tiene espacio, mientras que la navegación, que funciona sin mayor esfuerzo en puertos de vista pequeños y grandes, soporta la forma y es desencadenado cuando se hace clic en el logo de la agencia. En pantallas reducidas, la dinámica cambia para atravesar un eje más Y. Claramente, es una decisión considerada: en el puerto de vista ancho, acomoda, sin interrupciones, diversas columnas y el diseño horizontal, pero los puertos de vista pequeños, no le permite manejar varias columnas y ofrece una experiencia lectora inconexa.

Con frecuencia, verás que páginas web que toman este enfoque están abiertas a la experimentación, pero pueden batallar con nuestros hábitos aún no formados. Pinch/Zoom logra superar el desafío y producir algo que se siente sólido e intuitivo contra todo pronóstico.

02. Envy Labs

02-12-páginas-web-responsive-que-te-inspirarán

La tienda de desarrollo web Envy Labs rediseñó su página web para reflejar el crecimiento de la empresa, una labor interna que puede ser intimidante. «Muchos de la industria pueden sentirse identificados, nosotros somos nuestro peor cliente,» admite el desarrollador de frontend Nick Walsh, «Después de muchos conceptos sin término, y una carrera semanal de producción final, la página web ahora transmite la cultura y valores de Envy Labs.»

La página web resalta las ingeniosas fuentes web, las transiciones CSS cuando se coloca el cursor encima y formas basadas en CSS. Las deleitables ilustraciones realizadas por Justin Mezzell completa la apariencia. El héroe de la página de inicio tiene dibujos con bases medio circulares que se prestan a un movimiento circular en las transiciones.

«El reto se mantuvo desde la creación de escalas responsive; se requirió de un considerable punto de cambios de porcentajes de transformaciones para alinear las cosas a lo largos de todas las pantallas de dispositivos,» afirma Walsh sobre el efecto único. El equipo también usó MVCSS, una arquitectora CSS basada en MVC para contribuir en la construcción.

03. Momentum

03-12-páginas-web-responsive-que-te-inspirarán

Momentum es un pequeño estudio de diseñadores, expertos en videos y fotógrafos ubicado en Colchester, Reinio Unido. Su página web tiene un enfoque increíble en el mensaje y el diseño, pero también apreciamos la obvia atención a brindar una experiencia de rendimiento.

El director creativo, Olivier Bon, nos comentó que quiso una página web con componentes agnósticos que mantuviese su coherencia. «He visto demasiadas páginas donde las personas han tenido que convertir los píxeles en porcentajes y haberlos llamado responsive,» comenta. «No quise que nuestra página se estruje para encajar en una pantalla; quise que tenga sentido.»

Bon descubrió que pensar en términos de móviles es una buena forma de establecer jerarquía. «He pasado un largo tiempo tratando de hacer que la navegación funcione en una ventaja angosta, sin poder solucionar el problema,» continúa. «Apenas experimenté la página web en mi móvil, fue obvio. La navegación tenía que ser hecha desde el final de la página desde dispositivos móviles».

04. Palantir

04-12-páginas-web-responsive-que-te-inspirarán

Palantir es una agencia de servicios completos de estrategia y diseño ubicado en Chicago que se especializa en desarrollo que funciona con Drupal. Es difícil no enamorarse de esta página, de sus encantadoras ilustraciones con temas retro espaciales, hermosas paletas de colores y hermosa tipografía. El espacioso diseño es una característica de bienvenida, aunque podría ser reducido en pantallas pequeñas.

«Definitivamente, quisimos asegurarnos que la página no sea muy pesada para los usuarios móviles,» explica el fundador y director ejecutivo de Palantir, George DeMet, «así que hicimos todo lo que pudimos para optimizar las imágenes, CSS y JavaScript. En nuestra experiencia, las páginas web Drupal no son significativamente más grandes que las páginas web responsive siempre y cuando se sigan las mejores prácticas.»

Dicho esto, con una página de inicio de 1MB, aún hay espacio para la mejora. Las solicitudes HTTP podrían ser reducidas la concatenación de archivos CSS y JavaScript, y el tamaño de general de las páginas web podrían ser reducidas al optimizar los valores de las imágenes.

05. Supereight Studio

05-12-páginas-web-responsive-que-te-inspirarán

Spuereight Studio es un pequeño y amigable estudio de diseño inglés a cargo de Matt Hamm y Peter Orme. Su página web, que incluye un logo creado por Brent Couchmand, presenta una tipografía en negrita y grandes imágenes de fondo (que, desafortunadamente, contribuye al algo grande tamaño de página). Cada sección está organizada en una fuente Stratum robusta, con el resto de texto compensado, obedientemente, por la fuente más redonda Proxima Nova.

Le preguntamos al director creativo de Supereight, Matt Hamm, sobre cómo el estudio aborda el diseño en una página web responsive. «Hemos aprendido que no es para nada realista hacer imágenes de Photoshop para cada uno de los puertos de ruptura en el diseño,» fue su respuesta. «Es mejor tener una idea fuerte de la dirección a donde deseas ir y luego solo diseñar los puertos de ruptura en el CSS mientras diseñas. Todo se trata de cambiar hasta que se sienta bien.»

06. Design Intellection

06-12-páginas-web-responsive-que-te-inspirarán

Design Intellection es empresa de diseño web ubicada en Louisville, Kentucky y dirigida por David Yeiser. Trabajando tanto como el portafolio de los trabajos de Yeiser y el blog personal, la pagina web de Design Intellection brinda una clase maestra en lograr belleza a través de la simplicidad.

Somos grandes admiradores de la mezcla innovadora del serif, sans serif y fuentes monoespaciadas, que funciona de forma muy efectiva —¡aunque no debería!

«La temprana y apropiada planificación es primordial cuando se trata de complejidad en el diseño responsive,» afirma Yeiser. «Claro, solo puedes planear mucho —y, en cierto punto, tienes que saltar y ver lo que funciona y lo que no en el camino.»

07. Weightshift

07-12-páginas-web-responsive-que-te-inspirarán

Weightshift es un pequeño estudio de diseño en San Francisco que ha trabajado con clientes como Microsoft, WordPress y Mozilla. Las antiguas versiones de su página web han presentado niveles de diseño y atención al detalle dignos de abrir las bocas; y ahora se encuentran en su relanzada página web responsive. La nueva página web es menos pesada y más dispersa que sus predecesores.

«La idea estética que tuvimos era que fuese ‘espaciosa’,» dice Naz Hamid, el fundador y director del estudio. «Unidos con el deseo de enfocarnos en el contenido, trazamos el enfoque en la columna central, que se alineó de buena forma con el enfoque mobile first. «Photoshop vio poca participación en un proceso de diseño dirigido a los navegadores: diseñar el código nos permitió iterar rápidamente y fallar, pero también a lograr el éxito rápidamente. Obtienes la ‘sensación’ de algo casi inmediatamente.»

Este enfoque llevó a que la página web a mezclar la fluidez y el diseño adaptable: «Optamos por un enfoque 50/50,» Hammid continúa. «Los puntos de ruptura estáticos para las pantallas anchas, 960 y iPad, con total fluidez para los teléfonos.»

08. Zurb

08-12-páginas-web-responsive-que-te-inspirarán

Ea fácil pensar que Silicon Valley como un lugar llego de starups sin sentido que construyen aplicaciones para tasar hamsters, pero también es hogar de las agencias de diseño innovador como ZURB. Junto con el trabajo con clientes, construyen aplicaciones para ayudar a otros a diseñar, también, productos geniales».

La compañía ha crecido, considerablemente, en los últimos tres años, por ende, la página web tenía que estar a su altura. El rediseñado sitio web mantiene la misma sensación ZURB, pero aumentada con fotografías grandes, borradores de íconos y colores atrevidos.

Todo combinado para producir una experiencia que realmente engancha. ZURB ha tomado un interesante enfoque enfoque las páginas internas, que combinan diferentes secciones en páginas individuales largas, navegadas a través de un menú izquierdo. Sin embargo, esto se descompone en pantallas más pequeñas, donde la navegación desaparece y algunas páginas pesan casi 2Mb.

09. Teixidó

09-12-páginas-web-responsive-que-te-inspirarán

Teixidó es una agencia creativa joven pero ganadora de premios liderada por cinco personas ubicada en Paraguay. El equipo tiene una pasión por la simplicidad y la creación de ideas por partes de personas, y el uso de colores vibrantes y texturas sutiles en sus trabajos muestra un sensacional sentido del diseño y la individualidad.

Para la página web de la empresa, se ha usado el enfoque responsive, y un diseño de una, dos y tres columnas. El texto y las miniaturas se reducen en tamaño en los diseño de una y dos columnas, permitiendo que se muestre un poco más de contenido en una página.

«Tomó muchas pruebas y errores, especialmente porque, a diferencia de muchas otras páginas responsive, apostamos por una cuadrícula de cinco columnas y simplemente no ‘bajamos la escala’ de esta, básicamente tuvimos que diseñar, primero, cinco diferentes diseños,» comenta el gerente de proyectos Meli Aguilbeck. «Todo el proceso tomó alrededor de dos meses.» Nuestra única sugerencia sería usar tinySrc para reescalar, dinámicamente, las imágenes detalladas del proyecto, de forma que encajen perfectamente en la vista del navegador.

10. Create Digital Media

10-12-páginas-web-responsive-que-te-inspirarán

La página web de Create Digital Media fue diseñada por Mike Kus y desarrollada por Ryan Taylor, y se ve genial. Por un lado, muestra limpieza y su tipografía es sencilla; por el otro, las ilustraciones que condimentan la página web brindan sensaciones intensas, intrépidas y deliciosas.

La página principal tiene algo de buenas animaciones CSS3 que aviva más las cosas. Se ven bien en computadoras de escritorio y, sorprendentemente, bien en dispositivos iOS de alga gama. Dicho esto, las pruebas de algunos dispositivos, algo antiguos, Android mostró algo de lentitud y obscurecimiento en los textos, lo cual es una vergüenza.

Ya que algunos bonitos detalles que no valen nada son la estrechez del borde que lucen bien y se anchan en pantallas amplias, disminuyendo mientras el ancho de la pantalla hace lo mismo, el bonito reordenamiento de la información del proyecto en la página de trabajo en dispositivos móviles y el sólido uso de tipografía mientas el ancho cambia.

Este es un excelente ejemplo de un página web responsive «moderna» con todos los cortes del CSS3 y la tipografía.

11. Creuna

11-12-páginas-web-responsive-que-te-inspirarán

Creuna es agencia digital de servicio completo con diversas oficinas a lo largo de Escandinavia. Su página web tiene algunos toques de diseño realmente geniales cuando se aprecia desde dispositivos móviles. Me encanta cómo el logo se mueve, continuamente, en diferentes diseños cada, más o menos, cinco segundos. También me encanta la navegación en la sección de contacto y cómo emerge en cada página.

El enlace principal se expande y contrae cuando se toca, lo que tiene éxito porque no requiere refrescar la página y muestra al usuario mucha contenido adicional. Me encantaría ver cómo esto funcionaría en un acordeón, cerrando las otras secciones cuando una se abre, pero funciona de forma genial como lo hace ahora. El desarrollador del concepto móvil de Creuna, Simon Kibsgårdm, ama, claramente, lo móvil.

«Creemos, verdaderamente, en el concepto ‘mobile first’,», dice, «y el uso móvil de Creuna.com para mostrar algo de tanto la deseable interacción basada en toques y la experimentación con el diseño y características para nuevas versiones de Creuna.com en más plataformas.»

La agencia, incluso, ha desarrollado un software que simplifica la detección de dispositivos para tu página web y se integran con cualquier sistema de gestión de contenidos .NTE. Puedes encontrar esto en mobiledetectcreuna.com.

12. Plan Design

12-12-páginas-web-responsive-que-te-inspirarán

Plank Design es un agencia interactiva ubicada en Montreal. La versión móvil de su página web es optimizada para iPhone usando el marco de trabajo móvil jQTouch, lo cual es un ajuste perfecto. Se puede cargar toda la página web en un solo archivo HTML y jQTouch hace todo el trabajo para cargar el contenido de la página con una variedad de transiciones e interacciones, casi, nativas.

«Hemos estado realizando algo de R&D en desarrollo de web móviles y decidimos que nuestra propia página sería una buen banco de pruebas para estudiar nuevas tecnologías antes de imponerlas en nuestros clientes,» comenta el fundador de Plank Design, Warren Wilansky. «Una vez que tuvimos la oportunidad de jugar un poco con el jQTouch, nos dimos cuenta de que podíamos diseñar algo sencillo, divertido y bien adaptado a las pantallas pequeñas, así que seguimos adelante.»

Los marcos de trabajo como jQTouch están permitiendo que los desarrolladores creen páginas web móviles en horas más que en días o semanas. Planl Design ejecutó su estrategia móvil perfectamente, desde el diseño a los textos de páginas optimizados, y ahora tiene otra plataforma que puede promover nuevos clientes.

Al igual que estas páginas web, que emplearon tecnologías de alta gama para desarrollar y diseñar páginas web responsive, en Staff Creativa nos esforzamos para mantenernos a la vanguardia y ofrecer los mejor a nuestros clientes. ¡Contáctanos!

Traducido y adaptado de Creative Bloq. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.

3 Comments

Deja una respuesta