Concept et Inspiration Théorie de la conception pour les concepteurs Web

Développer un concept significatif est une étape cruciale dans tout projet de conception? mais c'est une compétence que peu de gens prennent vraiment le temps de comprendre et d'apprécier. Aujourd'hui, Ahmed (UI Manager chez Link Development et Adobe User Group Manager en Égypte) va nous guider dans la création d’un concept et d’un processus d’inspiration. Nous allons suivre le processus étape par étape, jusqu'à ce que nous arrivions à un concept réussi pour commencer notre conception de sites Web..


Pourquoi développer un concept dans la conception Web?

Dans mon dernier article, Principe de la Gestalt: Théorie du design pour les concepteurs Web, nous avons établi la nécessité de commencer tout design avec le design de coque contenant avant de rentrer dans les détails. Dans cette partie, nous aborderons la méthodologie de création d'un design de coque..

Toute forme contenant une image doit avoir un concept derrière elle - mais malheureusement, de nombreux concepteurs ne se concentrent que sur une belle forme qui n’a aucune signification derrière. Ou pire, ils conçoivent un site Web entier basé sur des cadres préexistants sans même réfléchir à la manière dont un design original pourrait apporter une réelle contribution.sens au projet.

Vraiment bon design a sens derrière elle - il ne s'agit pas uniquement de jolies formes, filtres ou typographie - chaque élément doit en réalité dire quelque chose sur le projet sous-jacent.

À ce stade, si vous avez suivi la méthodologie de collecte des exigences créatives (comment obtenir les exigences créatives appropriées de votre client), vous devez disposer de suffisamment d'informations pour pouvoir élaborer et déterminer la forme de conteneur ou le style adapté à votre conception..

Commencez par collecter une bibliothèque d'images de référence

L’un des moyens les plus simples et les plus simples de trouver des idées est d’avoir demandé à votre client de vous fournir des mots clés décrivant comment il souhaite que les internautes se sentent face à son site. énergique, frais, jeune, solide? etc., en entrant simplement ces mots clés dans toute recherche d’image, telle que Google ou Bing..

En choisissant parmi ces images celles que vous aimez, vous vous retrouverez facilement avec une grande bibliothèque d'idées de brainstorming pour commencer.


La conception commence par un brainstorm

Semblable à tout exercice de brainstorming, ne rejetez aucune idée? aussi étrange qu'ils soient. Il est toujours plus facile d'atténuer un dessin que d'essayer de le pimenter. assis devant votre bibliothèque d’idées, prenez un crayon et du papier (qui sont d'excellents outils à ce stade) et commencez à dessiner les concepts qui vous viennent à l’esprit en regardant dans votre bibliothèque. L’esquisse aide parce que les idées ont tendance à disparaître aussi rapidement qu’elles vous viennent à l’esprit :)

Par exemple, si un client me demande un ?Frais? la conception, je vais simplement entrer ?Frais? dans Google par exemple (ou votre moteur de recherche préféré) et consultez les résultats de l'image.

Voici un échantillon de ce que je suis venu avec:

Comment ces images m'inspireraient? Que me diraient-ils sur l'orientation de la conception?

Bien, sachant simplement que mon client souhaite un nouveau design et en utilisant cette méthode pour interpréter les images, je comprendrais que:

  • Je devrais surtout choisir des formes organiques ou courbes
  • Léger? Frais? les nuances de couleur sont préférées (plus sur la couleur dans un article ultérieur)
  • Utilisation de? Cristal? composants de style et semi-transparents.
  • Avoir beaucoup d'espace blanc et pas d'encombrement excessif des composants

Je préfère généralement faire cet exercice avec 2 ou 3 autres concepteurs ensemble car cela aide à échanger des idées différentes, je demanderais à chacun de rechercher des images seul pendant 15 ou 20 minutes, puis de rester assis ensemble et de commencer à dire ce que nous voyons dans. chaque image, vous serez surpris de voir comment les autres personnes peuvent voir quelque chose de totalement différent de ce que vous pensez ou que vous voyez, et cela peut vous ouvrir une idée totalement nouvelle..

Il est important de parler à cette étape du processus de conception! Le mot "frais" signifie différentes choses pour différentes personnes - ne vous fiez donc pas uniquement à la recherche initiale de résultats d'images ou à votre propre interprétation pour être la source d'inspiration définitive.


Ne pas copier les idées, les voler!

Les bons artistes copient les grands artistes volent,
- Pablo Picasso (1881 - 1973)

Mon interprétation de cette citation est la suivante: copier une autre idée fera de vous un bon concepteur, mais, ?vol? une idée ou un concept de l'intérieur d'un autre design et son utilisation judicieuse (sans copie flagrante) feront de vous un excellent designer.

Voler une idée est difficile - beaucoup plus difficile que de copier - vous devez vraiment comprendre le concept pour le soulever d'un endroit et le déplacer dans votre conception.


Étude de cas: Voler les pyramides

Dans un projet récent, je travaillais avec une équipe sur un site pour un portail de tourisme égyptien. Ils ne voulaient pas d’un joueur simple? Pyramids, Karnak, Pharaonic? site de style que la plupart des gens iraient pour? Ils voulaient quelque chose de moderne, mais ils voulaient conserver une identité égyptienne qui dirait littéralement? Ce site est d'Egypte?.

C'était un vrai défi, mais en suivant la méthodologie ci-dessus, nous avons eu des images comme celles-ci:

Maintenant, le client ne voulait pas de cliché? dessins montrant des hiéroglyphes simples ou des images d'anciens temples égyptiens, etc., mais en regardant les images, nous avons commencé à nous baser sur l'idée que nous pouvons utiliser certains éléments tels que les murs inclinés et les anciens portails égyptiens et leur relation avec le site étant un portail vers l'Egypte.

Le problème est que le seul style unique en Égypte est celui du pharaon. Si nous choisissons l'art arabe, par exemple, cela ne serait pas unique en Égypte. Si nous montrons la plongée ou les plages, ce n'est pas unique. Si nous adoptons un autre style, cela ne sera pas propre à l’Égypte et c’était une exigence stricte..

En même temps, on nous a dit de ne pas utiliser d’images égyptiennes anciennes ni de hiéroglyphes, car le client souhaitait promouvoir tous les types de tourisme égyptien, pas seulement les temples ou les pyramides. Un dossier de conception délicat, pour être sûr.

Finalement, nous avons eu un croquis comme celui-ci:

Nous avons simplement pris une partie de l'entrée? Portail? Les pylônes du temple de Karnak, en utilisant uniquement les lignes inclinées pour identifier les murs, la zone centrale a été utilisée pour animer différentes images d’Egypte et nous avons utilisé la zone de gauche pour le logo et la navigation, tandis que la zone de droite entière était utilisée pour le contenu..

C'était un concept très simple, mais il remplissait toutes les conditions. Une telle idée aurait été difficile à imaginer si nous n’avions pas regardé les photos et les images issues d’une simple? Egypte? requête de recherche.

Nous avons pu voler les idées derrière le temple de Karnak et les pyramides, puis les utiliser dans notre conception.


De bons concepts parlent d'eux-mêmes

Certaines personnes ont fait valoir que ce concept peut ne pas être très clair lorsque les gens consultent le site et que cela peut sembler étrange, mais que les concepts n'ont pas besoin d'être? Compris? dès le premier regard sur un dessin? ils ne doivent pas non plus être visuellement clairs - ce n'est pas une obligation. Ceci peut être facilement compris en regardant les logos, prenons le logo Mercedes par exemple:

À première vue, pour la plupart des gens, il ne s'agit que d'une étoile à 3 branches. Cependant, le concept derrière cette étoile est qu’il représente sa domination de la terre, de la mer et de l’air - le bras supérieur représentant l’air et les 2 bras inférieurs représentant la terre et la mer..

Qui savait? Très peu de personnes en dehors de l'entreprise? mais ce n'est pas la question, maintenant? Un bon concept parle de lui-même - même si les gens ne comprennent pas immédiatement ce que cela signifie, les formes et les idées intentionnelles sous-jacentes auront toujours une vie propre. Les conceptions sans concept n'ont pas ce genre de vie? ils restent assis.


Trouver de l'inspiration pour les concepts

Une autre grande source d’inspiration est d’essayer de rester loin de votre écran. De nombreux designers ont tendance à visiter sites d'inspiration design, qui contiennent des top designs quotidiens. Même s’il s’agit d’un bon exercice pour d’autres phases (telles que la collecte des exigences et les détails des composants), il n’aidera probablement pas grand-chose lorsque vous essayez de définir votre propre concept de base..

Il est souvent préférable de regarder d’autres sources hors écran. Les panneaux publicitaires, les magazines, les affiches et les publicités télévisées sont de très bonnes sources si vous en avez le temps, en particulier parce que les règles régissant la conception Web diffèrent considérablement de celles en matière de conception graphique ou de publicité télévisée. perspective qui vous aide à proposer des idées très originales que vous pouvez intégrer à votre concept de design.

Les conceptions architecturales peuvent également être de bonnes sources d'inspiration uniques:

En fonction de votre client et de vos objectifs, chacun des bâtiments ci-dessus peut vous donner de nouveaux concepts et idées à utiliser pour votre site Web. comme dans les exemples suivants (dans le même ordre):


Remarquez comment chacune des photos architecturales ci-dessus peut facilement devenir une conception viable de la coque d'un site Web..

L'astuce consiste à toujours garder les yeux ouverts et à utiliser tout comme source d'inspiration. Ne limitez pas vos options en vous contentant de regarder uniquement d'autres conceptions Web ou en essayant de créer quelque chose par vous-même..


Conclusion

Voir vient avant les mots. L'enfant regarde et reconnaît avant de pouvoir parler.
- John Berger, façons de voir

Si vous ne connaissez pas encore Ways of Seeing, de John Berger, il vaut la peine de trouver une copie papier (ou au moins une version électronique). Je ne m'attarderai pas trop dans les détails, mais c'est un livre qui explore la façon dont les gens voient le monde qui les entoure. Le message sous-jacent est que voir est un instinct vital et primordial pour nous, les humains - nous "voyons" avant de lire, avant de parler et avant de marcher..

En tant que tels, nous, concepteurs de sites Web, pouvons tirer une signification particulière de cette vérité. Nous devons veiller à élaborer les concepts à la base de nos conceptions, car ce sont les premières choses que les gens "voient". Avant les mots sur la page ou le curseur d'image flashy que nous avons travaillé si dur à coder, les internautes voient le shell, le concept, qui crée l'impression globale du site. Les détails sont importants, ne vous méprenez pas, mais vous ne pouvez pas vraiment en préciser les détails tant que vous ne disposez pas d'un design significatif pour les intégrer..

Lisez d’autres articles de «théorie» dans notre session consacrée à la théorie du design Web!

Un merci spécial à Ahmed qui a rendu cet article au milieu du chaos qui règne en Égypte.