por José Alcaraz, el 10 de febrero de 2020
La maquetación o diagramación web se refiere a transformar un diseño gráfico en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico. Este ejercicio es muy demandado en el entorno tecnológico actual, y representa un gran universo de aventuras para aquellos que buscan perfeccionarlo.
Independiente de la necesidad, luego de que hagas un análisis inicial de requisitos y creas que tengas lo necesario para empezar a maquetar, ten en cuenta estos pasos para que evites reprocesos, ahorres tiempo y perfecciones tu ejercicio:
Antes de tirar código
1. Arquitectura de la información definida
Tener clara la arquitectura de la información te ayudará a estructurar las páginas y los componentes de tu proyecto, además de las etiquetas semánticas <h1>, <h2>, <h3>, <p>, <section>, etc. También tendrás claras las URLs de las páginas del proyecto para cuando debas hacer la lógica del enrutamiento más adelante.
2. Flujos de navegación claros
Esto te ayudará a maquetar los componentes en el contexto de la aplicación y te guiará en la toma de decisiones de la estructura de páginas, del código y de las carpetas donde ubicarás los diferentes componentes del proyecto.
3. Insumos gráficos aprobados y optimizados
Asegúrate de tener todo lo necesario para empezar a maquetar. El punto de partida es tener acceso a la última versión del diseño aprobada por el Product Owner en herramientas gráficas como Adobe XD, acompañado de las imágenes optimizadas para medios digitales, paleta de colores, tipografías, microinteracciones, etc. La comunicación con el equipo de diseño gráfico es vital para que tu tiempo como maquetador sea el más efectivo posible.
4. ¿Qué elementos son reusables en la interfaz?
Botones, inputs, íconos, templates (estructuras de páginas), entre otros; son los elementos que pueden identificarse en el escaneo visual inicial del diseño de la UI. Estos elementos pueden ser los primeros que se maquetan, para que sean reusados más adelante en los otros componentes.
5. ¿En qué navegadores y dispositivos se soportará la aplicación?
Esta información será vital para que sepas qué propiedades podrás usar en CSS o los insumos gráficos que necesitarás para asegurar la misma experiencia de usuario en los diferentes navegadores y dispositivos.
Al tirar código
6. De lo general a lo específico
Teniendo en cuenta que la información del sitio debe adaptarse a diferentes dispositivos, piensa la UI como cajas móviles o estáticas que contienen otras cajas móviles o estáticas a través de las distintas resoluciones. Las etiquetas semánticas en HTML, el modelo de caja, las posiciones y los sistemas de rejilla en CSS te guiarán en la construcción de los contenedores principales de la UI, para llegar luego a los detalles del diseño.
7. Busca constantemente buenas prácticas
Aunque se te ocurra una solución ingeniosa para un problema, siempre es útil tener otros puntos de vista, e independiente de tu nivel de conocimiento, nunca dejes de perseguir la mejor manera de hacer las cosas.
8. Trabaja en equipo, aprende a preguntar rápido y sé recursivo
Solos vamos más rápido, pero acompañados llegamos más lejos. Los retos compartidos abren paso a soluciones más creativas, eficientes y efectivas. Seguramente alguien más tuvo un problema como el que tienes, y ahorrarás tiempo de desarrollo si absorbes ideas rápidas que te lleven a la solución.
9. Todo puede cambiar
Las necesidades del entorno pueden ser muy variables y el desarrollo debe estar pensado para eso. Si algún componente cambia, y ya estabas preparado, ahorrarás tiempo y te tomará menos esfuerzo hacer el cambio.
10. Atención a los detalles
“Los detalles no son solo detalles, ellos hace el diseño” (Charles Eames). Como maquetadores se vuelve crucial desarrollar el “ojo de pixel”, con el fin de ejecutar interfaces con detalles enfocados a la experiencia final de los usuarios. Un buen “ojo de pixel” puede ayudarte a predecir y corregir errores de interfaz a tiempo y a perfeccionar tus habilidades gráficas.
