Hönnun Adobe Portfolio

Í nóvember 2015 gerði ég smá viðtal við Listaháskóli (SVA) í New York City um hönnun Adobe Portfolio og vöruhönnun. Þú getur horfa á ræðu hér . Ég skrifaði upphaflega þessa grein í undirbúningi fyrir ræðu, en hefur síðan stækkað það til að birta hér. Það miðar að því að kynna vöruna, deila innsýn í hönnunarferlið, skannar úr skissubókinni mínum og nokkrum sérstakum / hönnunum frá bak við tjöldin. Ég vona að þú finnir það áhugavert.

Smá inngangur.

Halló ég er Andrew . Ég er leiðandi varahönnuður og skapandi forstöðumaður Adobe Portfolio . Ég ætla að deila með þér hvað sjálfur og frábært lið af forriturum í Behance (Adobe) hafa unnið á þessu síðasta ári.

Markaðssíða Adobe Portfolio

Hvað er Adobe Portfolio?

Í grundvallaratriðum er það vara sem gerir þér kleift að fljótt og einfaldlega búa til vefsíðu til að sýna fram á verkið og aðlaga það að þörfum þínum og þörfum þínum. Það er ekki nýtt hugtak, það eru heilmikið af vörum þarna úti sem gera það bara. En Portfolio hefur nokkur lykilmunur:

• Það er hannað sérstaklega fyrir auglýsingar til að sýna fram á eigu sína. Það þýðir að það gerir það sem þú þarft að gera, einfaldlega og fljótt.
• Það er ókeypis með öllum Adobe Creative Cloud áætlunum.
• Þú getur fengið aðgang að bókasafni hvers typekit með letri, til að nota á vefsíðunni þinni.

Portfolio syncs með Behance.

Það sem gerir Portfolio mest einstakt er að það samræmist Behance. Hugmyndin er sú að þú býrð til fallega sérsniðna vefsíðu með Portfolio og samstilla verkefnin þín í Behance prófílnum þínum. Þar getur þú fengið ómetanleg áhrif á vinnuna þína á skapandi vettvangi sem notuð eru af milljónum auglýsinga og fólk sem leitar að auglýsingum! En þú þarft ekki að nota Behance ef þú vilt ekki - þú getur notað Portfolio á eigin spýtur og valið að ekki samstilla við Behance. Valið er þitt.

Ljósmyndun Matthias Heiderich - eins og sést á Portfolio og Behance

Móttækileg útlit.

Eins og allir website byggir, þú þarft upphafspunkt. Þannig að eitt af þeim mörgu hlutum sem við þurftum að hanna voru skipulag sem var sérstaklega ætlað til að sýna skapandi vinnu, til að starfa sem grunnur að þú getir auðveldlega aðlaga og byggja upp með verkefnum.

Skipulagin miðar að því að ná ýmsum stílum til að henta mismunandi skapandi sviðum. Þeir geta annaðhvort verið notaðir sem lausnir til að fljótt byggja upp verkefnin og birta vefsíðu (í mínútum), eða nota eiginleika ritstjóra til að breyta uppbyggingu og útliti sem henta þínum stíl.

Auðveldlega aðlaga sama skipulag til að líta mjög öðruvísi út. Ljósmyndir með Bryce Johnson

Hér fyrir neðan eru skipulag sem við erum að hefja með. Upphafleg skipulag (fyrir almenna beta og vöruframleiðslu) eru mjög einföld, með áherslu á verkefnaskil, gallerí og verkefni. Afurðin mun auðvitað vaxa til að bjóða upp á fleiri eiginleika eins og fullskyggniskápa, HTML og CSS-útgáfa, blogg samþættingu osfrv. Í tíma. Og eins og lögunin stækkar, þá mun einnig fjölbreytni og fjöldi skipta sem á að velja frá sem upphafspunkt.

Layouts og auglýsingarnar sem þeir eru nefndir eftir: Lina , Sag , Matthias , Juco , Mercedes og Thomas

Við kusuðum að nefna skipulag eftir auglýsingabækur Behance . Við styttu upp auglýsingabirtingar sem léku sér vel í tilteknu skipulagi og að sjálfsögðu var líka sjónrænt töfrandi.

Ég ætti að segja að þessi uppsetning væri ein af síðustu hlutum sem á að hanna (fyrir beta), en ég leiði með þeim vegna þessarar greinar til að kynna þér hvað vöran gerir eða að minnsta kosti "endaprodukt".

Ritstjóri.

Varan (sjálft) verður að gera notandanum kleift að breyta vefsíðu sinni á fljótlegan og einfaldan hátt með því að nota eina af skipunum hér að ofan sem upphafspunkt. The UI er mjög lágmarks - það gerist út af the vegur og leyfa þér að leggja áherslu á hönnun vefsvæðis þíns. Allar breytingar sem þú gerir gerast lifa í ritlinum.

Það hljómar svolítið corny, en ég hafði þrjú atriði í huga þegar ég hannaði allt frá vörumerkinu, markaðssvæðinu og sérstaklega ritstjóri:

Það ætti að veita notandanum kleift að:

• Breyttu öllu sem þú getur séð.
• Stjórna og bæta við efni.
• Móttækilega forskoða heimasíðu þeirra.
• Birta og uppfæra lifandi vefsíðu.

Hér að neðan eru margvíslegar breytingarstillingar frá vörunni (ritstjóri):

Ýmsir skjáir frá ritstjóra. Ljósmyndir með Chris Burkard og hönnun af Andrew Couldwell

Hlutverk vöruhönnuðar.

Eigin hlutverk mitt sem hönnuður á verðbréfaviðskiptum hefur breyst nokkuð verulega á árinu, frá hugmynd til að hefja. Eins og stafræn vara framfarir, þá líka hlutverk þitt sem vöruhönnuður. Svo að fara aftur í byrjun:

ProSite.

Portfolio er í raun þróun núverandi Behance vöru (verið eftirlaun) sem heitir ProSite. Það er 5 ára gamall, svo það var mikið sem við gætum lært af þessari vöru: hvað vann vel? Hvað gerði það ekki?

Behance Network.

Einnig, það sem við höfum lært um skapandi samfélagið og sýningarskápur í vinnunni, með því að hanna, curate (og nota!) Behance Network er ómetanlegt í að skilja hvernig á að byggja vöru eins og Portfolio.

Svo ég eyddi miklum tíma í að gleypa alla þessa þekkingu sem Behance hafði keypt í gegnum árin og einnig að læra fyrstu hönnun sína fyrir þróun ProSite. Spyrja spurningar. Gerðu athugasemdir. Skissa hugmyndir.

The Behance Network, og ProSite

Ég byrjar alltaf með blýanti og sketchbook.

Ritun og skissa hjálpa mér í raun að einblína og hugmyndir flæða þaðan. Stundum skrifar ég einfaldlega orð sem ég tengi við vöruna, eða listi hvað það þarf að gera, bara til að fá það út úr höfðinu. Það hjálpar til við að hreinsa hugann og einblína á það sem skiptir máli.

Þessi skissuleikur vinnur að sjálfsögðu út í skýringarmyndir. Stundum skrifa ég eiginleikann, eða smá smáatriði í smáatriðum, eða nýja nálgun við HÍ alveg. Það er fljótleg leið að eingöngu og einfaldlega bara að hanna og kanna hugmyndir. Kannski mikilvægast er að þú verður ekki afvegaleiddur með fullkomnun pixla, letur, lit, net, leiðsögumenn osfrv. Eins og þú gerir meðan þú notar tölvuforrit.

Það er alltaf punktur þegar þú veist að þú átt nóg til að taka þetta skref lengra og byrja að flesh out þessar hugmyndir. Í fortíðinni hef ég notað Adobe Illustrator eða Omnigraffle fyrir þetta, til wireframe. En tíminn var fastur á þessu verkefni, þannig að ég fór beint í Photoshop.

Hér að neðan eru nokkrar skannar frá skissabókinni minni. Sumir tengjast vöru (ritstjóri), sumir á markaðssvæðinu og vörumerki:

Nokkrar skannar frá skissabókinni minni

Áhugavert mynd til að benda á hér að ofan er síðasta (neðst til hægri). Þú sérð að skissan mín er nálægt því sem ég hugsaði að lokum.

Hugsun og frumgerð.

Öll þessi hugmyndir og hönnun eru upplýst og þróuð með því að hugleiða, frumrita og ræða við liðið. Það er gott að spjalla í gegnum hugmyndir við aðra hönnuði og forritara og jafnvel markhópinn þegar mögulegt er. Til dæmis: Einn sérstakur hugmynd kom frá mér að ræða snemma (vara) hönnun með MFA Illustrative student at SVA . A ferskt sjónarhorn hjálpar alltaf, sérstaklega fyrir vöru af þessu flóknu.

Við vorum að vinna að nokkuð miklum tímaáætlunum um þetta verkefni. Það var einfaldlega ekki tími til að byggja upp flóknar frumgerðir. En það sem ég gerði var að búa til röð af PDF walkthroughs með Layer Comps í Photoshop, sem sýnir að músarbendillinn hreyfist um skjáinn og sýnir alla samskipti, eiginleika og notendaflæði innan vörunnar. Þetta gerði verktaki (og aðrir hagsmunaaðilar) gagnrýninn og / eða skilur alla virkni og notandaflæði - svo þeir vissu hvað var að byggja og einnig bent á hugsanlega galla í UI / UX, áður en þau voru byggð og prófuð.

Hér að neðan er (myndband af) eitt dæmi um þessar PDF walkthroughs:

Frumgerð / gangur sem sýnir alþjóðlega customization í verkefnisstjóranum

Nánar í hönnun.

Einfaldlega sett: Taktu giska á það fyrir forritara. Liðið þitt þarf að skilja hvað þarf að byggja. Það er ekki starf þeirra að fylla út í blanks, gera það móttækilegt eða giska á hvað gerist í hvaða atburði sem er. Ég get ekki overstate þetta nóg - ég hef upplifað svo marga hönnuði að hanna og íhuga 20% af vöru og ekki að hugsa um það.

Til viðbótar við walkthroughs, notandi flæði og frumgerðartegundir sem ég talaði um áður, vil ég líka búa til nákvæmar forskriftir fyrir alla UI hluti, eiginleika og vörumerki. Mér finnst þetta mikilvægt þegar þú ert með stórt lið, þannig að allir eru á sömu síðu, með einum miðpunkti (s) til viðmiðunar. The sérstakur miðar að því að ná til allra atburða, frá rollover ríkjum, til villur, virkir / óvirkar ríki osfrv. ... og einnig ná yfir px gildi og mál (ég fer jafnvel eins langt og að meðaltali CSS).

Því fleiri smáatriði sem þú tekur með í hönnun þinni, þeim mun minni spurningum sem verktaki mun hafa og því minni tíma sem þú munt eyða því að stjórna byggingu. Þannig getur þú einbeitt þér að því að hanna, prófa og bæta vöruna.

Einnig er gott að taka tíma til að búa til þessar "UI pökkum", það er auðveldara að uppfæra vöruna (hönnun) í framtíðinni. Það er engin þörf á að uppfæra hundruð mockups, þú uppfærir bara forskriftina.

Hér að neðan eru nokkur dæmi um þessar styleguides og sérstakar:

Markaðssetning og vörumerki.

Mánuðir í dag, með vörunni (ritstjóri) hannað og byggð, reyndi ég að vekja athygli mína á markaðssetningu, um borð og vörumerki. Hvað er þetta vara? Hvernig byrjarðu að nota það? Það þurfti rödd. Auðkenni.

Nafnið.

Þegar ég gekk til liðs við Behance var þetta verkefni nokkuð grínlaust kallað "Prosite 2.0" innbyrðis. ProSite vöran þjónaði tíma sínum, en eftirmaður hennar hafði vaxið í annað dýrið. Að auki tengsl þeirra við Behance voru þær mjög mismunandi vörur og höfðu ekki 1: 1 fylgni. Þetta var ekki endurgerð / hleypt af stokkunum. Við vorum að byggja upp spennandi nýr vara frá grunni og hætta ProSite. Það var mikilvægt að flytja - og það byrjar með nafninu.

Ég fór aftur í skissahandbókina mína og fór í gegnum orðafélagsþjálfun með því að skrifa niður allt þetta vöru gerði og einnig hvaða tungumál hvert svipað vara á markaðnum var að nota. Hin náttúrulega framfarir allra þessara héldu áfram að koma aftur til "Portfolio". Svo eftir nokkra hugsun, gerði ég: "Af hverju ekki?" - það gerir nákvæmlega það sem það segir á tini. Það er vefsíðahöfundur / ritstjóri sem hannað er sérstaklega til að búa til eigu. Einfaldleiki og djörfungur nafnsins gekk vel í hönnun og gildi vörunnar. Og svo kallaðum við það 'Portfolio', sem varð fljótlega 'Adobe Portfolio' til þess að passa við vörupakka Adobe.

Markaðsfréttir heimasíðuna með mynd af Tanya Timal

Vörumerkið.

Portfolio mjög mikið hefur eigin sjálfsmynd og persónuleika. Portfolio er ekki sameiginlegur vara (svo að segja). Það er hvítt merki. Það er þitt, að gera þitt eigið. Það er vingjarnlegt, einfalt og aðgengilegt. Vörumerki, markaðssvæði, um borð, auglýsingatextahöfundur og skilaboð í gegnum (vöru) notendavandann reynir öll að flytja þetta með því að nota tungumálið, leturfræði, rist, myndefni og liti.

Aðrar aðstæður eru léttar skilaboð og gamansamur myndmál. Verkefnis mynd af Dua - Alexander Esslinger

Móttækileg hönnun.

Fara aftur til fyrri liðar míns um smáatriði í hönnun: Vefhönnun, rétt eins og vöruhönnun, ætti að hafa sömu athygli í smáatriðum. Í þessu tilfelli er það auðvitað mikilvægt að markaðssetrið sé móttækilegt, en það er ekki forrit verktaki að reikna út hvernig vefsvæði bregst við mismunandi skjástærð.

Hér fyrir neðan eru nokkur dæmi um móttækileg hönnun, afhent verktaki til að byggja upp myportfolio.com :

Móttækileg hönnun á markaðssvæðinu, sem sýnir snemma útgáfu af vörumerkinu

Skoða a ítarlega rannsókn á markaðssvæðinu hér

Móttækileg hönnun fyrir nokkra af skipulagi, sem nær yfir mismunandi aðstæður

Skoða a heildarrannsókn á útliti hér

Notandi prófun.

Stafræn vara ætti að þróast til að henta fólki sem notar það, sem gerir grein fyrir hegðun notenda, til að veita bestu notendavara. Helst munu vörur fara í gegnum alfa / beta áfanga (takmörkuð útgáfur) áður en þau byrja að allir. Við gerðum þetta með Portfolio. Þetta hjálpaði okkur að illgresi út mál, læra hvort UI / UX 'virkaði' og fengu raunverulegan notendaviðbrögð með það fyrir augum að bæta vöruna. Það er best að prófa, læra og betrumbæta með takmörkuðum notendahópi en að ráðast á þúsundir / milljónir manna og uppgötva vandamál þegar það er of seint.

Próf. Læra. Endurskoða. Endurtaka.

Þetta er mikilvægt í vöruhönnun. Þú lærir svo mikið af fólki sem notar vöruna.

Þú verður undrandi hvað þú uppgötvar:

... Fólk notar ekki alltaf vöru sem þú átt von á að þeir myndu!

• Þú lærir,
• Þú bætir,
• Þú endurtekur á vörunni,
• Þú heldur áfram að prófa,
• Og endurtaka þetta ferli.

Og heiðarlega, stundum líður það lítið svona:

... En vöran verður betri fyrir það.

Að lokum.

Ef ég væri að taka eitthvað í burtu frá þessu væri það:

Hægðu á þér.

Fá innblástur. Skildu áhorfendur þína. Gerðu athugasemdir. Skýringarmyndir.

Hugtak.

Vinna með liðið þitt. Kynntu þér hugmyndir. Hugsaðu um það.

Nánar í hönnun.

Einhver (annars) þarf að byggja það sem þú hanna.

Prófaðu og bæta.

Virkar það? Hvernig er hægt að bæta það? Það er alltaf hægt að bæta það.

Læra.

Alltaf. Sérhver reynsla í hönnun er góð námsefni.

[- Þessi grein var upphaflega birt á Medium.com , endurgefin með leyfi höfundarins -]

• ← Uber endurnýjar nýtt vörumerki
• Hönnun frídaga →