header_lecciones_v5

10 pasos para una maquetación eficiente con HTML y CSS

por José Alcaraz, el 10 de febrero de 2020

10 pasos para una maquetación eficiente con HTML y CSS

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.

10 pasos para una maquetación eficiente con HTML y CSS

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.

10 pasos para una maquetación eficiente con HTML y CSS

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.

10 pasos para una maquetación eficiente con HTML y CSS 3

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.

ejj

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.

10 pasos para una maquetación eficiente con HTML y CSS 4

Descarga la guia para trabajar con ambientes IBM Websphere portal

Temas:Desarrollo de Software

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal