Utforming av Adobe Portfolio

I november 2015 snakket jeg litt på Skolen for visuelle kunst (SVA) i New York City om å designe Adobe Portfolio, og produktdesign. Du kan se snakk her . Jeg skrev opprinnelig denne artikkelen som forberedelse til samtalen, men har siden utvidet seg til å publisere her. Det tar sikte på å introdusere produktet, dele innsikt i designprosessen, skanner fra skisseboken og noen spesifikasjoner / design fra bak kulissene. Jeg håper du finner det interessant.

Et lite intro.

Hei jeg er Andrew . Jeg er ledende produktdesigner og kreativ direktør for Adobe Portfolio . Jeg skal dele med deg hva meg selv og et stort team utviklere hos Behance (Adobe) har jobbet i dette siste året.

Markedsføringsstedet for Adobe Portfolio

Hva er Adobe Portfolio?

I utgangspunktet er det et produkt som lar deg raskt og enkelt lage et nettsted for å vise frem arbeidet ditt, og tilpasse det slik at det passer dine behov og stiler. Det er ikke et nytt konsept, det finnes dusinvis av produkter der ute som bare gjør det. Men Porteføljen har noen viktige forskjeller:

• Det er designet spesielt for reklamer for å vise frem sin portefølje. Betydning det gjør hva du trenger å gjøre, enkelt og raskt.
• Det er gratis med alle Adobe Creative Cloud-planene.
• Du kan få tilgang til alle Typekits bibliotek med skrifter, for bruk på nettstedet ditt.

Porteføljen synkroniseres med Behance.

Tingen som gjør porteføljen mest unik er at den synkroniseres med Behance. Ideen er at du oppretter et vakkert tilpasset nettsted med portefølje, og synkroniser prosjektene dine til din Behance-profil. Der kan du få uvurderlig eksponering for arbeidet ditt på en kreativ plattform som brukes av millioner av reklamer, og folk som rekrutterer reklamer! Men du trenger ikke å bruke Behance hvis du ikke vil - du kan bruke porteføljen på egenhånd og velge å ikke synkronisere med Behance. Valget er ditt.

Fotografering av Matthias Heiderich - sett på Portfolio og Behance

Responsive layouter.

Som enhver nettsidebygger trenger du et utgangspunkt. Derfor var en av de mange tingene vi trengte å designe, layouter rettet spesielt for å vise kreativt arbeid, for å fungere som et fundament som du enkelt kan tilpasse og fylle ut med prosjekter.

Oppsettene tar sikte på å dekke en rekke stilarter som passer til ulike kreative felt. De kan enten brukes som en off-the-shelf løsning for raskt å fylle ut med prosjektene dine og publisere et nettsted (i minutter), eller bruk redigeringsfunksjonene for å endre strukturen og utseendet som passer til stilen din.

Tilpass lett samme layout for å se veldig annerledes ut. Med fotografering av Bryce Johnson

Nedenfor er layoutene vi lanserer med. De opprinnelige layoutene (for offentlig beta og produktlansering) er veldig enkle, med fokus på prosjektdeksler, gallerier og prosjekter. Produktet vil selvfølgelig vokse til å tilby flere funksjoner som fullskjermdeksjonsbilder, HTML og CSS redigering, bloggintegrering osv. ... i tide. Og som egenskapene utvides, vil også variasjonen og antall layouter velges som utgangspunkt.

Layouts og reklamene de er oppkalt etter: lina , Sagflis , Matthias , Juco , Mercedes og Thomas

Vi valgte å navngi oppsettene etter at annonsene var på Behance . Vi har kortsluttet reklamer hvis arbeid lå bra ut på et bestemt layout, og selvfølgelig var det også visuelt imponerende.

Jeg burde si at disse layoutene var en av de siste tingene som skulle utformes (pre-beta), men jeg leder med dem for denne artikkelen, for å introdusere deg om hva produktet gjør, eller i det minste dets 'sluttprodukt'.

Redaktøren.

Produktet (i seg selv) må gjøre det mulig for brukeren å raskt og enkelt redigere sitt nettsted, ved hjelp av et av oppsettene ovenfor som utgangspunkt. Brukergrensesnittet er veldig minimalt - det går ut av veien, og lar deg fokusere på utformingen av nettstedet ditt. Alle endringene du gjør skje, bor i redaktøren.

Det høres ganske corny, men jeg hadde tre ting i tankene mens du designer alt fra merkevaren, markedsføringsstedet, og spesielt redaktøren:

Det skal gi brukeren mulighet til å:

• Rediger enkelt hva de kan se.
• Administrer og legg til innhold.
• Responsivt forhåndsvise deres nettside.
• Publiser og oppdater et levende nettsted.

Nedenfor finner du en rekke redigeringsscenarier fra produktet (redaktør):

Ulike skjermbilder fra redaktøren. Med fotografering av Chris Burkard og design av Andrew Couldwell

Rollen som en produktdesigner.

Min egen rolle som designer på porteføljen endret seg ganske dramatisk i løpet av året, fra konsept til lansering. Når et digitalt produkt utvikler seg, spiller også rollen som produktdesigner. Så å gå tilbake til starten:

Prosite.

Portefølje er faktisk utviklingen av et eksisterende Behance-produkt (blir pensjonert) kalt ProSite. Det er 5 år, så det var mye vi kunne lære av det produktet: Hva fungerte bra? Hva gjorde det ikke?

Behance Network.

Også, det vi har lært om det kreative fellesskapet, og fremvisning av arbeid, gjennom å designe, kurere (og bruke!), Er Behance-nettverket uvurderlig for å forstå hvordan man bygger et produkt som Portfolio.

Så jeg brukte mye tid på å absorbere all denne kunnskapen Behance hadde oppnådd gjennom årene, og studerte også deres første design for utviklingen av ProSite. Spør spørsmål. Å lage notater. Skisse ideer.

The Behance Network, og ProSite

Jeg begynner alltid med en blyant og en skissebok.

Skrive og skisse hjelper meg virkelig å fokusere, og ideer flyter derfra. Noen ganger skriver jeg bare ord jeg forbinder med produktet, eller lister hva den trenger å gjøre, bare for å få det ut av hodet mitt. Det bidrar til å røre sinnet og fokusere på det som er viktig.

Denne skisseboken utvikler seg naturlig til UI-skisser. Noen ganger skal jeg skissere en funksjon, eller en liten UI-detalj eller en ny tilnærming til brukergrensesnittet helt. Det er en rask måte å rent og enkelt bare utforme og utforske ideer. Kanskje viktigst, du blir ikke distrahert av piksel perfeksjon, fonter, farge, grids, guider etc ... som du gjør mens du bruker dataprogramvare.

Det er alltid et poeng når du vet at du har nok til å ta det som et skritt videre, og faktisk begynne å kutte ut disse ideene. Tidligere har jeg brukt Adobe Illustrator eller Omnigraffle for dette til wireframe. Men tiden var stram på dette prosjektet, så jeg gikk rett inn i Photoshop.

Nedenfor er noen skanninger fra skisseboken min. Noen relaterer seg til produktet (redaktør), noen til markedsføringsstedet og merkevaren:

Noen få skanninger fra skisseboken min

Et interessant bilde å peke ut ovenfor er den siste (nederst til høyre). Du kan se at min skisse er nær det jeg til slutt designet.

Concepting & prototyping.

Alle disse ideene og designene blir informert og utviklet ved å konseptere, prototype og diskutere med teamet. Det er godt å snakke gjennom ideer med andre designere og utviklere, og til og med målgruppen når det er mulig. For eksempel: En bestemt ide kom fra meg å diskutere en tidlig (produkt) design med en MFA illustrasjonsstudent på SVA . Et nytt perspektiv hjelper alltid, spesielt for et produkt av denne kompleksiteten.

Vi jobbet med ganske intense tidsrammer på dette prosjektet. Det var rett og slett ikke tid til å bygge noen komplekse prototyper. Men det jeg gjorde var å lage en serie av PDF-gjennomganger ved hjelp av Layer Comps i Photoshop, som viser at musepekeren beveger seg rundt på skjermen, og demonstrerer hver interaksjon, funksjon og brukerflyt i produktet. Disse tillot utviklere (og andre interessenter) å kritisere og / eller forstå all funksjonalitet og brukerflyten - slik at de visste hva som skulle bygges, og identifiserer også eventuelle potensielle feil i brukergrensesnittet / UX, før bygging og testing.

Nedenfor er (en video av) ett eksempel på disse PDF-gjennomgangene:

Prototype / walkthrough viser global tilpasning i prosjektredigeringen

Detalj i design.

Enkelt sagt: Ta gjetningen ut av det for utviklerne. Laget ditt trenger å forstå hva som må bygges. Det er ikke deres jobb å fylle ut blankene, gjøre det responsivt, eller gjett hva som skjer i et gitt scenario. Jeg kan ikke overvurdere dette nok - jeg har opplevd så mange designere som designer og vurderer 20% av et produkt, og ikke tenker på ting gjennom.

I tillegg til walkthroughs, brukerstrømmer og prototyper jeg snakket om tidligere, liker jeg også å lage detaljerte spesifikasjoner for alle UI-komponentene, funksjonene og merkevaren. Jeg føler at disse er viktige når du har et stort lag, så alle er på samme side, med ett sentralt referansepunkt. Spesifikasjonene tar sikte på å dekke alle scenarier, fra overgangsstater, til feil, aktive / inaktive stater etc ..., og dekker også px verdier og dimensjoner (jeg går til og med så langt som med grunnleggende CSS).

Jo mer detaljer du inkluderer i designene dine, desto mindre spørsmål vil utviklerne ha, og jo mindre tid du vil bruke til å administrere bygningen. Så du kan fokusere på å designe, teste og forbedre produktet.

Den fine tingen om å ta seg tid til å lage disse "UI-kits", er at det er enklere å oppdatere produktet (design) i fremtiden. Det er ikke nødvendig å oppdatere hundrevis av mockups, du oppdaterer bare spesifikasjonene.

Nedenfor er noen eksempler på disse styleguides og spesifikasjoner:

Markedsføring og merkevare.

Måneder i nå, med produktet (redaktør) designet og bygd, fokuserte jeg oppmerksomheten min på markedsføring, ombord og merkevare. Hva er dette produktet? Hvordan kommer du i gang med å bruke den? Det trengte en stemme. En identitet.

Navnet.

Da jeg først ble med i Behance, ble prosjektet noe grusomt kalt "Prosite 2.0" internt. ProSite-produktet tjente sin tid, men etterfølgeren hadde vokst til et annet dyr. Foruten deres forbindelse med Behance var de veldig forskjellige produkter og hadde ikke 1: 1 korrelasjon. Dette var ikke en re-design / lansering. Vi bygde et spennende nytt produkt fra grunnen og tilbaketrukket ProSite. Det var viktig å formidle - og det begynner med navnet.

Jeg gikk tilbake til skisseboken min, og gikk gjennom et ordforbundsøvelse for å skrive ned alt dette produktet gjorde, og også hvilket språk hvert tilsvarende produkt på markedet brukte. Den naturlige utviklingen av alle disse holdt tilbake til "Portefølje". Så etter noen tanke konkluderte jeg med: "Hvorfor ikke ?!" - Det gjør akkurat hva det står på tinnet. Det er en nettside skaperen / redaktør designet spesielt for å skape en portefølje. Enkelheten og dristigheten av navnet var godt opptatt i produktets design og verdier. Og så kalte vi det "Portefølje", som snart ble "Adobe Portfolio" for å passe til Adobes produktserie.

Hjemmesiden for markedsføringssiden med et bilde av Tanya Timal

Merket.

Porteføljen har veldig mye sin egen identitet og personlighet. Porteføljen er ikke et bedriftsprodukt (så å si). Det er hvit etikett. Det er ditt, å lage din egen. Det er vennlig, enkel og tilnærmet. Merket, markedsføringsstedet, onboarding, copywriting og messaging gjennom (produkt) brukeropplevelsen forsøker å formidle dette gjennom språket som brukes, typografi, rutenett, bilder og farger.

Andre scenarier inkluderer lyse meldinger og humoristiske bilder. Prosjekt bilde av dua - Alexander Esslinger

Responsiv utforming.

Gå tilbake til mitt tidligere punkt om detaljer i design: Webdesign, akkurat som produktdesign, bør ha samme oppmerksomhet på detaljer. I dette tilfellet er det selvsagt viktig at markedsføringsområdet er lydhør, men det er ikke utviklerens jobb å finne ut hvordan et nettsted reagerer på forskjellige skjermstørrelser.

Nedenfor er noen eksempler på de responsive designene som leveres til utviklerne for å bygge myportfolio.com :

Responsive designs for markedsføringsområdet, som viser en tidlig versjon av merkeidentiteten

Se en full case study av markedsføringsstedet her

Responsive design for et par av layoutene, som dekker forskjellige scenarier

Se en full case study av layoutene her

Brukertesting.

Et digitalt produkt bør utvikle seg for å passe de som bruker det, og regner med brukeradferd, for å gi den beste brukeropplevelsen. Ideelt sett vil produktene gå gjennom en alfa / beta-fase (begrensede utgivelser) før de lanseres til alle. Vi gjorde dette med Portefølje. Dette hjalp oss med å luke ut problemer, lære om brukergrensesnittet / UX 'fungerte' og få reell tilbakemelding fra brukerne med det formål å forbedre produktet. Det er best å teste, lære og finjustere med en begrenset brukergruppe enn å lansere til tusenvis / millioner mennesker og oppdage problemer når det er for sent.

Test. Lære. Revidere. Gjenta.

Dette er viktig i produktdesign. Du lærer så mye fra folk som bruker produktet.

Du vil bli overrasket over hva du oppdager:

... Folk bruker ikke alltid et produkt slik du forventet at de ville!

• Du lærer,
• Du forbedrer,
• Du iterere på produktet,
• Du fortsetter å teste,
• Og gjenta denne prosessen.

Og ærlig, noen ganger føles det litt som dette:

... Men produktet vil bli bedre for det.

For å konkludere.

Hvis jeg skulle ta noe bort fra dette ville det være:

Ro ned.

Bli inspirert. Forstå publikum. Ta notater. Skisse ideer.

Konsept.

Arbeid med teamet ditt. Utforsk ideer. Tenk det gjennom.

Detalj i design.

Noen (ellers) trenger å bygge det du designer.

Test og forbedre.

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

Lære.

Alltid. Alle erfaringer med design er en god læringsopplevelse.

[- Denne artikkelen ble opprinnelig postet på Medium.com , publisert med forfatterens tillatelse -]

• ← Uber gjenoppretter med en ny merkeidentitet
• Designe ferien →