Při práci na nové digitální identitě Raiffeisenbank ve Vídni jsme společně s pobočkami v jiných zemích vyvinuli nový styl ikon. Bylo nutné ji podporovat a aktualizovat aktuální sadu přidáním nových metafor. Sdílím své zkušenosti s tím, jak budovat nejproduktivnější práci s designéry a usnadnit týmům a vývojářům proces zavádění nových ikon.
Nová sada více než 500 ikon se tedy vizuálně stala lehčí a jednodušší, počet teček a složitých ikon se snížil. Výrazně jsme jej rozšířili ve srovnání s tím současným, zohlednili jsme potřeby všech týmů, přepracovali jsme řadu metafor a co nejvíce jsme připravili infrastrukturu pro pohodlnou práci s ikonami.
Mnoho týmů v bankovní práce na Scrumu, zejména těch, kteří vyvíjejí digitální produkty a služby. Scrum má řadu výhod a nevýhod, pokud jde o implementaci společných standardů. Udělat něco pro celou banku není pro naši designérskou komunitu největším problémem, mnohem obtížnější je fáze implementace. Každý má své vlastní cíle a priority, a aby byla řešení, která jsou vyvíjena na úrovni celé banky, implementována jednoduše a snadno, musíte jednat určitým způsobem.
Aby týmy co nejjednodušší začaly používat novou sadu ikon, integrovali jsme ji do obecného úložiště návrhového systému, popsali jsme proces změny a vytváření nových ikon, připravili jsme podrobného průvodce, popsali principy konstrukce a zapojil všechny ambasadory a zákazníky ikon na samém začátku projektu, aby se v budoucnu snížilo riziko odmítnutí. Návrháři se podíleli na implementaci nových ikon, poskytli užitečnou zpětnou vazbu a ve skutečnosti je vytvořili pro sebe a pro sebe. Nejprve ale nejdříve.
Příprava
Jednou z nejdůležitějších fází projektu přepracování ikon je přípravná práce, a pokud bude provedena správně, vše proběhne hladce.
tým
Vytvořili jsme pracovní skupinu, abychom zohlednili hlas každého, komu na tomto projektu záleží, a zajistili, aby byl konečný výsledek přijatelný pro všechny. Zahrnuje „vlastníky“ ikon, zejména produktové designéry z týmů, které ve své práci používají značné množství ikon. Skupina se podílela na výběru nejvhodnějších metafor, pomohla komentovat práci agentury v průběhu celého projektu.
Shromažďování a popis metafor
Pracovní skupina pomohla shromáždit ikony, které byly použity v různých týmech – návrháři přidali své ikony do pracovního souboru v cloudu. Ukázalo se to jako hromada různých metafor a stylistických řešení, při pohledu na které pochopíte, proč je tak důležité vše sjednotit.
Aby bylo plátno stolu pro nás i designéry agentury snadné pochopit, musí být dobře strukturované. Struktura našeho pracovního souboru se ukázala jako pohodlná a vypadala takto:
- Kategorie – umožňuje filtrovat a zobrazovat ikony pouze v dané kategorii a také dává agentuře pochopení, do které kategorie umístit ikony na obr.
- Popis – vysvětluje návrhářům z agentury, v jakém kontextu se ikona používá.
- Název souboru – je žádoucí, aby všechny ikony měly názvy ve stejném formátu. Zvolili jsme jednoduchý styl psaní kebabu: slova jsou psána malými písmeny a pro oddělení se používá pomlčka. Název souboru v pracovním dokumentu se musí shodovat s názvem souboru v aplikaci Figma. Kromě toho můžete dodržovat přísná pravidla pojmenování, například postupovat pouze z kontextu použití ikony nebo pouze z významu metafory. Skončili jsme se symbiózou těchto dvou přístupů.
- Názvy týmů (Raiffeisen-Online (RO), Web …) – do této části vložíme ikony z různé týmy pro srovnání. Sloupec Aktuální balíček je pro existující sadu. Metafora je schválena, není dohodnuta – odráží konečnou metaforu pro agenturu. Je důležité, aby byla definována pouze metafora, nikoli metoda vykreslování.
- 16×16/24×24 – zobrazuje velikosti ikon, které potřebujeme. Zde agentura označila připravenost ikony a uvedla datum dokončení.
< p> Tipy a triky: Pracovní dokument v přípravné fázi lze shromáždit, kdykoli je to vhodné: v Dokumentech Google, na iCloudu. Hlavní věc je, že si tam každý může přidat ikony ze svých projektů.
Stručná informace pro agenturu
Čím více informací ve stručnosti, tím lépe. Podělím se o příklad naší struktury.
Počet ikon
Je lepší vložit trochu více prvků, než je zpočátku potřeba, protože v průběhu práce může být nutné nakreslit několik verzí každé ikony. Kromě toho je užitečné, aby klient a agentura pochopili skutečný objem práce, takže je lepší okamžitě označit, kolik ikon je třeba překreslit pouze v nových průvodcích, a kolik dalších, a přijít s metaforou.
Konstrukční principy
V našem případě jsou co nejjednodušší: všechny čtverce, obdélníky a kruhy jsou nakresleny na dané mřížce; šířka čáry je 2 px; rohy jsou zaoblené, ale konce zůstávají ostré – měkké a ostré tvary se rýmují s logem.
< p> Tipy a triky: Ikony by měly být co nejjednodušší, snadno čitelné, je žádoucí, aby nebyly složité, aby obsahovaly maximálně dva objekty uvnitř a neměly dvojí význam. Neměli byste se snažit vložit do ikony veškerý obsah a význam metafory, jinak to bude nepořádek a nikdo nebude schopen tento význam pochopit.
Určuje se mřížka
a hlavní povolené rozměry pro použití. Používáme dvě velikosti, hlavní je 24×24, další je 16×16. Existuje pouze několik ikon ve velikosti 16×16, většinou šipky, zaškrtnutí a další jednoduché formuláře z kategorií Akce a Navigace.
Tipy a triky: Nemusíte se snažit přizpůsobit vše do mřížky, jinak v určitých skupinách budou mít různé ikony nesprávné rozložení hmotnosti, když se jedna ikona bude zdát menší nebo naopak větší než jiná. Měli jsme výjimky, ale tvořili pouze 10–15% projektu.
Technické požadavky (kontrolní seznam)
Neměli byste se omezovat, seznam by měl být co nejúplnější. Některé příklady z našeho:
-
ikony jsou nakresleny na dané mřížce;
- ikony by měly být pojmenovány podle pracovního dokumentu;
- řádky by měly být slepeny dohromady do jedné cesty;
- ikona na Figmě by měla být hlavním symbolem;
- atd.
Kategorizace
Abychom na konci dostali sadu ikon, se kterými budou designéři a vývojáři rychle a pohodlně pracovat, je nutné předem rozdělit všechny prvky do kategorií. Pokud použijete Figmovo vyhledávání, výrazně to usnadní navigaci ve velkém projektu a zrychlí vaši práci. V našem případě to byla dobrá příležitost aktualizovat náš seznam kategorií. Objevila se tedy kategorie Akce, hlavní pro ikony, které se nejčastěji používají v rozhraních; a šálek kávy se konečně přesunul z kategorie Sport do kategorie Jídlo a restaurace.
Popis procesu
Je lepší definovat vhodný postup pro práci s agenturou od samého začátku. Pohybovali jsme se v iteracích 20–30 ikon. Abychom práci urychlili, vytvořili jsme ve Figmě samostatný soubor pro ikony, kde jsme dali přístup designérům z agentury. Každý snímek je samostatnou kategorií. Pod ikony umístíme značky, aby bylo jasné, o co jde a v jakém kontextu ji lze použít.
Tipy a témata: Je lepší přidat značky nebo popis metafory pod každou ikonu ve Figmě hned, v tomto procesu. Neudělal jsem to, a pak jsem musel strávit nepříjemné množství času označováním 570 prvků.
Proces vytváření
Potřebovali jsme dva chaty: jeden pro komunikaci s projektovým manažerem z agentury, druhý pro pracovní skupinu.
V chatu s agenturou jsme diskutovali o metaforách, iteracích, jejich připravenosti a revizích. Jednou za dva týdny jsme zavolali, abychom provedli úpravy o něco podrobněji a zarovnali je.
Pro naši kreativní agenturu, která se specializuje hlavně na řešení s aktivním uváděním ilustrací, je tato objednávka jedinečná! Zpočátku to bylo děsivé, ale my jsme to neukázali, ale postupem času jsme si zvykli a vytvořili pro nás nový způsob práce na projektu. A tady musím říci, že všechny přípravné práce, které provedli všichni účastníci projektu ze strany zákazníka, hodně pomohly – nikdy jsem se nestretl s takovou ostražitostí při stanovování úkolu na žádném z projektů, kterých bylo docela málo.
Poté, co jsme zjistili všechny nástroje – instruktáž, mřížku, průvodce, pracovní list, pracovní chaty a navrhli jsme optimalizovat něco ve fázi schválení a zákazník s tím souhlasil, rozhodli jsme se provést „trénink“ a vytvořit minimální testovací sada ikon pro testování všech mechanismů. Po testování a diskusi o výsledcích jsme začali pracovat s návrhářem a nabrali jsme správné tempo. Pravidelnost, kontakt a tempo jsou pravděpodobně klíčové faktory tohoto maratonu.
Dmitry
producent projektu, kreativní agentura „Vyuga“
Tipy a triky: Na samém začátku projektu potřebujete být trpěliví, takže jako zprostředkovatel agentur trvá určitou dobu, než si osvojíte pravidla a zásady popsané v příručkách. Buďte připraveni na chyby: zpočátku jsme je měli v každé iteraci asi 50% a počet nesrovnalostí se poté snížil na 20–10%.
V chatu s pracovní skupinou složenou z designérů z různých bankovních týmů jsme volně diskutovali o každé iteraci. Jako projektový manažer z banky jsem z briefingu vyhodnotil komentáře designérů ke kontrolnímu seznamu. Například komentář jako „něco není v pořádku s ikonou“ přeložený do formátu „se nevejde stylisticky“ nebo „není nakreslen na mřížce, ne podle pokynů“ atd.
V naší aplikaci se používá spousta ikon a některé se objevují v různých kontextech. Proto bylo důležité zkontrolovat všechny existující metafory a ujistit se, že po aktualizaci sady budou ikony správně použity všemi týmy banky. Upravili jsme tedy některé vizuály, aby je bylo možné použít ve všech produktech a rozhraních. Již jsme aktualizovali všechny ikony v UI Kit a nyní kontrolujeme, zda nová sada pokrývá všechny potřeby.
Olga Struzberg, hlavní návrhářka UX, Raiffeisenbank
Shromáždil jsem všechny komentáře ke každé ikoně v Notionu – velmi pohodlná služba pro tento druh poznámek. A aby se kluci z agentury snadněji orientovali, vložil jsem do názvu souboru datum a roztřídil ikony.
< blockquote class = "block- incut block-incut - left block-incut - text-small">
Tipy a triky: V procesu by nemělo být příliš mnoho komunikace. Po nakreslení všech ikon jsem se rozhodl znovu se na ně kriticky podívat s designéry banky a uskutečňovat hovory jednou týdně. O každé z 500 (!) Ikon jsme mohli diskutovat po dobu 20 minut a velmi brzy jsem si uvědomil, že pokud budeme pokračovat ve stejném duchu, projekt se bude táhnout několik měsíců. Abych ušetřil čas, rozhodl jsem se vyhodnotit výsledek sám a po vydání řešit lokální problémy s každou ikonou zvlášť.
Implementace
Aby připravená sada nespadla na hlavy designérů jako sníh na hlavách, pozval jsem všechny na uvolňovací schůzku, řekl jsem o provedené práci a odpověděl na otázky a poté jsem poslal prezentaci s nezbytnými odkazy a pokyny. V této fázi ještě nebyly ikony zavedeny do návrhového systému, ale byly zcela připraveny k testování na úrovni návrhového rozložení.
Nejdůležitějším problémem je samozřejmě proces aktualizace. Existují dvě možnosti: aktualizovat aktuální sadu najednou nebo dát nové a staré sadě nějaký čas, aby „žily“ společně, dokud všichni přepnou na novou. V prvním případě budou všechny ikony v projektech automaticky nahrazeny po potvrzení, zatímco existuje riziko, že například v procesu odletí barvy a padne na nás další práce – musíme ručně nahradit více než 500 aktuální ikony s novými. V druhém případě se můžete dostat s trochou krve – každý návrhář ve svém projektu obsahuje nový soubor a nahrazuje ikony novými verzemi, také ručně, ale pouze svou část a postupně.
Ve výsledku jsme zvolili druhou možnost, kde ponecháme aktuální sadu jak v kódu, tak v designu, necháme jí nějaký čas na migraci a poté ji archivujeme .
Popis procesu vytváření a změny ikon
Nová sada se může změnit a je velmi důležité jasně definovat, jak mohou návrháři v budoucnu přidávat nebo měnit ikony v pracovním souboru. Tento proces jsme popsali ve Figmě a je podobný tomu, jak se vývojáři dívají na závazky kolegů před odesláním všeho pánovi: nejméně dva návrháři a jeden odborník z týmu značky banky musí každou novou ikonu zkontrolovat a schválit.
Souhrnný soubor pro vývojáře
Pokud již máte sadu ikon integrovanou do návrhového systému, musíte připravit souhrnný soubor pro vývojáře s korelovanými novými a starými názvy souborů, kategoriemi a dalšími. To vývojářům usnadní zjistit, která ikona se změní.
Tipy a triky: Chcete-li rychle najít ikonu na portálu návrhového systému, musíte určit značky v kontingenční tabulce.
S přenosem ikon do vývoje nešlo všechno bez problémů. Ukázalo se, že je možné výrazně zjednodušit práci alespoň vývojářům. Líbil se mi nápad, který navrhl front-endový vývojový tým designu: neshromažďujeme korespondenční tabulku, ale vytváříme složku, kde bude umístěna nová a stará ikona, takže stará nebo nová ikona má konkrétní předponu například „nový“ … Umístěte konfiguraci do stejné složky, ve které popisujeme aktuální název a kategorii ikony, nový název a kategorii a také značky, které pomohou najít ikonu na webu návrhového systému.
Pak to vše spouští skript, který na výstupu dává takzvaný „migrační plán“, to znamená, že porovnává nové a staré ikony a zároveň vytvoří soubor pro mapování ikony a značek. Dále je spuštěn Codemode, který na základě tohoto migračního plánu opraví kód, kde jsou použity ikony.
Ale to jsme neudělali, protože na sestavování stolů ve Figmě už bylo hodně práce. Situaci dále zhoršila skutečnost, že tabulky Figma byly rozloženy pomocí automatického rozvržení a nebylo možné zkopírovat obsah každého sloupce samostatně, což by také mohlo zjednodušit proces přenosu pro vývoj. Aby nebylo možné tabulku znovu sestavit v jiném editoru, musel jsem hledat plugin, který by dokázal uvolnit obsah sloupců z Figmy v textové podobě. Podařilo se nám provést tak malou optimalizaci, abychom nějakým způsobem zjednodušili práci vývojářů.
„Aby ikony vpředu správně vstoupily do naší knihovny, začali jsme na Figmě sestavovat srovnávací tabulku.“ Když už byla významná část práce hotová, setkali jsme se s front-endovými vývojáři na konkrétní implementaci a ukázalo se, že deska Figma není příliš vhodná pro uvolnění do kódu. Pro správnou aktualizaci kluci navrhli napsat skript, který by pomohl spojit ikony a jejich jména dohromady, ale protože jsme již strávili několik týdnů sestavováním souhrnných tabulek pro každou kategorii, rozhodli jsme se je nahrát v textové podobě do samostatného souboru, a příště zkuste scénář … 😅 Udělali jsme závěry a znovu jsme si všimli potřeby synchronizace v každé z fází “
Viktoria Dubrovskaya
Vedoucí vývojových platforem Development Core Foundation Mobile and Frontend
Implementace prostřednictvím návrhového systému
Když je souhrnný soubor připraven, tým návrhového systému může začít aktualizovat sadu ikon. Každý tým je pak může bez problémů použít ve svých projektech.
Spolu s agenturou jsme v krátké době nakreslili 570 ikon. Staly se vizuálně lehčí a jednodušší. A díky zapojení všech návrhářů do práce jsme neměli žádné problémy s další integrací nové sady.
Projekt aktualizace ikon se stal jedním z kroků k vyřešení velkého a složitého úkolu – sjednotit značku na všech webech kombinací pokynů pro rozhraní a marketingovou komunikaci. Je před námi ještě mnoho výzev, o kterých určitě napíšu v další sérii.
