Acercarse al proceso de diseño de sitios web desde el navegador

“Aquí están los locos, los inadaptados, los rebeldes, los alborotadores, las clavijas redondas en los agujeros cuadrados... los que ven las cosas de manera diferente, no les gustan las reglas... Puedes citarlos, estar en desacuerdo con ellos, glorificar o difamarlos, pero lo único que no puedes hacer es ignorarlos porque cambian las cosas…” — Campaña Think Different de Apple, Steve Jobs, 1997.

La mayoría de las veces, los diseñadores siguen creando maquetas estáticas de pantallas utilizando herramientas de diseño tradicionales durante el proceso de diseño del sitio web. Pero algunos diseñadores están dando un gran salto y los están pasando por alto, yendo directamente al código, creando y ajustando diseños en el navegador y probando sus diseños tal como se verían en tiempo real. ¿Son los locos, los inadaptados, los rebeldes?

Por lo general, el proceso de desarrollo de un sitio web tradicional involucra muchas fases, que incluyen la planificación, la estrategia de contenido, el diseño, la creación de esquemas, la creación de prototipos, las pruebas, el desarrollo, la publicación, etc. Pero durante la fase de diseño, ¿podría haber otra forma de producir diseños de sitios receptivos "perfectos en píxeles" y pasar por alto las herramientas de diseño por completo?

Con el auge del diseño receptivo y la variedad de dispositivos en uso (móviles, tabletas, computadoras portátiles, computadoras de escritorio, relojes), es mucho más difícil mantener todo consistente, y con más partes móviles a tener en cuenta, el enfoque para diseñar sitios web e interfaces está cambiando.

Aunque no es necesario que un diseñador se convierta en un codificador experto, una solución es que los diseñadores comiencen a trabajar directamente con el código que impulsa un sitio web. Los diseñadores que pueden lidiar con el código con solo un poco de HTML y CSS se encontrarán a sí mismos como un gran activo para cualquier equipo y tendrán una gran ventaja en general.

¿Por qué? Cuando se involucra en un proyecto de diseño de sitio web receptivo con todas sus complejidades, los diseñadores generalmente no tienen tiempo para crear un diseño estático de un componente (digamos un encabezado o un pie de página) en 10 resoluciones y ventanas gráficas diferentes. Incluso si diseñan solo para los dispositivos más populares, aún tendrán que considerar 4-5 pantallas con diferentes relaciones de aspecto, densidad de pantalla y dimensiones de pantalla. No es una tarea pequeña por decir lo menos.

Resolviendo los desafíos de diseño de sitios web con lápiz y papel primero

Exploremos un enfoque de diseño de sitios web y un proceso de planificación diferentes.

La primera fase comienza con un cuestionario al cliente que pregunta sobre los objetivos generales del proyecto desde una perspectiva empresarial, el público objetivo, las estrategias de conversión, las diversas expectativas de rendimiento, etc. Esto se hace antes de que se inicie la fase de diseño real para comprender mejor las necesidades del cliente y el proyecto en general y para ser más eficientes en el futuro.

El siguiente paso es escribir un resumen del proyecto para confirmar que se entendió el resumen. Esto es útil cuando se trabaja en proyectos en un nicho en el que es posible que no tenga mucha experiencia o conocimientos. Llámelo una especificación funcional, pero menos técnica.

Esto ayuda a definir terminologías, palabras clave y procesos. Dependiendo de la complejidad del proyecto, es una buena idea hacer varios escenarios y flujos de usuarios, por lo general, el flujo de incorporación, la búsqueda y navegación de un sitio, o un flujo de "agregar al carrito" y finalizar la compra si se trata de un sitio de comercio electrónico.

Wireframing y prototipos

La creación de prototipos es la siguiente fase en el proceso de diseño de sitios web. Construir wireframes rápidos para hablar sobre el diseño de la página, las funcionalidades y cómo se verán las páginas del sitio en diferentes dispositivos es un buen comienzo. No lleva mucho tiempo construir docenas de esquemas de diferentes plantillas y componentes. Se puede crear un prototipo de sitio web simple a partir de estos y, según la complejidad del proyecto, se pueden usar herramientas de creación de prototipos como InVision, Adobe XD, Balsamiq, Moqups o Axure.

Mood Boards e Inventario de Interfaz

El siguiente paso es armar un panel de estado de ánimo: una colección de cosas que al diseñador, al cliente y a otras partes interesadas les pueden gustar en otros sitios web: diseños, apariencia, colores o fuentes, íconos, imágenes, etc. Esto ayudará a definir la apariencia general del sitio. Si el cliente tiene una guía de estilo de marca, debe tenerse en cuenta e incorporarse al nuevo diseño del sitio.

Una vez que se aprueban varios artefactos (wireframes, prototipos, maquetas, paneles de ideas, etc.), es una buena idea hacer un inventario de la interfaz.

Un inventario de interfaz es una colección completa de las partes y piezas que componen su interfaz.

brad escarcha

Si realiza un diseño web receptivo desde cero, comience escribiendo todos los componentes y elementos a partir de los cuales se construirá el proyecto. Una lista desordenada funcionará bien y definitivamente es mejor que nada. Por ejemplo, tablas, botones, imágenes, tipografía, medios, formularios, navegación, componentes, etc.

Diseñando en el Navegador

“Diseñar en el navegador” es un término que se hizo popular con el auge del diseño web receptivo. Para minimizar las horas dedicadas a programas de diseño como Sketch, se instó a los diseñadores a trasladar la fase de diseño al navegador y utilizar CSS para el diseño y el estilo. Este enfoque de diseño de sitios web demuestra ser más eficiente ya que reduce muchos pasos.

Al centrarse en la maqueta HTML y probar las ideas de diseño "en el navegador" con CSS, se puede ahorrar el tiempo que normalmente se dedica a crear maquetas estáticas de páginas en otras herramientas de diseño como Sketch. Es una buena idea que los diseñadores se hagan con un buen editor de código y creen un buen método de actualización del navegador para que puedan ver los cambios en tiempo real. Sublime Text y Codekit, por ejemplo, son una gran combinación.

HTML y CSS, estructurados como están, lo obligan a pensar en patrones y lo mantienen bajo control. Es más fácil pensar en la modularidad cuando se crean componentes HTML que se pueden copiar, duplicar y llenar fácilmente con datos dinámicos manteniendo la misma estructura. Si desea crear una modificación específica, debe apuntar explícitamente a ese elemento o agregar otra clase de CSS.

Cuando aplique estilo a los encabezados, a menos que se anulen, serán consistentes en todo el sitio. Lo mismo ocurre con otros elementos. Este tipo de pensamiento lo obliga a estandarizar, agrupar elementos comunes, reutilizar elementos ya diseñados tanto como sea posible y, lo que es más importante, mantener todo modular.

Con una sola declaración de CSS, puede cambiar el relleno de los botones para mejorar los objetivos táctiles y probar directamente en un teléfono móvil, una tableta y una computadora de escritorio. Esto no es fácil de hacer en Photoshop o Sketch porque otros elementos no se reconocen entre sí en el diseño y tiene que reorganizar los objetos cada vez que cambia el tamaño de algo.

¿Quiere probar un esquema de color de encabezado diferente? Al trabajar con solo unas pocas líneas de código CSS, los cambios son visibles en todas las plantillas HTML al instante, en todos los dispositivos y pantallas. Ese tipo de flexibilidad no se puede emular fácilmente cuando tienes 20 maquetas estáticas. Por supuesto, podría usar "símbolos" en Sketch o Adobe XD para componentes reutilizables, pero no son tan versátiles como CSS.

En esta fase, será necesario tomar varias decisiones técnicas. Las preguntas que habrá que responder son:

• ¿Usarás un preprocesador CSS? (recomendado)
• ¿Qué tipo de cuadrícula receptiva usará para el diseño?
• ¿Las fuentes que desea utilizar están disponibles para su compra? ¿Tiene el cliente el presupuesto para las fuentes web premium o volverá a usar las fuentes web gratuitas disponibles?
• ¿Usará iconos multicolores o de un solo color? ¿Varía el tamaño en todo el sitio? A continuación, ¿confía en iconos personalizados o en un paquete de iconos ya existente? ¿Qué tamaños necesitarán acomodar sus íconos?

El problema con las fuentes y el diseño web receptivo

Elegir fuentes para un proyecto de diseño web receptivo puede ser un desafío. Hay muchas posibilidades y tantas trampas. Dado que el diseño se utilizará en el navegador, este es el mejor lugar para probarlos. La legibilidad de las fuentes puede variar según el tamaño, el peso, los colores y la representación, por lo que al probar las fuentes directamente en el navegador, los diseñadores pueden asegurarse de que todo se vea bien y que se cumplan las expectativas deseadas.

Existen muchas herramientas en línea para seleccionar y probar fuentes y probar combinaciones tipográficas. En Typetester y Typecast se pueden encontrar y probar diferentes fuentes de varios servicios y fundiciones. Al trabajar con un servicio de suscripción de fuentes específico como Typekit o Fonts.com, los diseñadores pueden generar fuentes y probarlas directamente en sus plantillas de página. Generar un paquete de Typekit con fuentes nuevas es simple y rápido, y puede ver fácilmente cómo las fuentes particulares afectarán el rendimiento de las páginas web.

Íconos que encajan con el estilo de la marca

Si dibuja iconos personalizados, será necesario definir el tamaño, la cuadrícula y el estilo. Trabajando en Illustrator, cada mesa de trabajo representaría un icono, por ejemplo. Los íconos se pueden exportar fácilmente desde Illustrator como SVG o PNG, que luego se pueden convertir en una fuente de ícono con servicios como Icomoon. Se recomienda utilizar iconos vectoriales (SVG) porque los vectores son independientes de la resolución, por lo que no hay preocupaciones sobre cómo se muestran en las pantallas de alta definición (Retina).

Una guía de estilo y CSS para mantener el proceso de diseño del sitio web bajo control

Incluso si diseñamos en el navegador, con docenas de plantillas y componentes, podríamos perder la noción de dónde se usa algo y de qué manera. Es una buena idea crear una guía de estilo de todos los componentes como repositorio central. Las plantillas de página específicas se crearán a partir de esta guía de estilo mediante la combinación de componentes y elementos de la interfaz de usuario en páginas web.

Los componentes de la interfaz de usuario pueden ser elementos como la paginación, la lista de productos, la galería de imágenes, las ventanas modales, los elementos de formulario, etc., y se utilizan como componentes básicos para las plantillas. Mantener todo en un solo lugar es realmente útil cuando llega el momento de probar la compilación de un componente de interfaz de usuario específico.

Con CSS, se recomienda separar los estilos de los componentes en archivos independientes. Por ejemplo, el estilo de paginación estará en _pagination.scss , los elementos de formulario en _form.scss , y todos estos archivos se incluirán en un solo archivo SCSS con otros archivos (variables, mixin, etc.).

Aunque style.scss puede estar compuesto por docenas de "pequeños archivos", cuando varias personas trabajan en el mismo proyecto, es más fácil realizar un seguimiento de los cambios (ya sea que se use el control de fuente o no) si todo está separado en partes más pequeñas. Es importante continuar manteniendo la guía de estilo después de que el proyecto de diseño del sitio web esté en producción, ya que el equipo deberá realizar un seguimiento de cada componente del sitio.

Uso de hojas de estilo: CSS modular

Desde el punto de vista del desarrollo, existen muchos enfoques para escribir CSS modular. Los más conocidos son SMACSS (Arquitectura Modular y Escalable para CSS), BEM (Bloque, Elemento, Modificador) y OOCSS (CSS Orientado a Objetos). Hay mucho que aprender, incluso si terminas desarrollando tu propio enfoque. En este punto, debe tener una buena colección de componentes de interfaz de usuario y páginas web, que le permitirán crear fácilmente nuevas páginas web. Puede copiar y pegar elementos de la guía de estilo y reorganizarlos según sea necesario.

Dado que todo es modular, no tiene que preocuparse por la consistencia del diseño y el código; pero no olvide que si ajusta un componente de la interfaz de usuario en todo el sistema, deberá actualizar la guía de estilo con los cambios (o agregar el nuevo componente). Para mantener todo organizado, es mejor usar algún tipo de enfoque de plantillas/automatización para trabajar en páginas web como Gulp o Grunt.

¿Que sigue? Diseñando en el Navegador

Ahora tiene un repositorio central de componentes de UI, cada elemento documentado y páginas web creadas a partir de esos componentes. A partir de este momento, es más que probable que los diseñadores ya no necesiten abrir sus herramientas de diseño favoritas, ya que la mayor parte del "diseño" se realizará directamente en el código y se previsualizará en el navegador.

¿No está seguro de cómo un cambio específico afectará el diseño? Ahora puede obtener una vista previa de su diseño en diferentes dispositivos y navegadores simultáneamente para ver cómo cambió una fuente en un encabezado, o cambiar el tamaño y el color de un botón afectará el diseño.

Al usar fuentes web personalizadas, ¿cómo afectará el rendimiento de carga de la página al agregar más pesos de fuente? Podemos probar el rendimiento de la página web del trabajo en curso utilizando servicios como WebPageTest y tomar decisiones informadas sobre los resultados reales. Definitivamente no podemos hacer eso en Photoshop o Sketch.

Trabajar con HTML y CSS, y trabajar en el navegador puede no ser para todos los diseñadores durante el proceso de diseño de un sitio web. Pero si los diseñadores realmente se preocupan por cómo se ve su trabajo en varios dispositivos y tamaños de pantalla, deben asegurarse de que sea perfecto en todo momento. Algo que se ve increíble como una maqueta de diseño estático puede parecer menos que deseable cuando se ve en un navegador web en un dispositivo móvil. Le convendría a los diseñadores expertos crear y probar diseños web en un entorno en el que todos puedan verlos... en el navegador.

Lectura adicional en el blog de diseño de Toptal:

• Diseño receptivo: mejores prácticas y consideraciones
• Cómo diseñar una página de aterrizaje efectiva
• La guía definitiva para el diseño de sitios web de comercio electrónico
• Los fundamentos del rediseño de sitios web: un estudio de caso
• Fuerzas impulsoras del diseño: un estudio de caso de rediseño de sitio web