Nous connaissons tous intuitivement ce qui rend un site Web mal en point: des effets de biseau surexploités, des images clipées, des mises en page surpeuplées. Ces désagréments sont facilement corrigés en développant les principes de conception en tête, les mêmes principes utilisés par les designers professionnels et les artistes.
Les grands sites Web rassemblent la forme et la fonction. En fait, les sites Web bien conçus sont considérés comme plus crédibles, selon un Étude de Stanford et sont en fait plus faciles à utiliser (comme étudié par le chercheur Don Norman ). Voici cinq principes fondamentaux pour vous aider à garder le design de qualité au premier plan de votre pratique.
Dans les écoles de design, ils vous donneront une liste de principes à respecter qui assigneront des règles aux éléments de beauté comme la mise en page, l’ordre et la symétrie. Mais au fur et à mesure que vous avancez, il vous est demandé de briser les règles pour créer des endroits où les yeux du spectateur peuvent regarder en utilisant des éléments tels que la variété, la tension ou le contraste.
Voici un exemple d'une page Je l'ai fait dans Edge Reflow CC. Pouvez-vous repérer les différents éléments de design utilisés, puis jouer avec?
Il y a des icônes universelles auxquelles les gens sont formés pour répondre. La loupe (recherche), la maison (page d'accueil) et la disquette (sauvegarde) sont déjà intégrées à vos utilisateurs. Profitez de ceux raccourcis visuels ; Tous ces panneaux routiers devraient vous être immédiatement reconnaissables.
La couleur fait toute la différence, d'autant plus que nos écrans s'améliorent sur nos téléphones et tablettes. C'est une facette du design qui peut être un élément essentiel de l'histoire que votre site veut raconter. Utilisez simplement la couleur pour prendre en charge le contenu, et non pour décorer une page. Et souvent, si vous utilisez une photo, les couleurs du dessin doivent être échantillonnées à partir des photos utilisées afin que votre design ait une impression unifiée.
J'aime bien tirer des exemples de couleurs avec des échantillons de couleur - et le Adobe Kuler L'application Web est un excellent moyen de jouer avec différents thèmes, puis de les importer dans vos outils de conception. L'une des meilleures règles à suivre est d'utiliser des couleurs complémentaires. Qui utilise essentiellement des couleurs chaudes et des couleurs fraîches pour fournir un équilibre.
Il y a littéralement des milliers de polices à choisir.
C'est à vous de combiner - mais rappelez-vous qu'il est préférable de n'utiliser que trois polices à la fois, une belle police de titre, une pour le corps du texte, puis une autre pour tout type d'appel. avoir besoin. Souvent, cela signifie utiliser un sans-serif pour la copie du corps, et pour les titres, vous pouvez devenir plus intéressant avec des empattements ou sans-serif.
D'accord, vous avez vos éléments de conception de base, avec de jolies icônes et des images, avec un jeu de couleurs et des polices amusantes. Et après?
Obtenir de l'aide des autres, bien sûr! Et pas seulement des personnes au hasard dans la rue, mais des critiques constructives de la part de personnes qui connaissent vraiment leurs affaires, comme d’autres concepteurs / développeurs. Cela peut être déterminant pour passer d'un site Web correct à un site Web qui apparaît vraiment. Si vous n'avez jamais utilisé Behance pour publier un travail en cours, je vous recommande d'essayer. La communauté active fera plus que simplement vous dire «pour agrandir le logo» - mais vous donner des conseils qui peuvent faire la différence entre un bon site Web et un bon.
Pour approfondir la manière d'appliquer les éléments de conception au développement Web, consultez ma présentation de SXSW: