Las 16 mejores herramientas para el diseño web receptivo

Las 16 mejores herramientas para el diseño web receptivo

Con la adopción exponencial de dispositivos móviles y teléfonos inteligentes, los diseñadores web expertos están recurriendo al diseño web receptivo como una panacea para todo lo relacionado con el diseño y la tipografía.

Esto no solo ahorra tiempo, dinero y esfuerzo a largo plazo, sino que también brinda a los usuarios móviles la interacción y la facilidad de uso que anhelan.

Pero si se le asignó la tarea de crear un diseño receptivo para dispositivos móviles y no está seguro de por dónde empezar, esta lista de verificación de recursos y consejos imprescindibles seguramente le dará la chispa que necesita para crear un diseño fluido y amigable que se adapte a casi cada dispositivo móvil: pasado, presente y futuro.

Maquetación, Wireframes y Prototipado

El primer paso de cualquier buen diseño es esbozar sus ideas y determinar la ubicación de todos los diferentes elementos en una página. Estas herramientas pueden ayudarlo a hacer precisamente eso:

Estructuras alámbricas receptivas

estructuras alámbricas receptivas

Este es un buen punto de partida para aprender cómo se «apilan» los elementos de diseño receptivo en los diseños típicos y cómo determinar qué áreas de su diseño obtendrán el mayor énfasis en diferentes dispositivos.

Responsive Wireframes, creado por James Mellers de Adobe, ofrece variedades de escritorio y móviles de maquetas de estructura metálica comunes, que incluyen página de inicio, entrada guiada, entrada de promoción, detalles del producto y páginas de comparación.

Al hacer clic en el botón «¡Alternar!» El botón en la parte superior derecha le mostrará un ejemplo de cómo cambiarán los diferentes elementos en esa página según el dispositivo en el que se estén viendo.

Para ver un ejemplo más ilustrativo, echa un vistazo a su otro proyecto, Diseño receptivo, ilustrado de manera receptiva. Le permite cambiar el tamaño de la ventana de su navegador para ver los tipos de restricciones de tamaño con las que trabajará.

Patrones de diseño de dispositivos múltiples

diseño múltiple

Si está tratando de decidir qué tipo de diseño receptivo elegir de acuerdo con el contenido existente de un sitio y cómo desea que se presente, estos ejemplos deberían ayudarlo con el proceso de toma de decisiones.

Diseñador Lucas Wroblewski ha revisado innumerables diseños y diseños que responden a dispositivos móviles y ha logrado categorizar la mayoría de ellos en cinco diseños distintos. Su sitio web muestra estos diferentes patrones y cómo funcionan.

Wirefy

cablear

Para diseñadores y desarrolladores que se enfocan en «el contenido primero», Wirefy es una excelente solución.

Simple y elegante en su presentación, Wirefy te permite planificar y estructurar tu contenido. También puede utilizar estos esquemas totalmente funcionales para mostrar a los clientes cómo se verá y funcionará su nuevo sitio receptivo.

Una palabra de advertencia: necesitará un editor de código básico y un conocimiento práctico de HTML y CSS para obtener todos los beneficios de Wirefy.

Bosquejo de la interfaz

bosquejo de la interfaz

¿Anhelas los «buenos viejos tiempos», cuando dibujabas un diseño en un cuaderno con esas herramientas arcaicas, lápiz y papel? ¡No temáis! Bosquejo de la interfaz entiende

Esta opción ofrece archivos PDF imprimibles para una amplia gama de dispositivos, desde navegadores de escritorio hasta tabletas genéricas. Además, ¡son gratis!

CSS y cuadrículas fluidas

A veces, solo navegar y analizar los diseños no es suficiente. Tienes que entrar en el meollo de la cuestión, empujando píxeles y codificando los componentes centrales de un sitio.

Si es usted, pruebe estos diseños de estilo Photoshop y cuadrículas receptivas que se actualizan de acuerdo con sus cambios y entradas personalizadas.

Azulejos de estilo

azulejos de estilo
Más claro que un moodboard pero no tan laborioso como una maqueta completa, Azulejos de estilo cierra la brecha entre la creación de un estilo en el que tanto el diseñador como el cliente puedan estar de acuerdo.

Lo hace a través de una plantilla de estilo Photoshop donde los colores, el diseño básico y el logotipo se pueden agregar y ajustar para satisfacer sus necesidades. Aquí hay una captura de pantalla de este bebé en acción:

estiloazulejo2

Oreja

oreja
Creado por diseñadores en Twitter, Oreja está diseñado para hacer que la creación de prototipos sea fácil y relativamente indolora.

Con la función Personalizar, puede seleccionar y elegir los diferentes elementos receptivos que componen una página, luego descargar una versión terminada con CSS compilado y minimizado, complementos de jQuery y otras ventajas cuidadosamente empaquetadas para simplificar su trabajo.

conjunto de cuadrículas

cuadrícula

conjunto de cuadrículas trabaja con diferentes sistemas de administración de contenido, incluidos Joomla, Drupal y WordPress, además de trabajar en aplicaciones gráficas populares como Photoshop y Fireworks.

Los diseños de cuadrícula también se pueden compartir con colegas, lo que la convierte en una herramienta excepcional de creación de prototipos y creación de esquemas que se lleva bien a lo largo de las diferentes fases de producción del diseño de su sitio web.

Reflujo de Adobe Edge

reflujo

Mientras todavía está en el modo de vista previa, espere esto nueva herramienta de Adobe para convertirse rápidamente en un favorito de los diseñadores.

A diferencia de Photoshop, que se enfoca ampliamente en la edición de gráficos, Edge Reflow se creó expresamente para manejar diseños receptivos. Los sistemas de cuadrícula, el manejo de consultas de medios y la generación de diseños CSS avanzados son parte del trabajo diario de Reflow.

Gráficos, fuentes y videos receptivos

Los diseños y diseños receptivos son una cosa, pero ¿se pueden hacer gráficos receptivos? ¿Qué pasa con las películas o el texto?

¡La respuesta es sí! Gracias a la programación inteligente y la codificación genial de estos excelentes colaboradores:

Imágenes adaptables

adaptado

Imágenes adaptables lee el tamaño de la pantalla de un espectador y cambia automáticamente la escala de sus imágenes HTML incrustadas para una visualización óptima. No se necesita marcado. Se puede configurar en tres sencillos pasos utilizando bibliotecas que generalmente están disponibles a través de hosts compatibles con PHP (Apache, GD lib y PHP 5.x).

Imágenes de retina

retina

Retina Images es un sistema fácil de configurar que muestra imágenes de alta resolución como alternativas en los dispositivos que las admiten. Solo se descarga una imagen a la vez, por lo que no hay exceso de tiempo de carga en su servidor para las imágenes que no se mostrarán.

Además, siempre que sus imágenes tengan atributos de alto y ancho, no necesita realizar ningún cambio en ellas.

Arándano

arándano

¿Quiere un control deslizante de imágenes creado desde cero para trabajar con diseños adaptables a dispositivos móviles? Prueba Blueberry.

Muchos de los controles deslizantes de imágenes populares en el mercado no son exactamente compatibles o fáciles de usar cuando se ven en dispositivos que no sean una computadora de escritorio o una computadora portátil. Blueberry es un intento de empujarlos en una dirección más amigable para dispositivos móviles.

Ajustar texto

ajuste de texto

Ajustar texto es un complemento de jQuery que permite escalar el texto según el dispositivo en el que se está viendo. Cambia el tamaño del texto según las proporciones y está diseñado para usarse solo con títulos. Si desea un control más preciso sobre su tipografía, consulte su complemento relacionado, Letras.js.

FitVids

fitvids

No dejes que el diseño inspirado en los años 80 te asuste. FitVids es tan moderno como sus primos jQuery, FitText y Lettering.js. FitVids trabaja para que su video se adapte a diseños fluidos utilizando Javascript y CSS magic.

Tablas de datos receptivas y amigables con SEO

mobifreaks

tabla de seo

Si necesita una forma elegante y receptiva de presentar tablas basadas en datos, mobifreaks tiene algunas tablas basadas en CSS que también son compatibles con los motores de búsqueda y con capacidad de respuesta móvil: ¡lo mejor de todos los mundos posibles!

Pruebas, detección de dispositivos y navegadores antiguos

Ahora llega el momento de la verdad… la prueba. Creó un gran diseño, incorporó una codificación inteligente y fluida y ahora está listo para mostrar su nueva creación receptiva al mundo. ¿Pero lo probaste correctamente? Aquí hay algunas herramientas que pueden ayudar:

Pruebas de diseño receptivo de Matt Kersley

mate

matt kersley desarrolló una de las herramientas de prueba de diseño receptivo más populares en la web, y después de un intento, es fácil ver por qué. Es lo suficientemente flexible como para usarse con cualquier sitio y puede instalarse en su propio servidor para una resolución de problemas más rápida.

Puede probar el ancho para los puntos de ruptura adecuados de su contenido, o probar tanto el ancho como el alto de los dispositivos móviles populares para una comparación adecuada.

responsable

responsable2

el responsable le muestra cómo se carga su página en una variedad de dispositivos móviles. Simplemente ingrese su URL para ver exactamente lo que ven los navegadores móviles, tanto en vista vertical como horizontal.

¿Cuáles son tus favoritos?

Con estas herramientas de diseño receptivo en su arsenal, tendrá todo lo que necesita para crear diseños fluidos y flexibles que estén optimizados para motores de búsqueda, dispositivos móviles y las personas que los usan.

¿Tienes una herramienta que no se ha presentado aquí? ¡Házmelo saber en los comentarios a continuación!