23 étapes pour la mise en page d'un site Web parfait, Creative Bloq
01. Définir ce que signifie le succès
Les bons refontes ne sont pas nécessairement les plus flashy mais ceux qui améliorent les performances au fil du temps. Parler à vos clients avant de commencer votre conception est la clé pour définir tout cela et d'apprendre ce que leurs préoccupations et leurs objectifs au-delà de l'énoncé des travaux écrits (énoncé de travail) sont.
02. Mettez vos pensées sur le papier premier
esquisses initiales d'une série d'illustration sur les villes à travers le monde
Cela semble évident, mais je l'ai trouvé trop souvent que les concepteurs sauter directement dans leur travail avant de donner une idée du problème qu'ils tentent de résoudre. Le design est au sujet de la résolution de problèmes, et ces problèmes ne peuvent être résolus par des gradients 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é avant de commencer à déposer des ombres. Assurez-vous que ces pensées sont conformes aux objectifs de votre client et ne hésitez pas à les partager. Aucun client ne m'a jamais plaint à des idées plus communicants.
03. Démarrer esquissant un cadre de haut niveau
Décrirai wireframe de base vous aidera à structurer la mise en page
04. Ajouter une grille
Un exemple d'une grille 978 avec une ligne de base de 10px
05. Choisissez la typographie
06. Choisissez votre thème de couleur
Utilisez un nombre limité de couleurs et de tons pour se prémunir contre la surcharge visuelle
Tout au long du processus de sélection d'un ensemble de caractères, vous devriez commencer à explorer les couleurs que vous utiliserez dans l'interface utilisateur, arrière-plans, et le texte. Je recommande d'utiliser un nombre limité de couleurs et de tons pour l'interface utilisateur générale.
07. Diviser la mise en page
mises en page simples ont tendance à être plus facile à naviguer
En réalité, il ne devrait pas être trop sur une page des légendes - tout devrait conduire à ce dernier «Que puis-je faire ici? Pensez à la mise en page la plus simple que vous pouvez imaginer pour un but simple et commencer à ajouter des composants qui sont nécessaires. En fin de compte, vous serez surpris de voir comment est difficile de garder les choses simples.
08. Repenser l'établi
Avons-nous vraiment besoin d'un bouton de recherche plus? Dans la plupart des cas, la réponse est non
Certaines conventions sont là parce qu'ils travaillent, mais ils sont parfois là parce que personne ne passait assez de temps les évaluer. Il est important de repenser les modèles interactifs établis de tous les composants pour voir comment nous pouvons les améliorer.
09. Pensez en mouvement
Le mouvement est essentiel lors de la conception des expériences interactives.
Le mouvement est essentiel lors de la conception des expériences interactives. Aucune conception peut être jugé sur son propre ou un échantillon plus statique; chaque composante est définie par sa relation avec le système, et cette relation doit mouvement à transmettre correctement. Le mouvement peut illustrer les effets dynamiques sur le contenu ou les états interactifs au sein de votre mise en page. Pour ce deuxième but, je vous recommande de prendre vos conceptions un peu plus loin dans le prototypage.
10. Prototype, prototype, prototype
Prototypage est la meilleure façon de tester les interactions
Prototypage est la meilleure façon de tester les interactions et la technologie. Il y a beaucoup d'outils de prototypage qui le rendent facile de nos jours, et vous ne pas besoin d'être un gourou de codage pour créer des prototypes efficaces. Ceci est encore une autre façon, vous pouvez obtenir votre client et excité à bord avec des concepts et des idées qui seraient autrement besoin de beaucoup d'explication.
11. Défi vous
12. Faites attention aux détails
Les travaux en cours: vue détaillée
Cette déclaration a été galvaudé ces derniers temps, mais ce n'est pas toujours visible dans le produit final. Selon le concept du projet, que « le souci du détail » peut signifier des choses différentes.
Il pourrait être une petite interaction, une animation inattendue ou une touche esthétique comme un petit dégradé dans un bouton ou une course subtile autour d'une boîte en arrière-plan. Mais cette touche est globalement essentiel - et il viendra naturellement si vous aimez vraiment ce que vous faites.
Current page: Page 1