Prenez le contrôle et gagnez du temps lors de la conception pour les clients

Chez FHOKE, nous avons géré des centaines de projets de nombreuses manières. Grâce à l'expérience de notre équipe dans l'industrie, en cours d'exécution ou dans des studios, nous avons tout vu. des moyens qui ont fonctionné et d'autres qui ont échoué. Au fil des ans, nous avons affiné notre processus et trouvé une approche progressive qui convient à tous nos clients. Cela nous fait gagner du temps et donne plus de contrôle aux concepteurs.

La clé est de toujours entretenir une excellente relation avec le client, de le laisser se sentir satisfait à la fin du projet, tout en vous évitant le chagrin, la douleur et les larmes que l’exécution d’un projet peut apporter. Donc, si vous avez du mal à traiter avec les clients et que vous perdez la passion du design pour cette raison, pourquoi ne pas tenter notre approche??


Brief et Spec The Work

Embrasser une vision de client et arrêter la fonction

Cela peut sembler évident, mais nous entendons trop souvent parler de pigistes et même d’agences se lancer dans un projet sans penser à tous les scénarios. Assurez-vous de bien planifier votre voyage, posez les bonnes questions et informez votre client de ce à quoi il devrait s’attendre à être livré à la fin du projet. Avant tout, définissez des étapes et des conditions de paiement raisonnables de sorte qu'aucun de vous ne soit laissé sans rien.

Créer un brief de conception efficace

Si votre première série de visuels a été rejetée et que l’on vous demande pourquoi vous avez choisi une telle approche, alors vous n’avez peut-être pas pris le bon dossier (vous n’auriez peut-être même pas dû en prendre un du tout. )

Un descriptif de conception efficace est le facteur le plus déterminant pour garantir le bon démarrage d'un projet. Il fournira au client les bonnes questions auxquelles vous devez répondre en tant que concepteur. Répondez aux questions et la première étape du projet a été un succès.

Si vous n'avez pas préparé de mémoire, pourquoi ne pas en utiliser un comme celui-ci pour le donner aux clients. Tous les clients ne comprennent pas ce qu'est un bon descriptif de conception et ne vous donneront pas toujours les réponses que vous souhaitez. N'hésitez pas à utiliser notre modèle à votre guise. En le préparant, il montre à vos clients votre professionnalisme et leur permet d'économiser beaucoup de temps et d'argent. Rappelez-vous: encouragez-les à s'amuser et demandez-leur de vous donner le plus d'informations possible. Si vous avez encore des questions, n'hésitez pas à demander plus.

Arrêtez de vous sentir snobé

Maintenant, vous avez un excellent mémoire à portée de main, vous devez préciser le travail. Il peut s’agir d’une liste détaillée des fonctionnalités ou d’une simple liste de pages et de fichiers auxquels le client doit s’attendre une fois l’opération terminée. Essayez de détailler autant d'informations que possible dans la proposition, car cela décrit exactement ce que le client recevra. Cela forme également un contrat entre vous et le client et vous évitera de vous sentir maltraité si un client commence à ajouter de nouvelles fonctionnalités ou des éléments qui n'ont jamais été discutés..

Pourquoi ne pas utiliser ces en-têtes dans vos spécifications:

  • Aperçu du projet
  • But du projet
  • Membres de l'équipe de projet
  • Votre processus
  • Débit / carte de haut niveau
  • Caractéristiques et fonctionnalités du projet - Découpez-les en éléments faciles à suivre, tels que la conception, le développement et le déploiement.
  • Devis - Avec vos étapes de paiement
  • Contrat signé - Signature du client, datée du
  • Vos termes

Les étapes de paiement sont l’un des accords les plus importants pour les nouveaux projets. Choisissez des termes qui fonctionnent en votre faveur mais qui sont justes pour le client. Rappelles toi jamais démarrer ou remettre un projet sans paiement initial ou final, vous aurez non effet de levier à ce stade. Dites-le clairement, assurez-vous que les clients connaissent les termes à l’avance et qu’ils comprennent bien que la propriété intellectuelle (IP / Copyright for All / Part of) du projet (si vous le transférez) ne leur appartient que lors du paiement. N'ayez pas peur de rester sur vos positions ou, si vous êtes interrogé, parvenez à un accord mutuellement avantageux. Par exemple, si vous prenez 50% à l’avance et 50% à la fin, vous pouvez envisager de prendre 35% à l’avance et 65% à la fin..

Il n’est pas rare non plus que le paiement intermédiaire convenu puisse être clairement défini, par exemple, après la planification, l’étendue et la conception avant le début de la construction. Il existe de nombreuses façons d’étaler les paiements mais assurez-vous de choisir les conditions avec lesquelles vous êtes à l'aise..

Une fois qu'un projet est en cours, il y aura toujours un certain degré de manœuvrabilité au jeu. Après tout, vous aurez construit une relation avec le client à ce moment-là et vous voudrez le satisfaire. Toutefois, sachez quand refuser, expliquez pourquoi un changement aura une incidence sur le projet et reportez-vous à la proposition signée. Pouvoir limiter les irritations des deux côtés rendra le projet plus agréable pour vous et le client..


Wireframing

Travailler sur l'utilisabilité, la disposition et la navigation

Nous avons travaillé sur des projets permettant de concevoir des éléments visuels directement depuis le brief jusqu'à la conception dans le navigateur, mais aucune de ces approches n'a également fonctionné lors de la création de wireframing..

Définir les attentes

Wireframing définit les attentes du client en ce qui concerne la mise en page du site avant même d'envisager l'introduction de la couleur, de la typographie et des graphiques. Cela vous permettra finalement de gagner du temps et d'éviter le redoutable processus de repoussage de pixels. C'est également un excellent moyen de dépouiller un site et de se concentrer sur sa convivialité, ses fonctionnalités et son flux, sans distraire le client par la conception. Commencez par concevoir puis le client se concentrera presque certainement sur cela et non sur la mise en page que vous avez présentée. Faire cette erreur peut compromettre des fonctionnalités importantes et compromettre la facilité d'utilisation du site..

N'ayez pas peur d'expérimenter lorsque vous utilisez des encadrements. C'est un excellent moyen de créer rapidement des mises en page et tout aussi rapide de les modifier. Mais ne soyez pas expérimental pour des expériences, cela peut paraître joli mais le site doit être utilisable et répondre aux objectifs du client.

Pourquoi ne pas essayer Mockflow ou Balsamiq pour une solution rentable de création et de partage de vos structures filaires.

Où commencer

Commencez par choisir le système de grille à utiliser (consultez CSS Grid ou 978 gs). Avec les changements de résolution, ceux-ci peuvent varier et dépendent du client, du public cible et des périphériques sur lesquels le site doit fonctionner. Assurez-vous d'avoir discuté des options avec le client lors de la spécification du site. Cela vous fera gagner du temps et empêchera toute demande de modification ultérieure des résolutions lorsque la majeure partie du travail aura été effectuée. N'oubliez pas de continuer à communiquer et à éduquer le client dans tout ce que vous faites.

Étant donné que les fonctionnalités du site sont définies dans les spécifications et que vous comprenez ce que le client aime et ce qu'il n'aime pas de son dossier, il devrait s'agir d'une étape relativement rapide du projet. Votre travail commence maintenant, alors impressionnez-les et choisissez une disposition bien pensée, un style de navigation et choisissez le meilleur moyen de rendre ces zones fonctionnelles du site bien utiles pour le client et l'utilisateur..

Inspirez-vous des autres et analysez les fonctions qui pourraient être utiles aux utilisateurs de vos clients. Découvrez ce que font des sites similaires, consultez des sites de galeries Web et vérifiez si les fonctionnalités qu'ils utilisent sont utilisées à bon escient.

En tant que professionnel, vous avez la possibilité de créer et d’utiliser les dernières techniques, mais vous continuez à vous demander si vous en avez besoin. Cela aura-t-il un impact sur votre temps et vos coûts? Cela améliore-t-il l'expérience utilisateur? Est-ce que cela profite au client? Utilise-t-il au mieux l'espace disponible? Et surtout, répond-il au mémoire? Si la réponse à toutes ces questions est oui, alors allez-y. Si non, alors quel est le but?

Une fois que votre client est satisfait de la mise en page du site, assurez-vous qu'il signe, par écrit ou par courrier électronique, qu'il est satisfait du travail accompli à ce jour et qu'il est heureux que vous passiez à la prochaine étape du projet. Cela leur redonne le contrôle s’ils décident de modifier radicalement quoi que ce soit plus tard dans le projet. Restez flexible à un certain niveau. Des ajustements sont apportés à la disposition du site et vous constaterez presque certainement que lors de la conception du site, certaines zones peuvent être mieux placées ailleurs. Communiquer clairement avec le client.


Conception

Injecter une marque avec la couleur, les textures et la typographie

Si vous avez maintenant des structures filaires dans votre processus, vous constaterez que la conception d'un site sera une expérience beaucoup plus facile et plus agréable. La réflexion a été faite alors il est temps de laisser couler la créativité.

Préparez-vous à gagner du temps

Préparer vos fichiers avant de les concevoir vous fera gagner du temps, vous aurez tout en place et les ressources seront facilement retrouvées. Avec un système de grille décidé, commencez par créer une couche cachée de guides (vous constaterez que la plupart des sites de grille ont des fichiers prêts pour vous) ou utilisez un plugin tel que GuideGuide for Photoshop..

Préparez vos couches en créant une structure de dossier logique et continuez à nommer chaque couche de votre fichier au fur et à mesure de votre conception. C'est une bonne étiquette, surtout si un autre concepteur ou développeur récupère vos fichiers. Cela les aidera non seulement, mais vous aidera également à trouver rapidement des ressources dans ce fichier lorsque vous en aurez besoin. Essayez d'utiliser des objets dynamiques ou des calques de forme pour les icônes et les logos afin de pouvoir les redimensionner ultérieurement, en particulier lors de la conception d'écrans rétiniens..

Prendre des décisions de conception

La tâche de chaque concepteur est de commencer, mais généralement (du fait que les structures filaires sont en place), vous aurez déjà une idée de ce qu’il en va des meilleures pratiques ailleurs et du brief du client quant au style que vous allez adopter. Inspirez-vous, mais n'oubliez pas de vous l'approprier. Au fil du temps, vous constaterez que vous créerez votre propre style et que les clients voudront travailler avec vous à cause de cela..

Le style provient du traitement des textures, des polices que vous utilisez et des petits détails tels que les boutons, les icônes, les divisions et les états d’interaction. Pour les polices, utilisez des référentiels tels que Google Fonts ou TypeKit pour obtenir les dernières polices qui fonctionnent en ligne. Pour les boutons, jouez avec les idées et les styles; il est très rapide de changer de style en modifiant l'apparence du site avec quelques effets de calque. Prenons par exemple ce bouton plat:

Créé à l'aide de l'outil 'Forme (Rectangle)' (U) d'une taille de 100 x 40 pixels, plusieurs effets de calque ont été appliqués au calque. D'abord avec une couleur rouge foncée et uniforme, en utilisant la configuration «Superposition de couleurs» avec un mode de fusion «Normal» à 100%. Puis appliqué avec un 'trait' utilisant un rouge plus foncé à 100% avec un trait intérieur de 2 pixels. Cela crée un bouton très plat, générique, mais élégant, qui complimentera de nombreux sites..

Il est tout aussi rapide d’échanger les effets de calque pour créer un site plus profond, en utilisant des dégradés et des ombres flous pour créer de la profondeur. Passer simplement d'une "superposition de couleurs" à une "superposition de dégradés" vous donnera la possibilité d'ajouter un dégradé doux à la couleur du bouton. L'ajout d'une "ombre portée" à faible opacité vous donnera une ombre douce et modifiera instantanément l'apparence du bouton..

Trouvez ces deux boutons ici.

Qu'en est-il de la marque??

Si cela fait partie de votre projet et que vous avez du mal à faire en sorte qu'un logo ou un site s'adapte à l'autre, alors pourquoi ne pas les personnaliser en parallèle? Avec de nombreuses entreprises basées en ligne, cela est parfaitement logique. Nous avons adopté cette approche il y a quatre ans et nous n'avons pas revu depuis. Ce n'est pas toujours possible, mais cela a toujours aidé nos clients à construire une vision de l'ensemble de la marque (qui inclut un site) au lieu de leur demander de vous faire confiance et d'espérer qu'ils envisagent le fonctionnement d'un logo sur tous les médias..

Cela réduira considérablement votre temps à essayer d'adapter l'un à l'autre lorsque le style du site n'a peut-être pas été pris en compte au moment de la conception d'un logo. Bien sûr, continuez à dessiner vos idées et utilisez un processus similaire à celui que vous utilisez maintenant, mais jouer avec les deux idées en même temps fonctionne vraiment. Il est également beaucoup plus rapide et facile de mettre une marque hors ligne que de la faire fonctionner en ligne..


Remettre

Ne laissez pas votre développeur dans le noir

Rappelles toi jamais remettre un projet ou des fichiers sans paiement final et signature du client, vous devrez non revenez à ce stade si vous faites sans l'une de ces.

Si vous ne développez pas le site vous-même, ne laissez pas votre développeur ou votre client deviner.

Si vous avez pris le temps de superposer correctement vos fichiers, vous ne recevrez pas de réaction d'un développeur ou d'un client mécontent. C'est une courtoisie professionnelle de remettre des fichiers bien préparés et non seulement contentera votre client ou développeur, cela vous fera gagner du temps avec très peu d'interrogation sur la mise en place des fichiers..

Assurez-vous de regrouper les polices et tous les éléments ou la documentation demandés. Conserver tous les fichiers au même endroit, tel que Dropbox, permettra l’accès à toutes les personnes impliquées dans le projet..


Conclusion

Profitez de votre rôle en tant que designer

Nous ne disons pas que c'est la façon dont tout le monde devrait travailler, cela vient plutôt de notre expérience de l'industrie.

La conception est très subjective et si vous pouvez rationaliser un processus, le nombre de pixels repoussés et le nombre de repères numérotés dictés par un client seront réduits. Plus vous contrôlez un dessin, plus vous vous sentirez inspiré pour améliorer chaque projet..

Et rappelez-vous, apprendre à dire non au bon moment peut vous permettre, à vous et à votre entreprise, de vous faire gagner du temps, des efforts et beaucoup de peine. Dit au mauvais moment et cela vous apportera tout cela et plus encore. Alors, considérez vos réponses aux changements demandés par le client, donnez toujours une bonne raison et expliquez clairement pourquoi vous pensez que son idée pourrait ne pas fonctionner. Enfin, préparez-vous à prendre du recul. parfois les idées des clients peuvent enflammer un meilleur.