Aujourd'hui, nous allons examiner un problème réel auquel les concepteurs sont souvent confrontés. La mise à jour et la conception ancienne peuvent être une tâche décourageante, que ce soit la vôtre ou celle de quelqu'un d'autre. Une fois que vous voyez un dessin présenté d'une certaine manière, il est difficile de sortir de cette boîte mentale, même si vous n'aimez pas l'original.
L'article ci-dessous abordera un certain nombre de problèmes tactiles pour les concepteurs. Nous traiterons des graphiques obsolètes, de la lisibilité sur un fond sombre, de la surcharge d’informations, du traitement des textures, etc. Continuez à lire pour voir comment nous abordons ces problèmes.
Le projet
Le projet d'aujourd'hui résulte de deux demandes de renseignements de notre page Design Dilemma, une nouvelle section dans laquelle nous demandons aux concepteurs de nous laisser les aider à résoudre gratuitement des problèmes concrets.
La première question est de Atif Mohammed Ameenuddin. Atif est tombé sur des textures gratuites impressionnantes et veut savoir comment il peut les incorporer dans un design web attrayant.
Joe Elias éprouve également des difficultés à concevoir un site Web pour un client. Il a une maquette initiale de Photoshop mais sait qu'il a besoin d'aide. Le design de Joe présente certains avantages, mais je pense que dans l'ensemble, il semble un peu dépassé. J'ai l'impression qu'un graphiste essaie de convertir une conception de flyer sur le Web. De nos jours, la conception Web est bien plus que la conception d’impression interactive, elle présente une apparence unique qui tire parti du support Web riche.
Notez que le site est également destiné à un service de fosses septiques! Ce n’est pas la tâche de conception la plus facile que j’ai jamais entreprise, mais j’aime les défis sautons dedans et commençons.
Utiliser les motifs de fond
La première étape consiste à accéder à Premium Pixels et à télécharger les motifs de fond. Ceux-ci sont commodément déjà enregistrés en tant que plug-in de modèle Photoshop, de sorte qu'ils ne pourraient pas être plus faciles à implémenter.
Une fois le fichier de modèle téléchargé, faites-le simplement glisser vers Photoshop pour l’installer automatiquement. Créez ensuite un nouveau document RVB d'environ 1200 x 1300 pixels. Remplissez le calque d'arrière-plan avec du blanc et ajoutez un style de calque Superposition de motifs. À partir de là, vous pouvez simplement sélectionner le motif souhaité et ajuster la taille à votre guise. Assurez-vous que vous visualisez le document à 100% pour pouvoir correctement dimensionner le motif.
Le logo
J'ai pris la liberté de mettre à jour le logo un peu (le concepteur n'a probablement pas la liberté de le faire). Ce n'est certainement pas génial et pourrait nécessiter plus de travail, mais cela correspond un peu mieux au thème masculin.
J'ai utilisé l'icône de clé existante et je l'ai simplement combinée avec une police de caractères plus virile. J'ai également ajouté un trait de texte avec un dégradé juste pour ajouter un intérêt visuel. Beaucoup de gens ne se rendent pas compte que vous pouvez changer le trait de Photoshop en dégradé au lieu d'une couleur unie, cette option se trouve au bas de la fenêtre du trait.
Les quatre boites
Ensuite, je veux aborder les quatre cases ci-dessous.
L'un des principaux points du courrier électronique de Joe était qu'il souhaitait quelques idées de mise en page et d'organisation. Je pense que ce domaine peut être transformé en quelque chose de beaucoup plus dynamique et attrayant avec un peu de jQuery. Avec la magie des curseurs JavaScript, nous pouvons prendre toutes ces informations et les mettre dans une zone.
Il est difficile de montrer dans une image statique, mais fondamentalement cette zone basculerait automatiquement entre quatre images qui représentent chacune des quatre cases ci-dessus de Joe. Notez que nous avons également fait beaucoup de place au contenu textuel avec la partie arrière filtrée à gauche. Il y a une tonne de curseurs jQuery gratuits disponibles en ligne, dont beaucoup ont des zones de contenu comme celle-ci intégrée.
Pour que l’image se démarque sur la texture d’arrière-plan, je lui ai appliqué un traitement polaroid de base. Il s’agit d’une ombre portée, d’un trait aligné sur l’intérieur (cela donne des angles difficiles au lieu d’être arrondis) et d’une légère ombre intérieure. Pour la photo, je viens de récupérer quelque chose sur Flickr car je ne disposais pas des images originales sur lesquelles Joe travaillait.
Briser le fond
La conception originale comportait pas mal de texte. Nous devons répondre aux souhaits du client en l'incluant, mais notre travail, en tant que concepteur, consiste à présenter les informations de manière attrayante. Nous allons faire cela en séparant un peu, ce qui transformera le contenu en morceaux plus faciles à gérer.
Le fond texturé peut être un peu trop sur toute la page, nous allons donc le décomposer un peu en ajoutant une bande horizontale. Cela aidera également à organiser visuellement le contenu.
J'ai beaucoup fait ici. Pour la bannière, je lui ai donné une couleur rouge foncé, un léger dégradé, un fin trait noir, une texture subtile et des ombres venant du haut et du bas (cliquez sur l'image pour la voir en taille réelle). J'ai aussi ajouté une autre image pour aider à casser le texte encore plus loin. Notez qu'il est aligné horizontalement avec le curseur au-dessus de lui. Bien que la bannière elle-même s'étende sur toute la page, le contenu de celui-ci doit toujours respecter la mise en page que nous avons définie.
Le reste du texte
J'ai placé la deuxième partie du bloc de texte à la droite de l'arrière-plan, sous la zone du ruban. La difficulté réside dans le fait que l’arrière-plan rend le texte fin très difficile à lire. Faites toujours de votre mieux pour ne pas sacrifier la facilité d'utilisation au nom de l'esthétique.
Pour résoudre ce problème, j'ai simplement appliqué une ombre très sombre au bloc de texte. Cela l'aide à se démarquer et peut facilement être accompli avec CSS, laissant le texte entièrement sélectionnable.
Lorsque combiné avec la zone de bannière ci-dessus, cela crée un bloc de texte beaucoup plus attrayant qui ne submerge pas la page.
Finir
Enfin, nous allons jeter un simple pied de page au bas de la page avec les informations de contact et nous aurons tous terminé. Tout ce que je faisais ici était de créer une boîte noire et de réduire un peu l'opacité.
Et avec ça, voici notre produit fini. Cliquez ici pour voir en taille réelle.
Comme vous pouvez le constater, l’atmosphère est beaucoup plus moderne que l’original.Honnêtement, l'erreur que la plupart des concepteurs font est qu'ils essaient trop fort. Ils entassent une page remplie de tout ce qu'ils peuvent penser de mettre là et se retrouvent avec quelque chose qui est occupé et difficile à regarder. La tendance actuelle en matière de design professionnel est la mise en place de dispositions simples et propres, avec un minimum de distractions et un accent mis sur le contenu.
En tant que concepteurs, cela signifie que nous pouvons choisir une solution de facilité et supprimer toutes les peluches de nos dessins jusqu'à ce que nous trouvions cet équilibre parfait entre simple et attrayant.
Conclusion
En résumé, la mise à jour d'un ancien design peut souvent impliquer de s'éloigner complètement de la mise en page précédente. Ne vous attachez pas à garder les mêmes choses et à apporter des changements graduels, il suffit parfois de repartir à zéro et de chercher une nouvelle idée.
Si vous avez besoin d'aide pour un projet, assurez-vous de consulter notre programme de dilemme de conception. Si nous pensons que votre problème peut être traité par beaucoup de concepteurs, nous en ferons un article complet comme celui-ci.