Listado

Herramientas básicas para maquetas

Cada maestrillo tiene su librillo. Y cada desarrollador su listado de recursos para ayudarse en sus proyectos. Compartimos aquí una selección de estas herramientas básicas, en este caso, para desarrolladores UI.

Autor/a

Fecha de publicación

10/11/2022

Compartir

Twitter

LinkedIn

Desde hace ya algún tiempo venimos experimentando, en el mundo del desarrollo, un camino profesional muy definido (mucho más que antes): el camino del UI developer, el maquetador web de toda la vida. Una disciplina que además en Redradix se ha cuidado prácticamente desde sus orígenes, con un equipo dedicado en exclusiva. Esto ha permitido entender mejor sus necesidades y sacar lo mejor de cada uno de ellos.

Ha llovido mucho desde que tocaba hacer maquetas con tablas, y hoy en día un maquetador necesita tener una pequeña mochila con unas cuantas “herramientas” para hacer que su magia sea mantenible, escalable, accesible y, sobre todo, de calidad. Eso entre otras muchas cosas.

A veces, estas herramientas las descubres por redes sociales, en blogs, las comparte contigo un compañero. Pero también hay muchas otras ocasiones en las que no las encuentras cuando lo necesitas.

Pues justo este artículo trata de esto. Un breve listado de tools que vienen muy bien para el día a día de cualquier maqueta. Algunas de ellas indispensables en cualquier proyecto. Vamos allá.

Básicas

  • CanIUse Una herramienta indispensable y de sobra conocida en el mundo del desarrollo. Se utiliza para comprobar la compatibilidad de una propiedad entre navegadores y sus versiones. Recomendable echar un ojo de vez en cuando a la sección de noticias.
  • CanInclude Siempre nos pasa: ¿puede ir un < p> dentro de un < a>? ¿Estará bien escrito semánticamente? Pues bien, este regalito nos recomienda lo que está correcto y lo que no lo está tanto. Importante tenerla a mano para cuando surgen las dudas.

En general, en cualquier ámbito, la accesibilidad es fundamental e indispensable. Y en el mundo digital no tenemos por qué ser menos. Como estamos viendo, hay herramientas para todo, sobre todo para hacer las cosas bien. En nuestra mano tenemos hacer la vida un poquito más fácil a todas esas personas que tienen alguna discapacidad.

  • WebAIM Contrast Checker Un clásico de la gente de WebAIM en el que se puede comprobar el nivel de contraste entre dos colores.
  • ColorHexa Nos proporciona información útil sobre colores y además tiene un simulador de daltonismo.
  • Lighthouse Esta fantástica herramienta audita la web, ya sea privada o pública, marcándote los puntos mejorables de ella, en concreto analiza los siguientes campos: progressive web apps, performance, accessibility, best practices y SEO.
  • WAVE Es una megaHerramienta que evalúa y ayuda a que tu web sea más accesible. Es muy visual, practica y útil. Además, tiene extensión para navegadores.
  • Pa11y. Ya la última sobre accesibilidad que traemos por aquí (aunque hay muchas más). Esta cuenta con un CLI para para poder trabajar desde la terminal.

Hay muchos constructores, editores de código, IDE´s y plugins para estos. Por eso, con este punto no quiero contaminar mucho y creo que es mejor que cada uno vaya por dónde este más cómodo. Aun así, os dejo un par de recursos que personalmente creo que son muy recomendables.

  • Prettier Tras una configuración inicial, formatea el código para hacerlo mas legible. Algo a tener muy en cuenta si trabajas en equipo. Creo que es muy importante que todos tengan la misma configuración, si no os volveréis locos viendo código modificado en el repositorio: tabulaciones, comas simples o dobles...
  • Parcel Magia. Una Build tool súper sencilla de configurar. Para cuando te toca hacer un estático para ayer (sí, es posible 😉).

Como ya he comentado, "siempre existe algo que nos haga la vida mas fácil". Pues bien, hablamos de los generadores. Algunos algo más complejos que otros, unos los utilizas más, otros menos… pero está bien tenerlos siempre a mano en favoritosLocalizables.

  • Smooth shadows Un generador de sombras.
  • Fancy border radius Generador de border radius, algo peculiares y diferentes, desarrollado por Mirko.
  • CSS Gradient Un generador de gradientes. Un clásico desde siempre. Ha cambiado varias veces su diseño pero siempre es igual de práctico… En su web podemos encontrar también recursos, ejemplos y tutoriales.
  • Gradient Generator Otro generador de gradientes, esta vez del gran Josh Comeau.
  • Cubic Bezier Generador de curvas Bézier, sencillo y también muy práctico.

En ocasiones (casi siempre) el tiempo de entrega nos adelante por la derecha. Esto hace que sea muy necesario repasar tu trabajo antes de pasar a producción y hacerlo publico. Porque, recuerda siempre: trabajo incompleto, doble tarea.

En este sentido, estas dos herramientas de checklist serán tus dos mejores colegas a partir de ahora:

Lógicamente no son todas las que están ni están todas las que son. Pero había que empezar por algún punto. Aquí hemos recogido las básicas, pero este tema de las herramientas para mejorar nuestro día a día da para mucho más de si… ¡afortunadamente!

Relacionados

Cascade Layers

Cascade Layers es una manera de organizar los estilos de nuestras aplicaciones separándolos por capas que se apilan unas sobre otras para componer con más control.

12/6/2023

Charlamos sobre sistemas de diseño con Aarón García

A estas alturas nadie cuestiona ya los beneficios que tiene, de forma general, contar con un sistema de diseño (DS, Design System) para la creación de productos digitales. Para profundizar un poco más sobre este tema y descubrir cómo se están implementando en otros sitios, hemos tenido ocasión de charlar recientemente con Aarón García, Lead Design System Engineer en New Relic.

22/3/2023

Button Text