Design af Adobe Portfolio

I november 2015 lavede jeg en lille snak på Skolen for Billedkunst (SVA) i New York City om design af Adobe Portfolio og produktdesign. Du kan se talerne her . Jeg skrev oprindeligt denne artikel som forberedelse til diskussionen, men har siden udvidet den til at offentliggøre her. Det sigter mod at introducere produktet, dele indsigt i designprocessen, scanninger fra min skitsebog og nogle specs / designs bag scenerne. Jeg håber du finder det interessant.

En lille introduktion.

Hej, jeg er Andrew . Jeg er førende produktdesigner og kreativ direktør for Adobe Portfolio . Jeg vil dele med dig, hvad jeg selv og et godt team af udviklere hos Behance (Adobe) har arbejdet på i det forløbne år.

Adobe Portfolio marketing site

Hvad er Adobe Portfolio?

Dybest set er det et produkt, der giver dig mulighed for hurtigt og enkelt at oprette et websted for at fremvise dit arbejde og tilpasse det til din stil og dine behov. Det er ikke et nyt koncept, der er dusinvis af produkter derude, der gør det bare. Men porteføljen har nogle vigtige forskelle:

• Det er designet specielt til reklamer for at fremvise deres portefølje. Betydning det gør hvad du har brug for det til, simpelthen og hurtigt.
• Det er GRATIS med alle Adobe Creative Cloud-planer.
• Du kan få adgang til alle Typekits bibliotek med skrifttyper, der kan bruges på din hjemmeside.

Porteføljen synkroniseres med Behance.

Det, der gør Portfolio mest unikke, er, at det synkroniseres med Behance. Ideen er, at du opretter en smuk brugerdefineret hjemmeside med Portfolio, og synkroniser dine projekter til din Behance-profil. Der kan du få uvurderlig eksponering for dit arbejde på en kreativ platform, der bruges af millioner af reklamer, og folk rekrutterer reklamer! Men du behøver ikke bruge Behance, hvis du ikke vil - du kan bruge porteføljen alene og vælge ikke at synkronisere med Behance. Det er dit valg.

Fotograferingen af ​​Matthias Heiderich - som ses på Portefølje og Behance

Responsive layouts.

Ligesom enhver hjemmesidebygger har du brug for et udgangspunkt. Så en af ​​de mange ting, vi havde brug for at designe, var layouter, der var tilpasset specifikt til at vise kreativt arbejde, at fungere som et fundament, som du nemt kan tilpasse og udfylde med projekter.

Layouterne har til formål at dække en række forskellige stilarter, der passer til forskellige kreative felter. De kan enten bruges som en off-the-shelf løsning til hurtigt at udfylde med dine projekter og offentliggøre et websted (i minutter), eller brug editorens funktioner til at ændre struktur og udseende, så de passer til din stil.

Nemt tilpasse det samme layout til at se meget anderledes ut. Med fotografering af Bryce Johnson

Nedenfor er de layouter, vi lancerer med. De oprindelige layouts (til den offentlige beta og produktlancering) er meget enkle, med fokus på projektdækker, gallerier og projekter. Produktet vil selvfølgelig vokse til at tilbyde flere funktioner som fuldskærm dækning billeder, HTML og CSS redigering, blog integration osv. ... i tide. Og efterhånden som funktionerne udvides, vil også sortimentet og antallet af layouter blive valgt som udgangspunkt.

Layouts og de annoncer, de er opkaldt efter: Lina , savsmuld , Matthias , Juco , Mercedes og Thomas

Vi valgte at navngive layouterne efter annoncer på Behance . Vi shortlistede reklamer, hvis arbejde lå ud til et bestemt layout, og det var selvfølgelig også visuelt fantastisk.

Jeg bør sige, at disse layouter var en af ​​de sidste ting, der skulle designes (pre-beta), men jeg leder med dem for denne artikels skyld for at introducere dig om, hvad produktet gør, eller i det mindste dets 'slutprodukt'.

Redaktøren

Produktet (i sig selv) skal gøre det muligt for brugeren hurtigt og enkelt at redigere deres hjemmeside ved hjælp af et af layoutene ovenfor som udgangspunkt. Brugergrænsefladen er meget minimal - det går ud af vejen og giver dig mulighed for at fokusere på design af dit websted. Alle ændringer, du gør ske, bor i editoren.

Det lyder ret corny, men jeg havde tre ting i tankerne, mens jeg designede alt fra mærket, markedsføringsstedet og især redaktøren:

Det bør give brugeren mulighed for at:

• Rediger nemt hvad de kan se.
• Administrer og tilføj indhold.
• Responsivt forhåndsvise deres hjemmeside.
• Udgiv og opdatere en levende hjemmeside.

Nedenfor ses en række redigeringsscenarier fra produktet (editor):

Forskellige skærmbilleder fra editoren. Med fotografering af Chris Burkard og design af Andrew Couldwell

En produktdesigners rolle.

Min egen rolle som designer på Porteføljen ændrede sig temmelig dramatisk i løbet af året, fra koncept til lancering. Som et digitalt produkt skrider frem, gør også din rolle som produktdesigner. Så for at gå tilbage til starten:

PROSITE.

Portefølje er faktisk udviklingen af ​​et eksisterende Behance-produkt (bliver pensioneret) kaldet ProSite. Det er 5 år, så der var meget, vi kunne lære af det produkt: Hvad fungerede godt? Hvad gjorde det ikke?

Behance Network.

Også hvad vi har lært om det kreative fællesskab og fremvisning af arbejde, ved at designe, kurere (og bruge!) Behance Network er også uvurderlig for at forstå, hvordan man bygger et produkt som Portfolio.

Så jeg brugte meget tid på at absorbere al den viden, som Behance havde erhvervet gennem årene, og også studerede deres oprindelige design til udviklingen af ​​ProSite. Stille spørgsmål. Gør noter. Skitsere ideer.

The Behance Network, og ProSite

Jeg starter altid med en blyant og en skitsebog.

Skrive og skitse hjælper mig virkelig med at fokusere, og ideer flyder derfra. Nogle gange skriver jeg bare ord, jeg forbinder med produktet, eller lister hvad den skal gøre, bare for at få det ud af mit hoved. Det hjælper med at røre sindet og fokusere på det, der er vigtigt.

Denne sketchbook udvikler sig naturligt til UI-skitser. Nogle gange skitser jeg en funktion, eller en lille brugergrænse, eller en ny tilgang til brugergrænsefladen helt. Det er en hurtig måde at simpelthen bare udforme og udforske ideer på. Måske vigtigst, du bliver ikke distraheret af pixel perfektion, skrifttyper, farve, grids, guider osv ... som du gør, mens du bruger computersoftware.

Der er altid et punkt, når du ved, at du har nok til at tage det skridt videre og faktisk begynde at uddybe disse ideer. Tidligere har jeg brugt Adobe Illustrator eller Omnigraffle til dette til wireframe. Men tiden var stram på dette projekt, så jeg gik lige ind i Photoshop.

Nedenfor er nogle scanninger fra min skitsebog. Nogle vedrører produktet (editor), nogle til markedsføringsstedet og mærket:

Et par scanninger fra min skitsebog

Et interessant billede at pege på ovenfor er den sidste (nederst til højre). Du kan se, at min skitse er tæt på hvad jeg i sidste ende har designet.

Koncept & prototyper.

Alle disse ideer og design er informeret og udviklet ved at udforme, prototype og diskutere med holdet. Det er godt at snakke gennem ideer med andre designere og udviklere, og endda målgruppen, når det er muligt. For eksempel: En bestemt ide kom fra mig at diskutere et tidligt (produkt) design med en MFA illustration studerende på SVA . Et nyt perspektiv hjælper altid, især for et produkt af denne kompleksitet.

Vi arbejdede på temmelig intense tidsrammer på dette projekt. Der var simpelthen ikke tid til at bygge komplekse prototyper. Men hvad jeg gjorde, var at lave en serie af PDF-walkthroughs ved hjælp af Layer Comps i Photoshop, hvor musemarkøren bevægede sig rundt på skærmen og demonstrerede hver interaktion, funktion og brugerflow inden for produktet. Disse gav udviklere (og andre interessenter) mulighed for at kritisere og / eller forstå alle funktionaliteter og brugerflow - så de vidste, hvad der skulle bygges og identificere eventuelle potentielle fejl i brugergrænsefladen / UX, før opbygningen og testningen.

Nedenfor er (en video af) et eksempel på disse PDF-gennemløb:

Prototype / walkthrough viser global tilpasning i projekteditoren

Detalje i design.

Simpelthen sæt: Tag gætteriet ud af det for udviklerne. Dit team skal forstå, hvad der skal bygges. Det er ikke deres job at udfylde emnerne, gøre det lydhørt eller gætte hvad der sker i et givet scenario. Jeg kan ikke overvurdere det nok - jeg har oplevet så mange designere, der designer og overvejer 20% af et produkt og tænker ikke på ting.

Ud over de gennemløb, brugerflows og prototyper jeg snakkede om tidligere, kan jeg også lave detaljerede specifikationer for alle UI-komponenter, funktioner og mærke. Jeg føler, at disse er vigtige, når du har et stort hold, så alle er på samme side med et centralt referencepunkt. Specifikationen tager sigte på at dække alle scenarier, fra rollover states til fejl, aktive / inaktive stater osv. ... og også dække px værdier og dimensioner (jeg går endda så langt som med grundlæggende CSS).

Jo mere detaljerede du medtager i dine designs, jo mindre spørgsmål udviklerne vil have, og jo mindre tid du vil bruge til at administrere bygningen. Så du kan fokusere på at designe, teste og forbedre produktet.

Også det dejlige ved at tage sig tid til at oprette disse 'UI-kits' er, at det er nemmere at opdatere produktet (design) i fremtiden. Der er ikke behov for at opdatere hundredvis af mockups, du opdaterer kun specifikationerne.

Nedenfor er et par eksempler på disse styleguides og specs:

Markedsføring og mærke.

Måneder i nu, med produktet (editor) designet og bygget, fokuserede jeg igen på markedsføring, ombord og mærke. Hvad er dette produkt? Hvordan kommer du i gang med at bruge den? Det havde brug for en stemme. En identitet.

Navnet.

Da jeg først kom til Behance, blev dette projekt noget sjovt kaldt "Prosite 2.0" internt. ProSite-produktet tjente sin tid, men efterfølgeren var vokset til et andet dyr. Udover deres forbindelse med Behance var de meget forskellige produkter og havde ingen 1: 1 korrelation. Dette var ikke en re-design / launch. Vi byggede et spændende nyt produkt fra bunden og tilbagestående ProSite. Det var vigtigt at formidle - og det starter med navnet.

Jeg gik tilbage til min skitsebog og gik gennem et ordforeningsøvelse for at skrive ned alt, hvad dette produkt gjorde, og også hvilket sprog alle lignende produkter på markedet brugte. Den naturlige fremgang af alle disse holdes tilbage til "Portefølje". Så efter nogle tanker konkluderede jeg: "Hvorfor ikke ?!" - Det gør præcis hvad der står på tin. Det er en hjemmeside skaber / editor designet specielt til at oprette en portefølje. Simpelthed og dristighed i navnet var godt oplagt med produktets design og værdier. Og så kaldte vi det 'Portefølje', som snart blev 'Adobe Portfolio' for at passe til Adobes produktserie.

Markedspladsens hjemmeside med et billede af Tanya Timal

Mærket.

Porteføljen har meget sin egen identitet og personlighed. Porteføljen er ikke en virksomhedsprodukt (så at sige). Det er hvidt mærke. Det er dit, at lave dit eget. Det er venligt, enkelt og tilgængelig. Mærket, markedsføringsstedet, onboarding, copywriting og messaging gennem hele (produkt) brugeroplevelsen forsøger alt for at formidle dette via det anvendte sprog, typografi, net, billeder og farver.

Andre scenarier omfatter lystartede messaging og humoristisk billedsprog. Projekt foto af dua - Alexander Esslinger

Responsivt design.

Tilbage til mit tidligere punkt om detaljer i design: Webdesign, ligesom produktdesign, skal have samme opmærksomhed på detaljer. I dette tilfælde er det naturligvis vigtigt, at markedsføringswebstedet er lydhørt, men det er ikke udviklernes job at finde ud af, hvordan en hjemmeside reagerer på forskellige skærmstørrelser.

Nedenfor er et par eksempler på de responsive designs, der leveres til udviklerne til at bygge myportfolio.com :

Responsive designs til markedspladsen, der viser en tidlig version af brandidentiteten

Se en fuld casestudie af markedsføringsstedet her

Responsive designs til et par af layouterne, der dækker forskellige scenarier

Se en fuld casestudie af layouterne her

Bruger testning.

Et digitalt produkt bør udvikle sig, så det passer til de mennesker, der bruger det, og bruger brugerens adfærd, for at give den bedste brugeroplevelse. Ideelt set vil produkterne gennemgå en alfa / beta fase (begrænsede udgivelser), før de lanceres til alle. Det gjorde vi med Portefølje. Dette hjalp os med at udrydde problemer, lære om brugergrænsefladen / UX'en fungerede 'og få reel feedback fra brugerne med det formål at forbedre produktet. Det er bedst at teste, lære og forfine med en begrænset brugergruppe end at lancere til tusinder / millioner af mennesker og opdage problemer, når det er for sent.

Prøve. Lære. Revidere. Gentage.

Dette er vigtigt i produktdesign. Du lærer så meget fra folk, der bruger produktet.

Du vil blive forbløffet over, hvad du opdager:

... Folk bruger ikke altid et produkt, hvordan man forventede at de ville!

• Du lærer,
• Du forbedrer,
• Du gentager på produktet,
• Du fortsætter med at teste,
• Og gentag denne proces.

Og ærligt, nogle gange føles det lidt som dette:

... Men produktet bliver bedre for det.

Afslutningsvis.

Hvis jeg skulle tage noget væk fra dette ville det være:

Sænk farten.

Blive inspireret. Forstå dit publikum. Lav noter. Skits ideer.

Koncept.

Arbejd med dit team. Udforsk ideer. Tænk det igennem.

Detalje i design.

Nogen (ellers) skal bygge, hvad du designer.

Test og forbedre.

Virker det? Hvordan kan det forbedres? Det kan altid forbedres.

Lære.

Altid. Alle erfaringer med design er en god læringserfaring.

[- Denne artikel blev oprindeligt indsendt på Medium.com , genudgivet med forfatterens tilladelse -]

• ← Uber genoptager med en ny brandidentitet
• Design af helligdage →