Conceptos básicos de diseño web

Esta guía reúne algunos principios básicos que todo diseñador web debe tener en cuenta al crear interfaces. No se trata de reglas estrictas, sino de recomendaciones que facilitan la coherencia visual, la accesibilidad y la optimización de un proyecto web.

Tamaño del canvas (1400 px de ancho)

Un diseño web debe adaptarse a cualquier pantalla, pero es importante elegir un ancho de referencia para trabajar.

El tamaño de monitor más común es 1366 × 768 px, por lo que lo ideal es diseñar en un canvas de 1400 px de ancho. Esto garantiza que la web se vea bien tanto en pantallas estándar como en resoluciones mayores.

Tip: algunos elementos, como fondos o secciones de ancho completo, pueden ocupar el 100% de la pantalla, pero mantener el contenido principal dentro de 1400 px ayuda a asegurar la legibilidad y consistencia.

Para móviles el tamaño recomendado es 320 píxeles de ancho ya que este es el tamaño más pequeño y ahí debe caber todo lo necesario.

Tamaño de tipografías

Según las normas de accesibilidad, el tamaño mínimo recomendado para párrafos es de 16 px, tanto en dispositivos móviles como en escritorio.

En cuanto a encabezados, puedes guiarte con la siguiente tabla de referencia:

• H1: 26 – 40 px
• H2: 24 – 32 px
• H3: 22 – 28 px
• H4: 20 – 24 px
• H5: 18 – 20 px
• H6: 16 px

Recuerda: estos valores son guías, puedes ajustarlos según el proyecto, pero evita que el contraste entre títulos y párrafos sea demasiado pequeño.

Tamaño de botones

Un botón debe ser cómodo de usar tanto en escritorio como en pantallas táctiles.

• Altura recomendada: 45 px
• Ancho: variable, pero siempre debe ajustarse a móviles.
• Texto: al menos 16 px de tamaño para garantizar legibilidad.

Consejo: asegúrate de que haya suficiente espacio alrededor de cada botón para que sea fácil de presionar con el dedo en dispositivos móviles.

Uso de tipografías

El punto más importante: usa tipografías con licencia.

Muchos estudios legales y autores están enviando cobros a personas que usan fuentes sin permiso, lo cual puede convertirse en un problema serio para tu proyecto.

Opciones recomendadas:

Gratuitas: Google Fonts
De pago: Adobe Fonts (Si pagas la licencia puedes usarlas)

Si compras una tipografía para web, asegúrate de que incluya el formato .woff2, que es el más eficiente y soportado actualmente.

Tamaño y formatos de imagen

Una web lenta muchas veces se debe a imágenes mal optimizadas. Ten en cuenta estas reglas básicas:

• Logos e íconos: SVG (ligeros y escalables).
• Imágenes de contenido: JPG o WebP.
• PNG: solo cuando sea necesaria la transparencia (ej. iconos que no puedan ser SVG).
• Banners o fondos de sección: al menos 1920 px de ancho.
• Imágenes de contenido estándar: mínimo 1200 px de ancho.
• Peso máximo recomendado: 250 KB (aunque depende del detalle de la imagen).

UI Kit

Un UI Kit es la guía de estilo que asegura que todos los elementos de una web mantengan coherencia. Incluso en proyectos pequeños, es recomendable preparar uno.

Un UI Kit básico debería incluir:

• Logos y sus variantes de uso
• Paleta de colores
• Tipografías (nombre, tamaños, peso y colores)
• Botones (con sus estados: normal, hover, activo, deshabilitado)
• Formularios (inputs, selects, checkbox, radio, mensajes de error/success)
• Tabs y acordeones
• Componentes de navegación (menús, breadcrumbs)

Lo ideal es trabajar el UI Kit en un archivo compartido en Figma, Sketch o Adobe XD, para que todo el equipo tenga acceso actualizado.