Conception d'un portfolio Adobe

En novembre 2015, j'ai fait un petit entretien au École d'arts visuels (SVA) à New York sur la conception de Adobe Portfolio et la conception de produits. Vous pouvez regarder la conversation ici . A l'origine, j'ai écrit cet article en préparation de la conférence, mais je l'ai étendu pour le publier ici. Il a pour but de présenter le produit, de partager des informations sur le processus de conception, de numériser à partir de mon carnet de croquis et de présenter certaines spécifications / conceptions en coulisse. J'espère que tu trouves ça intéressant.

Une petite intro

Bonjour je suis Andrew . Je suis le chef de produit et directeur créatif de Adobe Portfolio . Je vais partager avec vous ce que moi-même et une grande équipe de développeurs de Behance (Adobe) avons travaillé cette année.

Le site de marketing Adobe Portfolio

Qu'est-ce qu'Adobe Portfolio?

Fondamentalement, il s'agit d'un produit qui vous permet de créer rapidement et simplement un site Web pour présenter votre travail et le personnaliser en fonction de votre style et de vos besoins. Ce n'est pas un nouveau concept, il y a des dizaines de produits qui font exactement cela. Mais Portfolio a quelques différences clés:

• Il est conçu spécifiquement pour les créatifs pour présenter leur portefeuille. Cela signifie qu'il fait ce que vous en avez besoin, simplement et rapidement.
• Il est GRATUIT avec tous les plans Adobe Creative Cloud.
• Vous pouvez accéder à toute la bibliothèque de polices de Typekit, à utiliser sur votre site Web.

Le portefeuille se synchronise avec Behance.

Ce qui rend Portfolio le plus unique, c’est qu’il se synchronise avec Behance. L'idée étant de créer un site Web personnalisé avec Portfolio et de synchroniser vos projets avec votre profil Behance. Vous pouvez y acquérir une exposition inestimable pour votre travail sur une plate-forme créative utilisée par des millions de créatifs et des personnes recrutant des créatifs! Mais vous n'avez pas à utiliser Behance si vous ne le souhaitez pas - vous pouvez utiliser Portfolio seul et choisir de ne pas synchroniser avec Behance. Le choix t'appartient.

La photographie de Matthias Heiderich - vue sur Portefeuille et Behance

Dispositions réactives.

Comme tout constructeur de site Web, vous avez besoin d'un point de départ. Ainsi, l'une des nombreuses choses que nous devions concevoir était la mise en page spécifiquement conçue pour présenter le travail créatif, afin de servir de base que vous pouvez facilement personnaliser et enrichir avec des projets.

Les mises en page visent à couvrir une variété de styles pour convenir à différents domaines créatifs. Ils peuvent soit être utilisés comme solution standard pour remplir rapidement vos projets et publier un site Web (en quelques minutes), soit utiliser les fonctionnalités de l'éditeur pour modifier la structure et l'apparence en fonction de votre style.

Personnalisez facilement la même mise en page pour qu'elle soit très différente. Avec la photographie par Bryce Johnson

Ci-dessous sont les mises en page que nous lançons avec. Les mises en page initiales (pour la version bêta publique et le lancement du produit) sont très simples, se concentrant sur les couvertures de projets, les galeries et les projets. Le produit évoluera bien sûr pour offrir davantage de fonctionnalités, telles que des images de couverture en plein écran, l'édition HTML et CSS, l'intégration de blogs, etc. dans le temps. Et au fur et à mesure que les fonctionnalités s’étendent, la variété et le nombre de configurations à choisir comme point de départ le seront également.

Les mises en page et les créations dont elles portent le nom: Lina , Sciure , Matthias , Juco , Mercedes et Thomas

Nous avons choisi de nommer les dispositions après les créations sur Behance . Nous avons présélectionné des créatifs dont le travail se prêtait bien à une mise en page particulière et, bien sûr, visuellement stupéfiant.

Je devrais dire que ces mises en page ont été l’une des dernières choses à être conçues (pré-bêta), mais je les accompagne pour le bien de cet article, pour vous présenter ce que le produit fait ou du moins ses 'produit fini'.

L'éditeur.

Le produit (lui-même) doit permettre à l'utilisateur de modifier rapidement et simplement son site Web en utilisant l'une des mises en forme ci-dessus comme point de départ. L'interface utilisateur est très minime: elle vous permet de vous concentrer sur la conception de votre site Web. Toutes les modifications que vous apportez se produisent en direct dans l'éditeur.

Cela a l'air un peu ringard, mais j'avais trois choses en tête lorsque je concevais tout de la marque, du site de marketing et surtout de l'éditeur:

Il devrait permettre à l'utilisateur de:

• Modifiez facilement tout ce qu'ils peuvent voir.
• Gérer et ajouter du contenu.
• Prévisualiser de manière responsable leur site Web.
• Publiez et mettez à jour un site Web en direct.

Vous trouverez ci-dessous une gamme de scénarios d'édition du produit (éditeur):

Différents écrans de l'éditeur. Avec la photographie par Chris Burkard et concevoir par Andrew Pouvant

Le rôle d'un concepteur de produit.

Mon propre rôle de designer sur Portfolio a radicalement changé au fil des ans, du concept au lancement. À mesure que progresse un produit numérique, votre rôle en tant que concepteur de produits progresse. Donc pour revenir au début:

ProSite.

Portfolio est en fait l’évolution d’un produit Behance existant (en cours de retrait) appelé ProSite. Il a 5 ans, il y avait donc beaucoup à apprendre de ce produit: Qu'est-ce qui a bien fonctionné? Qu'est-ce pas?

Réseau Behance

En outre, ce que nous avons appris de la communauté créative et de la présentation du travail, de la conception, de la gestion (et de l’utilisation!) Du réseau Behance est inestimable pour comprendre comment créer un produit comme Portfolio.

J'ai donc passé beaucoup de temps à assimiler toutes les connaissances acquises par Behance au fil des ans et à étudier leurs conceptions initiales pour l'évolution de ProSite. Poser des questions. Prendre des notes Idées de croquis

Le réseau Behance et ProSite

Je commence toujours par un crayon et un carnet de croquis.

L'écriture et le croquis m'aident vraiment à me concentrer et les idées en découlent. Parfois, j'écris simplement des mots que j'associe au produit, ou énumère ce qu'il doit faire, juste pour le sortir de ma tête. Cela aide à désencombrer l'esprit et à se concentrer sur ce qui est important.

Ce travail de carnet de croquis évolue naturellement en esquisses d'interface utilisateur. Parfois, je dessinerai une fonctionnalité, ou un petit détail d'interface utilisateur, ou une nouvelle approche de l'interface utilisateur. C'est un moyen rapide de concevoir et d'explorer des idées purement et simplement. Plus important encore, vous ne serez peut-être pas distrait par la perfection des pixels, des polices, des couleurs, des grilles, des guides, etc.

Il y a toujours un moment où vous savez que vous en avez assez pour aller plus loin et commencer réellement à développer ces idées. Dans le passé, j'ai utilisé Adobe Illustrator ou Omnigraffle pour cela, sur wireframe. Mais le temps était serré pour ce projet, alors je suis allé directement dans Photoshop.

Vous trouverez ci-dessous des scans de mon carnet de croquis. Certains se rapportent au produit (éditeur), d'autres au site marketing et à la marque:

Quelques scans de mon carnet de croquis

Une image intéressante à signaler ci-dessus est la dernière (en bas à droite). Vous pouvez voir que mon croquis est proche de ce que j'ai finalement conçu.

Conception et prototypage.

Toutes ces idées et conceptions sont informées et évoluées par la conception, le prototypage et les discussions avec l’équipe. Il est bon de discuter d'idées avec d'autres concepteurs et développeurs, et même avec le public cible lorsque cela est possible. Par exemple: une idée particulière est venue de moi en train de discuter d’une conception précoce (produit) avec un étudiant en illustration de MFA à SVA . Une nouvelle perspective aide toujours, en particulier pour un produit de cette complexité.

Nous travaillions sur des délais assez intenses pour ce projet. Il n'y avait tout simplement pas le temps de construire des prototypes complexes. Mais ce que j'ai fait a été de créer une série de visites au format PDF à l'aide de Layer Comps dans Photoshop, montrant le curseur de la souris sur l'écran, démontrant chaque interaction, fonctionnalité et flux utilisateur au sein du produit. Celles-ci ont permis aux développeurs (et aux autres parties prenantes) de critiquer et / ou de comprendre toutes les fonctionnalités et le flux utilisateur - afin de savoir ce qui devait être construit et d'identifier les éventuelles failles de l'interface utilisateur / UX avant la construction et les tests.

Vous trouverez ci-dessous (une vidéo de) un exemple de ces procédures PDF:

Prototype / procédure montrant la personnalisation globale dans l'éditeur de projet

Détail dans la conception.

En termes simples: éliminez les devinettes pour les développeurs. Votre équipe doit comprendre ce qui doit être construit. Ce n'est pas leur travail de remplir les champs, de le rendre réactif ou de deviner ce qui se passe dans un scénario donné. Je ne saurais trop insister là-dessus - j'ai connu tellement de concepteurs qui conçoivent et considèrent 20% d'un produit, sans y penser.

Outre les procédures, les flux d’utilisateurs et les prototypes dont j’ai parlé plus tôt, j’aime également créer des spécifications détaillées pour tous les composants, caractéristiques et marques de l’interface utilisateur. Je pense que celles-ci sont importantes lorsque vous avez une grande équipe, alors tout le monde est sur la même page, avec un seul point de référence. Les spécifications visent à couvrir tous les scénarios, des états de retournement, aux erreurs, aux états actifs / inactifs, etc., et couvrent également les valeurs et les dimensions des px (y compris les CSS de base).

Plus vous incluez de détails dans vos conceptions, moins les développeurs auront de questions et moins vous passerez de temps à gérer la construction. Vous pouvez donc vous concentrer sur la conception, les tests et l’amélioration du produit.

En outre, la bonne chose à propos de prendre le temps de créer ces «kits d’interface utilisateur» est qu’il est plus facile de mettre à jour le produit (conception) à l’avenir. Il n'est pas nécessaire de mettre à jour des centaines de maquettes, il vous suffit de mettre à jour les spécifications.

Voici quelques exemples de ces guides de style et spécifications:

Marketing et marque.

Au fil des mois, avec le produit (éditeur) conçu et en cours de construction, je me suis concentré sur le marketing, l'intégration et la marque. Quel est ce produit? Comment commencez-vous à l'utiliser? Il fallait une voix. Une identité.

Le nom.

Lorsque j'ai rejoint Behance pour la première fois, ce projet était en quelque sorte appelé "Prosite 2.0" en interne. Le produit ProSite a fait son temps, mais son successeur était devenu une bête différente. Outre leur lien avec Behance, ces produits étaient très différents et ne présentaient aucune corrélation 1: 1. Ce n'était pas une re-conception / lancement. Nous construisions un nouveau produit passionnant à partir de zéro et nous avons retiré ProSite. C'était important de transmettre - et cela commence par le nom.

Je suis retourné à mon carnet de croquis et je suis passé par un exercice d'association de mots pour noter tout ce que ce produit faisait, et aussi la langue utilisée par tous les produits similaires sur le marché. La progression naturelle de tous ceux-ci revenait à "Portfolio". Donc, après réflexion, j'ai conclu: "Pourquoi pas?" - il fait exactement ce qu'il dit sur la boîte. C'est un créateur / éditeur de site web spécialement conçu pour créer un portfolio. La simplicité et l'audace du nom se marient bien au design et aux valeurs du produit. Nous l'avons donc appelé «Portfolio», qui est rapidement devenu «Adobe Portfolio» pour s'adapter à la suite de produits d'Adobe.

La page d'accueil du site de marketing contenant une photo de Tanya Timal

La marque.

Portfolio a beaucoup d’identité et de personnalité. Portfolio n'est pas un produit d'entreprise (pour ainsi dire). C'est une étiquette blanche. C'est à vous de faire les vôtres. C'est sympa, simple et accessible. La marque, le site de marketing, l'intégration, la rédaction et la messagerie dans l'expérience utilisateur (produit) tentent tous de transmettre cela à travers la langue utilisée, la typographie, la grille, les images et les couleurs.

D'autres scénarios incluent des messages légers et des images humoristiques. Photo du projet par dua - Alexander Esslinger

Conception réactive.

Pour revenir à ce que je disais au sujet des détails de la conception: la conception Web, tout comme la conception des produits, doit faire l’objet du même souci du détail. Dans ce cas, il est bien sûr important que le site de marketing soit réactif, mais ce n'est pas le travail des développeurs de déterminer comment un site Web réagit à différentes tailles d'écran.

Vous trouverez ci-dessous quelques exemples de conceptions réactives, livrées aux développeurs pour la construction myportfolio.com :

Conceptions réactives pour le site de marketing, montrant une première version de l'identité de la marque

Voir un étude de cas complète du site de marketing ici

Des conceptions réactives pour quelques mises en page, couvrant différents scénarios

Voir un étude de cas complète des dispositions ici

Test utilisateur

Un produit numérique devrait évoluer pour convenir aux utilisateurs, en tenant compte du comportement des utilisateurs, pour offrir la meilleure expérience utilisateur. Idéalement, les produits passeront par une phase alpha / bêta (versions limitées) avant d’être lancés à tous. Nous l'avons fait avec Portfolio. Cela nous a permis d’éliminer les problèmes, d’apprendre si l’UI / UX fonctionnait et d’obtenir de véritables commentaires des utilisateurs dans l’intention d’améliorer le produit. Il est préférable de tester, d’apprendre et d’affiner avec un groupe d’utilisateurs limité, que de lancer des milliers de personnes et de découvrir des problèmes quand il est trop tard.

Tester. Apprendre. Réviser. Répéter.

Ceci est important dans la conception du produit. Vous apprenez beaucoup de gens qui utilisent le produit.

Vous serez surpris de ce que vous découvrez:

... Les gens n'utilisent pas toujours un produit comme vous l'aviez prévu!

• Vous apprenez,
• Vous améliorez,
• Vous parcourez le produit,
• Vous continuez à tester,
• Et répétez ce processus.

Et honnêtement, parfois, ça ressemble un peu à ceci:

... Mais le produit sera meilleur pour cela.

En conclusion.

Si je devais en retirer quelque chose, ce serait:

Ralentissez.

Être inspiré. Comprenez votre public Prendre des notes. Croquis des idées.

Concept.

Travaillez avec votre équipe. Explorez des idées. Pensez-y bien.

Détail dans la conception.

Quelqu'un (autre) doit construire ce que vous concevez.

Testez et améliorez.

Est-ce que ça marche? Comment peut-il être amélioré? Il peut toujours être amélioré.

Apprendre.

Toujours. Chaque expérience en design est une bonne expérience d'apprentissage.

[- Cet article a été initialement publié à Medium.com , republié avec la permission de l'auteur -]

• ← Uber relance avec une nouvelle identité de marque
• Concevoir les vacances →