Qué mira un jurado de premios de diseño web (contado por quien los ha ganado)

Tabla de contenidos

Hay webs que ves una vez y te acuerdas de ellas durante semanas. No por el producto, ni por el precio, sino por cómo se sentía navegarlas. Esas webs suelen tener algo en común: alguien, en algún jurado, también se fijó en ellas.

En Flamingo Agency hemos recibido premios de CSS Design Awards (Best UI, Best UX, Best Innovation y Special Kudos), Elementor (Website of the Month) y Orpetron (Web Design Appreciation). Así que te contamos, desde dentro, qué miran estos jurados y por qué eso le importa a cualquier negocio, aunque nunca vaya a presentarse a un premio.

La respuesta corta

Los jurados de premios de diseño web valoran sobre todo tres cosas: la interfaz (cómo se ve: composición, tipografía, color, detalle), la experiencia de uso (qué tan fácil y agradable es navegarla) y la innovación (si aporta algo que no se había visto). Por encima de todo, premian la coherencia: que cada decisión, desde una animación hasta un espaciado, responda a una idea clara.

Lo que mira un jurado

La interfaz: cómo se ve

Es lo primero que salta a la vista, pero no se trata de que sea «bonita». Se trata de la composición, la jerarquía, el uso de la tipografía y el color, y los detalles: cómo se alinean las cosas, cuánto aire hay entre ellas, cómo reacciona un botón cuando pasas el ratón. Nadie te va a felicitar por el espaciado entre las letras, pero si está mal, todo el mundo lo va a sentir.

La experiencia: cómo se usa

Una web preciosa en la que no encuentras el menú no gana nada. El jurado navega: prueba en el móvil, busca información, se fija en si la web se entiende sin pensar. Una buena experiencia es la que no se nota: simplemente, todo está donde esperas que esté.

La innovación: qué aporta

Una transición que nunca habías visto, una forma distinta de contar un producto, una interacción que sorprende. Pero ojo: innovar no es meter efectos porque sí. Una animación que no aporta nada es ruido. Una que ayuda a entender el contenido es innovación.

El detalle: lo que la mayoría no hace

Las microinteracciones, los estados de carga, cómo se comporta la web en una pantalla rara, la página de error 404. Son los detalles que la mayoría no se toma el trabajo de hacer, y justo por eso es donde se nota la diferencia.

Por qué las webs premiadas no se parecen entre sí

Si miras una galería de webs premiadas, vas a notar algo curioso: no hay un estilo ganador. Hay webs minimalistas y webs caóticas, oscuras y llenas de color, sobrias y exageradas.

Lo que tienen en común no es el estilo, sino que cada una responde a su marca. Una web premiada para un estudio de arquitectura no se parece a una para una marca de ropa urbana, y no debería. La plantilla que sirve para todos no gana premios, porque no es de nadie.

Qué puede aprender una pyme de todo esto

No necesitas una web premiada para vender. Pero los criterios que usa un jurado son, casualmente, los mismos que hacen que una web funcione:

  • Coherencia: que tu web se parezca a tu marca, y no a la de tu competencia.
  • Claridad: que el cliente encuentre lo que busca sin pensar.
  • Velocidad: que funcione rápido en el móvil, porque ningún jurado ni ningún cliente espera.
  • Detalle: que se note que alguien se tomó el trabajo de cuidar cada parte.

Una web no tiene que ganar un premio. Pero sí tiene que ganarse a tu cliente en los primeros tres segundos.

Nuestra experiencia

En Flamingo no diseñamos para ganar premios. Diseñamos para que tu negocio no se parezca al de tus competidores, y los premios llegan como consecuencia. Uno de esos proyectos es Rubita Studio, reconocido por Orpetron. Puedes ver el resto en nuestro portfolio.

En resumen

Un jurado de diseño web mira lo mismo que tu cliente, solo que con más atención: si se ve bien, si se usa bien, si aporta algo y si cada detalle está pensado. La diferencia es que tu cliente no te da una puntuación. Simplemente, se queda o se va.

Si quieres una web que tu cliente recuerde, cuéntanos tu proyecto.

") O en un plugin tipo "Insert Headers and Footers" ============================================ */document.addEventListener('DOMContentLoaded', function () {/* 1. Crear los elementos del cursor una sola vez */ var glow = document.createElement('div'); glow.id = 'custom-cursor-glow'; document.body.appendChild(glow);var cursor = document.createElement('div'); cursor.id = 'custom-cursor'; cursor.innerHTML = ''; document.body.appendChild(cursor);var cursorIcon = cursor.querySelector('i'); var cursorText = cursor.querySelector('span');/* 2. Config por variante: tamaño del circulo y tamaño de fuente al activarse */ var VARIANT_SIZE = { 'cursor-solid': 72, 'cursor-gradient': 72, 'cursor-glass': 66, 'cursor-outline': 66, 'cursor-square': 80, 'cursor-blur': 74, 'cursor-glow': 60, 'cursor-icon': 76 }; var VARIANT_FONT = { 'cursor-solid': 11, 'cursor-gradient': 11, 'cursor-glass': 11, 'cursor-outline': 10, 'cursor-square': 11, 'cursor-blur': 10, 'cursor-glow': 11, 'cursor-icon': 9 }; var ALL_VARIANTS = Object.keys(VARIANT_SIZE);/* 3. Movimiento con retardo (lerp) */ var mouseX = 0, mouseY = 0; var curX = 0, curY = 0; var ease = 0.16; var currentSize = 0; var targetSize = 0; var glowExtra = 30;document.addEventListener('mousemove', function (e) { mouseX = e.clientX; mouseY = e.clientY; });function loop() { curX += (mouseX - curX) * ease; curY += (mouseY - curY) * ease; currentSize += (targetSize - currentSize) * ease;cursor.style.opacity = currentSize > 0.5 ? '1' : '0'; cursor.style.width = currentSize + 'px'; cursor.style.height = currentSize + 'px'; cursor.style.transform = 'translate(' + (curX - currentSize / 2) + 'px,' + (curY - currentSize / 2) + 'px)'; var glowSize = currentSize > 0 ? currentSize + glowExtra : 0; glow.style.width = glowSize + 'px'; glow.style.height = glowSize + 'px'; glow.style.transform = 'translate(' + (curX - glowSize / 2) + 'px,' + (curY - glowSize / 2) + 'px)';requestAnimationFrame(loop); } loop();/* 4. Detectar hover sobre cualquier elemento con alguna clase cursor-* */ var selector = ALL_VARIANTS.map(function (v) { return '.' + v; }).join(', ');document.addEventListener('mouseover', function (e) { var target = e.target.closest(selector); if (!target) return;var variant = ALL_VARIANTS.find(function (v) { return target.classList.contains(v); }); if (!variant) return;/* limpia variantes anteriores y aplica la actual */ ALL_VARIANTS.forEach(function (v) { cursor.classList.remove(v); }); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); cursor.classList.add(variant); document.body.classList.add(variant, '__active'); target.classList.add('__active');targetSize = VARIANT_SIZE[variant] || 70;var text = target.getAttribute('data-cursor-text') || ''; var iconClass = target.getAttribute('data-cursor-icon') || ''; cursorText.textContent = text; cursorText.style.fontSize = text ? (VARIANT_FONT[variant] || 11) + 'px' : '0px'; cursorIcon.className = iconClass; cursorIcon.style.fontSize = iconClass ? (variant === 'cursor-icon' ? 16 : 14) + 'px' : '0px'; });document.addEventListener('mouseout', function (e) { var target = e.target.closest(selector); if (!target) return; var related = e.relatedTarget; if (related && target.contains(related)) return;target.classList.remove('__active'); document.body.classList.remove('__active'); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); targetSize = 0; cursorText.style.fontSize = '0px'; cursorIcon.style.fontSize = '0px'; });});