Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est SuccessInc, un thème Drupal issu de plus que de (seulement) thèmes. Faisons un saut et voyons ce que nous pensons!
Si vous souhaitez soumettre votre site Web pour qu'il soit présenté dans une future Critique de conception, cela ne prend que quelques minutes. Nous facturons 49 $ pour la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.
A propos de SuccessInc
La plupart des thèmes sont conçus pour paraître simples, propres et minimes. Celui-ci est construit pour vous aider à impressionner. Sur les deux ordinateurs de bureau et mobiles. Success Inc. s'adapte de manière optimale à la largeur du navigateur sur lequel il est visualisé. En conséquence, il a l'air génial, qu'il s'agisse d'un ordinateur de bureau, d'un smartphone ou d'une tablette que vos visiteurs utilisent.?
Voici une capture d'écran de la page d'accueil:
Première impression
Mon impression initiale de SuccessInc est plutôt positive. C'est un thème très attrayant qui a l'air d'avoir beaucoup de fonctionnalités de premier ordre et des zones de contenu personnalisables. J'aime le fait qu'il soit réactif et que j'apprécie toutes les options facilement modifiables qui sont intégrées. Examinons chaque section individuellement et voyons ce que nous pensons!
Schéma de couleur
L'un de mes aspects préférés de ce thème est le jeu de couleurs audacieux. Les reflets brillants contrastent nettement avec le noir, ce qui en fait une expérience accrocheuse, élégante et moderne. L'orange que vous voyez ci-dessus est simplement le jeu de couleurs par défaut, vous pouvez facilement le changer dans les paramètres.
Changer le jeu de couleurs est aussi simple que de cliquer sur un menu déroulant et de choisir l’option de votre choix. Vous pouvez choisir l'un des sept schémas suivants: orange, cyan, vert, rouge, crème, violet et gris. Appuyez simplement sur? Enregistrer? bouton et le nouveau schéma sera instantanément appliqué.
Tous les choix de couleurs qu’ils ont inclus sont très beaux, ce qui en fait un thème assez factice en termes d’esthétique visuelle.
Barre de contact / recherche
Tout en haut du site, vous trouverez une petite barre contenant des informations de contact de base, ainsi qu'une barre de recherche. Voici un aperçu de près à quoi cela ressemble:
Il existe un certain nombre de types de sites Web pour lesquels la principale raison pour laquelle l'utilisateur s'arrête est de rechercher des informations de contact. Pour ces types de sites, il s'agit d'un excellent petit élément de design. Les utilisateurs n'ont pas besoin de chercher une page de contact ou un formulaire, les informations qu'ils recherchent réellement sont l'une des premières choses qu'ils voient.
Comme vous pouvez le voir sur la photo ci-dessus, cette barre contient également un champ de recherche. Le champ lui-même est invisible, mais il est signalé par un texte de substitution, suivi d'une petite icône de recherche. Lorsque vous cliquez sur ce texte, il devient plus d'un champ de recherche traditionnel.
Il s’agit là d’un élément intéressant, mais je souhaiterais savoir si les utilisateurs y répondent vraiment bien. Nous avons tendance à rechercher des repères visuels avant de lire, ce qui peut prendre un certain temps à quelqu'un pour savoir comment effectuer une recherche. Un itinéraire rapide qu'un utilisateur peut choisir est de voir l'icône en forme de loupe et de cliquer dessus, ce qui lance simplement une recherche vide inutile.
En outre, le conseil dit: Entrez les termes et cliquez sur Rechercher? ? mais il n'y a pas de bouton qui dit? Rechercher? Encore une fois, il est facile de voir comment cela peut semer la confusion chez un utilisateur. De toute évidence, toute personne ayant une connaissance à mi-chemin du Web comprendra rapidement le problème, c’est quand même une bonne idée d’identifier les obstacles et les frustrations des utilisateurs potentiels.
La navigation
La navigation est assurée par un menu solide comme Superfish. Il fonctionne parfaitement, a des animations fluides et de multiples niveaux, et semble plutôt lisse. Plus tard, nous examinerons ce qui se passe lorsque vous réduisez la taille pour les appareils mobiles.
Diaporama
En descendant la page, le diaporama est la suivante. C'est une zone de contenu agréable, volumineuse et animée qui apporte de l'intérêt au haut de la page. J'aimerais souligner quelques caractéristiques que vous devriez prendre en compte lorsque vous créez un diaporama.
Premièrement, il existe plusieurs points de navigation. Les flèches et les points en bas servent à faire avancer le diaporama ou à sauter à un point spécifique. De plus, les points fournissent un point de référence pour savoir où vous êtes et combien de diapositives sont présentes. Enfin, des légendes vous permettent d’ajouter des messages personnalisés.
En fin de compte, ce ne sont pas que des fonctionnalités intéressantes. Ils augmentent l'efficacité et la convivialité de cette interface utilisateur, la rendant ainsi plus qu'un simple bonbon pour les yeux. Si vous êtes tout au sujet des options, vous pouvez même aller dans les paramètres et modifier les transitions ou la durée des diapositives.
Contenu et pieds de page
Le reste de la page est assez basique. Il commence par une zone de contenu secondaire et descend à un pied de page, les deux étant disposés en trois colonnes.
Premièrement, vous avez trois zones de contenu, chacune contenant une image avec une description et un bouton. J'aime particulièrement l'ombre placée sur les vignettes ici. C'est une belle illusion qui donne de la profondeur au design.
Si les informations de contact dans l'en-tête ne suffisaient pas, le pied de page fournit des fonctionnalités vraiment intéressantes. Il y a une place pour une carte, un fil Twitter et un formulaire de contact. Ceci en plus d'une sorte de pied de page secondaire qui contient diverses icônes sociales. Ceux-ci ont tendance à être un gâchis encombré, jeté dans un design après coup, donc j'apprécie vraiment à quel point ils sont bien intégrés au design.
Mise en page réactive
La mise en page du site commence de manière statique, puis, lorsque la fenêtre est réduite à une certaine largeur, elle devient fluide. Voici un aperçu des étapes de la conception à mesure que la fenêtre d'affichage change:
J'aime que ce thème soit réactif, je pense que cela est devenu une nécessité plutôt qu'une finesse. Ce qu'ils ont vraiment fait sortir du parc, c'est que leur disposition semble être relativement agnostique. Malgré tous mes efforts, je n’ai pas été capable de casser la mise en page de manière significative avec des largeurs différentes. Tout, jusqu’à la barre de recherche, est reformaté sans problème, quelle que soit la taille de l’écran.
Sur les appareils mobiles, la navigation se transforme en zone de sélection. Ceci est facile à utiliser, familier et maintient toutes les options originales en place. Il existe de bonnes alternatives à cette stratégie, mais c’est l’une des solutions les plus fonctionnelles.
Pensées de clôture
Nous avons vu avant que Plus que (seulement) des thèmes fait du bon travail. Ma principale plainte la dernière fois, c’était que le thème n’était pas réactif, mais ils ont définitivement répondu à cette préoccupation avec SuccessInc. Dans l’ensemble, c’est un excellent thème et je peux le voir fonctionner très bien pour de nombreux types de sites.
À ton tour!
Maintenant que vous avez lu mes commentaires, apportez votre contribution en donnant quelques conseils supplémentaires au concepteur. Dites-nous ce que vous pensez être génial à propos de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons d'être également respectueux du concepteur du site et d'offrir des conseils clairs et constructifs, sans aucune insulte dure.