Unidad 7 · Semana 13 · Clase 2 de 5
Diseño web e interfaces
Entender los fundamentos del diseño de sitios web e interfaces.
- Lectura 15 min
- Práctica 35 min
- Repaso 10 min
Del papel a la interfaz
Un sitio web o una app no son un folleto en pantalla: el usuario hace cosas (navega, busca, compra, completa formularios) y la pantalla cambia de tamaño según el dispositivo.
Diseño adaptable
Un sitio se ve en celulares, tabletas y computadoras. El diseño adaptable (en inglés, responsive) reorganiza el contenido según el ancho:
- En celular: una columna, menú plegado, botones grandes.
- En computadora: varias columnas, menú visible.
Se suele diseñar primero para el celular, porque es donde está la mayoría del público, y después se amplía.
Componentes de una interfaz
| Componente | Qué cuidar |
|---|---|
| Encabezado y menú | Marca, navegación clara, pocas opciones |
| Botones | Que parezcan botones; tamaño mínimo de toque de unos 44 × 44 px; un estilo principal y uno secundario |
| Formularios | Etiquetas visibles, campos grandes, errores claros |
| Tarjetas | Bloques repetibles para productos, noticias, servicios |
| Pie de página | Contacto, redes, datos legales |
Sistema de diseño
Igual que el manual de marca para impresos, las interfaces se diseñan con un sistema de diseño: una colección de componentes, colores, tipografías y espaciados reutilizables. Garantiza coherencia entre pantallas y facilita el trabajo con los programadores.
Herramientas
El programa más usado hoy para diseñar interfaces es Figma, que funciona en el navegador y tiene un plan gratuito. Permite diseñar pantallas, armar componentes y hacer prototipos navegables para probar con usuarios.
Diseñá con contenido real, no con "lorem ipsum". Los textos reales de la marca cambian el diseño: son más largos o más cortos de lo que imaginabas.
Práctica · 35 min
- Hacé un boceto en papel de la página de inicio de tu marca en versión celular: encabezado, presentación, productos o servicios, ubicación y contacto.
- Pasalo a Figma (o al programa que uses) en un marco de 390 × 844 px.
- Diseñá un botón principal y uno secundario con los colores de la marca.
- Hacé la versión de computadora de la misma página (1440 px de ancho) reorganizando el contenido.
Repaso · 10 min
1. ¿Qué es el diseño adaptable?
¡Bien! Funciona en celular, tableta y computadora.
Todavía no. Probá otra opción.
2. ¿Qué tamaño mínimo de toque conviene para un botón?
¡Bien! Un área chica es difícil de tocar con el dedo.
Todavía no. Probá otra opción.
3. ¿Por qué conviene diseñar con contenido real?
¡Bien! El contenido real revela problemas de espacio y jerarquía.
Todavía no. Probá otra opción.
Preguntale al asistente
Conoce esta clase y toda la diplomatura. Responde a cualquier hora.
El asistente puede equivocarse. Ante una duda importante, contrastá con la lectura.