Saltar al contenido
Arte12

Herramientas de diseño web

Ha habido una proliferación de herramientas para el desarrollo de front-end – con una variedad vertiginosa y abrumadora de palabras clave, herramientas de construcción, frameworks, librerías y preprocesadores. Para crear un diseño visual con código, no se necesita ninguna de estas herramientas.
CSS tiene sus propias variables, eliminando la necesidad de Sass. La cuadrícula CSS tiene un diseño masivamente simplificado y elimina la necesidad de marcos de trabajo CSS externos. Todo lo que necesita es un editor de texto, un documento HTML y un navegador. La naturaleza cada vez más componentizada de la arquitectura de front-end también significa que a menudo no se empezará desde cero, ya que es posible que ya se tengan algunos bloques de construcción para ensamblar. Si antes el diseño en el navegador era laborioso y restrictivo, ahora es todo menos eso.

Herramientas de desarrollo para el diseño

Las herramientas de desarrollo del navegador eran tradicionalmente útiles para depurar JavaScript e inspeccionar las peticiones de red. Más recientemente, hemos visto que los navegadores añaden interfaces gráficas para manipular CSS. La mayoría de los navegadores ofrecen un selector de colores y una herramienta de cuentagotas para seleccionar los colores. En Chrome, esta herramienta mostrará de forma útil una relación color-contraste. Chrome también ofrece una interfaz gráfica de usuario para añadir o ajustar la sombra de texto y la sombra de caja.
A la izquierda, interfaz gráfica de usuario de cromo para colores y sombras, respectivamente. A la derecha, el editor de degradados de Safari.
Sin duda, Firefox ha usurpado a Chrome como navegador para el diseño de interfaces de usuario. Su característica más destacada es el inspector de cuadrículas CSS.

Diseño

La llegada de la cuadrícula CSS ha facilitado el diseño. Es mucho más fácil hacer uso de una cuadrícula si puede ver la cuadrícula. Puede abrir el inspector de cuadrícula pulsando el botón de cuadrícula en el inspector HTML o el icono dentro de la propiedad de visualización del inspector CSS.

Alternativamente, la pestaña de diseño dentro de dev tools listará todos los elementos de la página que hacen uso de display: grid.
El inspector de cuadrícula muestra los números de línea y visualiza las canaletas creadas utilizando la propiedad grid-gap.
Grid puede utilizarse para el diseño de toda una página, así como para elementos de interfaz más pequeños, tal y como se ve aquí en la página de inicio del New York Times.
Si está utilizando áreas de cuadrícula con nombre, también se pueden mostrar los nombres de las áreas.

El inspector de cuadrícula puede incluso visualizar cuadrículas sesgadas, giradas y escaladas.
El sitio web de Stripe hace un uso intensivo de la rejilla CSS.
Firefox también está preparado para enviar una herramienta similar para Flexbox.
Para los elementos que tienen una posición establecida en relativa, absoluta o fija, Firefox ofrece la posibilidad de reposicionar elementos arrastrándolos. Para que esta herramienta funcione, también necesita establecer un valor para al menos una de las propiedades superior, inferior, izquierda y derecha.

Ninguna de estas herramientas reemplaza la necesidad de saber CSS, pero hacen que el diseño en el navegador sea mucho más atractivo.

Diseño web con capacidad de respuesta

El diseño sensible presenta el mayor desafío para las herramientas de diseño tradicionales basadas en vectores, con sus mesas de trabajo de ancho fijo. ¿Cómo se ve tu diseño en el ultraplano iPhone SE? ¿O un fablet de tamaño incómodo?
La única manera de averiguarlo es redimensionando constantemente tu navegador. Predefinir los puntos de interrupción basados en dispositivos populares es un anti-patrón. Diseñar para tres tamaños de pantalla no es suficiente . Los puntos de interrupción deben determinarse por el contenido.
“Comienza con la pantalla pequeña primero, luego expande hasta que se vea como mierda. Es hora de una pausa!” Stephen Hay
Sólo puede ajustar un punto de interrupción abriendo un navegador web.
Aunque no es un sustituto de las pruebas en dispositivos reales con herramientas como Browserstack, el modo de diseño receptivo es un modo de previsualización fácil para ver los diseños en diferentes tamaños de pantalla.

Tipografía

Las personas son atraídas a la web por el contenido , y ese contenido es principalmente texto. Esto llevó a Oliver Reichenstein a escribir Diseño Web es 95% Tipografía. El próximo editor de fuentes en Firefox ofrece controles para editar las propiedades del texto. Es particularmente útil para fuentes variables. Hasta ahora, los diseñadores se veían obligados a confiar en la documentación para averiguar qué ejes personalizados ofrecía un tipo de letra variable. Las herramientas de desarrollo de Firefox no se limitan a enumerar las funciones personalizadas de las fuentes, sino que ofrecen un control deslizante para cada eje.

Formas

Tradicionalmente ha sido difícil escapar de la naturaleza centrada en la caja de CSS. Todo es un rectángulo . Esto ha cambiado con la introducción de las formas CSS. El Editor de trayectoria de forma es una herramienta para ver y editar formas utilizando la trayectoria de clip y las propiedades shape-outside.

Animación

La mayoría de las herramientas de diseño de pantalla – Photoshop, Adobe XD, Sketch, et al – carecen de la capacidad de diseñar animaciones. Existen herramientas especializadas como Principio, pero tiene mucho sentido que los diseñadores se asocien con un desarrollador para tales tareas. Las herramientas Dev se pueden utilizar para ajustar fácilmente la facilidad de las transiciones y animaciones arrastrando las manijas de una curva bezier.

¿Son las herramientas de diseño tradicionales adecuadas para el propósito?

No hace mucho tiempo, Photoshop era la herramienta por defecto para el diseño web. Una aplicación hinchada, con muchas funciones que puede hacer de todo, desde composiciones fotográficas detalladas hasta edición de vídeo. Las cosas han mejorado notablemente desde entonces. Herramientas como Sketch, Adobe XD e InVision Studio están específicamente diseñadas para el diseño web, pero carecen del contexto de la web. Es difícil tomar decisiones de diseño completamente informadas cuando se trabaja en un medio completamente diferente al producto final.
“Incluso la maqueta más’perfecta’ es sólo una pista de cómo podría ser una interfaz de usuario en un estado, en un tamaño de pantalla, en un navegador, en un dispositivo, con un conjunto de datos.” – Colm Tuite, creador de Modulz
A pesar de todo el bombo sobre las aplicaciones web progresivas y las aplicaciones de una sola página, gran parte de Internet sigue siendo páginas y sitios tradicionales. No todos estamos diseñando el próximo Facebook. Podemos lamentar las herramientas más tradicionales por no tener la capacidad de diseñar animaciones, transiciones, etc. En última instancia, las animaciones siguen siendo un pequeño adorno para la mayoría de los sitios.
Una gran parte del buen diseño web todavía consiste en un buen diseño gráfico – esquemas de color, tipografía, maquetación – y herramientas de diseño basadas en vectores siguen siendo un buen lugar para establecer este lenguaje visual.
Pocas personas sólo diseñan en el navegador. Una pantalla blanca y vacía del navegador y un archivo HTML en blanco no son necesariamente el mejor punto de partida para el proceso creativo. Las herramientas de diseño pueden ser un buen lugar para esbozar ideas y no es necesario utilizarlas para crear diseños finales inflexibles .
“Con demasiada frecuencia vemos que los diseñadores están tentados de crear visiones perfectas de píxeles y tirarlas por encima de la pared” – Developers and Designers Can Pair Too
Las implementaciones de diseños a menudo se alejan ligeramente de los documentos de diseño, lo que conduce a un tedioso ir y venir entre el desarrollador y el diseñador. Herramientas como InVision Inspect, Avocode y Zeplin eliminaron mucho dolor de esta entrega, pero el diseño con código evita este problema por completo.
Los desarrolladores codifican las decisiones de diseño en variables para mayor consistencia:
botón de píldoras { frontera: Border-hairline; border-radius: $border-radius; font-size: $font-sizee-small; padding: $space-xs; }
Desafortunadamente, el software de diseño no puede utilizarlos. Pero, si estás diseñando con código, puedes .
“Las decisiones suelen estar aún enterradas en algún archivo en algún repositorio utilizado por los desarrolladores que trabajan en el producto basado en la web que poseen. ¿Qué hay de los diseñadores? … Hemos codificado decisiones destinadas a todos, pero son propiedad de algún calabozo de un repositorio que nadie más puede encontrar”. – Nathan Curtis, Tokens in Design Systems
A menudo sus diseñadores hablan de sistemas de diseño, librerías de patrones y guías de estilo, pero a menudo son ellos mismos los que introducen inconsistencias.
“Los diseños presentan elementos que difieren ligeramente (o en gran medida) de los elementos anteriores que han sido diseñados. Cuando esto sucede, los desarrolladores tienen un dilema. Desarrollan (A) una implementación de píxeles perfecta del diseño o (B) utilizan patrones existentes que difieren del diseño que tienen enfrente? Si los desarrolladores construyen a la composición del diseño, la base de código crece con excepciones e inconsistencias de diseño”. – Jonathan Snook, La Codificación del Diseño
Las características de Sketch, como los símbolos, estilos de texto y estilos de capa, y la capacidad de compartirlos utilizando bibliotecas, han hecho que el diseño sea mucho más fácil para los diseñadores.

El único inconveniente potencial de este enfoque

Cuando diseñas con código real, es tentador usar ese código en la producción, ya que ya has pasado por el problema de escribirlo. Esto puede llevar a código muerto – estilos CSS que no hacen nada. Escribir un buen CSS es en gran medida una cuestión de saber qué hay que abstraer en una clase. Es más fácil hacer esto de una manera sistemática si un diseñador puede proporcionar múltiples diseños de páginas, en lugar de escribir CSS a medida que se avanza.

¿Deberían los diseñadores aprender CSS?

A menos que te mantengas al tanto de lo que sucede en CSS, no tienes idea de lo que es técnicamente factible para tus diseños. Diseñe dondequiera que se sienta productivo y creativo. Pero al menos prueba, refina e itera en el navegador. Probablemente no será su punto de partida, pero entre en el navegador lo más rápido posible. Si no puede codificar, colaborar .

Enchufe: LogRocket, un DVR para aplicaciones web


LogRocket es una herramienta de registro de frontend que le permite reproducir problemas como si hubieran ocurrido en su propio navegador. En lugar de adivinar por qué ocurren los errores, o de pedir a los usuarios capturas de pantalla y volcados de registros, LogRocket le permite repetir la sesión para entender rápidamente qué fue lo que falló. Funciona perfectamente con cualquier aplicación, independientemente del marco de trabajo, y tiene plugins para registrar contexto adicional de Redux, Vuex, y @ngrx/store.
Además de registrar las acciones y el estado de Redux, LogRocket registra los registros de la consola, los errores de JavaScript, los rastreos de pila, las solicitudes/respuestas de red con encabezados + cuerpos, los metadatos del navegador y los registros personalizados. Además, el DOM permite grabar el HTML y el CSS en la página, recreando vídeos de píxeles perfectos incluso de las aplicaciones de una sola página más complejas.
Pruébalo gratis.