Diseño de sitios web: la interfaz completa antes de programar

El diseño de un sitio web es la definición visual y funcional de todas sus pantallas antes de escribir código. Es el servicio central de nuestra área de diseño UX/UI, y abarca:

• Plantillas por tipo de página: inicio, páginas de servicio o producto, listados, detalle, artículos, contacto, páginas legales y la página de error.
• Dos tamaños de pantalla como mínimo, celular y computadora, con las reglas para los tamaños intermedios.
• Componentes con todos sus estados: botones normales, al pasar el mouse, enfocados y desactivados; formularios con errores; menús abiertos y cerrados; listas vacías.
• Reglas visuales: paleta de colores, escala tipográfica, grilla, espaciados, íconos y estilo de las imágenes.
• Microinteracciones, que son las pequeñas respuestas visuales a las acciones del usuario, como un botón que cambia al presionarlo o un mensaje que confirma un envío.

• Vas a lanzar un sitio nuevo y varias personas de tu empresa tienen que aprobarlo.
• Tu marca estrenó identidad visual y querés aplicarla con coherencia en todo el sitio.
• El desarrollo lo va a hacer otro equipo y necesita especificaciones precisas.
• Querés evitar que tu sitio se parezca a cientos de otros armados con la misma plantilla.

1. Brief y referencias. Conversamos sobre tus objetivos, tu público y tu competencia, y armamos un moodboard: un tablero de referencias visuales para acordar el tono antes de diseñar.
2. Estructura. Partimos del mapa del sitio y, si el proyecto lo incluye, de los wireframes y prototipos ya validados.
3. Dirección visual. Diseñamos primero la página de inicio para acordar el estilo general.
4. Resto de las plantillas, aplicando las mismas reglas y componentes.
5. Versiones para celular, revisadas en un teléfono real y no solo en la pantalla de la computadora.
6. Revisión de accesibilidad: contraste, tamaños de letra, áreas de toque y orden de lectura.
7. Entrega a desarrollo, con el archivo ordenado y las especificaciones listas.

Un sitio aplica la identidad visual de la empresa: colores, tipografías, logo, tono de las imágenes. Si tu marca ya tiene un manual, lo seguimos. Si la identidad está desactualizada o nunca se definió, conviene trabajarla antes con nuestro servicio de identidad visual y branding, para que el sitio, las redes y las piezas impresas hablen el mismo idioma.

• El archivo de Figma con todas las plantillas en versión para celular y para computadora.
• Una página de componentes con cada elemento y sus estados.
• Las reglas visuales documentadas: colores, tipografías, espaciados y grilla.
• Un prototipo navegable de las pantallas principales para presentar dentro de tu empresa.
• Las imágenes e íconos exportados en los formatos que necesita el desarrollo.