Navrhování portfolia Adobe

V listopadu roku 2015 jsem udělal malou řeč Škola výtvarného umění (SVA) v New Yorku o návrhu portfolia Adobe a návrhu produktu. Můžeš sledovat tuhle rozpravu . Původně jsem napsal tento článek v přípravě na rozhovor, ale od té doby jsem ho rozšířil a publikoval zde. Cílem je představit produkt, sdílet vhled do procesu návrhu, skenovat z mého skicáře a některé specifikace / návrhy ze zákulisí. Doufám, že to bude zajímavé.

Nějaký intro.

Ahoj, já jsem Andrew . Jsem vedoucí produktový designér a kreativní ředitel společnosti Adobe Portfolio . Budu se s vámi podělit o to, co já a skvělý tým vývojářů ve společnosti Behance (Adobe) pracuji v uplynulém roce.

Portál marketingového portálu společnosti Adobe

Co je Adobe Portfolio?

V podstatě je to produkt, který vám umožňuje rychle a jednoduše vytvořit webové stránky, které předvedou vaši práci a přizpůsobíte ji tak, aby vyhovovaly vašemu stylu a potřebám. Není to nový koncept, tam jsou desítky produktů, které dělají právě to. Portfolio však má některé klíčové rozdíly:

• Je navržen speciálně pro kreativy, které prezentují své portfolio. To znamená, že dělá to, co potřebujete, jednoduše a rychle.
• Je to ZDARMA se všemi plány aplikace Adobe Creative Cloud.
• Můžete získat přístup ke všem knihovnám typů fontu Typekit, které můžete používat na svých webových stránkách.

Portfolio se synchronizuje s Behance.

Věc, která dělá Portfolio nejvíce jedinečnou, je to, že se synchronizuje s Behance. Myšlenka je, že vytvoříte krásné vlastní webové stránky s portfoliem a synchronizujete své projekty s profilem Behance. Tam můžete získat neocenitelnou expozici pro vaši práci na kreativní platformě, kterou používají miliony kreativ a lidé , kteří vyhledávají kreativy! Ale nemusíte Behance používat, pokud nechcete - můžete používat Portfolio samostatně a rozhodnete se, že se Behance nesynchronizuje. Volba je na tobě.

Fotografování Matthiase Heidericha - jak je vidět Portfolio a Behance

Odpovědné rozvržení.

Jako každý tvůrce webových stránek potřebujete výchozí bod. Jedním z mnoha věcí, které jsme potřebovali navrhnout, byly tedy návrhy zaměřené speciálně na prezentaci tvůrčí práce, aby fungovaly jako nadace, kterou můžete snadno přizpůsobit a osídlit projekty.

Cílem rozvržení je pokrýt různé styly, které vyhovují různým kreativním oblastem. Mohou být použity jako řešení, které vám umožní rychle obsadit vaše projekty a publikovat webové stránky (v několika minutách), nebo použít funkce editoru ke změně struktury a vzhledu tak, aby odpovídaly vašemu stylu.

Snadné přizpůsobení stejného rozvržení vypadá velmi odlišně. S fotografováním Bryce Johnsonová

Níže jsou rozvržení, se kterými začínáme. Počáteční rozložení (pro veřejnou beta verzi a spuštění produktu) jsou velmi jednoduché a zaměřují se na kryty projektů, galerie a projekty. Produkt samozřejmě bude nabízet další funkce, jako jsou celoobrazovkové kryty, úpravy HTML a CSS, integrace blogů atd. ... včas. A jak se funkce rozšiřují, tak i rozmanitost a počet rozložení, z nichž si můžete zvolit jako výchozí bod.

Rozvržení a kreativy, které jsou pojmenovány po: Lina , Piliny , Matthias , Juco , Mercedes a Thomas

Rozhodli jsme se pojmenovat rozvržení po kreativích Behance . Uvedli jsme krátké kreativy, jejichž dílo se propůjčilo konkrétnímu uspořádání a samozřejmě bylo také vizuálně úžasné.

Měl bych říci, že tyto rozvržení byly jednou z posledních věcí, které mají být navrženy (před beta), ale vedu s nimi v zájmu tohoto článku, abych vás seznámil s tím, co produkt dělá, nebo přinejmenším jeho "konečný výrobek".

Editor.

Samotný produkt musí uživateli umožnit rychle a jednoduše upravit své webové stránky, přičemž jako výchozí bod použije některý z výše uvedených rozložení. Rozhraní uživatelského rozhraní je velmi minimální - vyčerpá to a umožňuje vám zaměřit se na návrh vašeho webu. Všechny změny, které se stanete, se stanou živými v editoru.

Zní to trochu horko, ale mám na mysli tři věci, když navrhuji vše od značky, od marketingového místa a zvláště od editora:

Mělo by uživateli umožnit:

• Snadno upravte vše, co vidí.
• Správa a přidávání obsahu.
• Sledujte jejich webové stránky.
• Publikujte a aktualizujte živé webové stránky.

Níže naleznete řadu scénářů úprav z produktu (editoru):

Různé obrazovky z editoru. S fotografováním Chris Burkard a design by Andrew Couldwell

Role návrháře produktu.

Moje vlastní role jako návrhářka na portfoliu se během roku dramaticky změnila, od konceptu po start. Jak postupuje digitální produkt, tak i vaše role jako konstruktér produktů. Takže se vrátit na začátek:

ProSite.

Portfolio je vlastně vývoj stávajícího produktu Behance (který je v důchodu) nazvaný ProSite. Je to 5 let, takže jsme z toho produktu mohli hodně naučit: Co fungovalo dobře? Co ne?

Behance Network.

Také to, co jsme se dozvěděli o kreativní komunitě a představovali práci, a to prostřednictvím navrhování, vyčištění (a použití!) Behance Network je neocenitelné při pochopení, jak vytvořit produkt jako Portfolio.

Tak jsem strávil spoustu času pohlcováním všech vědomostí, které Behance v průběhu let získala, a také studoval jejich počáteční návrhy na vývoj ProSite. Kladení otázek. Vytváření poznámek. Skicování nápadů.

Behance Network a ProSite

Vždycky začínám s tužkou a skicářem.

Psaní a skicování mi opravdu pomáhá soustředit se a odtud plynou nápady. Někdy prostě píšu slova, která se s výrobkem spojuji, nebo seznam toho, co potřebuje, jen abych to dostal z mé hlavy. Pomáhá rozptýlit mysl a soustředit se na to, co je důležité.

Tento sketchbook pracuje přirozeně a vyvíjí se do uživatelských skic. Někdy načrtám nějaký rys, malý detail uživatelského rozhraní nebo zcela nový přístup k uživatelskému rozhraní. Je to rychlý způsob, jak čistě a jednoduše navrhnout a prozkoumat myšlenky. Možná nejdůležitější je, že se vám nedaří rozptýlit pixelová dokonalost, písma, barvy, mřížky, průvodci atd. ... jako vy při používání počítačového softwaru.

Vždy existuje věc, když víte, že máte dost na to, abyste si tento krok udělali dál a skutečně začali tyto nápady rozvíjet. V minulosti jsem pro tento účel použil Adobe Illustrator nebo Omnigraffle, na wireframe. Na tento projekt ale byl čas, takže jsem šel rovnou do Photoshopu.

Níže jsou některé skenování z mého skicáře. Některé se vztahují k produktu (editoru), některé k marketingu a značce:

Několik skenů z mého skicáře

Zajímavý obrázek, který je uveden výše, je poslední (vpravo dole). Vidíte, že moje skica je blízká tomu, co jsem nakonec navrhl.

Koncepce a prototypování.

Všechny tyto nápady a návrhy jsou informovány a vyvíjeny koncepcí, prototypováním a diskusí s týmem. Je dobré, když si můžete chatovat s nápady s dalšími designéry a vývojáři, a dokonce i s cílovým publikem, pokud je to možné. Například: Jedna konkrétní myšlenka přišla od mě diskutovat o brzkém (produkt) design s ilustrační student MFA na SVA . Nová perspektiva vždy pomáhá, zvláště pro produkt této složitosti.

Pracovali jsme na velmi intenzivním časovém rámci tohoto projektu. Jednoduše nebylo čas stavět nějaké složité prototypy. Ale to, co jsem udělal, bylo vytvořit řadu průchodů PDF pomocí vrstvových kompilátorů ve Photoshopu, ukazujících pohyb kurzoru myši po obrazovce, což demonstruje všechny interakce, funkce a uživatelský tok v produktu. To umožnilo vývojářům (a dalším zúčastněným stranám) kritizovat a / nebo porozumět všem funkcím a uživatelskému toku - takže věděli, co se má postavit, a také identifikovat případné chyby v UI / UX před sestavením a testováním.

Níže je (video) jeden příklad těchto návodů PDF:

Prototyp / průzkum zobrazující globální přizpůsobení v editoru projektu

Detailní návrh.

Jednoduše řečeno: Vezměte si z toho hádku pro vývojáře. Váš tým musí pochopit, co musí být vybudováno. Není jejich úkolem vyplňovat polotovary, reagovat na ně, nebo hádat, co se děje v daném scénáři. Nemohu to přehnaně překonat - zažil jsem tolik návrhářů, kteří navrhli a zvažovali 20% výrobku, a nemysleli si to.

Kromě návodů, uživatelských toků a prototypů, o kterých jsem hovořil dříve, také chci vytvořit detailní specifikace všech komponent, funkcí a značky UI. Cítím, že to jsou důležité, když máte velký tým, takže všichni jsou na stejné stránce s jedním referenčním centrem. Cílem specifikací je pokrýt všechny scénáře, od stavů převrácení až po chyby, aktivní / neaktivní stavy atd. ... a také pokrývat hodnoty a rozměry px (dokonce i tak, aby obsahovaly základní CSS).

Čím více detailů zahrnout do svých návrhů, tím méně budou mít vývojáři otázky a tím méně času strávíte při správě sestav. Můžete se tedy soustředit na návrh, testování a vylepšení produktu.

Také je hezké, když jste si udělali čas na vytvoření těchto "UI sad", je, že je snadnější aktualizovat produkt (design) v budoucnu. Není třeba aktualizovat stovky modelů, stačí aktualizovat specifikace.

Níže uvádíme několik příkladů těchto stylů a specifikací:

Marketing a značka.

Za měsíce, kdy byl výrobek (editor) navržen a postavený, znovu jsem se soustředil na marketing, na palubu a na značku. Co je to produkt? Jak začít používat? Potřeboval hlas. Identita.

Název.

Když jsem se poprvé připojil k Behance, tento projekt byl poněkud žertovně nazýván "Prosite 2.0" interně. Produkt ProSite sloužil svůj čas, ale jeho nástupce se rozrostl do jiné šelmy. Kromě jejich spojení s Behance, byly to velmi odlišné produkty a neměly korekci 1: 1. Toto nebylo re-design / start. Budovali jsme nový vzrušující nový produkt od základů a ProSite. To bylo důležité vyslovit - a to začíná názvem.

Vrátil jsem se do mého skicáře a prošel slovní asociační cvičení, v níž napsal všechno, co tento produkt dělal, a jaký jazyk používal každý podobný produkt na trhu. Přirozený vývoj všech těchto věcí se vrací zpět do portfolia. Takže po několika úvahách jsem dospěl k závěru: "Proč ne ?!" - dělá přesně to, co říká na plechovce. Je to webový tvůrce / editor navržený speciálně pro vytváření portfolia. Jednoduchost a odvážnost jména se vzala dobře s konstrukcí a hodnotami produktu. A tak jsme ji nazvali "Portfolio", které se brzy stalo "Adobe Portfolio", aby vyhovovalo sadu produktů Adobe.

Domovská stránka marketingového serveru s fotografií Tanya Timalová

Značka.

Portfolio má svou vlastní identitu a osobnost. Portfolio není korporátní produkt (tak mluvit). Je to bílý štítek. Je to vaše, aby se vaše vlastní. Je přátelský, jednoduchý a přístupný. Značka, marketingová stránka, onboarding, copywriting a zasílání zpráv v rámci celého uživatelského zážitku (produktu) se všichni pokoušejí předat toto prostřednictvím používaného jazyka, typografie, mřížky, snímků a barev.

Jiné scénáře zahrnují bezstarostné zasílání zpráv a humorné snímky. Projektová fotografie od dua - Alexander Esslinger

Odpovědný design.

Vrátit se k mému staršímu bodu o detailech v designu: Webový design, stejně jako design produktu, by měl mít stejnou pozornost na detail. V tomto případě je samozřejmě důležité, aby marketingové stránky reagovaly, ale není to úkolem vývojářů, aby zjistili, jak webové stránky reagují při různých velikostech obrazovky.

Níže uvádíme několik příkladů reagujících návrhů, které vývojáři dodali myportfolio.com :

Odpovědné návrhy pro marketingové stránky, které ukazují počáteční verzi identity značky

Zobrazit a kompletní případová studie marketingového místa zde

Odpovídající návrhy pro několik rozložení, které pokrývají různé scénáře

Zobrazit a kompletní případová studie rozvržení zde

Testování uživatelů.

Digitální produkt by se měl vyvíjet tak, aby vyhovoval lidem, kteří ho používají, přičemž se zohledňuje chování uživatelů a poskytuje tak nejlepší uživatelskou zkušenost. V ideálním případě budou produkty procházet alfa / beta fází (omezené verze) předtím, než budou spouštěny všem. Udělali jsme to s portfoliem. To nám pomohlo vyřešit problémy, zjistit, zda UI / UX "pracoval" a získávat skutečnou zpětnou vazbu uživatelů s úmyslem zlepšit produkt. Nejlepší je vyzkoušet, učit se a upřesnit s omezenou skupinou uživatelů, než spustit tisíce / miliony lidí a zjistit problémy, když je příliš pozdě.

Test. Učit se. Revidovat. Opakovat.

To je důležité při návrhu výrobku. Naučíte se tolik od lidí, kteří produkt používají.

Budete ohromeni, co objevíte:

... Lidé nepoužívají vždy výrobek, jak jste předpokládali!

• Naučíte,
• Vylepšíte,
• Můžete iterovat na produkt,
• Pokračujete v testování,
• A opakujte tento proces.

A upřímně řečeno, někdy to připadá trochu takhle:

... Ale výrobek bude lepší pro to.

Na závěr.

Kdybych si vzal něco, tak by to bylo:

Zpomal.

Být inspirován. Pochopte své publikum. Dělat si poznámky. Navrhněte nápady.

Pojem.

Spolupracujte se svým týmem. Prozkoumejte nápady. Zamyslete se nad tím.

Detailní návrh.

Někdo (jiný) potřebuje vytvořit to, co navrhujete.

Zkoušejte a vylepšujte.

Funguje to? Jak lze zlepšit? Může být vždy vylepšena.

Učit se.

Vždy. Každá zkušenost v designu je dobrá zkušenost s učením.

[- Tento článek byl původně odeslán na Medium.com , znovu publikováno s povolením autora -]

• ← Uber relaunches s novou identitou značky
• Navrhování svátků →