Obtenez la mise en page de site Web parfaite en 27 étapes
Page 1 sur 2: Mise en page du site Web: mise en route et processus de conception- Mise en page du site Web: mise en route et processus de conception
- Mise en page du site Web: approche de conception et conclusion
La conception d'une mise en page de site Web n'a pas à être difficile, surtout si vous connaissez les erreurs courantes à éviter. Dans cet article, nous passons en revue les étapes à suivre pour atteindre la mise en page de site Web parfaite. Nous couvrirons ce que chaque nouveau constructeur de site Web doit savoir et faire avant de commencer un nouveau projet, et ce à quoi il doit prêter attention pour éviter de déraper.
Ces étapes couvrent non seulement les aspects de conception, mais également des conseils généraux sur le flux de travail. Sur cette page, nous explorons comment démarrer et les étapes clés du flux de travail de conception, et sur page 2 vous trouverez des conseils généraux pour aborder la conception de la mise en page d'un site Web et des astuces pour conclure un projet. Suivez ces conseils et vous serez bientôt sur la bonne voie pour créer des mises en page de site Web professionnelles. Vous voudrez peut-être également lire sur Conception atomique , comme moyen de structurer votre site.
Toujours à la recherche d'un hôte? Jetez un œil à notre guide des meilleurs services d'hébergement de sites Web et le meilleurs constructeurs de sites Web à l'heure actuelle. Et ce n'est pas couvert ici, mais n'oubliez pas vos pages d'erreur! Jetez un œil à notre sélection des meilleures 404 pages pour l'inspiration.
Commencer
01. Définissez ce que signifie le succès
Avant de commencer le travail, vous devez savoir pour quoi vous concevez. Outre la description du site, vous devez savoir quelles sont les attentes pour celui-ci. Prenons un site d'actualités par exemple. Quel est le but? Est-ce pour faire autant d'impressions publicitaires que possible ou est-ce pour offrir la meilleure expérience de lecture? Comment ces objectifs vont-ils être mesurés?
Les bonnes refontes ne sont pas nécessairement les plus voyantes, mais celles qui améliorent les performances au fil du temps. Parler à vos clients avant de commencer votre conception est essentiel pour définir tout cela. Vous devez connaître leurs préoccupations et leurs objectifs au-delà de l'énoncé de travail écrit.
02. Comprendre le site actuel
Le plus souvent, la participation d’un designer à un projet ne se fait pas de manière isolée. Les clients ne vous contacteront pas toujours pour commencer quelque chose à partir de zéro. Dans la plupart des cas, vous devrez comprendre le système actuellement en place et, si votre projet est destiné à le remettre en question, trouver des opportunités pour le faire évoluer ou le suivre tel quel.
Les options sont illimitées. Comprendre ce qui est en place du point de vue de la conception est essentiel si vous voulez aller vite et reconnaître où se trouvent les opportunités d'innovation, plutôt que de devoir remettre en question ce qui a été établi et de passer pour quelqu'un incapable de comprendre les exigences.
03. Partagez rapidement vos designs avec vos clients
Lorsque vous proposez un concept interactif ou un design «look and feel», vous devez vous assurer que vous et le client êtes tous les deux sur la même page dès que possible. Évitez de passer trop de temps sur un concept avant de le partager avec le client.
Une fois le concept initial approuvé, vous pouvez vous détendre un peu et démarrer la production. Mais après avoir présenté le premier concept, si le client n'en tombe pas amoureux, vous devriez recueillir suffisamment de commentaires pour apporter un deuxième concept, plus approprié, à la table.
Processus de conception
04. Tackle layout first
Cela semble très évident, mais j'ai trouvé trop souvent que les concepteurs se lancent directement dans leur travail avant de réfléchir au problème qu'ils tentent de résoudre. Le design consiste à résoudre des problèmes, et ces problèmes ne peuvent pas être résolus par des dégradés ou des ombres, mais plutôt par une bonne mise en page et une hiérarchie claire.
Pensez au contenu, à la mise en page et à la fonctionnalité. Assurez-vous que ces pensées correspondent aux objectifs de votre client et n'hésitez pas à les partager.
05. Commencez à esquisser un cadre de plus haut niveau
Quand on me demande de créer une apparence et une convivialité pour une mise en page de site Web, la première chose que je fais est de proposer un cadre de haut niveau qui résout tous les problèmes de conception. Le cadre est l'interface utilisateur qui entoure le contenu et aide l'utilisateur à effectuer des actions et à le parcourir. Il comprend la navigation et des composants tels que les barres latérales et les barres inférieures.
Si vous abordez votre conception de ce point de vue, vous aurez une compréhension claire de ce que votre mise en page aura besoin lors de la conception de sections au-delà de la page d'accueil.
06. Ajouter une grille
C'est aussi simple que ça en a l'air. Avant de commencer à concevoir quoi que ce soit, vous avez besoin d'une grille appropriée. Il n'y a aucune excuse valable pour commencer sans grille - et si vous ne le faites pas, je peux vous assurer que le design ne sera pas aussi beau. Une grille vous aidera à structurer la disposition des différentes sections; il vous guidera à travers les exigences spécifiques de taille d'écran et vous aidera à créer des modèles réactifs, de sorte que vous soyez cohérent en termes d'espacement ainsi que de nombreux autres problèmes de conception.
Pour savoir comment procéder, consultez ce guide créer une grille qui s'adapte à toutes les tailles d'écran .
07. Choisissez votre typographie
Explorer différentes polices et couleurs fait partie de la phase de découverte d'un projet. En général, je recommanderais de ne pas utiliser plus de deux polices de caractères différentes dans un site Web, même si cela dépend vraiment de sa nature. Choisissez une police facile à lire pour les gros morceaux de texte et soyez plus ludique avec les titres et les appels à l'action. En quête d'inspiration? Jetez un œil à notre tour d'horizon des associations de polices ou liste de polices gratuites . N'ayez pas peur d'utiliser de grandes polices et soyez créatif et cohérent lorsque vous utilisez la typographie.
08. Sélectionnez votre thème de couleur
Au cours du processus de choix d'un ensemble de polices de caractères, vous devez commencer à explorer les couleurs que vous utiliserez dans l'interface, les arrière-plans et le texte. Je recommande un ensemble limité de couleurs et de tons pour l'interface utilisateur générale.
Il est important de les appliquer de manière cohérente dans la mise en page du site Web, en fonction de la fonctionnalité de chaque élément. Pensez à la mise en page de sites comme Facebook, Twitter, Quora et Vimeo. Outre l'interface utilisateur, il ne devrait y avoir aucune restriction de couleur pour les illustrations ou les détails graphiques, tant qu'ils n'interfèrent pas avec la fonctionnalité des composants.
Si vous êtes bloqué, jetez un œil à notre liste de les meilleurs outils de couleur pour les concepteurs Web .
09. Simplifier la mise en page
Plus la structure du site est simple, plus il est facile pour les utilisateurs de naviguer. Chaque section doit raconter une histoire; il a besoin d'une raison et d'un résultat final pour l'utilisateur. La mise en page doit aider le contenu à mettre en évidence les éléments les plus importants de cette histoire.
En réalité, il ne devrait pas y avoir trop d'appels à l'action sur une page - tout devrait conduire à cette finale 'Que puis-je faire ici?'
Pensez à la mise en page la plus simple que vous puissiez imaginer dans un but simple et commencez à ajouter les composants nécessaires. En fin de compte, vous serez surpris de voir à quel point il est difficile de rester simple.
10. Affinez chaque composant
Traitez chaque composant comme s'il pouvait être présenté à un concours de design. Si vous faites attention à chaque composant, le tout sera plus que la somme de ses parties. Je dois admettre que ce conseil n'est pas le mien. Je l'ai entendu dans une agence précédente et j'ai été choqué par la clarté et la véracité de cette déclaration.
Chaque composant doit être conçu comme s'il pouvait être le meilleur composant de tous les temps. Parfois, les concepteurs laissent certaines parties d'un site jusqu'à la dernière sur leur liste de tâches et finissent par ne pas leur montrer beaucoup de respect.
11. Présentez vos solutions aux clients
Évitez de faire de grandes révélations de votre travail. L'un des objectifs de la communication fréquente avec le client est d'éviter les surprises lors de la révélation de votre travail. Les fois où j'ai présenté mes progrès, j'ai trouvé plus utile de les emmener dans un voyage et de montrer d'où je suis parti, les considérations que j'ai eues en naviguant sur tel ou tel défi et où j'ai finalement atterri, au lieu de simplement montrer la fin du voyage sans contexte.
En faisant cela, vous constaterez qu'ils sont soit d'accord avec vos conclusions, soit à un moment donné de votre procédure pas à pas, ils signaleront une faille ou une variante supplémentaire que vous n'avez peut-être pas envisagée. Dans les deux cas, vous aurez une conversation et le client se sentira plus investi car il fait partie du processus.
12. Pensez en mouvement
Le mouvement est essentiel lors de la conception d'expériences interactives. Aucune conception ne peut plus être jugée seule ou en tant que composition statique; chaque composant est défini par sa relation avec le système, et cette relation a besoin de mouvement pour être correctement véhiculée. Motion peut illustrer des effets dynamiques sur le contenu ou des états interactifs dans votre mise en page. Pour ce deuxième objectif, je recommande d'approfondir vos conceptions dans le prototypage.
13. Prototype, prototype, prototype
Le prototypage est le meilleur moyen de tester les interactions et la technologie. Il y a beaucoup de outils de prototypage qui facilitent les choses de nos jours, et vous n’avez pas besoin d’être un gourou du codage pour créer des prototypes efficaces. C'est encore une autre façon de susciter l'enthousiasme de votre client et de l'adopter avec des concepts et des idées qui, autrement, auraient besoin de beaucoup d'explications.
Page suivante: Approche de conception et conclusion
- 1
- deux
Page actuelle: Mise en page du site Web: mise en route et processus de conception
Page suivante Mise en page du site Web: approche de conception et conclusion
