Entwerfen des Adobe-Portfolios

Im November 2015 habe ich ein kleines Gespräch im Schule für Bildende Kunst (SVA) in New York über das Design von Adobe Portfolio und das Produktdesign. Sie können Sieh dir hier das Gespräch an . Ich habe diesen Artikel ursprünglich in Vorbereitung auf den Vortrag geschrieben, habe ihn aber später hier veröffentlicht. Es zielt darauf ab, das Produkt vorzustellen, Einblicke in den Designprozess zu geben, Scans von meinem Skizzenbuch und einige Spezifikationen / Designs hinter den Kulissen. Ich hoffe, Sie finden es interessant.

Ein kleines Intro.

Hallo ich bin Andrew . Ich bin der leitende Produktdesigner und Kreativdirektor von Adobe-Portfolio . Ich werde mit Ihnen teilen, was ich und ein großartiges Team von Entwicklern bei Behance (Adobe) im vergangenen Jahr gemacht haben.

Die Adobe Portfolio-Marketing-Website

Was ist Adobe Portfolio?

Im Grunde genommen handelt es sich um ein Produkt, mit dem Sie schnell und einfach eine Website erstellen können, um Ihre Arbeit zu präsentieren und sie an Ihren Stil und Ihre Bedürfnisse anzupassen. Es ist kein neues Konzept, es gibt Dutzende von Produkten, die genau das tun. Aber Portfolio hat einige wichtige Unterschiede:

• Es wurde speziell für Kreative entwickelt, um ihr Portfolio zu präsentieren. Bedeutet, dass es tut, was Sie tun müssen, einfach und schnell.
• Es ist KOSTENLOS mit allen Adobe Creative Cloud-Plänen.
• Sie können auf alle Schriftarten von Typekit zugreifen, um sie auf Ihrer Website zu verwenden.

Portfolio synchronisiert sich mit Behance.

Das Besondere an Portfolio ist, dass es sich mit Behance synchronisiert. Die Idee ist, dass Sie mit Portfolio eine schöne benutzerdefinierte Website erstellen und Ihre Projekte mit Ihrem Behance-Profil synchronisieren. Dort können Sie wertvolle Einblicke in Ihre Arbeit auf einer kreativen Plattform erhalten, die von Millionen von Kreativen und Personen, die Creatives rekrutieren, genutzt wird! Aber Sie müssen Behance nicht verwenden, wenn Sie nicht möchten - Sie können Portfolio selbst verwenden und sich dafür entscheiden, nicht mit Behance zu synchronisieren. Es ist deine Entscheidung.

Die Fotografie von Matthias Heiderich - wie auf Portfolio und Behance

Responsive Layouts.

Wie jeder Website-Builder benötigen Sie einen Ausgangspunkt. Eines der vielen Dinge, die wir entwerfen mussten, waren Layouts, die speziell darauf ausgerichtet waren, kreatives Arbeiten zu präsentieren, um als Grundlage für die einfache Anpassung und Befüllung von Projekten zu dienen.

Die Layouts zielen darauf ab, eine Vielzahl von Stilen für verschiedene kreative Bereiche abzudecken. Sie können entweder als fertige Lösung verwendet werden, um Ihre Projekte schnell zu bevölkern und eine Website zu veröffentlichen (in Minuten), oder Sie können die Funktionen des Editors verwenden, um die Struktur und das Erscheinungsbild an Ihren Stil anzupassen.

Einfach das gleiche Layout anpassen, um ganz anders auszusehen. Mit Fotografie von Bryce Johnson

Im Folgenden finden Sie die Layouts, mit denen wir starten. Die anfänglichen Layouts (für die öffentliche Beta und Produkteinführung) sind sehr einfach und konzentrieren sich auf Projektabdeckungen, Galerien und Projekte. Das Produkt wird natürlich wachsen, um mehr Funktionen wie Fullscreen-Cover-Bilder, HTML & CSS-Bearbeitung, Blog-Integration usw. ... in der Zeit zu bieten. Und mit der Erweiterung der Features wird auch die Vielfalt und Anzahl der Layouts als Ausgangspunkt dienen.

Layouts und die Creatives, nach denen sie benannt sind: Lina , Sägespäne , Matthias , Juco , Mercedes und Thomas

Wir haben uns entschieden, die Layouts nach den Creatives zu benennen Behance . Wir haben Kreative in die engere Auswahl genommen, deren Arbeit sich gut für ein bestimmtes Layout eignete und natürlich auch visuell atemberaubend war.

Ich sollte sagen, dass diese Layouts eines der letzten Dinge waren, die entworfen werden sollten (Pre-Beta), aber ich führe mit ihnen um des Artikels willen, um Ihnen zu zeigen, was das Produkt macht, oder zumindest dessen 'Endprodukt'.

Der Editor.

Das Produkt (selbst) muss es dem Benutzer ermöglichen, seine Website schnell und einfach zu bearbeiten, wobei eines der obigen Layouts als Ausgangspunkt dient. Die Benutzeroberfläche ist sehr minimal - es kommt aus dem Weg und ermöglicht es Ihnen, sich auf das Design Ihrer Website zu konzentrieren. Alle Änderungen, die Sie vornehmen, werden live im Editor ausgeführt.

Es klingt irgendwie kitschig, aber ich hatte drei Dinge im Kopf, während ich alles von der Marke, der Marketing-Site und vor allem vom Editor gestaltete:

Es sollte den Benutzer befähigen:

• Bearbeiten Sie einfach alles, was sie sehen können.
• Verwalten und Hinzufügen von Inhalten
• Responsive Vorschau ihrer Website.
• Veröffentlichen und aktualisieren Sie eine Live-Website.

Im Folgenden finden Sie eine Reihe von Bearbeitungsszenarien aus dem Produkt (Editor):

Verschiedene Bildschirme aus dem Editor. Mit Fotografie von Chris Burkard und Design von Andrew Couldwell

Die Rolle eines Produktdesigners.

Meine eigene Rolle als Designer für Portfolio hat sich im Laufe des Jahres dramatisch verändert, vom Konzept bis zur Markteinführung. Mit dem Fortschreiten eines digitalen Produkts spielt auch Ihre Rolle als Produktdesigner eine Rolle. Also zurück zum Anfang:

ProSite.

Portfolio ist eigentlich die Entwicklung eines bestehenden Behance-Produkts (Pro-Site). Es ist 5 Jahre alt, also konnten wir viel von diesem Produkt lernen: Was hat gut funktioniert? Was nicht?

Behance Netzwerk.

Auch was wir über die kreative Gemeinschaft gelernt und die Arbeit präsentiert haben, durch das Entwerfen, Kuratieren (und Verwenden!) Des Behance-Netzwerks ist von unschätzbarem Wert, um zu verstehen, wie man ein Produkt wie Portfolio baut.

Ich verbrachte also viel Zeit damit, all dieses Wissen aufzunehmen, das Behance über die Jahre erworben hatte, und studierte auch ihre ersten Entwürfe für die Entwicklung von ProSite. Fragen stellen. Notizen machen. Ideen skizzieren.

Das Behance-Netzwerk und ProSite

Ich beginne immer mit einem Bleistift und einem Skizzenbuch.

Schreiben und Skizzieren hilft mir wirklich, mich zu konzentrieren, und Ideen fließen von dort aus. Manchmal schreibe ich einfach Wörter, die ich mit dem Produkt verbinde, oder liste auf, was es tun soll, nur um es aus meinem Kopf zu bekommen. Es hilft, den Geist zu entwirren und sich auf das Wesentliche zu konzentrieren.

Diese Skizzenbucharbeit entwickelt sich natürlich zu UI-Skizzen. Manchmal skizziere ich ein Feature oder ein kleines UI-Detail oder einen neuen Ansatz für die Benutzeroberfläche. Es ist ein schneller Weg, einfach und einfach Ideen zu entwerfen und zu erforschen. Am wichtigsten ist jedoch, dass Sie nicht durch Pixelperfektion, Schriftarten, Farben, Raster, Hilfslinien usw. abgelenkt werden, wie Sie es bei der Verwendung von Computersoftware tun.

Es gibt immer einen Punkt, an dem du weißt, dass du genug hast, um diesen Schritt noch weiter zu gehen und diese Ideen tatsächlich auszuarbeiten. In der Vergangenheit habe ich dafür Adobe Illustrator oder Omnigraffle verwendet, um Drahtmodelle zu erstellen. Aber die Zeit war knapp bei diesem Projekt, also ging ich direkt in Photoshop.

Unten sind einige Scans aus meinem Skizzenbuch. Einige beziehen sich auf das Produkt (Editor), einige auf die Marketing-Site und Marke:

Ein paar Scans aus meinem Skizzenbuch

Ein interessantes Bild, auf das oben hingewiesen wird, ist das letzte (unten rechts). Sie können sehen, dass meine Skizze nahe an dem ist, was ich letztendlich entworfen habe.

Konzeption und Prototyping.

All diese Ideen und Designs werden durch Konzeption, Prototyping und Diskussion mit dem Team informiert und weiterentwickelt. Es ist gut, sich mit anderen Designern und Entwicklern und möglichst auch mit der Zielgruppe auszutauschen. Zum Beispiel: Eine besondere Idee kam von mir, als ich mit einem MFA-Illustrationsstudenten über ein frühes (Produkt-) Design diskutierte SVA . Eine frische Perspektive hilft immer, besonders für ein Produkt dieser Komplexität.

Wir haben mit diesem Projekt ziemlich intensive Zeitrahmen erarbeitet. Es gab einfach keine Zeit, um komplexe Prototypen zu bauen. Aber was ich tat, war eine Reihe von PDF-Walkthroughs mit Layer Comps in Photoshop zu erstellen, die zeigen, wie sich der Mauszeiger über den Bildschirm bewegt und jede Interaktion, Funktion und Benutzerfluss innerhalb des Produkts zeigt. Dies ermöglichte es Entwicklern (und anderen Stakeholdern), die gesamte Funktionalität und den Benutzerfluss zu kritisieren und / oder zu verstehen - damit sie wussten, was zu erstellen war, und auch mögliche Fehler in der UI / UX vor dem Build und dem Testen zu identifizieren.

Unten ist (ein Video von) ein Beispiel für diese PDF-Komplettlösungen:

Prototyp / Komplettlösung mit globaler Anpassung im Projekteditor

Detail im Design.

Einfach gesagt: Machen Sie das Rätselraten für die Entwickler. Ihr Team muss verstehen, was gebaut werden muss. Es ist nicht ihre Aufgabe, die Lücken zu füllen, responsiv zu machen oder zu erraten, was in einem gegebenen Szenario passiert. Ich kann das nicht genug betonen - ich habe so viele Designer erlebt, die 20% eines Produkts entworfen und in Betracht gezogen haben und die Dinge nicht durchdacht haben.

Zusätzlich zu den exemplarischen Vorgehensweisen, Benutzerflüssen und Prototypen, von denen ich bereits gesprochen habe, erstelle ich auch detaillierte Spezifikationen für alle UI-Komponenten, Funktionen und Marken. Ich denke, das ist wichtig, wenn Sie ein großes Team haben, also sind alle auf der gleichen Seite, mit einem oder mehreren zentralen Bezugspunkten. Die Spezifikationen zielen darauf ab, alle Szenarien abzudecken, von Rollover-Zuständen bis hin zu Fehlern, aktiven / inaktiven Zuständen etc ..., und decken auch px-Werte und Dimensionen ab (ich gehe sogar so weit, dass grundlegende CSS eingeschlossen werden).

Je mehr Details Sie in Ihre Designs aufnehmen, desto weniger Fragen haben die Entwickler und desto weniger Zeit benötigen Sie, um den Build zu verwalten. Sie können sich also darauf konzentrieren, das Produkt zu entwerfen, zu testen und zu verbessern.

Das Schöne an der Zeit, diese UI-Kits zu erstellen, ist, dass es einfacher ist, das Produkt (Design) in Zukunft zu aktualisieren. Es gibt keine Notwendigkeit, Hunderte von Modellen zu aktualisieren, Sie aktualisieren nur die Spezifikationen.

Im Folgenden finden Sie einige Beispiele für diese Styleguides und Spezifikationen:

Marketing und Marke.

Monate, mit dem Produkt (Editor) entworfen und gebaut, konzentrierte ich mich wieder auf Marketing, Onboarding und Marke. Was ist dieses Produkt? Wie fangen Sie an, es zu benutzen? Es brauchte eine Stimme. Eine Identität.

Der Name.

Als ich anfing, Behance beizutreten, wurde dieses Projekt scherzhaft intern "Prosite 2.0" genannt. Das ProSite-Produkt hat seiner Zeit gedient, aber sein Nachfolger war zu einem anderen Biest geworden. Abgesehen von ihrer Verbindung mit Behance waren sie sehr unterschiedliche Produkte und hatten keine 1: 1-Korrelation. Dies war kein Re-Design / Launch. Wir haben von Grund auf ein aufregendes neues Produkt entwickelt und ProSite in den Ruhestand verabschiedet. Das war wichtig zu vermitteln - und das beginnt mit dem Namen.

Ich ging zurück zu meinem Skizzenbuch und machte eine Wort-Assoziations-Übung, um alles, was dieses Produkt tat, aufzuschreiben und auch, welche Sprache jedes ähnliche Produkt auf dem Markt verwendete. Der natürliche Verlauf all dieser Dinge kehrte immer wieder zu "Portfolio" zurück. Nach einigem Nachdenken schloss ich: "Warum nicht ?!" - Es macht genau das, was auf der Dose steht. Es ist ein Website-Creator / Editor, der speziell für die Erstellung eines Portfolios entwickelt wurde. Die Einfachheit und Kühnheit des Namens verheißt sich gut mit dem Design und den Werten des Produkts. Daher haben wir es "Portfolio" genannt, das bald zu "Adobe Portfolio" wurde, um zu den Produkten von Adobe zu passen.

Die Homepage der Marketingseite mit einem Foto von Tanja Timal

Die Marke.

Portfolio hat sehr viel eigene Identität und Persönlichkeit. Portfolio ist kein Unternehmensprodukt (sozusagen). Es ist ein weißes Etikett. Es gehört dir, dein eigenes zu machen. Es ist freundlich, einfach und zugänglich. Die Marke, die Marketing-Site, das Onboarding, das Copywriting und das Messaging während der gesamten (Produkt-) Benutzererfahrung versuchen dies durch die verwendete Sprache, Typografie, Raster, Bilder und Farben zu vermitteln.

Andere Szenarien umfassen unbeschwerte Nachrichten und humorvolle Bilder. Projektfoto von Dua - Alexander Esslinger

Sich anpassendes Design.

Zurück zu meinem früheren Punkt über Details im Design: Webdesign sollte genauso wie das Produktdesign die gleiche Aufmerksamkeit für Details haben. In diesem Fall ist es natürlich wichtig, dass die Marketing-Website reaktionsfähig ist, aber es ist nicht Aufgabe der Entwickler, herauszufinden, wie eine Website auf unterschiedlichen Bildschirmgrößen reagiert.

Im Folgenden finden Sie einige Beispiele für Responsive Designs, die den Entwicklern zur Verfügung gestellt werden meinportfolio.com :

Responsive Designs für die Marketing-Site, die eine frühe Version der Markenidentität zeigen

Sehen Sie sich an vollständige Fallstudie der Marketing-Site hier

Responsive Designs für einige Layouts mit unterschiedlichen Szenarien

Sehen Sie sich an vollständige Fallstudie der Layouts hier

Benutzertests

Ein digitales Produkt sollte sich an die Benutzer anpassen, die das Benutzerverhalten berücksichtigen, um eine optimale Benutzererfahrung zu gewährleisten. Im Idealfall durchlaufen Produkte eine Alpha / Beta-Phase (limitierte Versionen), bevor sie für alle freigegeben werden. Wir haben dies mit Portfolio gemacht. Dies half uns, Probleme zu beseitigen, zu lernen, ob die UI / UX 'funktionierte' und echtes Feedback von den Benutzern zu erhalten, um das Produkt zu verbessern. Es ist am besten zu testen, zu lernen und zu verfeinern mit einer begrenzten Benutzergruppe, als zu Tausenden / Millionen von Menschen zu starten und Probleme zu entdecken, wenn es zu spät ist.

Prüfung. Lernen. Revidieren. Wiederholen.

Dies ist wichtig im Produktdesign. Sie lernen so viel von Menschen, die das Produkt verwenden.

Sie werden erstaunt sein, was Sie entdecken:

... Menschen benutzen ein Produkt nicht immer so, wie Sie es erwartet haben!

• Du lernst,
• Du verbesserst dich,
• Sie iterieren auf dem Produkt,
• Du tüftelst weiter,
• Und wiederhole diesen Prozess.

Und ehrlich gesagt fühlt es sich manchmal ein bisschen so an:

... Aber das Produkt wird besser dafür sein.

Abschließend.

Wenn ich etwas davon wegnehmen würde, wäre es:

Langsamer.

Lass dich inspirieren. Verstehen Sie Ihr Publikum. Notizen machen. Skizzieren Sie Ideen.

Konzept.

Arbeite mit deinem Team. Erkunden Sie Ideen. Denk darüber nach.

Detail im Design.

Jemand (anders) muss bauen, was Sie entwerfen.

Testen und verbessern.

Funktioniert es? Wie kann es verbessert werden? Es kann immer verbessert werden.

Lernen.

Immer. Jede Erfahrung im Design ist eine gute Lernerfahrung.

[- Dieser Artikel wurde ursprünglich veröffentlicht unter Medium.com , mit der Erlaubnis des Autors neu veröffentlicht -]

• ← Uber Relaunches mit einer neuen Markenidentität
• Die Feiertage gestalten →