La frase «quiero un sitio moderno y bonito» casi no le dice nada al desarrollador. Se dice de páginas minimalistas en blanco y negro y de sitios brillantes con animación, de catálogos corporativos estrictos y de landings ligeras. Cada uno se imagina lo suyo bajo esas palabras, y eso suele salir a la luz en la primera maqueta, cuando rehacerla ya sale más caro.
Los deseos en sí no tienen la culpa: simplemente están formulados de un modo demasiado general. Unos ejemplos de sitios, con notas cortas de qué es exactamente lo que le gusta en ellos, le dicen al desarrollador más que cualquier descripción con palabras. A esos ejemplos se les llama referencias.
Qué da una referencia y qué no da
Una referencia — es un ejemplo al que se puede señalar: así lo quiero yo, así no lo quiero. Quita el problema de traducir del lenguaje del gusto al lenguaje del diseño. Usted no necesita saber cómo se llama un tipo de letra o un recurso de maquetación; basta con mostrar un sitio donde eso esté.
Lo que una referencia no da — una solución hecha. El sitio de otra empresa está hecho para sus tareas, su público y sus materiales. Copiarlo entero no saldrá y no hace falta: el diseño se construye alrededor de sus servicios, de sus fotos y de sus textos. Una referencia muestra la dirección, y no el punto final.
Por eso una lista de enlaces por sí sola, sin comentarios, ayuda poco. El desarrollador ve cinco sitios distintos y no entiende qué los une: el color, la estructura, el ambiente o un botón que gustó.
Cuántas referencias elegir y dónde buscarlas
Por lo general bastan unos ejemplos. Si son demasiados, empiezan a contradecirse, y elegir una dirección se vuelve más difícil. Si el ejemplo es uno, no se entiende qué es lo principal en él.
Se puede buscar en cualquier parte. Los sitios de la competencia muestran lo que es habitual en su sector, y los sitios de otros sectores a menudo sugieren un giro nuevo. Sirven tanto las selecciones de diseño como las aplicaciones que usted usa cada día y los materiales impresos, si en ellos está el ambiente que hace falta.
También es útil reunir antirreferencias — ejemplos de lo que seguro no le gusta. A veces dicen más de sus expectativas que los ejemplos acertados: «no lo quiero como aquí, demasiado sombrío y mucho texto» corta de entrada toda una dirección.
Qué marcar exactamente en una referencia
Lo principal al trabajar con ejemplos — decir qué es exactamente lo que gusta. Casi siempre es una o dos cosas de varias.
- Estructura.Cómo está hecha la página: qué hay en la primera pantalla, en qué orden van los bloques, cómo está organizado el menú, con qué rapidez se llega al precio o al formulario de solicitud.
- Tipografía.Qué fuentes, títulos grandes o contenidos, mucho aire entre líneas o un texto denso.
- Paleta de color.Fondo claro u oscuro, un color de acento o varios, tonos vivos o apagados.
- Animación.Si hay movimiento al desplazar, cómo aparecen los bloques, si están animados los botones y las fichas. Aquí es especialmente útil marcar dónde el movimiento ayuda y dónde ya molesta.
- Diseño del catálogo.Cómo se ven las fichas de productos o de servicios, cómo funcionan los filtros, qué se ve en la vista previa.
- Un elemento aparte.A veces de todo el sitio gusta una sola cosa: una calculadora, un formulario de reserva, una galería, una forma de mostrar las etapas del trabajo. Eso también es una referencia valiosa, si se dice así.
Está bien cuando cada nota ocupa una o dos líneas. Por ejemplo: «Me gusta la primera pantalla — una foto grande y un título corto, sin botones de más. Los colores no me gustan, son demasiado fríos». Un comentario así basta para entender la idea.
Cómo no ahogarse en las palabras del diseñador
Al cliente no se le exige el lenguaje del diseñador. Las palabras «composición», «retícula modular» o «jerarquía» no son obligatorias. Bastan las palabras de siempre: «apretado», «demasiado de todo», «no se ve el botón», «el texto cuesta leerlo», «se ve barato», «quiero más calma».
Esas réplicas son más precisas de lo que parece. Si se dice que el sitio se ve apretado, eso es una tarea para el desarrollador: más aire, menos elementos en la pantalla. Si se dice que no se ve el botón, eso es una cuestión de contraste y de colocación. Traducir una sensación en una decisión — es mi trabajo, y para eso hace falta justo la sensación, y no una receta hecha.
Peor funcionan las recetas sin explicación: «ponga el botón en rojo», «quite este bloque». Puede que la decisión sea acertada, pero si no está claro qué problema resuelve, es fácil hacer lo que se pidió y no obtener lo que se quería. Es mejor decir lo uno y lo otro: «el botón no se ve, ¿tal vez hacerlo rojo?»
Cómo formular los comentarios a la maqueta
Cuando aparece la primera maqueta, las referencias se convierten en un punto de contraste. Es cómodo mirar la maqueta junto con ellas y hacerse la pregunta: ¿transmitió lo que a mí me gustaba en los ejemplos?
Los comentarios conviene reunirlos en una sola lista, y no enviarlos de uno en uno. Cada comentario es mejor atarlo a un lugar concreto: «inicio, segunda pantalla, título» es más claro que «en algún punto del medio». Y conviene separar qué no le gusta a usted y qué, según le parece, no funcionará para los clientes. Son cosas distintas, y comentarlas es más cómodo de formas distintas.
Si en el proceso usted encontró una referencia nueva, es normal. Pero entonces importa decir si cambia la dirección o la precisa. Una dirección nueva después de una maqueta aprobada — es un cambio de una decisión ya tomada, y afecta a los plazos y al presupuesto. Una precisión dentro de la misma dirección por lo general cabe en una corrección corriente.
Cuando una referencia pide una solución compleja
A veces en un ejemplo que gustó hay algo que no está en las herramientas estándar: una animación no estándar, un esquema interactivo, una calculadora con una lógica poco habitual. Hacerlo se puede; el coste simplemente conviene comentarlo aparte. Esos elementos se hacen aparte, a veces con código propio, y como tarea no estándar se valoran de antemano.
También pasa lo contrario: un efecto que se ve complejo se puede obtener con medios simples, y entonces yo lo diré. Por eso conviene mostrar la referencia entera, aunque parezca que repetirla es imposible.
Para un sitio con muchas páginas del mismo tipo, las referencias es útil mirarlas también desde el punto de vista del sistema. En un sitio corporativo en Tilda yo hago plantillas únicas para las páginas que se repiten, así que importa que el estilo que gustó funcione igual de bien en la página de inicio y en la décima página de un servicio.
Cómo puede verse una buena selección de referencias
Abajo va un ejemplo convencional, no un proyecto real. Muestra el formato, y no un gusto.
| Ejemplo | Qué le gusta | Qué no le gusta |
|---|---|---|
| Sitio A | Primera pantalla: una foto grande y un título corto | Colores demasiado oscuros |
| Sitio B | Cómo se muestran las etapas del trabajo, por pasos con iconos | Un menú sobrecargado |
| Sitio C | Fichas de servicios con el precio ya en la vista previa | Texto pequeño |
| Antirreferencia D | — | Mucha animación, todo se mueve al desplazar |
Con una tabla así, la primera conversación sobre el diseño empieza por lo concreto. Si usted ya reunió ejemplos o solo está empezando, describa el proyecto en el quiz del sitio. Responderé en persona, miraré las referencias y diré cuáles de ellas encajan con su tarea.
Lea también
- Cómo preparar los materiales del sitio para que el desarrollo avance más rápido
- Cómo aprobar el diseño y las correcciones sin alargar los plazos
- Qué fotografías necesita el sitio: portadas, tarjetas, galerías y sliders
- Cómo es el desarrollo de un sitio en Tilda: qué se necesita del cliente en cada etapa