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 le portfolio personnel d'Owain Lewis, concepteur web indépendant.
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 d'Owain Lewis
Je suis concepteur web et développeur web indépendant à Cardiff. Je construis des sites Web propres, modernes et professionnels en utilisant HTML5. Au cours des dernières années, j'ai travaillé avec un grand nombre de clients, notamment des agences de création de sites Web, de grandes entreprises, des start-ups et des particuliers, en créant des sites Web qui aident les utilisateurs à obtenir de meilleurs résultats en ligne.
Voici une capture d'écran de la page d'accueil d'Owain:
Impression initiale
Ma première impression de cette page est extrêmement positive. J'aime la mise en page, les graphiques et le texte. En outre, le contenu est tout organisé en sections claires, à la fois par placement et par des modifications subtiles de l'arrière-plan. C'est un travail vraiment magnifique qui me rappelle énormément certaines des pages noires d'Apple sur leur site.
Pour la plupart, notre critique sera positive. Nous allons simplement regarder chaque section et discuter de ce qui s'est bien passé! Cependant, il y a quelques très petites choses qui, je pense, pourraient être peaufinées et je les signalerai en cours de route.
Entête
L'en-tête concerne la typographie. Il s'agit d'une introduction solide et conviviale qui vous permet de savoir en quoi consiste le site. Au cours des dernières semaines, je me suis fait reprocher aux designers de cacher presque l'explication de base de leurs sites Web et je crois fermement qu'il est préférable de le dévoiler au grand jour afin d'éviter toute confusion. Nous voyons tout de suite que ce site est destiné à Owain Lewis, concepteur web indépendant.
L'en-tête établit également un fort alignement justifié qui donne le ton au reste de la page. Cet alignement est ensuite strictement respecté tout au long du pied de page.
Le seul problème que j'ai dans cette section est le manque de cohérence avec la typographie dans le titre. Ici, le concepteur a utilisé le principe du contraste et de la couleur à effet de levier, de l'audace et du choix de la police de caractères pour différencier certains mots. Cependant, les points d'accent utilisent trois traitements différents.
Le premier utilise la police de caractères unie mince utilisée dans le reste du titre, le second utilise une esperluette très stylisée et assez épaisse et le dernier utilise une version en italique de la police de titre. Je recommande de faire? Owain Lewis? et? conception de sites Web? rencontre. Qu'ils soient simples ou en italiques importent peu, assurez-vous qu'ils sont identiques. Je voudrais également envisager de les rendre une version en gras de la police pour aider à ajouter à la différenciation.
En outre, la première ligne du titre pourrait faire l’objet d’une attention ponctuelle.
Section d'introduction
La section suivante est celle qui attire vraiment votre attention lorsque vous chargez la page. Tout ce noir fait que vos yeux se rendent immédiatement au point de contraste: la grande vignette blanche, ce qui vous fait ensuite rebondir un peu dans cette section et descendre aux autres vignettes. La page se lit vraiment bien et le concepteur a bien fait de guider l'utilisateur à travers la mise en page.
J'aime même le petit flottant? Engage-moi? tag sur le côté droit de la page. À tout moment de la navigation sur le site, si vous décidez que ce type est si bon que vous souhaitez l'embaucher, il existe un moyen simple de parvenir à cet objectif que vous ne pouvez tout simplement pas rater! Notez que cela reste cependant très éloigné du bord. Des astuces comme celle-ci sont extrêmement ennuyeuses lorsqu'elles chevauchent du contenu (je vous regarde sur Twitter pour iPhone).
Je ne suis pas sûr que cette section nécessite des modifications, bien que je sois un peu rattrapé par le titre: "Concepteur de sites Web freelance pour concepteurs de sites Web". Ceci est évidemment une déclaration redondante et ressemble à du bruit de référencement (le titre de la page fait la même chose mais bien pire). Les tactiques de référencement approchent rapidement les zones grises, de sorte que chaque concepteur doit décider ce qui est une bonne idée ou non, mais personnellement, j’ai l’impression que des mots-clés gonflés se produisent sur cette page.
Section sélectionnée
Le flux de ce site lorsque vous faites défiler est intéressant, l’avez-vous attrapé? La première zone est une colonne large, la deuxième zone est deux colonnes, cette section en vedette est trois colonnes et le pied de page est quatre (toutes maintiennent le fort alignement). Parfois, les concepteurs ont du mal à modifier leur mise en page et à conserver le même principe tout au long de la page ou à tenter un changement radical et à tout gâcher. Owain a réussi à faciliter l’utilisation du contenu par l’utilisateur et à offrir suffisamment de variations pour réduire la redondance visuelle.
Comme le dernier, cette section est très attrayante. J'aime le traitement visuel des titres et les effets de survol animés sur les vignettes. Tout se sent lisse et de grande classe.
Un petit changement: ne jamais capitaliser le? I? dans l'iPhone. Cela semble insignifiant, mais les gens sont pointilleux à ce sujet et certains ne vous engageront pas pour créer leur site iPhone si vous ne connaissez pas suffisamment le produit pour obtenir le bon nom.
Bas de page
Pour moi, cette section est la seule partie du site où la mise en page devient un peu gênante. Pour commencer, le flux des colonnes semble étrange avec la grande quantité d'espaces blancs gênants au milieu. Je ne suis pas sûr que ce soit la meilleure idée de faire coïncider la section de quatre colonnes avec la section de trois colonnes ci-dessus.Cela pourrait sembler plus logique si les colonnes étaient réparties uniformément dans l’espace, comme le sont les trois au-dessus d’elles (suivez donc la méthode de la section précédente et non l’emplacement exact).
Enfin, le droit aligné? Mes liens? Cette section est un peu étrange étant donné que toutes les autres colonnes sont alignées à gauche. Il s’agit d’un cas classique de design qui est l’un de ces endroits où vous pouvez suivre toutes les règles tout en ayant quelque chose qui ne va pas. Je discute encore et encore sur l'importance de suivre strictement la présentation que vous avez établie, mais je suggère ici que la dernière colonne n'a peut-être pas besoin de suivre la présentation justifiée et peut simplement avoir un bord droit en lambeaux.
Être designer signifie apprendre toutes les règles et ensuite déterminer quand il est acceptable de les enfreindre. Le problème est bien sûr que chaque concepteur décidera différemment. Je suis en train de couper les cheveux en quatre avec cette chronique, alors que de nombreux designers ne verront aucun problème avec la mise en page du pied de page! J'encourage simplement Owain à jeter un nouveau regard sur la disposition et à décider elle-même si elle ne pourrait pas être renforcée d'une manière ou d'une autre.
À 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.