Rouleau de devis n ° 58 de Web Design Critique

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 actuel est Quote Roller, une superbe application Web permettant de créer et d'envoyer des propositions professionnelles.

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.

À propos du rouleau de devis

Quote Roller permet d’automatiser et de rationaliser le processus de création de propositions. Oubliez le copier-coller de texte courant dans Word. Avec Quote Roller, vous pouvez enregistrer et réutiliser des informations générales sur votre entreprise, les conditions de service et d’autres éléments que vous utilisiez manuellement pour insérer des propositions. Quote Roller est également livré avec une interface conviviale et intuitive de type glisser-déposer qui offre des possibilités de personnalisation illimitées.

Voici une capture d'écran de la page d'accueil:

Impression initiale

Dès le départ, je peux vous dire que ce site me plait beaucoup. Il illustre plusieurs tendances de la conception Web moderne, ce qui signifie que ce n'est pas vraiment unique, mais pas nécessairement. Le but est de communiquer que Quote Roller est un utilitaire avancé, moderne et de création de devis, et cette conception fait exactement cela.

Il est extrêmement important de garder à l’esprit ces objectifs lors de la création d’un site Web. Beaucoup trop de concepteurs se lancent dans une direction qui convient à leur humeur chaque jour, créant ainsi de superbes sites Web avec des messages confus. Les graphiques sur un site sont une source principale de communication et vous voulez vous assurer qu'ils disent ce que vous voulez!

Couleurs

La première chose dont je veux parler est le jeu de couleurs car il utilise une technique très populaire dont nous avons déjà parlé. La palette principale utilise diverses nuances de bleu, un choix judicieux pour un look net et professionnel. Une fois que cette gamme de couleurs est établie, une couleur d'accentuation est vraiment mise en évidence, en l'occurrence en orange.

Cela fonctionne vraiment bien car cela vous donne beaucoup de pouvoir pour diriger le regard de l'utilisateur. Lorsque vous faites défiler la page, vous voyez beaucoup de bleu et de blanc interrompus par très peu de points orange vif. Vos yeux vont naturellement se diriger vers ces points lumineux, où vous pourrez voir et lire exactement ce que le concepteur vous demande. C'est une technique super simple avec des résultats probants.

Thème graphique

Le contenu principal du site est contenu dans un rectangle aux coins arrondis. Ceci est placé sur un fond texturé de toile. Cette texture attrayante mais subtile ajoute beaucoup de dimension à la page et est très facile à construire. Nous vous enseignons une technique similaire dans cet article.

La zone de navigation est entourée d'un très joli ruban. Cela permet à la fois de faire ressortir la zone de navigation et de donner un effet tridimensionnel à la page dans son ensemble.

Une autre couche est ajoutée juste au-dessus du pied de page où résident les devis et les recommandations du client. Ces types d’effets confèrent au site une sensation agréable et soignée. Vous pouvez dire que les concepteurs ont effectivement passé du temps à perfectionner la qualité esthétique.

Typographie

Vous n'avez pas le budget pour Typekit ou un service de polices Web premium similaire? Google Web Fonts offre une alternative étonnante, gratuite et simple à mettre en œuvre. Quote Roller utilise les polices Web Google pour le? Merriweather? titre, un serif unique et sophistiqué.

Notez que l'implémentation de la police personnalisée ici est assez conservatrice, seuls les titres utilisent Merriweather, le reste est Arial. L'utilisation d'une police personnalisée pour la copie de corps est acceptable, mais ce n'est pas toujours la meilleure option en raison des temps de chargement. En outre, il est assez facile de devenir fou avec des polices de fantaisie et d'obtenir le résultat final qui ressemble à un gâchis. Un itinéraire plus sûr consiste à trouver une police personnalisée et à la laisser entrer dans une conception unique.

Messagerie

La messagerie sur le site est très simple et claire: «créer, suivre et envoyer des propositions». est la toute première chose que vous lisez. Il n'y a pas moyen de tourner autour du pot, vous comprenez immédiatement ce qui se passe.

Ceci est renforcé par de nombreuses captures d'écran. Je déteste absolument trouver une nouvelle application Web, puis chercher des minutes pour trouver une capture d'écran. Parfois, il n'y en a pas sur la page d'accueil ou même la vidéo d'introduction! Si vous cachez votre interface jusqu'à ce qu'un utilisateur s'enregistre, alors je suppose que vous en avez honte.

Pour aller plus loin sur le plan de la messagerie, j'aime aussi la présentation des fonctionnalités sur ce site. Le titre audacieux avec une icône minuscule et un soulignement plein, mis à part le paragraphe, a l'air vraiment net. Cette zone est très lisible et utilise beaucoup d’espace pour donner à chaque objet de la respiration.

Page tournée

Si vous cherchez une source d'inspiration solide pour la page de présentation du produit, Quote Roller en propose une excellente. J'aime les grandes captures d'écran alternant des côtés en bas de la page. En parcourant cette page, vous obtenez un aperçu rapide mais complet de ce que vous obtiendrez en vous inscrivant à l'application.

Conclusion

Quote Roller est un site vraiment superbe qui remplit bien sa fonction. C'est propre, moderne et professionnel, une combinaison parfaite lorsque vous vendez un service Web à des professionnels.

La messagerie est très claire avec beaucoup de renforcement via des icônes et des captures d'écran. Les couleurs sont parfaites et il y a beaucoup d'attention portée aux détails.

Globalement, je lève les pouces et je ne peux vraiment pas penser à rien de négatif à dire à ce sujet!

À 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.