Las 5 mejores herramientas para un diseño receptivo
Permítanme comenzar diciendo esto, no incluiré ninguna herramienta de diseño de apuntar y hacer clic en esta lista (piense en Adobe Edge Reflow). La razón es bastante simple, creo que son malas para todos; diseñadores, clientes, codificadores ... todo el mundo sufre.
No se trata de la calidad del código de salida de estos programas. No es porque hace que el diseño sea "demasiado fácil". Es porque no importa cuán buenos sean estos programas, siempre limitarán a las personas que los usan.
Estarán limitados, ni siquiera por lo que el programa puede lograr, sino por lo que creen que puede lograr. Si lo piensan, es probable que el usuario promedio lo compare con herramientas como PowerPoint y / o cualquier número de programas de diseño de impresión, cayendo de nuevo en viejas mentalidades. Ahí yace el problema. Las herramientas visuales de publicación web siempre intentarán aplicar los procesos antiguos a las nuevas tecnologías.
Un flujo de trabajo verdaderamente orientado a la web es aquel que abarca los conceptos y las tecnologías subyacentes sobre los cuales se construye la web. Claro, puedes usar cualquier cantidad de herramientas visuales para crear sitios web que sean técnicamente receptivos, pero te estarías perdiendo el sentido.
No se trata de un diseño adaptable. Se trata de hacer que la información sea accesible para la mayor cantidad de gente posible. Hay algunas cosas que un programa como Edge Reflow simplemente no puede hacer. En resumen, necesitas escribir código.
Por lo tanto, las mejores herramientas para ayudarlo en el diseño receptivo son aquellas herramientas que lo ayudan a comprender y utilizar las tecnologías web, planificar su sitio web a fondo, escribir mejor código de manera más eficiente y probar / presentar sus diseños receptivos a los clientes en contexto.
Comencemos con lo obvio:
1) Su navegador
No. No estoy bromeando. Esta es, literalmente, la herramienta más importante que tiene, porque le muestra exactamente cómo se ve su sitio web en sus condiciones específicas.
Se ha debatido mucho sobre si diseñar en el navegador es mejor que diseñar en un editor de imágenes como Photoshop o GIMP. Permíteme resolver esto por ti ...
¿Van a hacer su navegación los usuarios de su sitio web en Photoshop? Los editores de imágenes pueden hacer fotos bonitas, no emular experiencias reales. Use editores de imágenes para editar imágenes. Use su navegador para diseñar sitios web.
Es hora de alejar a nuestros clientes de las maquetas hiper-detalladas a las que se han acostumbrado. A medida que la web cambia y nuestros procesos se vuelven más fluidos e iterativos, debemos seguir adelante.
Instale al menos un navegador con cada motor de renderizado importante y obtenga algunas extensiones de desarrollador. Acostúmbrate a mirar tu código fuente como lo ve tu navegador, porque estarás aquí por un tiempo.
2) Aplicación de dibujo de Google Drive
Técnicamente, casi cualquier editor de imágenes basado en vectores podría hacer el trabajo al enmarcar sus sitios web y aplicaciones. Tiendo a enmarcar por cable la versión de escritorio de mi sitio primero, crear una copia del archivo, cambiar el tamaño del lienzo e ir desde allí. El uso de vectores facilita el cambio de tamaño rápido y la reorganización de los elementos mientras aún se encuentra en la etapa de planificación.
Prefiero la aplicación de dibujo en Google Drive por un par de razones:
Funciones de uso compartido y colaboración: Google comparte la información mejor que cualquier otra persona. Con comentarios en contexto, edición simultánea e integración de Hangouts, estoy enamorado.
Guías automáticas: en cada documento de dibujo, las guías se crean automáticamente en función de las dimensiones de cada objeto que coloque en el documento. Esto hace que sea fácil representar elementos de tamaño uniforme en el documento, lo cual es ideal para diseñadores obsesionados con la cuadrícula como yo.
Al compartir estos wireframes con los clientes, esa consistencia profesional es una gran ventaja. Y, sin embargo, no estoy obligado a esas guías. Lo veo como una buena alternativa a las aplicaciones de simulación que intentan restringirlo a una grilla.
Ah, y es gratis. ¿Necesito decir mas?
3) Prototipos de estilo
Basado en Style Tiles, Prototipos de estilo son un entregable en el navegador diseñado para ayudarlo a dar a sus clientes una idea de cómo se verán la tipografía, el color y los elementos de la interfaz de usuario de su sitio web. Como está destinado a ser visto en el navegador, habrá menos inconsistencias una vez que se haya construido el sitio web.
Además, postularía que los Prototipos de Estilo podrían ayudar a nuestros clientes a separar mentalmente los conceptos de UX y estética. Y realmente, cualquier cosa que ayude a nuestros clientes a comprender mejor el proceso de diseño web solo puede ser algo bueno.
4) Responsinador
Responsinador es una herramienta simple que muestra su sitio web en diferentes tamaños. Imita, de manera muy básica, diferentes tamaños de dispositivos y contextos. Esta herramienta no es para su beneficio. ¿Desea ver cómo se ve su sitio web en tamaños más pequeños? Cambiar el tamaño de la ventana de su navegador. Mejor aún, obtenga algunos dispositivos móviles reales y realice algunas pruebas reales.
Esta aplicación web se utiliza mejor para mostrar a sus clientes una aproximación rápida de cómo se verá su sitio web en contextos distintos de un monitor de escritorio o portátil.
Una vez más, hay muchas herramientas que podrían hacer el mismo trabajo que Responsinator, y con la misma eficacia, supongo. Elegí esta porque presenta varias siluetas de dispositivos una detrás de la otra, para una fácil lectura.
5) Adobe Edge Inspect
Ahora este es para ti. Si tiene un laboratorio de pruebas móvil (y cuanto antes pueda hacer uno, mejor) Edge Inspect sincronizará todos sus dispositivos para ver la misma página a la vez. Actualice la página en un dispositivo y actualice todas ellas.
A diferencia de los otros en esta lista, este no es gratis. Sin embargo, si puede pagar suficientes dispositivos móviles como para necesitar una solución como esta, probablemente valga la pena el dinero.
Conclusión
Como siempre, tu activo más importante es tu cerebro. Estas herramientas, y otras similares, solo pueden ayudarte en tu camino. Los elegí porque desempeñan funciones muy específicas que me ayudan a diseñar sitios receptivos. No limitan lo que puedo hacer.
Las mejores herramientas son realmente las que se mantienen fuera del camino.
¿Usas estas herramientas? ¿Cuáles son sus 5 mejores herramientas para un diseño receptivo? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de herramientas a través de Shutterstock.