Designa Adobe Portfolio

I november 2015 pratade jag lite på Skolan för bildkonst (SVA) i New York City om att designa Adobe Portfolio och produktdesign. Du kan kolla talet här . Jag skrev ursprungligen denna artikel som förberedelse för samtalet, men har sedan utvidgat det för att publicera här. Det syftar till att introducera produkten, dela inblick i designprocessen, skannar från min skissbok och några specs / mönster bakom kulisserna. Jag hoppas att du tycker det är intressant.

En liten intro.

Hej jag är Andrew . Jag är ledande produktdesigner och kreativ chef för Adobe Portfolio . Jag ska dela med dig vad jag själv och ett bra team av utvecklare hos Behance (Adobe) har arbetat på det senaste året.

Webbplatsen för Adobe Portfolio

Vad är Adobe Portfolio?

I grund och botten är det en produkt som gör det möjligt för dig att snabbt och enkelt skapa en webbplats för att visa upp ditt arbete och anpassa det till din stil och dina behov. Det är inte ett nytt koncept, det finns dussintals produkter där ute som bara gör det. Men Portfolio har några viktiga skillnader:

• Det är speciellt utformat för kreatörer att visa upp sin portfölj. Det innebär att det gör vad du behöver göra, enkelt och snabbt.
• Det är gratis med alla Adobe Creative Cloud-planer.
• Du kan komma åt alla Typekits bibliotek med teckensnitt, som du kan använda på din webbplats.

Portfölj synkroniseras med Behance.

Den sak som gör Portfolio mest unik är att den synkroniseras med Behance. Tanken är att du skapar en vacker anpassad webbplats med Portfolio, och synkronisera dina projekt till din Behance-profil. Där kan du få ovärderlig exponering för ditt arbete på en kreativ plattform som används av miljontals annonsmaterial, och folk rekryterar reklam! Men du behöver inte använda Behance om du inte vill - du kan använda Portfolio på egen hand och välja att inte synkronisera med Behance. Valet är ditt.

Fotografering av Matthias Heiderich - som ses på Portfölj och Behance

Responsiva layouter.

Precis som någon webbplatsbyggare behöver du en startpunkt. Så en av de många saker vi behövde utforma var layouter som är inriktade speciellt för att visa kreativt arbete, att fungera som en grund som du enkelt kan anpassa och fylla i med projekt.

Layouterna syftar till att täcka olika stilar för att passa olika kreativa områden. De kan antingen användas som en fristående lösning för att snabbt fylla i dina projekt och publicera en webbplats (i minuter), eller använd redaktörens funktioner för att ändra struktur och utseende som passar din stil.

Anpassa samma layout enkelt för att se väldigt annorlunda ut. Fotografering av Bryce Johnson

Nedan följer de layouter vi lanserar med. De ursprungliga layouterna (för offentlig beta och produktlansering) är mycket enkla, med inriktning på projektomslag, gallerier och projekt. Produkten kommer givetvis att växa till att erbjuda fler funktioner som fullscreen-täckningsbilder, HTML & CSS-redigering, bloggintegration mm ... i tid. Och som funktionerna expanderar, så kommer också variationen och antalet layouter att vara en utgångspunkt.

Layouts och de annonsmaterial de är uppkallade efter: Lina , Sågspån , Matthias , Juco , Mercedes och Thomas

Vi valde att namnge layouterna efter annonsmaterial på Behance . Vi listade annonsmaterial vars arbete lånade bra för en viss layout, och det var självklart också visuellt fantastisk.

Jag borde säga att dessa layouter var en av de sista sakerna som skulle utformas (pre-beta), men jag leder med dem för denna artikels skull, för att presentera dig för vad produkten gör, eller åtminstone dess 'slutprodukt'.

Redaktören.

Produkten (i sig) måste göra det möjligt för användaren att snabbt och enkelt redigera sin webbplats, med hjälp av en av layouterna ovan som utgångspunkt. Användargränssnittet är väldigt minimalt - det går ur vägen och låter dig fokusera på utformningen av din webbplats. Alla ändringar du gör händer lever i redigeraren.

Det låter ganska corny, men jag hade tre saker i åtanke när jag designade allt från varumärket, marknadsföringsplatsen och speciellt redaktören:

Det bör ge användaren möjlighet att

• Ändra enkelt vad de kan se.
• Hantera och lägg till innehåll.
• Responsivt förhandsgranska deras hemsida.
• Publicera och uppdatera en levande webbplats.

Nedan följer en rad redigeringsscenarier från produkten (redaktör):

Olika skärmar från redaktören. Fotografering av Chris Burkard och design av Andrew Couldwell

En produktdesigners roll.

Min egen roll som designer på Portfolio har förändrats ganska dramatiskt under året, från koncept till lansering. När en digital produkt fortskrider, så fungerar din roll som produktdesigner. Så för att gå tillbaka till början:

PROSITE.

Portfolio är faktiskt utvecklingen av en befintlig Behance-produkt (som är pensionär) kallad ProSite. Det är 5 år gammalt, så det var mycket vi kunde lära av den produkten: Vad fungerade bra? Vad gjorde inte?

Behance Network.

Vad vi har lärt oss om det kreativa samhället och visa upp arbetet, genom att utforma, curating (och använder!) Är Behance-nätverket ovärderligt för att förstå hur man bygger en produkt som Portfolio.

Så jag spenderade mycket tid på att absorbera all den kunskap som Behance hade förvärvat genom åren och studerade också deras ursprungliga design för ProSites utveckling. Ställa frågor. Gör anteckningar. Sketching ideas.

The Behance Network, och ProSite

Jag börjar alltid med en penna och en skissbok.

Skrivning och skissering hjälper mig verkligen att fokusera, och idéer flyter därifrån. Ibland skriver jag bara ord som jag associerar med produkten, eller listar vad den behöver göra, bara för att få den ur mitt huvud. Det hjälper till att rensa sinnet och fokusera på det som är viktigt.

Denna skissbok fungerar naturligt i UI-skisser. Ibland ska jag skissera en funktion, eller en liten UI-detalj eller ett nytt tillvägagångssätt till UI helt. Det är ett snabbt sätt att helt och hållet bara utforma och utforska idéer. Kanske viktigast, du blir inte distraherad av pixel perfektion, typsnitt, färg, rutor, guider etc ... som du gör medan du använder dataprogram.

Det finns alltid en punkt när du vet att du har tillräckligt för att ta det steget vidare och börjar faktiskt fläta ut dessa idéer. Tidigare har jag använt Adobe Illustrator eller Omnigraffle för detta, till wireframe. Men tiden var stram på detta projekt, så jag gick rakt in i Photoshop.

Nedan följer några skanningar från min skissbok. Vissa relaterar till produkten (redaktör), några till marknadsplatsen och varumärket:

Några skanningar från min skissbok

En intressant bild att peka ut ovan är den sista (nederst till höger). Du kan se att min skiss är nära vad jag äntligen designade.

Koncept & prototypning.

Alla dessa idéer och mönster informeras och utvecklas genom att konceptera, prototypa och diskutera med laget. Det är bra att chatta igenom idéer med andra designers och utvecklare, och till och med målgruppen när det är möjligt. Till exempel: En särskild idé kom från mig att diskutera en tidig (produkt) design med en MFA Illustrationsstudent på SVA . Ett nytt perspektiv hjälper alltid, speciellt för en produkt av denna komplexitet.

Vi arbetade på ganska intensiva tidsramar för detta projekt. Det var helt enkelt inte dags att bygga några komplexa prototyper. Men det jag gjorde var att skapa en serie av PDF-walkthroughs med Layer Comps i Photoshop, vilket visar att muspekaren rör sig runt på skärmen och visar varje interaktion, funktion och användarflöde inom produkten. Dessa gav utvecklare (och andra intressenter) möjlighet att kritisera och / eller förstå all funktionalitet och användarflödet - så att de visste vad som skulle byggas och identifiera eventuella brister i UI / UX före byggandet och testningen.

Nedan är (en video av) ett exempel på dessa PDF-genomgångar:

Prototyp / walkthrough som visar global anpassning i projektredigeraren

Detalj i design.

Enkelt uttryckt: Ta gissningen ut av det för utvecklarna. Ditt team behöver förstå vad som behöver byggas. Det är inte deras jobb att fylla i ämnena, göra det lyhört eller gissa vad som händer i ett visst scenario. Jag kan inte överdriva detta tillräckligt - jag har upplevt så många designers att designa och överväga 20% av en produkt och inte tänka på saker igenom.

Förutom genomgångarna, användarflöden och prototyper jag pratade om tidigare, tycker jag också om att skapa detaljerade specifikationer för alla UI-komponenter, funktioner och varumärke. Jag tycker att dessa är viktiga när du har ett stort lag, så alla är på samma sida, med en central referenspunkt. Specifikationen syftar till att täcka alla scenarier, från övergångsstatus, till fel, aktiva / inaktiva tillstånd etc ... och även täcka px-värden och dimensioner (jag går till och med så långt som att inkludera grundläggande CSS).

Ju mer detaljer du inkluderar i dina mönster, desto mindre frågor kommer utvecklarna att ha och ju mindre tid du kommer att spendera för att hantera byggnaden. Så du kan fokusera på att designa, testa och förbättra produkten.

Det trevliga med att ta sig tid att skapa dessa "UI-kit" är att det är lättare att uppdatera produkten (design) i framtiden. Det finns ingen anledning att uppdatera hundratals mockups, du uppdaterar bara specifikationerna.

Nedan följer några exempel på dessa styleguides och specs:

Marknadsföring och varumärke.

Månader i nu, med produkten (redaktör) konstruerad och byggd, fokuserade jag min uppmärksamhet på marknadsföring, ombordstigning och varumärke. Vad är denna produkt? Hur börjar du använda den? Det behövde en röst. En identitet.

Namnet.

När jag först började med Behance, blev det här projektet ganska skämt kallat "Prosite 2.0" internt. ProSite-produkten tjänade sin tid, men efterträdaren hade blivit till en annan odjur. Förutom deras samband med Behance var de mycket olika produkter och hade ingen 1: 1 korrelation. Detta var inte en re-design / launch. Vi byggde en spännande ny produkt från botten och tillträder ProSite. Det var viktigt att förmedla - och det börjar med namnet.

Jag gick tillbaka till min skissbok och gick igenom ett ordförbundsövning för att skriva ner allt den här produkten gjorde, och även vilket språk varje liknande produkt på marknaden använde. Den naturliga utvecklingen av alla dessa fortsatte att komma tillbaka till "Portfolio". Så efter några tankar avslutade jag: "Varför inte?" - Det gör precis vad det står på tennet. Det är en webbplats skapare / redaktör utformad speciellt för att skapa en portfölj. Namnets enkelhet och djärvhet gifte sig väl med produktens design och värderingar. Och så kallade vi det "Portfolio", som snart blev "Adobe Portfolio" för att passa med Adobes produktserie.

Marknadsplatsens hemsida med ett foto av Tanya Timal

Varumärket.

Portföljen har väldigt mycket egen identitet och personlighet. Portfölj är inte en företagsprodukt (så att säga). Det är vit etikett. Det är din, att göra din egen. Det är vänligt, enkelt och lättillgängligt. Märket, marknadsföringsplatsen, ombordkörning, copywriting och meddelandehantering i hela (produkt) användarupplevelse försöker alla förmedla detta genom det använda språket, typografi, rutnät, bildspråk och färger.

Andra scenarier inkluderar lyhörda meddelanden och humoristiska bilder. Projektfoto av dua - Alexander Esslinger

Responsiv design.

Gå tillbaka till min tidigare punkt om detaljer i design: Webbdesign, precis som produktdesign, borde ha samma uppmärksamhet på detaljer. I det här fallet är det självklart viktigt att marknadsplatsen är responsiv, men det är inte utvecklarnas jobb att ta reda på hur en webbplats svarar på olika skärmstorlekar.

Nedan följer några exempel på de responsiva mönster som levereras till utvecklarna för att bygga myportfolio.com :

Responsiva mönster för marknadsplatsen, som visar en tidig version av varumärkesidentiteten

Visa en fullständig fallstudie av marknadsplatsen här

Responsiva mönster för ett par av layouterna, som täcker olika scenarier

Visa en fullständig fallstudie av layouterna här

Användartestning.

En digital produkt bör utvecklas så att den passar de personer som använder den, redovisning av användarbeteende, för att ge den bästa användarupplevelsen. Idealt sett kommer produkterna att gå igenom en alfa / beta-fas (begränsade versioner) innan de lanseras till alla. Vi gjorde detta med Portfolio. Detta hjälpte oss att lösa ut problem, lära oss om UI / UX "fungerade" och få verklig användaråterkoppling för att förbättra produkten. Det är bäst att testa, lära och förfina med en begränsad användargrupp än att starta till tusentals / miljoner människor och upptäck problem när det är för sent.

Testa. Lära sig. Revidera. Upprepa.

Detta är viktigt i produktdesign. Du lär dig så mycket av personer som använder produkten.

Du kommer bli förvånad över vad du upptäcker:

... Människor använder inte alltid en produkt hur du förväntade sig att de skulle!

• Du lär dig,
• Du förbättrar,
• Du iterera på produkten,
• Du fortsätter att testa,
• Och upprepa denna process.

Och ärligt talat, ibland känns det lite som det här:

... Men produkten blir bättre för den.

Sammanfattningsvis.

Om jag skulle ta någonting bort från detta skulle det vara:

Sakta ner.

Bli inspirerad. Förstå din publik. Anteckna. Skissidéer.

Begrepp.

Arbeta med ditt team. Utforska idéer. Tänk igenom det.

Detalj i design.

Någon (annars) behöver bygga det du designar.

Test och förbättra.

Fungerar det? Hur kan det förbättras? Det kan alltid förbättras.

Lära sig.

Alltid. Varje erfarenhet av design är en bra lärande erfarenhet.

[- Denna artikel skrevs ursprungligen på Medium.com , publiceras med författarens tillåtelse -]

• ← Uber startar med en ny varumärkesidentitet
• Designa helgdagarna →