21 conception de sites Web primés et ce qu’ils ont bien fait
internet regorge de sites Web étonnants et inspirants.
ces flocons de neige spéciaux sont ceux qui trouvent des moyens innovants d’utiliser toutes les limites de conception et de technologie possibles à leur avantage pour créer des expériences que de nombreuses organisations souhaitent avoir.
trouver ces diamants bruts peut être un défi incroyable, surtout si vous prévoyez une refonte de site web et que vous ne savez pas par où commencer.,
heureusement, des sites comme CSS Awards, Awwwards, Webby Awards, etc. exister pour aider à mettre en évidence les sites que nous devrions pousser les nôtres à réfléchir.
pour aider à mettre en valeur certains de ces sites primés, j’ai plongé dans chacun de ces sites honorant les prix et tiré ceux qui ne sont pas seulement de beaux exemples de design moderne, mais aussi exercer UX, UI, architecture de l’information, optimisation du taux de conversion, marketing vidéo, tactiques à leur plein potentiel.
lorsque vous regardez chaque site, il est important de comprendre que ceux-ci ne doivent pas être considérés comme des modèles que vous devriez essayer de copier., Au lieu de cela, analysez – les et trouvez les parties d’entre eux qui utilisent des stratégies de conception/marketing/contenu qui pourraient être réutilisées et révisées en quelque chose qui correspond à votre public.
cela étant dit, profitez de ces 17 exemples de conception de sites Web primés.
Plutôt regarder? Voici 5 de mes favoris!,
ESPN Sports de Programmation
Vedette sur Awwwards
ESPN prend ses sports de contenu et de programmation pour le prochain niveau avec cette dynamique et accrocheur site rempli avec de grandes images haute résolution et des vidéos. Le site utilise la vidéo d’arrière-plan pour suivre l’énergie et les sections du réseau sportif avec des effets de survol et de transition subtils et pour garder l’expérience utilisateur fluide., Le curseur « sports en vedette » est complètement envoûtant et fait un excellent travail de présentation de chacun des sports aux côtés de statistiques intéressantes et de détails informatifs sur les programmes disponibles.
Montage
présenté sur Awwwards
Montage prend showing-off son produit au niveau suivant avec cette page d’accueil Facile à manœuvrer qui décrit clairement ce qu’est son produit, à quoi il ressemble, la qualité du produit et les témoignages., Le site est un excellent exemple d’une approche que vous pouvez utiliser pour mettre en évidence votre produit et les points les plus importants que vos utilisateurs seraient concernés par la recherche de réponses à. La sous-navigation collante permet aux utilisateurs de naviguer facilement dans la page pour trouver exactement ce qu’ils recherchent.
Zillow
en vedette sur les Webby Awards
trouver la maison parfaite est tout au sujet de pouvoir facilement rechercher exactement ce que vous cherchez, enregistrer et stocker ce que vous aimez, et le rendre facile à trouver tout plus tard., Zillow frappe le clou sur la tête pour ces trois points avec son site immobilier intuitif. La zone de recherche dans la zone de héros permet aux nouveaux utilisateurs de sélectionner et de rechercher rapidement des listes sans avoir à rechercher une page de recherche cachée.
Revols
présenté aux CSS Design Awards
Revols adopte une approche audacieuse sur son site Web en agrandissant ses petits écouteurs sophistiqués en utilisant la macro photographie et la vidéo., La photographie et la vidéo rendent le site incroyablement axé sur les produits, de sorte que ses utilisateurs deviennent lentement de plus en plus immergés dans l’expérience que ces écouteurs peuvent vous donner. Le traitement de la grande police sur ce site est également une belle touche et ajoute à la photographie intra-auriculaires plus grande que nature.
Fiftythree Pencil
présenté sur SiteInspire
Fiftythree capture toutes les fonctionnalités et les avantages de son stylet Crayon tout au long de cette page de produit autonome., Ces caractéristiques et avantages sont accompagnés d’images pour illustrer le produit en action afin que l’Utilisateur a un temps plus facile de les visualiser et comment ils peuvent appliquer le produit. La mise en page et le traitement visuel de la section d’anatomie du produit sont également très uniques et agissent comme un moyen dynamique d’amener les utilisateurs à en savoir plus sur le produit, par opposition aux sections statiques les unes après les autres.,
Morgan Stanley
en vedette sur les Webby Awards
Contrairement aux sites traditionnels axés sur les produits, Morgan Stanley titre sa page d’accueil avec un article qu’ils espèrent générer une quantité importante de trafic (d’autant plus qu’il se connecte avec les réunions de Le reste de la mise en page au-delà de la page d’accueil hero joue avec une mise en page axée sur la grille pour organiser l’assortiment d’articles récents qu’ils ont publiés.
7., Boosted
présenté sur Awwwards
Boosted a fait passer ce qui aurait pu être considéré comme un skateboard moyen au niveau supérieur en introduisant des photos incroyablement détaillées de son produit accompagnées de descriptions détaillées sur son site. Les tons gris et les arrière-plans blancs du site aident à garder l’accent sur les boutons d’appel à l’action orange et le skateboard aux couleurs vives qu’ils utilisent comme exemple du produit., J’aime aussi le fait qu’ils ont un blog qui semble mettre en évidence les problèmes qu’ils ont/abordent avec le produit, ajoutant un merveilleux niveau de transparence à l’entreprise.
8. Wozber
en vedette sur SiteInspire
Wozber a fait un travail de tueur en décomposant le processus étape par étape qu’il faut pour s’assurer que votre CV est parfait pour l’emploi de rêve que vous recherchez. Sa page d’accueil décrit clairement les étapes à suivre, qui sont ensuite expliquées dans les sections individuelles ci-dessous.,
le site a même des exemples de certains des CV qu’ils ont fait, ce qui vous permet de voir exactement à quoi pourrait ressembler le produit fini avant de vous décider à vous inscrire.
Opus Grows
en vedette sur CSS Winner
Opus tire parti des bienfaits biologiques, naturels et pour la santé de son sol en ajoutant de nombreuses quantités de verdure sur tout le site. Avec autant d’options différentes pour les terroirs, il peut être difficile de décider lequel est le plus sain pour vos plantes ou votre jardin., Opus prouve que son produit est le meilleur en abordant les ingrédients et les propriétés physiques de ses sols qui le segmentent de votre marque traditionnelle. J’ai également été très heureux de voir qu’ils ont blogué et parfois mélangé dans des messages plus délicieux pour aider à atteindre un public plus large comme celui-ci.
Zero Financial
présenté sur Awwwards
beaucoup trop souvent, les éditeurs de logiciels ont de très beaux sites Web qui manquent complètement d’images de leurs produits., Si vous êtes actuellement dans cette position et que vous cherchez de l’inspiration, Zero est un site fantastique pour l’inspiration. L’utilisation d’images accompagnées d’un texte descriptif qui explique chaque rend le produit beaucoup plus réelle et pertinente pour les personnes intéressées.
Cap HPI
en Vedette sur Awwwards
Casquette HPI permet d’offrir une grande variété de automobile les données dans une variété de personnages différents. Dans cet esprit, Cap HPI a construit son site web pour que ces personas trouvent facilement le type de solution qu’ils recherchent., Pour faciliter cela, ils ont optimisé la navigation afin que vous puissiez comprendre rapidement si CAP HPI peut vous aider ou non.
En plus de tout cela, la conception du site, des animations subtiles et une palette de couleurs unique en font une expérience visuelle délicieuse et rafraîchissante dans un marché qui pourrait autrement avoir une mise en page d’entreprise très fade.
Carquois
en Vedette sur Awwwards
Bien que le site est plus petit que les autres, Carquois parvient toujours à briller parmi le reste.,
j’aime le fait qu’ils utilisent l’émotion immédiatement lorsque vous arrivez sur la page d’accueil avec le fond et la copie. Ils ont même réussi à obtenir un formulaire d’inscription là-bas, plutôt que d’incorporer seulement un bouton qui envoie les visiteurs à une page d’inscription séparée.
les pages produits et fonctionnalités de Quiver font un beau travail d’affichage de l’apparence du logiciel accompagné de petits éléments interactifs pour aider à montrer comment le produit fonctionne.,
Wordstack
en vedette sur CSS Winner
Wordstack a fait un excellent travail en gardant son site web petit, condensé et organisé, tout en offrant toute la valeur offerte par le produit. Les grandes images pleine largeur et la palette de couleurs d’utilisation cohérente et le style tout au long des pages en font un design incroyablement uniforme qui se marie très bien avec le palais des couleurs du logiciel.,
café Campos
en vedette sur CSS Design Awards
certains clients aiment se livrer à des produits qu’ils savent sont fabriqués et créés par des entreprises qui veulent livrer des produits de qualité à leurs clients. Et des entreprises comme Campos Coffee savent exactement comment répondre à ces acheteurs.
Campos utilise son site Web comme un moyen de mettre en évidence le temps et les efforts que leur équipe consacre à leur café, comment cela profite à la communauté et pourquoi vous vous sentirez bien en l’achetant., Tous ces points sont enveloppés dans une histoire merveilleuse qu’ils affichent sur la page d’accueil et dans toutes les autres pages du site.
Kin
en vedette sur SiteInspire
plutôt que de mettre en évidence les fonctionnalités, Kin passe à l’étape suivante et utilise sa page d’accueil pour présenter les avantages de ses produits afin que les gens sachent exactement à quoi le produit peut servir avant de,
en termes de design, L’utilisation par Kin de la police à empattement plus grand sur tout le site, accompagnée de photographies de bureau réelles, contribue à ajouter une énorme crédibilité à sa marque. Il permet également au client de savoir qu’il y a des personnes réelles et sympathiques derrière le produit étonnant, plutôt que de le laisser à des suppositions.
SeaStreak
en Vedette sur Webby Awards
vous cherchez à voyager par ferry mais vous ne savez pas où aller? SeaStreak vous a entre de bonnes mains. L’interface utilisateur du site est organisée de sorte que vous êtes en mesure de construire rapidement un horaire de ferry qui fonctionne pour vous., Je trouve aussi la navigation extrêmement intéressante. Le menu itinéraires et horaires descend pour vous montrer toutes les options disponibles, et le menu excursions d’une journée et Escapade est déjà segmenté pour les utilisateurs qui sont sur le site à la recherche de exactement cela. Ces éléments aident à créer la commodité pour l’utilisateur et la vitesse, de sorte qu’ils ne sont pas laissés dans un trou sombre du site en essayant de comprendre comment rechercher ce qu’ils veulent.,
s Bottle
présenté sur CSS Winner
Le produit élégant de s Bottle bénéficie d’un traitement spécial tout au long de la conception du site web pour mettre en évidence sa beauté et ses avantages innovants. L’utilisation de la bouteille dans diverses animations a rendu le site plus attrayant et ajoute de l’intérêt pour en savoir plus sur le produit.
Ocean Health Index
présenté sur les prix W3
Ocean Health Index aide à apporter la beauté de l’océan sur le web avec sa mise en page étonnante, son imagerie visuelle et sa palette de couleurs cool., La grande utilisation de la police sur le site web contribue également à le garder facile à lire et professionnel.
19. WealthSimple
en Vedette sur Awwwards
l’utilisation de L’espace sur Wealthsimple rend incroyablement facile segment de chaque section de ses pages. Les beaux GIFs tout au long de la page font également une expérience passionnante, d’autant plus qu’ils ne se rapportent pas directement à l’investissement.
le site rend l’investissement semble que beaucoup plus amusant., Plutôt que de présenter des feuilles de calcul, des piles d’argent et un langage collant, ils s’assurent de différencier la marque WealthSimple afin qu’elle ne ressemble pas à tous les autres logiciels ou services d’investissement
Toggl
présenté sur CSSDesignAwards
L’animation originale sur la page Ce style d’imagerie est porté dans les sections restantes avec de simples groupes de boîtes de contenu directement à côté de chacune.
Toggl accorde également une attention particulière à la façon dont les choses s’animent lors du chargement de la page., Par exemple, la page de tarification de Toggl s’estompe dans le héros, puis dans chaque zone de tarification de gauche à droite. L’Attention portée à ces détails rend la sensation du site beaucoup plus polie.
Shademaster
présenté sur CSSDesignAwards
regarder la toiture peut ne pas sembler agréable pour le propriétaire moyen, mais Shademaster s’assure qu’elle peut l’être.
ils ont stratégiquement segmenté le type de travail qu’ils ont fait dans les conceptions de toit dans la navigation qui envoient l’utilisateur sur des pages individuelles où ils peuvent planifier et concevoir leur toit idéal et recevoir un devis., Cette approche rend le processus d’achat de toit beaucoup plus autonome pour les utilisateurs; il n’est pas nécessaire que quelqu’un visite votre maison juste pour commencer quelque chose.
vous cherchez votre propre refonte de site web?
votre site web est censé être le visage de votre présence en ligne et un moyen de représenter votre marque virtuellement. Si votre site web ne respecte pas un design qui correspond à la façon dont vous souhaitez être perçu, il ne fonctionnera finalement pas de manière optimale., IMPACT aime travailler avec d’autres entreprises dans un effort de collaboration pour comprendre à quoi vous voulez que votre site Web ressemble vraiment afin que nous puissions vous aider à travers la stratégie pour en faire une réalité.
pensez-vous qu’il est temps pour votre site web d’obtenir le lifting qu’il mérite pour mieux représenter votre marque et, finalement, augmenter ses performances? Parlez – nous et parlez des objectifs et des aspirations de votre site web.
