21 diseños de sitios web premiados y lo que hicieron bien
internet está lleno de algunos sitios web increíbles e inspiradores.
estos copos de nieve especiales son los que encuentran formas innovadoras de utilizar cada diseño posible y los límites tecnológicos a su favor para crear experiencias que muchas organizaciones desean tener.
encontrar estos diamantes en bruto puede ser un desafío increíble, especialmente si está planeando un rediseño del sitio web y no está seguro de por dónde empezar.,
afortunadamente, sitios como CSS Awards, Awwwards, Webby Awards, etc. existen para ayudar a resaltar los sitios que debemos empujar a los nuestros para reflexionar.
para ayudar a mostrar algunos de estos sitios Ganadores de premios, me sumergí en cada uno de estos sitios que honran los premios y saqué los que no solo son hermosos ejemplos de diseño moderno, sino que también ejercen UX, UI, arquitectura de información, optimización de la tasa de conversión, marketing de video, tácticas a su máximo potencial.
al mirar cada sitio, es importante entender que estos no deben ser vistos como plantillas que debe intentar copiar., En su lugar, analícelos y encuentre las partes de ellos que utilizan estrategias de diseño/marketing/contenido que podrían reutilizarse y revisarse en algo que se adapte a su audiencia.
dicho esto, disfruta de estos 17 ejemplos increíbles de diseños de sitios web galardonados hechos bien.
¿más bien mirar? Aquí están 5 de mis favoritos!,
ESPN Deportes Programación
Destacados en Awwwards
ESPN toma su contenido de deportes y programación para el siguiente nivel con esta dinámica y llamativa sitio lleno de grandes y de alta resolución de imágenes y vídeo. El sitio utiliza video de fondo para mantenerse al día con la energía de la red deportiva y las secciones con sutiles efectos de desplazamiento y transición y para mantener la experiencia del usuario sin problemas., El deslizador de ‘deportes destacados’ es completamente fascinante y hace un excelente trabajo al mostrar cada uno de los deportes junto con estadísticas interesantes y detalles informativos sobre los programas disponibles.
Montage
aparece en Awwwards
Montage lleva la exhibición de su producto al siguiente nivel con esta página de inicio Fácil de maniobrar que describe claramente qué es su producto, cómo se ve, calidad del producto y testimonios., El sitio es un excelente ejemplo de un enfoque que puede usar para resaltar su producto y los puntos más importantes a los que sus usuarios estarían preocupados por encontrar respuestas. La navegación secundaria pegajosa permite a los usuarios navegar fácilmente por la página para encontrar exactamente lo que están buscando.
Zillow
presentado en los Premios Webby
Encontrar el hogar perfecto se trata de poder investigar convenientemente exactamente lo que está buscando, guardar y almacenar lo que le gusta, y hacer que sea fácil encontrarlo todo más adelante., Zillow golpea el clavo en la cabeza para los tres de estos puntos con su sitio de bienes raíces intuitiva. El área de búsqueda dentro del área de héroe hace que sea fácil para los nuevos usuarios seleccionar rápidamente y buscar listados sin tener que buscar alguna página de búsqueda oculta.
Revols
destacado en los CSS Design Awards
Revols adopta un enfoque audaz en su sitio web al ampliar sus pequeños y sofisticados auriculares utilizando Fotografía macro y video., La fotografía y el video hacen que el sitio esté increíblemente centrado en el producto, por lo que sus usuarios se sumergen cada vez más en la experiencia que estos auriculares pueden brindarle. El tratamiento de fuente grande en este sitio también es un buen toque y se suma a la fotografía de auriculares más grandes que la vida.
Fiftythree Pencil
destacado en SiteInspire
Fiftythree captura todas las características y beneficios de su lápiz óptico en esta página de producto independiente., Estas características y beneficios están acompañados de imágenes para ilustrar el producto en acción para que el usuario tenga un tiempo más fácil de visualizar y cómo se puede aplicar el producto. El diseño y el tratamiento visual de la sección de anatomía del producto también son muy únicos y actúan como una forma dinámica de llevar a los usuarios a leer más sobre el producto, a diferencia de las secciones estáticas una tras otra.,
Morgan Stanley
presentado en los Premios Webby
A diferencia de los sitios tradicionales centrados en productos, Morgan Stanley encabeza su página de inicio con un artículo al que esperan atraer una cantidad significativa de tráfico (especialmente porque se conecta con las reuniones familiares de vacaciones a las que se espera que asistamos). El resto del diseño más allá del héroe de la página principal juega con un diseño centrado en la cuadrícula para organizar la variedad de artículos recientes que han publicado.
7., Boosted
presentado en Awwwards
Boosted llevó lo que podría haber sido visto como un skate promedio al siguiente nivel al introducir fotos increíblemente detalladas de su producto acompañadas de descripciones detalladas en su sitio. Los tonos grises y los fondos blancos del sitio ayudan a mantener el foco en los botones naranjas de llamada a la acción y el skateboard de colores brillantes que usan como ejemplo del producto., También me encanta el hecho de que tienen un blog que parece resaltar los problemas que tienen/están abordando con el producto, agregando un maravilloso nivel de transparencia a la empresa.
8. Wozber
destacado en SiteInspire
Wozber hizo un trabajo increíble desglosando el proceso paso a paso que se necesita para asegurarse de que su CV sea perfecto para el trabajo de sus sueños que está buscando. Su página de inicio describe claramente los pasos iniciales, que luego se explican en secciones individuales a continuación.,
el sitio incluso tiene ejemplos de algunos de los currículums que han hecho, lo que te facilita ver exactamente cómo podría ser el producto terminado antes de decidirte a registrarte.
Opus Grows
destacado en CSS Winner
Opus lleva a casa los beneficios orgánicos, naturales y para la salud de su suelo al agregar abundantes cantidades de vegetación en todo el sitio. Con tantas opciones diferentes para macetas de suelos por ahí, puede ser difícil decidir cuál es el más saludable para sus plantas o jardín., Opus demuestra que su producto es el mejor abordando los ingredientes y las propiedades físicas que ofrecen sus suelos que lo segmentan de su marca tradicional. También estaba muy contento de ver que blogueaban y ocasionalmente mezclaban en publicaciones más deliciosas para ayudar a llegar a audiencias más amplias como esta.
Zero Financial
aparece en Awwwards
con demasiada frecuencia, las compañías de software tienen sitios web muy hermosos que carecen por completo de imágenes de sus productos., Si actualmente estás en esta posición y buscas inspiración, Zero es un sitio fantástico para inspirarte. El uso de imágenes acompañadas de texto descriptivo que explica cada uno hace que el producto sea mucho más real y relacionable para las personas interesadas.
Cap HPI
presentado en Awwwards
Cap HPI ayuda a proporcionar una amplia variedad de datos automotrices a una variedad de personas diferentes. Con eso en mente, Cap HPI ha construido su sitio web para que esas personas tengan un tiempo fácil para encontrar el tipo de solución que están buscando., Para facilitar esto, han optimizado la navegación para que pueda comprender rápidamente si CAP HPI puede ayudarlo o no. además de todo esto, el diseño del sitio, las animaciones sutiles y la paleta de colores única hacen que sea una experiencia visual deliciosa y refrescante en un mercado que de otra manera podría tener un diseño corporativo muy soso.
Quiver
aparece en Awwwards
aunque el sitio es más pequeño que otros, Quiver todavía logra brillar entre el resto., me encanta el hecho de que utilizan emoción inmediatamente cuando llegas a la página de inicio con el fondo y la copia. Incluso lograron obtener un formulario de suscripción allí, en lugar de solo incorporar un botón que envía a los visitantes a una página de suscripción separada.
las páginas de productos y características de Quiver hacen un hermoso trabajo al mostrar la apariencia del software acompañado de pequeños elementos interactivos para ayudar a mostrar cómo funciona el producto.,
Wordstack
destacado en Css Winner
Wordstack hizo un excelente trabajo manteniendo su sitio web pequeño, condensado y organizado, mientras seguía entregando todo el valor que ofrece el producto. Las imágenes grandes y de ancho completo y la paleta de colores de uso consistente y el estilo en todas las páginas crean un diseño increíblemente uniforme que se combina muy bien con la paleta de colores del software.,
Campos Coffee
destacado en los CSS Design Awards
a ciertos clientes les encanta disfrutar de productos que saben que son elaborados y creados por empresas que desean ofrecer productos de calidad a sus clientes. Y empresas como Campos Coffee saben exactamente cómo atender a esos compradores.
Campos utiliza su sitio web como una forma de resaltar el tiempo y el esfuerzo que su equipo dedica a su café, cómo beneficia a la comunidad y por qué se sentirá bien comprándolo., Todos estos puntos se envuelven en una historia maravillosa que se muestran en la página de inicio y en todas las demás páginas del sitio.
Kin
destacado en SiteInspire
en lugar de solo resaltar características, Kin lo lleva al siguiente paso y utiliza su página de inicio para mostrar los beneficios de sus productos para que la gente sepa exactamente para qué se puede usar el producto antes de aventurarse a otras áreas del sitio.,
en términos de diseño, el uso de Kin de la fuente serif más grande en todo el sitio acompañado de fotografía de oficina Real ayuda a agregar una gran cantidad de credibilidad a su marca. También le permite al cliente saber que hay personas reales y agradables detrás del increíble producto, en lugar de dejarlo a la suerte.
SeaStreak
Destacados en los Premios Webby
Mirando para viajar en ferry, pero no sabes dónde ir? SeaStreak te tiene en buenas manos. La interfaz de usuario del sitio está organizada para que pueda crear rápidamente un horario de ferry que funcione para usted., También encuentro la navegación extremadamente interesante. El menú rutas y horarios se despliega para mostrarte todas las opciones disponibles, y el menú excursiones de un día y escapadas ya está segmentado para los usuarios que están en el sitio buscando exactamente eso. Estos elementos ayudan a crear comodidad para el Usuario y velocidad, por lo que no se quedan en un agujero oscuro del sitio tratando de averiguar cómo buscar lo que quieren.,
s Bottle
destacado en CSS Winner
El elegante producto de s Bottle recibe un tratamiento especial en todo el diseño del sitio web para resaltar su belleza y beneficios innovadores. La utilización de la botella en varias animaciones ha hecho que el sitio más atractivo y añade interés en aprender más sobre el producto.
Ocean Health Index
presentado en los Premios W3
Ocean Health Index ayuda a llevar la belleza del océano a la web con su impresionante diseño, imágenes visuales y paleta de colores de tono fresco., El gran uso de la fuente en todo el sitio web también ayuda a mantenerlo fácil de leer y profesional.
19. WealthSimple
destacado en Awwwards
El uso del espacio en Wealthsimple hace que sea increíblemente fácil segmentar cada sección de sus páginas. Los hermosos GIFs en toda la página también son una experiencia emocionante, especialmente porque no se relacionan directamente con la inversión.
el sitio hace que invertir parezca mucho más divertido., En lugar de mostrar hojas de cálculo, pilas de dinero en efectivo y lenguaje hortera, se aseguran de diferenciar la marca WealthSimple para que no parezca que todos los demás programas o servicios de inversión
Toggl
destacados en CSSDesignAwards
la peculiar animación en la página de inicio de Toggl llama la atención del usuario inmediatamente a su llegada. Este estilo de imágenes se lleva a través de las secciones restantes con grupos simples de cuadros de contenido directamente al lado de cada uno.Toggl también presta mucha atención a cómo se animan las cosas al cargar la página., Por ejemplo, la página de precios de Toggl se desvanece en el héroe y luego en cada área de precios de izquierda a derecha. La atención a estos detalles hace que la sensación del Sitio mucho más pulido.
Shademaster
destacado en CSSDesignAwards
mirar el techo puede no sonar agradable para el propietario promedio, pero Shademaster se asegura de que pueda serlo.
segmentaron estratégicamente el tipo de trabajo que hicieron en diseños de techo en el nav que envían al usuario a páginas individuales donde pueden planificar y diseñar su techo ideal y recibir un presupuesto., Este enfoque hace que el proceso de compra de techos sea mucho más autónomo para los usuarios; no hay necesidad de que alguien visite su casa solo para comenzar algo.
¿busca su propio rediseño de sitio web?
Su sitio web está destinado a ser la cara de su presencia en línea y una forma de representar su marca virtualmente. Si su sitio web no mantiene un diseño que coincida con la forma en que desea ser percibido, entonces, en última instancia, no funcionará de manera óptima., A IMPACT le encanta trabajar con otras empresas en un esfuerzo colaborativo para comprender cómo desea que su sitio web se vea realmente para que podamos ayudarlo a través de la estrategia para que se convierta en una realidad.
¿cree que es hora de que su sitio web obtenga el lavado de cara que merece para representar mejor su marca y, en última instancia, aumentar su rendimiento? Hable con nosotros y hable sobre los objetivos y aspiraciones de su sitio web.
