Voici une question dont les réponses vont très probablement changer la vie des membres de votre équipe technique (codeurs, intégrateurs et développeurs) !...
53 % des acheteurs en ligne sont susceptibles d’abandonner un achat s’ils ne trouvent pas une réponse rapide à leurs questions. La solution pour éviter de...
Se développer à l’international peut être tentant pour de nombreuses raisons. En effet, étendre la taille de son marché permet de multiplier vos clients...
Une étude dévoile de nombreuses métriques sur les taux de délivrabilité en fonction des secteurs d’activité, les taux de clics et d’ouverture. L’article...
Deux règlements viennent d’être dévoilés par la Commission européenne : le DSA (Digital Services Act) et le DMA (Digital Markets Act)....
HTTP Archive a publié son rapport annuel sur l’état du web. Celui-ci s’appuie sur les métadonnées de plusieurs millions de sites. Décryptage des...
Tour d’horizon complet et exhaustif des tendances SEA en 2021 : canaux à exploiter, formats, ciblages et stratégies à mettre en place....
Rédiger un bon contenu dans le secteur des assurances est essentiel pour pouvoir se démarquer de la concurrence. Malgré tout, créer un marketing de contenu...
À 7 jours de Noël, les achats en ligne augmentent de 55 % ! Même si vous avez préparé, bien à l’avance, votre campagne emailing pour les fêtes, les...
Connaître l’histoire de logos de grandes marques, et surtout leur évolution, vous permet de constater par vous-même deux choses : premièrement, que l’on...
Voici une question dont les réponses vont très probablement changer la vie des membres de votre équipe technique (codeurs, intégrateurs et développeurs) ! En effet, on n’y...
Voici une question dont les réponses vont très probablement changer la vie des membres de votre équipe technique (codeurs, intégrateurs et développeurs) !
En effet, on n’y pense pas toujours, mais quelques gestes simples peuvent beaucoup faciliter et accélérer l’intégration d’une maquette web.
Organisation des calques, icônes, typographies… Découvrez dans cet article comment bien préparer vos fichiers pour une intégration web.
En amont de tout projet, le webdesigner doit utiliser le bon logiciel pour concevoir des maquettes graphiques destinées ensuite à une intégration web. Sachez que les logiciels Adobe ont chacun leur propre utilité.
Évitez donc InDesign qui n’est pas du tout adapté à la conception d’interfaces web, mais qui est idéal pour mettre en page des documents print ou PDF.
Materiel design par Google
Vous pouvez en revanche créer des maquettes de site internet sur Photoshop et Illustrator, sans être ensuite maudit par votre développeur. Sachez toutefois que Adobe XD, Sketch et Photoshop sont généralement privilégiés par les webdesigners, Illustrator étant surtout employé par les graphistes print.
Attention, car l’équipe technique n’a pas toujours une maîtrise très assurée du logiciel utilisé. Avant de lui transmettre la maquette, prenez donc le temps de bien l’organiser :
Au moment de transférer vos fichiers, vous pouvez utiliser une plateforme permettant de facilement partager avec le développeur des spécifications, actifs, extraits de code… Quelques exemples : Avocode, Zeplin, Invision ou encore Material Design Gallery.
Autre astuce et non des moindres, veillez à fournir à votre équipe technique tous les éléments de style dont elle aura besoin au moment de l’intégration de votre maquette sur le site web.
Fournissez à votre développeur la palette complète de votre projet. Ces éléments précieux ne manqueront pas de lui faire gagner en temps et en efficacité dans la création de variables.
On y pense peu, mais les icônes peuvent aisément devenir une source désagréable de problèmes pour votre intégrateur qui perd un temps précieux à les extraire un à un de votre maquette.
Sachez aussi qu’il existe désormais de nombreux sites web qui proposent des bibliothèques d’icônes en ligne d’une qualité parfaite.
Une fois le dossier d’icônes téléchargé, installé sur votre site, et un lien inséré dans le header, il sera très facile d’afficher les icônes souhaités n’importe où sur le site. Parmi ces sites d’icônes, l’un des plus populaires n’est autre que Font Awesome.
Autre point d’attention à ne pas négliger, privilégiez impérativement les polices Web dans votre conception de maquette. N’optez jamais pour une police de bureau.
Préférez donc choisir votre typo dans l’immense répertoire Web Google Fonts qui offre une grande quantité de polices open-source.
Pensez également à définir les dimensions et caractéristiques de votre police.
Par exemple :
Également bien utile au développeur, expliquez-lui précisément les variations de style entre les différents états (activé, désactivé, survol, etc.) des éléments du site.
Par exemple :
Le travail de conception graphique d’une interface web est très différent de celui de son intégration. Pensez aux intervenants qui devront prendre le relai de votre projet web en s’appuyant exclusivement sur les fichiers que vous leur aurez transmis. En assimilant cette notion tout au long de votre processus de création vous aiderez, et accélérerez beaucoup le travail des développeurs.
Lorsque plusieurs professionnels collaborent sur un même projet, la communication et le respect du travail de chacun représentent la pierre angulaire d’un projet bien mené. Le résultat final sera ainsi fidèle à vos maquettes, ce qui apportera satisfaction à votre client.
Vous souhaitez réaliser la maquette de votre futur site internet ? N’hésitez pas à consulter les différents profils des webdesigners professionnels disponibles sur Graphiste.com
Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.
Nous ne partagerons pas votre adresse e-mail.