Módulo 14

Módulo 14: Mejores Prácticas para Diseñadores

Consejos profesionales para crear interfaces de calidad

Consejos profesionales para crear interfaces de calidad

---

Objetivos de Aprendizaje

Al finalizar este módulo serás capaz de:

  • Nombrar widgets de forma profesional y consistente
  • Aplicar siempre layouts correctamente
  • Seguir principios de diseño UI aplicados a Qt
  • Evitar los errores más comunes de principiantes
  • Usar una checklist de calidad antes de entregar un diseño
  • Crear interfaces accesibles y responsivas
  • Mantener archivos .ui organizados y mantenibles

---

14.1 Nomenclatura y Organización

Nombra tus widgets descriptivamente

El error más común es dejar los nombres por defecto que da Qt Designer (label, pushButton, lineEdit). Esto hace imposible mantener el proyecto.

Mal nombre Buen nombre Por qué
------------ ------------- ---------
`label`, `label_2`, `label_3` `titulo_label`, `subtitulo_label`, `descripcion_label` Se entiende qué muestra cada uno
`pushButton`, `pushButton_2` `guardar_btn`, `cancelar_btn` Se entiende qué hace cada uno
`lineEdit`, `lineEdit_2` `email_input`, `password_input` Se entiende qué contiene cada uno
`groupBox` `datos_personales_group` Se entiende qué agrupa
`comboBox` `pais_combo` Se entiende qué selecciona
`tabWidget` `configuracion_tabs` Se entiende qué contiene

Convención de nombres recomendada

Usa la convención: nombre_funcional_tipo

Tipo Sufijo Ejemplo
------ -------- ---------
Label `_label` `titulo_label`, `nombre_label`
Push Button `_btn` `guardar_btn`, `cancelar_btn`
Tool Button `_toolbtn` `buscar_toolbtn`
Line Edit `_input` `email_input`, `nombre_input`
Text Edit `_textedit` `descripcion_textedit`
Plain Text Edit `_plaintext` `notas_plaintext`
Combo Box `_combo` `pais_combo`, `tema_combo`
Spin Box `_spin` `edad_spin`, `cantidad_spin`
Check Box `_check` `newsletter_check`
Radio Button `_radio` `masculino_radio`
Slider `_slider` `volumen_slider`
Progress Bar `_progress` `carga_progress`
List Widget `_list` `archivos_list`
Table Widget `_table` `datos_table`
Tree Widget `_tree` `carpetas_tree`
Group Box `_group` `datos_group`
Tab Widget `_tabs` `config_tabs`
Stacked Widget `_stack` `paginas_stack`
Scroll Area `_scroll` `contenido_scroll`
Frame `_frame` `tarjeta_frame`
Spacer `_spacer` `horizontal_spacer`
Dialog Button Box `_btnbox` `dialogo_btnbox`

🎨 ANALOGÍA DEL DISEÑO

>

Nombrar bien tus widgets es como nombrar bien tus capas en Photoshop. "Capa 1", "Capa 2", "Capa 3" es un infierno. "Fondo", "Título", "Logo" es profesional.

Estructura del Object Inspector

Mantén tu Object Inspector organizado:

Dialog
├── titulo_label
├── datos_personales_group
│   ├── nombre_label
│   ├── nombre_input
│   ├── email_label
│   ├── email_input
│   └── telefono_input
├── preferencias_group
│   ├── newsletter_check
│   ├── promociones_check
│   └── frecuencia_slider
├── horizontal_spacer
├── cancelar_btn
└── guardar_btn

---

14.2 Siempre usa Layouts

Reglas de oro

Regla Descripción
------- -------------
**NUNCA** coloques widgets en posiciones fijas Se desalinean al redimensionar
**SIEMPRE** aplica un layout al widget/ventana principal Todo debe estar dentro de un layout
**USA** Spacers para controlar el espacio flexible Empujan widgets a donde los necesitas
**PRUEBA** redimensionar constantemente Verifica que todo se adapta
**CONFIGURA** minimumSize y maximumSize Controla los límites

⚠️ IMPORTANTE

>

El error más común de los principiantes es colocar widgets "a ojo" sin layouts. Tu diseño se verá perfecto en TU pantalla, pero se romperá en cualquier otra resolución. Layouts desde el inicio, siempre.

Cómo verificar que usas layouts correctamente

  1. Selecciona el widget principal (Dialog o MainWindow) en el Object Inspector
  2. Mira el Property Editor: si ves propiedades de layout (layoutSpacing, layoutMargins), tiene layout
  3. Si no tiene layout, haz clic derecho > Lay Out > Lay Out Vertically
  4. Repite para cada contenedor interno

---

14.3 Principios de Diseño UI aplicados a Qt

Consistencia visual

Principio Cómo aplicarlo
----------- ----------------
**Misma paleta de colores** Define tus colores en el styleSheet del widget padre
**Mismo tamaño de fuente** Usa 13pt para texto normal, 16pt para subtítulos, 20pt+ para títulos
**Mismo estilo de botones** Todos los botones primarios con el mismo color, los secundarios con otro
**Mismos bordes redondeados** Usa el mismo border-radius en todos los campos de entrada
**Mismos márgenes** Usa 8px, 16px o 24px consistentemente

Jerarquía visual

Nivel Tamaño Peso Color Uso
------- -------- ------ ------- -----
**Título principal** 20-24pt Bold Blanco Título de la ventana/formulario
**Subtítulo** 16-18pt Bold Blanco o verde Títulos de sección
**Label de campo** 13pt Normal Gris claro Labels de formularios
**Texto de cuerpo** 13pt Normal Gris claro Descripciones, ayuda
**Texto pequeño** 11pt Normal Gris Notas al pie, tooltips

Espaciado

Espacio Valor Uso
--------- ------- -----
**Entre elementos relacionados** 4-8px Label y su campo de entrada
**Entre grupos de elementos** 16-24px Entre Group Boxes
**Márgenes del contenedor** 12-16px Borde del Dialog al contenido
**Entre botones** 8px Espacio entre botones de acción

🎨 ANALOGÍA DEL DISEÑO

>

El espaciado en UI es como el espacio en blanco en diseño gráfico: no es espacio desperdiciado, es espacio que da respiro y organización. Una interfaz sin espacio entre elementos se siente saturada y confusa.

Accesibilidad

Principio Cómo aplicarlo
----------- ----------------
**Contraste suficiente** Texto blanco sobre fondo oscuro o viceversa. Verifica con herramientas de contraste
**Tamaño de fuente mínimo** 12pt para texto de cuerpo, nunca menos
**Tooltips en botones con icono** Siempre explica qué hace un botón que solo tiene icono
**No usar solo color para comunicar** Combina color con texto o iconos (no solo "los campos en rojo son obligatorios")
**Labels claros** Cada campo debe tener un label que explique qué va ahí
**Orden de tabulación lógico** Configura el Edit Tab Order para que siga el flujo visual

---

14.4 Errores Comunes a Evitar

Error Problema Solución
------- ---------- ----------
**Widgets sin layout** Se desalinean al redimensionar Aplica siempre un layout al contenedor padre
**Nombres genéricos** (`label_2`) Imposible mantener el proyecto Usa nombres descriptivos desde el inicio
**Demasiados widgets en una ventana** Interfaz saturada y confusa Usa Tab Widgets o Stacked Widgets para organizar
**No probar en diferentes tamaños** Se rompe en otras resoluciones Redimensiona constantemente mientras diseñas
**Colores sin contraste** Texto ilegible Verifica contraste con herramientas online
**Fuentes demasiado pequeñas** Usuarios no pueden leer Mínimo 12pt para texto de cuerpo
**Ignorar el Property Editor** Widgets sin personalizar Explora todas las propiedades de cada widget
**Placeholders genéricos** El usuario no sabe qué escribir Usa placeholders descriptivos y contextuales
**Botones sin texto claro** El usuario no sabe qué hace "Guardar cambios" en lugar de "OK"
**Sin feedback visual** El usuario no sabe qué está pasando Usa tooltips, status tips, y mensajes
**Mezclar estilos inconsistentes** Se ve amateur Define un tema global y aplícalo consistentemente
**No usar Spacers** Botones alineados a la izquierda Usa Horizontal Spacer para empujar a la derecha

---

14.5 Checklist antes de Entregar un Diseño

Antes de considerar un diseño como terminado, verifica cada punto:

Nomenclatura

  • [ ] Todos los widgets tienen nombres descriptivos
  • [ ] Se sigue la convención nombre_funcional_tipo
  • [ ] No hay widgets con nombres por defecto (label_2, pushButton_3)

Layouts

  • [ ] El widget principal tiene un layout aplicado
  • [ ] Todos los contenedores internos tienen layouts
  • [ ] Los Spacers están donde se necesita espacio flexible
  • [ ] No hay widgets en posiciones absolutas

Estilos

  • [ ] Los colores tienen contraste suficiente
  • [ ] Las fuentes son legibles (mínimo 12pt para cuerpo)
  • [ ] Los estilos son consistentes en toda la interfaz
  • [ ] Los botones tienen efectos hover y pressed

Funcionalidad

  • [ ] Los Signals y Slots están configurados correctamente
  • [ ] Los placeholders son descriptivos
  • [ ] Los tooltips están en botones con solo icono
  • [ ] El orden de tabulación es lógico

Responsive

  • [ ] La ventana se ve bien al redimensionar
  • [ ] Los widgets que deben crecer tienen sizePolicy Expanding
  • [ ] Los widgets que deben mantener tamaño tienen sizePolicy Fixed
  • [ ] El layoutStretch está configurado correctamente

Recursos

  • [ ] Los iconos están incluidos en el archivo de recursos
  • [ ] Las imágenes se cargan correctamente
  • [ ] Los recursos están organizados con prefixes

Accesibilidad

  • [ ] Los campos obligatorios están marcados
  • [ ] Los labels son claros y descriptivos
  • [ ] El contraste es adecuado
  • [ ] El orden de tabulación sigue el flujo visual

---

14.6 Consejos de Productividad

Consejo Descripción
--------- -------------
**Usa Ctrl+C / Ctrl+V** Copia y pega widgets con todas sus propiedades
**Crea un template base** Un archivo .ui con tu tema y estructura base que reutilices
**Guarda frecuentemente** `Ctrl+S` cada pocos minutos
**Usa la vista previa** `Ctrl+R` constantemente para verificar
**Organiza en carpetas** Separa tus .ui por tipo (dialogs, windows, components)
**Usa estilos globales** Aplica el styleSheet al widget padre para heredar
**Prueba en otra resolución** Abre la vista previa y redimensiona agresivamente
**Documenta tus decisiones** Agrega comentarios en el nombre de los widgets si es necesario

---

14.7 Template Base Recomendado

Crea un archivo template_base.ui que uses como punto de partida:

Dialog (500x400)
├── styleSheet: background-color: #1a1a2e;
├── Layout Vertical
│   ├── titulo_label (20pt, Bold, blanco, centrado)
│   ├── Frame (styleSheet: background-color: #2d2d3d; border-radius: 12px;)
│   │   └── Layout Vertical
│   │       ├── [Aquí va tu contenido]
│   ├── horizontal_spacer
│   ├── cancelar_btn
│   └── guardar_btn (estilizado en verde)

---

Recursos Adicionales

Recurso Descripción
--------- -------------
[Material Design Guidelines](https://m3.material.io/) Guías de diseño de Google
[Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) Guías de diseño de Apple
[Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) Guías de accesibilidad
[Contrast Checker](https://webaim.org/resources/contrastchecker/) Verifica contraste de colores

---

Evaluación de Comprensión

  1. ¿Por qué es importante nombrar bien los widgets?
  2. ¿Qué convención de nombres se recomienda para un Line Edit?
  3. ¿Qué debes hacer SIEMPRE con el widget principal de tu diseño?
  4. ¿Cuál es el tamaño mínimo de fuente recomendado para texto de cuerpo?
  5. ¿Qué espaciado recomiendas entre elementos relacionados?
  6. ¿Menciona 3 errores comunes de principiantes y cómo evitarlos.
  7. ¿Qué propiedad del Push Button lo hace activable con la tecla Enter?
  8. ¿Por qué debes usar Spacers en lugar de posiciones fijas?
  9. ¿Qué herramienta puedes usar para verificar el contraste de colores?
  10. ¿Qué debe tener tu checklist antes de entregar un diseño?

---

Módulo anterior: ← [Módulo 13: Exportación](12-exportacion.md)

Siguiente módulo: → [Módulo 15: Proyecto Final](14-proyecto-final.md)

📝 Evaluación de Comprensión

Escribe tus respuestas y luego presiona el botón para comparar con las respuestas correctas.

1. ¿Por qué es importante nombrar bien los widgets?
✅ Respuesta Correcta
Porque nombres genéricos como 'label_2' o 'pushButton_3' hacen imposible mantener el proyecto. Nombres descriptivos como 'titulo_label' o 'guardar_btn' permiten identificar rápidamente la función de cada widget.
2. ¿Qué convención de nombres se recomienda para un Line Edit?
✅ Respuesta Correcta
nombre_funcional_input, por ejemplo: email_input, nombre_input, password_input.
3. ¿Qué debes hacer SIEMPRE con el widget principal de tu diseño?
✅ Respuesta Correcta
Aplicarle un layout (clic derecho > Lay Out > Lay Out Vertically).
4. ¿Cuál es el tamaño mínimo de fuente recomendado para texto de cuerpo?
✅ Respuesta Correcta
12pt
5. ¿Qué espaciado recomiendas entre elementos relacionados?
✅ Respuesta Correcta
4-8px entre elementos relacionados (como label y su campo), 16-24px entre grupos de elementos, 12-16px de márgenes del contenedor.
6. ¿Menciona 3 errores comunes de principiantes y cómo evitarlos.
✅ Respuesta Correcta
1) Widgets sin layout: siempre aplicar un layout al contenedor padre. 2) Nombres genéricos: usar nombres descriptivos desde el inicio. 3) No probar en diferentes tamaños: redimensionar constantemente mientras se diseña.
7. ¿Qué propiedad del Push Button lo hace activable con la tecla Enter?
✅ Respuesta Correcta
default = true
8. ¿Por qué debes usar Spacers en lugar de posiciones fijas?
✅ Respuesta Correcta
Porque los Spacers son flexibles y se adaptan al redimensionar la ventana, mientras que las posiciones fijas causan desalineación en diferentes resoluciones.
9. ¿Qué herramienta puedes usar para verificar el contraste de colores?
✅ Respuesta Correcta
Contrast Checker de WebAIM (webaim.org/resources/contrastchecker/) u otras herramientas de verificación de contraste online.
10. ¿Qué debe tener tu checklist antes de entregar un diseño?
✅ Respuesta Correcta
Verificar: nomenclatura descriptiva, layouts aplicados, estilos consistentes, contraste adecuado, signals/slots configurados, placeholders descriptivos, tooltips en botones con icono, orden de tabulación lógico, responsive design, y recursos incluidos.
Anterior: Módulo 13 Siguiente: Módulo 15