Het ontwerpen van Adobe-portfolio

In november 2015 heb ik een beetje gepraat op de School of Visual Arts (SVA) in New York City over het ontwerpen van Adobe Portfolio en productontwerp. Jij kan bekijk het gesprek hier . Ik schreef dit artikel oorspronkelijk ter voorbereiding op het gesprek, maar ben sindsdien uitgebreid om het hier te publiceren. Het heeft tot doel het product te introduceren, inzicht te delen in het ontwerpproces, scans uit mijn schetsboek en enkele specificaties / ontwerpen van achter de schermen. Ik hoop dat je het interessant vindt.

Een beetje intro.

Hallo ik ben Andrew . Ik ben de hoofdproductontwerper en creatief directeur van Adobe-portfolio . Ik ga met je delen wat ikzelf en een geweldig team ontwikkelaars van Behance (Adobe) het afgelopen jaar heb gedaan.

De Adobe Portfolio-marketingsite

Wat is Adobe Portfolio?

Kortom, het is een product waarmee u snel en eenvoudig een website kunt maken om uw werk te laten zien en aan te passen aan uw stijl en behoeften. Het is geen nieuw concept, er zijn tientallen producten die dat precies doen. Maar Portfolio heeft enkele belangrijke verschillen:

• Het is speciaal ontworpen voor creatieven om hun portfolio te presenteren. Dit betekent dat het doet wat je nodig hebt, simpel en snel.
• Het is GRATIS met alle Adobe Creative Cloud-abonnementen.
• U hebt toegang tot alle lettertypen van de Typekit-bibliotheek die u op uw website kunt gebruiken.

Portfolio synchroniseert met Behance.

Wat Portfolio het meest uniek maakt, is dat het met Behance synchroniseert. Het idee is dat u een prachtige aangepaste website maakt met Portfolio en uw projecten synchroniseert met uw Behance-profiel. Daar kunt u waardevolle exposure krijgen voor uw werk op een creatief platform dat wordt gebruikt door miljoenen creatievelingen en mensen die advertenties recruteren! Maar u hoeft Behance niet te gebruiken als u dat niet wilt - u kunt Portfolio op zichzelf gebruiken en ervoor kiezen niet met Behance te synchroniseren. De keuze is aan jou.

De fotografie van Matthias Heiderich - zoals te zien op Portefeuille en Behance

Responsieve lay-outs.

Zoals elke websitebouwer, heb je een startpunt nodig. Een van de vele dingen die we moesten ontwerpen, waren lay-outs die specifiek waren bedoeld voor het presenteren van creatief werk, om te fungeren als een basis die u gemakkelijk kunt aanpassen en vullen met projecten.

De lay-outs zijn bedoeld om verschillende stijlen te bedekken voor verschillende creatieve gebieden. Ze kunnen worden gebruikt als een standaardoplossing om snel met uw projecten te vullen en een website te publiceren (in minuten), of de functies van de editor gebruiken om de structuur en het uiterlijk aan uw stijl aan te passen.

Pas eenvoudig dezelfde lay-out aan om er heel anders uit te zien. Met fotografie van Bryce Johnson

Hieronder staan ​​de lay-outs waarmee we beginnen. De initiële lay-outs (voor de publieke bèta en productlancering) zijn heel eenvoudig, met de nadruk op projectcovers, galerijen en projecten. Het product zal natuurlijk steeds meer functies bieden zoals fullscreen omslagafbeeldingen, HTML & CSS-bewerking, blogintegratie, enz ... op tijd. En naarmate de functies uitbreiden, nemen ook de variëteit en het aantal lay-outs om uit te kiezen als uitgangspunt.

Layouts en de creatieven waarnaar ze zijn vernoemd: Lina , Zaagsel , Matthias , Juco , Mercedes en Thomas

We hebben ervoor gekozen de lay-outs een naam te geven nadat advertenties zijn gemaakt Behance . We namen advertentiemateriaal op waarvan het werk zich goed leende voor een bepaalde lay-out, en was natuurlijk ook visueel verbluffend.

Ik zou zeggen dat deze lay-outs een van de laatste dingen waren die ontworpen moest worden (pre-beta), maar ik leid met hen om omwille van dit artikel, om u te laten kennismaken met wat het product doet, of op zijn minst, 'eindproduct'.

De bewerker.

Het product (zelf) moet de gebruiker in staat stellen om snel en eenvoudig zijn website te bewerken, met behulp van een van de bovenstaande lay-outs als uitgangspunt. De gebruikersinterface is zeer minimaal - hij raakt uit de weg en stelt u in staat om u te concentreren op het ontwerp van uw website. Alle wijzigingen die u aanbrengt, wonen live in de editor.

Het klinkt nogal oubollig, maar ik had drie dingen in mijn hoofd bij het ontwerpen van alles van het merk, de marketingsite en vooral de editor:

Het moet de gebruiker de mogelijkheid geven om:

• Bewerk eenvoudig alles wat ze kunnen zien.
• Beheer en voeg inhoud toe.
• Reageer een voorbeeld van hun website.
• Publiceer en update een live website.

Hieronder staan ​​een aantal bewerkingsscenario's van het product (editor):

Verschillende schermen van de editor. Met fotografie van Chris Burkard en ontwerp door Andrew Couldwell

De rol van een productontwerper.

Mijn eigen rol als ontwerper voor Portfolio veranderde behoorlijk dramatisch in de loop van het jaar, van concept tot lancering. Naarmate een digitaal product vordert, neemt ook uw rol als productontwerper toe. Dus om terug te gaan naar het begin:

ProSite.

Portfolio is eigenlijk de evolutie van een bestaand Behance-product (gepensioneerd) genaamd ProSite. Het is 5 jaar oud, dus er was veel dat we van dat product konden leren: wat werkte goed? Wat niet?

Behance Network.

Ook wat we hebben geleerd over de creatieve gemeenschap en het presenteren van werk, door het Behance Network te ontwerpen, te beheren (en te gebruiken!), Is van onschatbare waarde bij het begrijpen van hoe een product zoals Portfolio kan worden gebouwd.

Dus besteedde ik veel tijd aan het absorberen van al deze kennis die Behance in de loop der jaren had opgedaan, en ook het bestuderen van hun initiële ontwerpen voor de evolutie van ProSite. Vragen stellen. Aantekeningen maken. Ideeën schetsen.

Het Behance-netwerk en ProSite

Ik begin altijd met een potlood en een schetsboek.

Schrijven en schetsen helpt me echt om me te concentreren, en ideeën stromen van daaruit. Soms schrijf ik gewoon woorden die ik associeer met het product, of schrijf ik wat het moet doen, gewoon om het uit mijn hoofd te krijgen. Het helpt om de geest onoverzichtelijk te maken en te focussen op wat belangrijk is.

Dit schetsboekwerk ontwikkelt zich van nature in UI-schetsen. Soms schets ik een functie of een klein UI-detail of een nieuwe benadering van de gebruikersinterface volledig. Het is een snelle manier om puur en eenvoudig ideeën te ontwerpen en te verkennen. Misschien nog belangrijker is dat je niet wordt afgeleid door pixelperfectie, lettertypen, kleuren, rasters, hulplijnen enz ... zoals je doet tijdens het gebruik van computersoftware.

Er is altijd een moment waarop je weet dat je genoeg hebt om het een stap verder te brengen en deze ideeën echt gaat invullen. In het verleden heb ik daarvoor Adobe Illustrator of Omnigraffle gebruikt, voor wireframe. Maar de tijd was strak voor dit project, dus ik ging meteen door naar Photoshop.

Hieronder enkele scans uit mijn schetsboek. Sommige hebben betrekking op het product (editor), sommige op de marketingsite en het merk:

Een paar scans uit mijn schetsboek

Een interessant beeld om hierboven te wijzen is de laatste (rechtsonder). Je kunt zien dat mijn schets in de buurt komt van wat ik uiteindelijk heb ontworpen.

Concepting & prototyping.

Al deze ideeën en ontwerpen worden geïnformeerd en geëvolueerd door middel van concept, prototyping en discussie met het team. Het is goed om door ideeën te praten met andere ontwerpers en ontwikkelaars, en zelfs de doelgroep wanneer mogelijk. Bijvoorbeeld: een bepaald idee kwam van mij toen ik een vroeg (product) ontwerp met een MFA-illustratiestudent besprak SVA . Een nieuw perspectief helpt altijd, vooral voor een product van deze complexiteit.

We werkten aan behoorlijk intense tijdschema's voor dit project. Er was eenvoudigweg geen tijd om complexe prototypen te bouwen. Maar wat ik wel deed, was een reeks pdf-walkthroughs maken met behulp van Layer Comps in Photoshop, waarbij de muiscursor over het scherm werd weergegeven en elke interactie, functie en gebruikersstroom binnen het product werd getoond. Hiermee konden ontwikkelaars (en andere belanghebbenden) alle functionaliteit en de gebruikersstroom bekritiseren en / of begrijpen - zodat ze wisten wat er moest worden gebouwd en ook mogelijke onvolkomenheden in de gebruikersinterface / UX identificeren, voorafgaand aan het bouwen en testen.

Hieronder is (een video van) een voorbeeld van deze pdf-walkthroughs:

Prototype / walkthrough met globale aanpassingen in de projecteditor

Detail in ontwerp.

Simpel gezegd: haal het giswerk eruit voor de ontwikkelaars. Uw team moet begrijpen wat er moet worden gebouwd. Het is niet hun taak om de lege plekken in te vullen, responsief te maken of te raden wat er in een bepaald scenario gebeurt. Ik kan dit niet genoeg genoeg benadrukken - ik heb zoveel ontwerpers meegemaakt die 20% van een product ontwerpen en overwegen en niet nadenken.

Naast de walkthroughs, gebruikersstromen en prototypen waar ik eerder over sprak, maak ik ook graag gedetailleerde specificaties voor alle UI-componenten, functies en merk. Ik vind dat deze belangrijk zijn wanneer je een groot team hebt, dus iedereen staat op dezelfde pagina, met één centraal referentiepunt. De specificaties zijn bedoeld om alle scenario's te dekken, van rollover-toestanden, tot fouten, actieve / inactieve staten, enz., En ook betrekking op px-waarden en dimensies (ik ga zelfs zover als met inbegrip van standaard-CSS).

Hoe meer details u opneemt in uw ontwerpen, hoe minder vragen de ontwikkelaars zullen hebben en hoe minder tijd u besteedt aan het beheren van de build. U kunt zich dus concentreren op het ontwerpen, testen en verbeteren van het product.

Het leuke aan het nemen van de tijd om deze 'UI-kits' te maken, is dat het gemakkelijker is om het product (ontwerp) in de toekomst bij te werken. Het is niet nodig om honderden mockups bij te werken, u werkt alleen de specificaties bij.

Hieronder staan ​​enkele voorbeelden van deze styleguides en specificaties:

Marketing en merk.

Maanden geleden, met het product (editor) ontworpen en gebouwd, richtte ik mijn aandacht weer op marketing, onboarding en merk. Wat is dit product? Hoe begin je ermee? Het had een stem nodig. Een identiteit.

De naam.

Toen ik voor het eerst lid werd van Behance, heette dit project intern een beetje gekscherend 'Prosite 2.0'. Het ProSite-product diende zijn tijd, maar zijn opvolger was uitgegroeid tot een ander beest. Behalve hun connectie met Behance waren het ook heel verschillende producten en hadden ze geen 1: 1-correlatie. Dit was geen herontwerp / lancering. We bouwden vanaf de basis een opwindend nieuw product en schakelden ProSite uit. Dat was belangrijk om over te brengen - en dat begint met de naam.

Ik ging terug naar mijn schetsboek en ging door een woordassociatieoefening van het opschrijven van alles wat dit product deed, en ook welke taal elk vergelijkbaar product op de markt gebruikte. De natuurlijke progressie van al deze bleef maar terugkeren naar 'Portfolio'. Dus na enig nadenken besloot ik: 'Waarom niet ?!' - het doet precies wat het zegt op het blik. Het is een website-maker / -editor die speciaal is ontworpen voor het maken van een portfolio. De eenvoud en durf van de naam zijn goed samengegaan met het ontwerp en de waarden van het product. En daarom noemden we het 'Portfolio', dat al snel 'Adobe-portfolio' werd dat paste in de productsuite van Adobe.

De startpagina van de marketingsite met een foto van Tanya Timal

Het merk.

Portfolio heeft veel zijn eigen identiteit en persoonlijkheid. Portfolio is geen zakelijk product (om zo te zeggen). Het is een wit label. Het is van jou, om je eigen te maken. Het is vriendelijk, eenvoudig en benaderbaar. Het merk, de marketingsite, onboarding, copywriting en messaging in de hele (product) gebruikerservaring proberen dit allemaal over te brengen via de gebruikte taal, typografie, raster, beelden en kleuren.

Andere scenario's zijn luchtige berichten en humoristische beelden. Projectfoto door dua - Alexander Esslinger

Reagerend ontwerp.

Teruggaan naar mijn eerdere punt over detail in ontwerp: webontwerp moet, net als productontwerp, dezelfde aandacht voor detail hebben. In dit geval is het natuurlijk belangrijk dat de marketingsite reageert, maar het is niet de taak van de ontwikkelaar om uit te zoeken hoe een website reageert op verschillende schermformaten.

Hieronder staan ​​een paar voorbeelden van de responsieve ontwerpen die aan de ontwikkelaars zijn geleverd om te bouwen myportfolio.com :

Responsieve ontwerpen voor de marketingsite, met een vroege versie van de merkidentiteit

Bekijk a volledige casestudy van de marketingsite hier

Responsieve ontwerpen voor een paar van de lay-outs, met verschillende scenario's

Bekijk a volledige casestudy van de lay-outs hier

Gebruikerstests.

Een digitaal product moet evolueren om geschikt te zijn voor de mensen die het gebruiken, rekening houdend met gebruikersgedrag, om de beste gebruikerservaring te bieden. Idealiter gaan producten door een alfa- / bètafase (beperkte releases) voordat ze voor iedereen worden opgestart. Dit hebben we gedaan met Portfolio. Dit hielp ons problemen uit de weg te ruimen, te leren of de UI / UX 'werkte' en echte gebruikersfeedback te krijgen met de bedoeling het product te verbeteren. Het is het beste om te testen, leren en verfijnen met een beperkte gebruikersgroep, dan om te starten met duizenden / miljoenen mensen en problemen te ontdekken wanneer het te laat is.

Test. Leren. Herzien. Herhaling.

Dit is belangrijk bij het ontwerpen van producten. Je leert zoveel van mensen die het product gebruiken.

Je zult versteld staan ​​van wat je ontdekt:

... Mensen gebruiken een product niet altijd zoals u had verwacht!

• Je leert,
• Je verbetert,
• U iterate op het product,
• Je blijft testen,
• En herhaal dit proces.

En eerlijk gezegd, voelt het soms een beetje als dit:

... maar het product zal er beter voor zijn.

Ten slotte.

Als ik hier iets van weg zou nemen zou het zijn:

Vertragen.

Raak geïnspireerd. Begrijp je publiek. Maak aantekeningen. Schets ideeën.

Concept.

Werk met je team. Ontdek ideeën. Denk er over na.

Detail in ontwerp.

Iemand (anders) moet bouwen wat je ontwerpt.

Test en verbeter.

Werkt het? Hoe kan het worden verbeterd? Het kan altijd worden verbeterd.

Leren.

Altijd. Elke ervaring in ontwerp is een goede leerervaring.

[- Dit artikel is oorspronkelijk gepost op Medium.com , opnieuw gepubliceerd met toestemming van de auteur -]

• ← Uber herlanceren met een nieuwe merkidentiteit
• Het ontwerpen van de feestdagen →