Ci-dessous, je donnerai un bref aperçu des points obligatoires auxquels vous devez faire attention lors de la création d'une mise en page Web pour son transfert ultérieur vers la mise en page.
Ils vous aideront:
- approfondissez votre mise en page
- éviter les questions inutiles
- obtenir un meilleur résultat
- restez amis avec le développeur frontend
Général
- Les dispositions de dénomination (pages, cadres - requis) doivent clairement transmettre l'essence et le but et être liées aux pages logiques du site ou d'autres grandes entités.
(Exemple: «maison - tablette», «principal - mobile», «boutons»)
[exemple d'écran] - Il est nécessaire d'observer la structure du document lorsque vous travaillez avec des calques, des groupes, des composants et des écrans, leur donner des noms complets
(Exemple: arrière-plan principal, paramètres, bouton, page d'inscription-mobile)
(Mauvais exemple: cadre 1, groupe 45, iphone XR)
[exemple d'écran] - Si vous avez besoin d'une version mobile , une mise en page de 320 pixels (iPhone SE) doit être développée pour chaque écran, en plus de laquelle vous pouvez créer des mises en page haute résolution.
[exemple d'écran] - Les icônes (svg, ...) doivent être téléchargeables et s'ouvrir correctement dans le navigateur. La taille du plan de travail svg doit correspondre au contenu et au flux. Vous pouvez collecter des jeux d'icônes sur des tableaux d'art individuels.
[exemple d'écran] Les photos (contenu graphique) doivent être téléchargées. Avoir une résolution d'au moins 2x. Déchargé sans prétraitement. (Tels que: bords arrondis, transparence, ombre). Sauf lorsque ce traitement a été explicitement demandé.
[exemple d'écran]
- Il est nécessaire de prendre en compte la taille de la zone de contenu et le fait que cette taille varie d'une résolution à l'autre. Ainsi, le «point d'attache» doit être pensé.
- Les images de contenu doivent être téléchargées comme une seule image.
(Par exemple: nous avons un bloc rectangulaire avec [arrière-plan] qui changera. Par conséquent, l'image doit être complètement déchargée avec l'arrière-plan, comme dans l'exemple ci-dessus.)
- Les couleurs de police ne doivent pas contenir de canal alpha (transparence), sauf si la police est utilisée sur différents arrière-plans (dégradés ou images) et doivent donc avoir cette logique.
- Une liste complète (zip.archive) des polices utilisées dans le projet doit d'abord être fournie (avant de commencer le travail sur le devant).
- Cela ne fait pas de mal non plus de choisir une police sûre (qui est disponible sur tous les Windows, Mac, Linux, etc.), similaire à la police personnalisée utilisée, afin qu'elle puisse être remplacée en cas d'erreur de chargement de police personnalisée
(Exemple: «Roboto», sans serif) - Si nous avons affaire à une police d'icônes personnalisée , les icônes doivent être traitées en conséquence, à savoir: vous devez les aligner le long des lignes de base afin que plusieurs icônes de la ligne ne soient pas de tailles différentes et avec des retraits différents. De plus, le nombre de faces, l'épaisseur de base des faces, le niveau de détail doivent être préservés d'icône en icône, sinon ils seront hétérogènes, comme s'ils provenaient de différents jeux de polices.
- En l'absence d'exigences particulières pour la logique de comportement , les blocs du flux doivent conserver la séquence de leur emplacement lorsqu'ils s'adaptent aux résolutions qui se reflètent dans les exigences.
- La logique doit se refléter dans la conception . Par exemple, plusieurs cartes identiques, dans chacune desquelles afficher une quantité différente de contenu, des images différentes, des états différents, etc., de sorte qu'il devient possible de tracer la dépendance.
- En plus de la mise en page, une description textuelle du fonctionnement des éléments est la bienvenue.
- Spécifiez le comportement des éléments en cas de débordement de texte
(Par exemple, recadrez un texte long avec des points de suspension dans un bloc, etc.) - Laissez des commentaires et une description (de quelque manière que ce soit) sur les éléments animés et les éléments dont le comportement ne peut être déterminé de manière unique que par la mise en page.
- Les pages 404 , 500 et autres écrans standard doivent être présents.
Tous les paragraphes suivants du guide et des grilles peuvent être dessinés sur la page des styles, où tout cela sera structuré.
Guide, GUI, UI-kit, Guide de style
- La description et la disposition des blocs connectés par des fonctionnalités communes sont données dans une section du document.
(Par exemple, tous les pop-ups ont un fond blanc et des coins arrondis 10px, des boutons ...) - La typographie doit être décrite et dessinée en plus sur un plan de travail séparé.
(Exemple: tous les titres du premier niveau sont en retrait de 24 pixels en dessous de 40 pixels. Tous les titres du deuxième niveau ..., paragraphes ..., etc.) - Tous les liens, boutons, cases à cocher et autres éléments interactifs doivent être dessinés dans un état passif, induit et actif. De même, il devrait y avoir des états pour le téléphone portable (appareils tactiles) - passif, instantané. États: (lien, survol, actif, focus, visité, désactivé, processus).
[Exemple de case à cocher]
[Boutons-exemple] - Le fil d'Ariane doit être dessiné dans tous les états (actif, précédent, bloqué, ...) et en tenant compte des sauts de ligne.
- La pagination doit être rendue dans tous les états (à la première, dernière étape intermédiaire) et avec un nombre différent d'étapes (1, plusieurs), en tenant compte d'un grand nombre (3+ caractères) de chiffres.
- Entrées (champs de saisie), les formulaires doivent être dessinés dans tous les états: par défaut, avec focus, lorsqu'ils sont pressés, verrouillés, message d'erreur, message d'exactitude, etc.
[Exemple d'entrée] Limitez le nombre de couleurs et de nuances utilisées
[Exemple de niveau de couleur] .
- Toutes les couleurs utilisées doivent faire office de guide.
(Toute nouvelle couleur dans la mise en page sera considérée comme une erreur et sera assimilée à la plus proche du guide) - Les couleurs uniques en termes de fonctionnalité doivent être décrites ou liées à l'essence.
(Par exemple, un widget de stock d'Halloween avec un seul fond orange: l'orange est la couleur des stocks d'Halloween)
Mesh
- Le retrait et la taille des éléments doivent être un multiple de la même valeur.
(2px, 4px, 8px, 5px ...)
[exemple d'écran]
[post-exemple] - La grille (le cas échéant) doit être décrite et non contradictoire
mises en page. Tailles des colonnes, leur quantité, etc. - Les dimensions du conteneur doivent être décrites sur chacune des présentations
autorisations. - Les valeurs des points d' arrêt doivent être décrites.
- Le remplissage vertical des blocs dans le flux doit être normalisé. (similaire à la typographie)
Lettres, courrier, listes de diffusion, courrier
- Il est nécessaire de rendre la conception de la lettre aussi simple que possible . Il est important de comprendre le fonctionnement de la mise en page et de la balise <table> . Les lettres sont placées sur des tables. (affichage: bloc, flex, position absolue - ne peut pas être appliqué dans la lettre). L'adaptatif est aussi simple que possible sans que les blocs changent de position dans le flux. Souhaitable «caoutchouc» ordinaire et 1 jeu de styles
- N'utilisez pas de polices personnalisées dans la lettre
Bien sûr, si vous dessinez pour un "dribble", etc. vous pouvez faire ce que vous voulez, mais pour un projet sérieux, ces éléments sont 100% nécessaires.