Blog Diseño web
Qué es el diseño web y qué incluye, explicado para tu negocio
Qué es el diseño web, en una frase: es decidir cómo se ve y cómo se usa una página. Qué va primero, con qué letra, con qué colores, con qué imágenes, y cómo se mueve todo cuando alguien la recorre desde el celular. No es el código que la hace funcionar: eso es desarrollo, y lo vemos más abajo.
Si tienes un negocio y vas a pedir cotizaciones de diseño de páginas web, esta guía te sirve para entender qué te están vendiendo. Y para saber qué preguntar cuando el precio no cuadra con lo que ves.
Qué hace un diseñador web
Antes de dibujar nada, ordena. Recibe lo que el negocio quiere decir (servicios, precios, cómo contactar) y decide en qué orden lo va a leer la persona. Esa es la parte del trabajo que menos se ve y la que más pesa en si la página vende.
Después viene lo visible: los bocetos de cada pantalla, la letra, los colores, las fotos, los botones. Y al final, cómo se comporta todo en un teléfono de 390 píxeles de ancho, que es donde la va a abrir la mayoría de tus clientes.
Un ejemplo. Un taller mecánico en Medellín quiere una página. El diseñador no empieza por el logo: empieza por preguntarse qué hace alguien que llega con el carro varado. Quiere el teléfono y el horario, arriba, en la primera pantalla. Eso ya es diseño web, antes de elegir un solo color.
Qué incluye el diseño web
Cinco partes. Se deciden en este orden, y cambiar una obliga a revisar las que siguen.
Estructura
Es el esqueleto: qué páginas existen, qué va en cada una y en qué orden. Un sitio de tres páginas (inicio, servicios, contacto) tiene una estructura distinta a la de una tienda con cien productos. Lo desarrollamos en la estructura de una página web, con ejemplos de cada tipo.
Tipografía
La letra decide si se lee o no se lee. Un cuerpo de texto que se lea en el celular sin hacer zoom, un titular que se distinga del resto y no más de dos familias por sitio. Las fuentes también pesan: cada una que se carga suma tiempo de espera.
Color
Una paleta de tres a cinco colores, con un contraste suficiente entre el texto y el fondo. La norma de accesibilidad WCAG pide una relación mínima de 4,5:1 para el texto normal (W3C, criterio 1.4.3). Gris claro sobre blanco no la cumple, y es el error más común. En paletas de colores para páginas web hay ejemplos por tipo de negocio, con los códigos.
Imágenes
Fotos propias siempre que existan: el local, el producto, el equipo trabajando. Las de banco de imágenes hacen que una panadería de Cali se parezca a las otras cuatrocientas. Cada imagen se recorta para el lugar que ocupa y se comprime para que pese poco.
Movimiento
Es lo que pasa cuando bajas: una sección que aparece, un botón que responde. Bien usado, guía la lectura. Mal usado, marea y hace lenta la página en un celular de gama media. También tiene que existir una versión sin movimiento, para quien la activó así en su teléfono.
Qué es el diseño web responsivo
Es el diseño que se acomoda al ancho de la pantalla. La misma página se ve en un monitor de 1.920 píxeles y en un teléfono de 390, y en los dos se lee sin hacer zoom ni desplazarse hacia los lados.
No es una versión aparte para celular. Es una sola página con reglas: a tal ancho, las tres columnas se apilan en una; el menú se guarda detrás de un botón; los textos crecen o se achican.
Google rastrea e indexa las páginas con su versión para celular (Google Search Central). Si tu página se ve bien en el computador y mal en el teléfono, para Google se ve mal.
Cómo comprobarlo tú mismo: abre la página en tu teléfono. Si tienes que hacer zoom para leer un párrafo, o pinchar tres veces para acertarle a un botón, no es responsiva.
Diseño web y desarrollo web: no son lo mismo
El diseño decide cómo se ve y cómo se usa. El desarrollo lo construye: escribe el código, conecta el formulario, publica en el servidor. Son dos oficios, y a veces la misma persona hace los dos. En qué es el desarrollo web está la otra mitad.
Para un negocio pequeño la diferencia importa al cotizar. Una propuesta puede incluir el diseño y no la programación, o al revés. Pregunta cuál de los dos incluye el precio y quién hace lo que falta.
| Pregunta | Diseño | Desarrollo |
|---|---|---|
| ¿Qué va en la primera pantalla? | Sí | |
| ¿Qué color tiene el botón? | Sí | |
| ¿El formulario llega al correo? | Sí | |
| ¿La página carga rápido? | Los dos | Los dos |
| ¿Se ve bien en el celular? | Los dos | Los dos |
Diseño web y página web: cómo se relacionan
Una página web es el resultado: dominio, alojamiento, contenido y código, publicados. El diseño es una de sus capas. En qué es una página web explicamos todas las partes y cómo encajan.
Cómo reconocer un buen diseño web sin ser diseñador
No se mide por lo bonito. Se mide con cuatro preguntas que cualquiera puede responder abriendo el sitio en el celular:
- ¿En pocos segundos entiendo qué vende y para quién?
- ¿Encuentro cómo contactar sin buscar?
- ¿Se lee el texto sin hacer zoom?
- ¿Carga antes de que me den ganas de cerrarlo?
Si las cuatro dan que sí, el diseño hizo su trabajo. Lo demás (el logo animado, el degradado) es gusto.
Preguntas frecuentes
¿Qué es el diseño web y para qué sirve?
Es decidir cómo se ve y cómo se usa una página. Sirve para que quien llega entienda rápido qué vendes y sepa cómo contactarte, desde el teléfono y sin esfuerzo.
¿Cuánto tarda el diseño de una página web?
Un sitio de tres a cinco páginas se diseña en semanas, no en meses. Lo que más estira el plazo es que falten los textos y las fotos: sin ellos, el diseñador espera.
¿Qué programas se usan para el diseño web?
Figma es el más usado para bocetar las pantallas. El resultado se pasa después a código, o a un constructor como Wix o WordPress, según cómo se vaya a construir el sitio.
¿El diseño web incluye los textos?
No siempre, y es la primera pregunta que hay que hacer. Muchas cotizaciones dicen «el cliente entrega los contenidos», y ahí el trabajo pasa a ser tuyo.