Škola mobilného dizajnu: proces dokončenia testovacej úlohy. Yandex otvoril bezplatný online kurz pre Školu dizajnu Yandex Design School

Skvelá príležitosť vstúpiť do novej profesie. Preto som sa rozhodol vykonať testovaciu úlohu.

Úloha pozostáva z dvoch častí:

1. Pozrite si mobilné produkty Yandex a navrhnite niekoľko nápadov na zlepšenie ktoréhokoľvek z nich.
2. Navrhnite koncept mobilnej aplikácie pre službu Yandex.Travel. Výsledkom by malo byť niekoľko kľúčových obrazoviek a popis, ako to funguje a prečo.

Druhá úloha sa ukázala byť ťažšia, ako som si myslel. Zdá sa, že som urobil všetky chyby, ktoré som mohol, a o tom budem hovoriť nižšie.

Proces

O zápise do školy som sa dozvedel tesne pred odchodom do Jekaterinburgu na DAMP. Cestou vo vlaku som začal premýšľať cez rozhranie aplikácie a kresliť obrazovky do poznámkového bloku.

Toto bola prvá chyba. Začal som vytvárať rozhrania tak, ako som chcel. Správne by bolo najprv pochopiť, aké potreby by malo rozhranie riešiť a podľa toho ho vybudovať.

Keď som sa vrátil z Jekaterinburgu, mal som 12 dní na splnenie dvoch úloh v rámci testovacej úlohy. Aby som lepšie pochopil plynutie času, zavesil som si pred seba papierik s dňami, aby som si zapamätal termín. Každý večer som si preškrtal predchádzajúci deň.

Ikona

Používateľ sa s aplikáciou zoznámi pred jej spustením. Na ikone aplikácie veľmi záleží, tak som začal tam. Ako základ som vzal ikonu už existujúcej webovej služby Yandex.Travel.

Začal som nakreslením ikony v mojom:

Moja druhá chyba. Vyzerá to pekne, ale v skutočnosti je to zbytočné. Keď som začal kresliť v aplikácii Sketch, ukázalo sa, že je to úplná kravina:

Správne by bolo neprekresľovať existujúcu ikonu, ale začať s asociáciami, ktoré služba vyvoláva. Yandex.Travel je služba na vyhľadávanie zájazdov a výber hotelov.

Prvá asociácia, ktorá prišla na myseľ, bol pohár kokteilu, ktorý vám umožní relaxovať ako výlet k moru.

Súhlasím, vyzerá to pateticky. Aj keď si dokonca môžete všimnúť Y z loga Yandex. Táto možnosť nie je vhodná, pretože spájať službu s alkoholickým nápojom nie je dobrý nápad. Ďalšie cestovné združenia: palmy!

Uvedomil som si, že som opäť urobil chybu. Áno, začal som kresliť ikony na základe asociácií, ale boli vo vzduchoprázdne. Bolo by správnejšie študovať ikony mobilných aplikácií Yandex, zvýrazniť spoločné funkcie a použiť ich v kombinácii s asociáciami na kreslenie ikony.

Kto by chcel takého čudáka prijať do rodiny?

Ikony aplikácií Yandex sú jednoduché a nemajú príliš veľa asociácií. Pre Transport majú autobus, pre Poštu majú obálku a pre Market majú nákupný vozík.

Začínam hľadať jednoduché asociácie pre Cestovanie: batožina, taška, letenka. Kým hľadám jednoduché implementácie ikon, natrafím na kompas. Kompas a jeho obraz sú skutočne známe každému. Nakreslím ikonu a oblečiem ju do korporátnych farieb. Skontrolujem, ako sa cíti v rodine:

Pamätám si, že polovica času do uzávierky je za mnou. Ostáva jeden týždeň. Kreslenie ikony nie je ľahká úloha. Rozhodujem sa pre možnosť s kompasom a prechádzam do rozhrania mobilnej aplikácie.

Vľavo je ikona s okrajmi pre stránku so zoznamom mobilných aplikácií, vpravo je ikona na použitie v prototype, nemala by mať okraje.

Ikona sa cíti dobre vo svojom prirodzenom prostredí:

Mobilná aplikácia

Na svojom smartfóne som otvoril Yandex.Travel, aby som zistil, ako vyzerá mobilná verzia stránky. Ďalej som nainštaloval nasledujúce aplikácie: Booking, Ostrovok, Travelata.ru, Aviasales a AirBnB, aby som videl, ako môže vyzerať rozhranie v aplikáciách určených na cestovanie a vyhľadávanie hotelov/zájazdov. Nainštaloval som všetky aplikácie Yandex dostupné pre iPhone, aby som našiel bežné vzory v rozhraniach.

Začal som hľadať zábery na dribling v nádeji, že nájdem zaujímavé rozhrania a použijem ich ako základ pre svoj koncept. Toto bola moja ďalšia chyba.

Ukázalo sa, že obrázky v driblingu sú rozvedené zo života. Obrazovky, ktoré som našiel, boli krásne, ale boli vo vákuu a problém nevyriešili.

Určené, kto bude používať mobilnú aplikáciu Travel. V prvom rade ide o používateľov, ktorí už službu využili prostredníctvom mobilnej verzie stránky.

Prechod do aplikácie z mobilnej verzie stránky by mal byť pre používateľa čo najbezbolestnejší, preto by rozhranie malo byť známe a známe.

Za základ som zobral rozhranie mobilnej verzie stránky a upravil som ho tak, aby vyhovoval mobilnej realite. Výsledkom bol súbor náčrtu s veľkosťou 8,7 MB a 15 umeleckých plôch:

Na rozdiel od mobilnej verzie má aplikácia teraz stránku s výberom osobných prehliadok, možnosťou pridania výsledkov vyhľadávania do obľúbených a tlačidlom „História“, v ktorom je uložená história vyhľadávacích dopytov používateľa.

Prototyp

V tejto fáze som si uvedomil, že som počas celej testovacej úlohy urobil najväčšiu chybu.

Nakreslil som rozhrania pre obrazovku môjho starého iPhone 4es, aby som na ňom demonštroval fungovanie konceptu. Keď som prvýkrát otvoril obrázok aplikácie, uvedomil som si, že veľkosť artboardov nezodpovedá veľkosti obrazovky smartfónu.

V Sketchi mali moje obrazovky rozmery 320 x 480 pixelov, ale potrebovali 640 x 960. Začal som prerábať všetky obrazovky. Potom som si uvedomil, že prvky vyzerajú dobre v Sketch, ale na smartfóne sú malé.

Správnejšie by bolo pristupovať k procesu inak: nie „Nakresliť rozhranie“ → „Spustiť prototypovanie“, ale nakresliť jednu obrazovku a okamžite skontrolovať, ako sa zobrazuje na smartfóne, čo by ušetrilo pár dní práce.

Pred začatím testovacej úlohy som sa rozhodol pre prototypovací nástroj – Framer Studio. Tam môžete písať v CoffeeScript a vytvárať skvelé animácie. V skutočnosti sa ukázalo, že nebolo ľahké zvládnuť Framerove schopnosti a implementovať moje rozhranie v krátkom čase. Nie je kam ísť, termín sa blíži, musíme sa pohnúť.

Anton Shein v škole spomínal službu InVision. Začal som to zisťovať.

Ukázalo sa, že služba je intuitívna: nahráte obrázky a prepojíte ich s prechodmi. Môžete si prispôsobiť animácie pre prechody, nastaviť si vlastnú ikonu aplikácie, ktorá sa zobrazí po uložení na domovskú obrazovku iPhonu. To je to, čo potrebujem!

Vyskytli sa nejaké problémy. Musel som bojovať so stavovým riadkom.

Stavový riadok je panel rozhrania, ktorý zobrazuje čas, nabitie batérie a mobilný signál. Moje rozloženia mali svoj vlastný stavový riadok, ale InVision vie zobraziť systémový. Ak si ikonu uložíte na domovskú obrazovku a spustíte cez ňu aplikáciu, stavový riadok sa spojí s pozadím.

Keď uložíme ikonu lokality na domovskú obrazovku a spustíme ju, stránka sa otvorí cez webové zobrazenie. Stavový riadok je možné konfigurovať pomocou metaznačky apple-touch-icon. Bohužiaľ, stavový riadok nemôže byť nakonfigurovaný tak, aby bol priehľadný a mal čierny text. Len s bielym textom a čiernym pozadím.

Riešenie problému: nainštalujte aplikáciu InVision a použite ju na demonštráciu.

Keďže koncept sa musel ukázať prostredníctvom inej aplikácie, bola narušená integrita demonštrácie. Vymyslel som scenár: ukážte spustenú aplikáciu, vráťte sa k ikone, porozprávajte sa o nej a vráťte sa do aplikácie, bez kliknutia na ikonu.

Výsledok

Σ

Áno, úplne som zabudol povedať. Pred testovacou úlohou som v Sketch nikdy nepracoval. Ako sa ukazuje, je ľahké sa to naučiť.

Oveľa náročnejšie je prejsť na dizajn mobilnej aplikácie. Ako webový vývojár mám v hlave iba webové rozhrania. Aplikácie majú úplne iný prípad použitia a iné funkcie.

Hlavným dôvodom, prečo sa chcem prihlásiť na Školu mobilného dizajnu, je získať vedomosti a skúsenosti s tvorbou dizajnu aplikácií a naučiť sa myslieť ako dizajnér.

Nedávno som absolvoval kurz Yandex.Design. Materiál som si naštudoval sám. Nemal som však možnosť komunikovať s ostatnými študentmi, klásť otázky lektorom a bolo ťažké cítiť atmosféru školy.

Chcem sa preto prihlásiť na Školu mobilného dizajnu a osobne navštevovať prednášky, pýtať sa a hlavne spolu s ostatnými študentmi získavať skúsenosti s tvorbou produktu.

Prijatých bude len 30 ľudí, výsledky budú známe do 27. mája. Ostáva už len čakať na výsledky a dúfať v to najlepšie, no zatiaľ ma môžete podporiť lajkom a komentárom k príspevku.

Budem rád, ak si vypočujem pripomienky a návrhy k testovacej úlohe.

Yandex otvára dizajnérsku školu - projekt pre začínajúcich dizajnérov produktov. Od 15. júna do 31. augusta budú zamestnanci spoločnosti Yandex a pozvaní odborníci zdieľať svoje skúsenosti s prácou na dizajne produktov s účastníkmi projektu. Program pozostáva zo štyroch blokov: „dizajn vo veľkej spoločnosti“, „prototypovanie“, „dizajn produktu“ a „tímová práca“.
Na konci programu účastníci predstavia osobný projekt - jednoduchú a užitočnú službu, ktorá by koncepčne a vizuálne pokračovala v ponuke služieb Yandex.

Výber na školu prebiehal v niekoľkých etapách. Od 18. marca do 19. apríla žiadatelia poslali tímu Yandex portfólio, esej a test. S autormi najúspešnejších príspevkov boli rozhovory. Školský tím celkovo preskúmal 780 žiadostí a hovoril so 74 žiadateľmi. Hoci pôvodne malo byť v projekte 30 účastníkov, vo finálnej zostave ich bolo o jedného viac.

Lola Kristallinskaya

Zástupca vedúceho oddelenia dizajnu

„Dizajn produktov pre masové služby sa zatiaľ nikde v Rusku nevyučuje, Preto škola pritiahla pozornosť rôznych ľudí: napísali nám fyzici, inžinieri, matematici, architekti, webdizajnéri a ilustrátori. Niektorí pracujú a dali dokopy portfólio, iní ešte študujú a len sa rozhodujú, kam sa posunúť ďalej.

Pôvodne sme plánovali prijať 30 poslucháčov, ale údaj je ľubovoľný: ak by sme našli 23 ľudí, zobrali by sme 23. Bolo pre nás dôležité nájsť si „svojich“ – vášnivých a zároveň premýšľavých. Od začiatku sme si formulovali cieľ – systém výberu by mal byť transparentný, aby sme každému jasne vysvetlili, prečo „áno“ alebo prečo „nie“.

Bolo to pre nás dôležitéo nájsť„našich vlastných“ – nadšených
a premyslený súčasne.

Najprv sme sa pozreli na „obavu“: ako vážne človek pristupoval k dokončeniu testovacej úlohy. Nebolo pre mňa objavom, že mať skúsenosti alebo cool portfólio vôbec nezaručuje presnú a zmysluplnú prácu. Je cenné, keď človek rozumie, kam smeruje a je pripravený učiť sa. To opäť nezávisí od veku alebo skúseností, ale skôr od vnútornej kultúry a osobných cieľov. Niektorí nádejní kandidáti sa napríklad stiahli po upozornení, že sa budú musieť celé leto učiť: veľa, dlho, bude to ťažké.

Odpovedali sme každému, kto nám napísal, porozprávali sa s mnohými ľuďmi a dozvedeli sme sa veľa zaujímavých vecí o dizajnérskom trhu v Rusku, určite vám o tom čoskoro povieme.“

Vyučovanie bude prebiehať každý druhý deň vo večerných hodinách. Mentori z Yandexu a osobní kurátori budú monitorovať pokrok účastníkov. Keďže v ruskom dizajnovom vzdelávaní neexistuje zavedená metodika a literatúra pre produktových dizajnérov, zamestnanci Yandexu vyvinuli program projektu nezávisle.

Taras Sharov

Vedúci oddelenia produktového manažmentu a dizajnu

V lete 2015 prvý Škola dizajnu Yandex. Video materiály natočené v lete tvorili základ dištančného štúdia. Taras Sharov, spoluautor školy, natočil úvodné video, v ktorom stručne vysvetľuje:

1. Pre koho je Škola dizajnu určená?
2. O čom je naša škola?
3. Ako správne vnímať školské materiály?
4. Ako absolvovať školenie?
5. Kde začať?

1. PRE KOHO JE ŠKOLA DIZAJNU URČENÁ?

Škola nie je určená pre začiatočníkov v dizajne.

2. O ČOM JE NAŠA ŠKOLA?

Školenie je rozdelené do 4 blokov:
1. Dizajn vo veľkej spoločnosti.
2. Prototypovanie.
3. Dizajn produktu.
4. Tímová práca.
A tiež váš osobný projekt (prax).

3. AKO SPRÁVNE VNÍMAŤ ŠKOLSKÉ MATERIÁLY?

Odložte na chvíľu kritiku a buďte otvorení všetkému novému. Skúste si podrobnejšie naštudovať témy, o ktorých sa bude diskutovať v školských materiáloch.

4. AKO SA VYŠKOLOVAŤ?

1. Pripravte sa na prácu.
2. Vyberte si značku a predstavte si seba ako dizajnéra pracujúceho pre túto značku.
3. Príďte s nápadom na produkt, ktorý doplní produktovú radu značky. Mal by to byť malý produkt – nie zložitejší ako Instagram.
4. Pracujte na ruskej verzii produktu.
5. Počas prvého a druhého ročníka našej školy konajte na základe svojej intuície. Od tretej časti postupujte podľa našich odporúčaní.

5. KDE ZAČAŤ?

Ak nie ste oboznámení s HTML, CSS a JavaScript, mali by ste začať so základnými kurzami na Codeacademy. Pred začiatkom tiež odporúčame zahriať si mozog niekoľkými tipmi od Gorbunov's Bureau.

Škola dizajnu, ktorá bola spustená v lete 2015 - študenti kurzu budú môcť postupne prejsť všetkými sekciami školy, počúvať prednášky zamestnancov Yandex a súčasne pracovať na svojich vlastných projektoch. Videoprednášky budú zverejňované postupne, každý týždeň v utorok. Kurz trvá 10 týždňov a končí 5. apríla.

Redaktori stránky sa od tvorcov Školy dozvedeli podrobnosti o novom videokurze a jeho práci.

Povedzte nám o výsledkoch Školy dizajnu. Ste spokojný s výsledkami?

Lola Kristallinskaya, organizátorka Školy dizajnu, zástupkyňa vedúceho oddelenia dizajnu Yandex: V lete 2015 sme prvýkrát uskutočnili Školu dizajnu. Pre veľký tím dizajnérov Yandex - mimochodom, v našej spoločnosti je už asi 140 dizajnérov - to bola dôležitá udalosť, na ktorú sme sa vážne pripravovali.

Búrlivo sme polemizovali o programe a formáte školení: „Čo je dizajn vo veľkej spoločnosti? Čo by mal vedieť produktový dizajnér? Ako by mal pracovať s tímom?" Začínajúci dizajnéri majú veľa otázok a bolo potrebné pochopiť, ako zozbierať zdanlivo rozhádzané poznatky do súvislého príbehu a vtesnať ich do 2,5-mesačného intenzívneho kurzu.

Výsledkom bolo, že program obsahoval nielen praktické bloky, ako napríklad prototypovanie, ale aj o tímovej práci, výhodách súvisiacich profesií a iných. Poradie sekcií nebolo zvolené náhodne - podľa nášho plánu si žiak Školy postupne rozvíja praktické zručnosti, dosiahne určitú odbornú zrelosť - a do finále je pripravený obhájiť svoj projekt.

O produktový dizajn je veľký záujem, a to nielen zo strany zamestnávateľov - dostali sme 780 prihlášok na školenie so splnenými testovacími úlohami a zrealizovali sme 70 pohovorov, ktorými úspešne prešlo 32 ľudí.

Jeden z nich sa dokonca na začiatku školy rozhodol skúsiť získať prácu v Yandex a po úspešnom absolvovaní pohovorov sa k nám pripojil. Bolo pre nás veľmi dôležité vybrať chalanov, ktorí to s tréningom mysleli vážne. Uspeli sme a na záverečnú obhajobu projektu postúpilo 30 žiakov školy z 31 uchádzačov.

Výsledkom školy bolo, že Yandex zamestnal 16 absolventov; iní chlapci išli rozvíjať svoje vlastné projekty alebo sa vrátili do spoločností, pre ktoré pracovali.

Taras Sharov, organizátor školy, vedúci prototypovej skupiny pre nové produkty Search, Yandex: Portrét ideálneho študenta na našej škole vyzerá takto: Vy ako dizajnér ste sa už viackrát popasovali so zadanými úlohami, zákazníci Vašu prácu prijali a boli s ňou spokojní. Postupne ste začali pochybovať, že zákazník naozaj rozumie tomu, čo potrebuje. Alebo neexistuje žiadny zákazník a najbližším uchádzačom o túto rolu ste vy. Často sa sami seba pýtate „ako rozumieť: čo je správne a čo nesprávne?“, máte motiváciu dôkladne porozumieť tejto problematike.

Pri vývoji školského programu sme sa snažili odpovedať na otázku „čo by mal vedieť a vedieť robiť produktový dizajnér v spoločnosti ako Yandex?“ Takže máme ctižiadostivého dizajnéra rozhrania. Kde by sa mal rozvíjať?

Použili sme nasledujúcu analógiu: vývoj dizajnéra je ako rezanie stromu – čím viac skúseností, tým viac krúžkov na reze. Bližšie k jadru strihu sú remeselné zručnosti – veď mnohí začínajú praxou. A bližšie k vonkajšiemu krúžku rezu sú abstraktné vedomosti - to sú úvahy o skutočnom význame práce dizajnéra.

Aká je myšlienka dnešného videokurzu Škola dizajnu?

Dnes Yandex otvára vzdialený video kurz pre Školu dizajnu - účastníci kurzu budú môcť postupne prejsť všetkými sekciami školy, počúvať prednášky zamestnancov Yandex a súčasne pracovať na svojom vlastnom projekte.

Na začiatku kurzu si treba vybrať známu a známu značku, predstaviť si seba ako dizajnéra, ktorý pre ňu pracuje, a prísť s nápadom na malý produkt, ktorý doplní produktovú radu. S týmto produktom budete pracovať počas celého kurzu. Jednoduché sledovanie videí pravdepodobne nebude efektívne.

Podrobnosti sú v úvodnej lekcii od Tarasa Sharova:

Náčrt úvodnej prednášky:

1. Pre koho je Škola dizajnu určená?
2. O čom je naša škola?
3. Ako správne vnímať školské materiály?
4. Ako získať tréning?
5. kde začať?

Videoprednášky budú zverejňované postupne, každý týždeň v utorok. Kurz trvá 10 týždňov a končí 5. apríla.

Môžu účastníci kurzu posielať projekty do Yandexu na kontrolu?

Lola Kristallinskaya: Sme pripravení prijať experimentálnu skupinu, ktorá bude mať možnosť získať konzultácie od našich učiteľov počas štúdia projektu. O začatí a podmienkach náboru Vás budeme informovať dodatočne v priebehu februára.

Medzitým odporúčame pripraviť sa na serióznu prácu: sledovať prednášky, čítať doplnkovú literatúru a zároveň pracovať na svojom projekte. Počas procesu učenia sa jeho koncepcia môže vážne zmeniť. Vaším cieľom nie je ani tak konečný výsledok, ako samotný proces. Škola vám dáva možnosť rozšíriť si obzory a skúsiť pracovať na produkte tak, ako to robia vo veľkých firmách.

Plánujete spustiť druhý vstup na Školu dizajnu?

Očakáva sa, že Yandex bude objektívny a nezasahujúci – táto požiadavka na informácie ovplyvňuje aj rozhranie: byť prirodzeným prostredím, nie prímesou.

PROGRAM

Dizajn vo veľkej spoločnosti

O rozdiele medzi tvorcom a dizajnérom. O výhodách štúdia príbuzných odborov. Ponorenie sa do práce s obmedzeniami značky: vizuálny jazyk, architektúra, história. Ako prispieť k spoločnému hodnotovému systému a stať sa súčasťou niečoho väčšieho. Riešenie konfliktu medzi osobnosťou a značkou.

Prototypy

Najlepší spôsob, ako získať pocit z produktu, je vo fáze návrhu. Sprievodca zvládnutím techník prototypovania. Zbaviť sa strachu z práce s kódom. Systematický prístup k organizovaniu šablón a štýlov. Metodika dekompozície rozhrania. Spoločná terminológia s vývojármi. Úvod do interných nástrojov Yandex.

Produkty

Výrobný proces od nápadu k produktu. Úlohy: produktový manažér, produktový dizajnér, technický architekt a marketér. Transformácia dizajnéra používateľského rozhrania na dizajnéra produktu. Etapy procesu návrhu a nástroje pre každú z nich. Testovanie hypotéz: výskum a experimenty. Propagácia produktu po jeho vytvorení.

Tímová práca

Prečo je dôležité zhromaždiť okolo seba tím rôznorodých, rovnako zmýšľajúcich ľudí? Ako zorganizovať seba a ostatných. Skupinové rozhodnutia a ich realizácia bez skreslenia. Správne správanie v typických konfliktných situáciách. Techniky na sprostredkovanie myšlienok iným. Špecifiká veľkého tímu: termíny, stretnutia, kritika, kontrola kvality, rešpekt a dôvera.

Projektová práca

Pre efektívne absolvovanie kurzu je potrebné zapojiť sa nielen do teórie, ale aj do praxe. Účastníci Školy pracovali na vlastných výrobkoch – podobnú úlohu ponúkame študentom videokurzu. Viac sa o tom môžete dozvedieť z