web-dev-qa-db-fra.com

Créer un schéma d'architecture attrayant, mais toujours technique

Quelqu'un a-t-il des conseils pour créer un diagramme d'architecture logicielle "attrayant"? Mon responsable m'a dit de rendre mon diagramme d'architecture actuel (qui a été construit uniquement en utilisant Visio et les icônes de base) plus "attrayant" pour une présentation que je dois donner aux types de niveau exécutif qui ne sont pas techniques. Je suppose qu'il voulait avoir quelque chose que vous montriez aux clients ou que les gens du marketing utilisent.

Avez-vous des jeux d'icônes spécifiques ou des conseils particuliers? Je ne peux pas publier mon diagramme actuel pour des raisons de confidentialité mais pour avoir une idée générale, ce ne sont que du texte, des lignes et des icônes de serveur (http://www.227volts.com/wp-content/uploads/2009/03/exchange2007visiostencils.jpg) c'est le jeu d'icônes que j'utilise.

Je suis honnêtement confus sur la façon de rendre quelque chose comme ça "plus attrayant" (diable, je pense que le noir et le blanc sont toujours les meilleures combinaisons de couleurs à utiliser: P)

Éditer:

Est-ce donc quelque chose comme ça http://rollerweblogger.org/roller/resource/linkedin-today.png toujours considéré comme "professionnel" avec toutes les couleurs et autres?

J'ai demandé à mon manager et tout ce qu'il a dit était simplement de le rendre plus commercialisable tout en évitant les questions sur ce que je devais faire spécifiquement.

13
user36555

Cette question est trop vaste pour être répondue exactement point par point. Il existe des livres sur le design et d'autres livres sur l'expérience utilisateur , qui expliquent dans les moindres détails comment fabriquer le logiciel, les produits de consommation, les livres, les publicités, les jouets pour les bébés plus attrayants pour le public cible. En fait, votre question est similaire à:

Je suis designer, j'ai une idée de la programmation (j'ai appris le Basic à l'école pendant deux semaines) mais je n'ai pas le temps d'apprendre la programmation. On me demande de créer un site Web de commerce électronique à partir de zéro en utilisant ASP.NET MVC et Microsoft SQL. Pouvez-vous m'expliquer quelles sont ces deux choses et comment puis-je les utiliser pour faire un travail réussi?

Dans tous les cas, si vous voulez faire des graphiques "attractifs" mais que vous n'avez pas le temps de lire des dizaines de livres et que vous n'avez pas de designer dans votre entreprise (est-ce possible?), , vous pouvez essayer de vous inspirer de ce que vous voyez autour : sites Web professionnels, présentations, etc. Vous devez noter quelques règles et modèles, et les appliquer à vos graphiques. Vous pouvez parfois vous tromper, car certaines règles fonctionnent bien pour les sites Web mais échouent pour les produits de consommation ou les graphiques ou les jouets pour bébés, mais en général, vous avez plus de chances de réussir.

Par exemple, si je prends le graphique dans votre édition:

enter image description here

Je remarque la toute première erreur: les ombres. Les ombres doivent être utilisées avec prudence. Dans un site Web, une telle utilisation serait inacceptable. Un bon exemple de la façon dont les ombres doivent être utilisées est Apple.com . Chaque élément avec lequel l'utilisateur peut interagir a une petite ombre, donnant une impression de volume. Aucun autre élément n'a d'ombre. Dans le cas d'un graphique, cela peut être plus acceptable, car les utilisateurs ne sont pas destinés à interagir avec le graphique. Pourtant, les ombres sont trop grandes et trop séparées des éléments. Ici aussi, il n'y en a pas besoin: chaque élément a déjà une bordure .

Règle générale: KISS (ou, si vous voulez, "soyez paresseux"). N'ajoutez pas une bordure et une ombre et une couleur d'arrière-plan en même temps. Ne mettez pas le texte en gras italique Arial Black 200 rouge souligné avec une bordure jaune sur fond de citron vert clignotant. Ne faites que ce que vous devez faire pour ajouter un impact visuel, rien de plus.

Pensez à styliser vos graphiques: personne ne veut voir ces vilains diagrammes UML en noir et blanc. Mais ne surestimez pas: cela ne fera qu'empirer: Les diagrammes UML en noir et blanc sont moches mais utilisable. Une merde multicolore clignotante animée GIF avec de nombreuses icônes et flèches qui changent de couleur est non seulement laide, mais aussi inutilisable.

Pour les graphiques, rappelez-vous la spécificité du contexte. S'il apparaît à travers un projecteur, vous ne pouvez pas avoir un texte vert sur fond blanc : il disparaîtra comme par magie lorsqu'il est projeté sur un mur . S'il prend en charge votre discours, ne mettez pas trop sur une diapositive : trop de graphiques, trop de nombres, trop de texte. L'illustration ci-dessus est un bon exemple de ce que vous ne devez jamais faire pour une présentation: avec une telle diapositive, vous êtes sûr que la moitié du public s'endort et que l'autre moitié cesse de vous écouter, essayant désespérément de comprendre ce qu'est cette chose .

Enfin, rappelez-vous que vous êtes ici pour votre public, pas l'inverse . Si vous montrez le graphique comme celui illustré ci-dessus pour commercialiser les gens , ils diront eux-mêmes que vous êtes nul. Savent-ils ce qu'est le cloud (ou pensent-ils que cela a quelque chose à voir avec les applications hébergées dans le ciel/l'espace)? Savent-ils ce que représente l'icône brune avec "DB" dessus Peuvent-ils expliquer ce qu'est une application web et en quoi est-elle différente de quelque chose- else-app ou depuis un site Web?

11
Arseni Mourzenko

Il est probablement inutile de souligner que la beauté est l'une des opinions les plus subjectives de tous les temps. Comme on dit, la beauté est dans l'œil du spectateur , donc ce qui est beau pour vous peut être laid comme l'enfer pour quelqu'un d'autre. Beaucoup de meilleures moitiés seraient d'accord.

Cela étant dit, de nos jours, les gens s’attendent probablement à un peu plus qu’un diagramme ASCII. Vous n’avez pas à étudier la théorie des couleurs, mais le façonner un peu ne fera pas de mal. faire des diagrammes comme, par exemple, Gliffy avoir des modèles décents que je parie, plairait à quiconque (ou du moins, ne déplairait pas) à cette présentation.

enter image description here

1
Rook

Une fois que vous avez fait vos diagrammes en utilisant les outils de développement que vous utilisez normalement, refaites-les à partir de zéro dans PowerPoint ou tout autre logiciel de présentation utilisé par votre entreprise. Mes présentations utilisant les icônes par défaut et les styles de flèche ont obtenu une bien meilleure réponse que celles que j'ai faites dans Enterprise Architect ou Power Designer. Ignorez UML et optez simplement pour des diagrammes de relation et des organigrammes simples. Comme pour toute présentation, rassemblez rapidement quelque chose et passez-le devant votre responsable pour obtenir des commentaires. Vous ne voulez pas perdre des heures à présenter un diagramme de flux de travail élaboré que votre responsable supprimera pour être "trop ​​occupé". Je recommanderais de faire un diagramme simple complètement, afin que vous puissiez afficher le style (police, palette de couleurs, mise en page), et simuler le reste pour le contenu. Apportez-le ensuite à votre responsable et obtenez des instructions supplémentaires.

1
TMN

Soyez cohérent dans la police. Espacez les choses également et gardez-les dans l'alignement. Ajoutez probablement une ou deux couleurs (couleurs de l'entreprise?) Au-delà du noir et du blanc. En-têtes en gras. Les frontières doivent être distinctes. Quelque chose d'un peu plus que le quadrillage comme arrière-plan ou pas du tout.

Vous devrez peut-être diviser en pages/diapositives distinctes. Personne ne veut voir 57 blocs dans un diagramme de nid d'oiseau chaotique (selon leur perception).

Vous voudrez peut-être consulter quelqu'un dans votre entreprise avec un peu plus de sens de l'esthétique. Exécutez-le par quelqu'un dans les ventes ou le marketing.

0
JeffO

Utilisez des coins arrondis et des couleurs sourdes. Utilisez des lignes épaisses. Elliance a de bons exemples. Je ne suis pas autorisé à publier des images, mais ici est un exemple que j'ai utilisé comme source d'inspiration pour mes propres diagrammes.

0
undetected