Krypton Solid

Herramientas y complementos – Revista Smashing

Herramientas y complementos – Revista Smashing

Nada es perfecto en la web. No podemos asegurarnos de que nuestros sitios web siempre funcionen según lo previsto, pero podemos hacer todo lo posible para diseñar sitios web resistentes y flexibles que no lo sean. que fácil de romper, tanto en términos de diseño de interfaz como de seguridad. Sin embargo, ni la resiliencia ni la flexibilidad suelen reflejarse en nuestros productos finales y maquetas.

Nada es perfecto en la web. No podemos asegurarnos de que nuestros sitios web siempre funcionen según lo previsto, pero podemos hacer todo lo posible para diseñar sitios web resistentes y flexibles que no lo sean. que fácil de romper, tanto en términos de diseño de interfaz y seguridad. Sin embargo, ni la resiliencia ni la flexibilidad suelen reflejarse en los productos finales y las maquetas.

Diseñar usando datos, en el que Sarah Parmenter analiza cómo diseñar solo con estructura de contenido.

En la práctica, las maquetas suelen representar una experiencia perfecta en un contexto perfecto con datos perfectos que realmente no existen. Un buen ejemplo de ello son los nombres de usuario «óptimos» que son perfectamente cortos, caben en una sola línea en el móvil y se envuelven bien, o una fotografía perfecta que permite superposiciones de texto perfectamente legibles. No es realista. Necesitamos trabajar con contenido dinámico en nuestros prototipos, estando representados tanto el promedio como los extremos.

Otras lecturas en SmashingMag:

Ahora, por supuesto, generalmente no tenemos el contenido cuando estamos diseñando, pero es suficiente tener el estructura de contenido (video) para diseñar una experiencia a su alrededor. Es extremadamente útil saber si debería esperar párrafos de texto normales o muchos widgets con pestañas o bastantes tablas complejas o un diseño de revista complejo con citas y anuncios con sangría. Este conocimiento por sí solo ayuda a guiar las decisiones de diseño.

En todos esos casos, una buena estrategia sería utilizar Forcefeed.js para poblar nuestras áreas de contenido con contenido aleatorio, a veces demasiado largo, a veces demasiado corto, a menudo con caracteres de acento y tal vez incluso emojis.

Gremlins.js le ayuda a comprobar la solidez de los sitios web «desatando una horda de gremlins indisciplinados».

Otra herramienta es Gremlins.js, una biblioteca de pruebas de monos que te ayuda a comprobar la solidez de las aplicaciones web al «desatar una horda de gremlins indisciplinados», es decir, genera cadenas de datos aleatorias y las escribe por todas partes para probar cómo responde un sitio web. Si desea tener una prueba más controlada, también puede usar el Bookmarklet de formularios de llenado previo que le permite predefinir un conjunto de plantillas que se enviarán en formularios para probar su capacidad de recuperación.

Bookmarklet de formularios de llenado previo le permite insertar fragmentos de contenido predefinidos para verificar sus formularios web.

También necesitamos crear experiencias a prueba de futuro. ¿Qué pasa si el diseño de su interfaz necesita ser traducido a otros idiomas? Si bien el chino puede ser perfectamente breve y conciso, el alemán puede crear componentes de interfaz extrañamente largos, que van desde los botones hasta la navegación. En este caso, algo tan simple como Complemento jQuery Globalize, o Complemento Sketch i18n podría ser útil.

Puede definir variables dinámicas para su contenido y «conectarlas» rápidamente, para verificar que el diseño no se rompa cuando cambia el idioma. Para Sketch, también puede utilizar Complementos de generación de contenido, que van desde la importación de datos financieros hasta imágenes de perfil de usuario aleatorias. Y si usa Photoshop, hay formas de insertar contenido en Photoshop desde un archivo de texto, también. También, Artesanía es un paquete de complementos gratuito para Sketch y Photoshop que también le permite diseñar con datos reales.

Usamos estos pequeños ayudantes todo el tiempo, y demuestran ser excelentes herramientas para crear sitios web que son preparado para todo que se les presente. También reflejan la realidad mucho mejor que las maquetas perfectas con alturas perfectas y nombres y direcciones de correo electrónico perfectos. Manténgase resistente: ese es el verdadero poder de la web.

Deja un comentario