Obsah
- Citlivá metodika
- Jak si nejprve uchovám obsah?
- Proč?
- 01. Definujte své obchodní a uživatelské cíle
- 02. Při každé příležitosti je odkazujte
- 03. Nebojte se zatlačit
- 04. Posuňte také svůj vlastní tým
- 05. Definujte všechny své potřeby obsahu předem
- Jak mohu z prezentace odebrat obsah?
- Musíme přestat myslet na obsah z hlediska rozvržení
- Vynuťte své klienty, aby plánovali svůj obsah nezávisle na designu
- Dokončete svůj obsah před designem
- Používejte skutečný obsah - pokaždé
- Jak tedy drátové modely fungují pro responzivní designové projekty?
- Kreslení
- Rámec v prohlížeči
- Anotace
- Používejte skutečný obsah v drátových modelech
- Jak nejdříve navrhnu pro malé obrazovky?
- Na začátku abstraktní návrhy ze zařízení
- Použijte dlaždice stylu
- Vytvořte harmonii rozhraní
- Zobrazit vše v prohlížeči
- Dosáhněte rovnováhy pomocí statických programů
- Závěr
Aby bylo jasno: design je řešením, pouze pokud se zaměřuje na hlubší problémy, které jsou po ruce, proč za vším. Naše práce by měla vždy vést solidní proces, ale musíme přijmout něco pružnějšího. Naše médium se konečně osvědčilo jako tekuté, takže by to neměl být náš proces? Přemýšlejte o designu systému: musíte vidět jak celý obrázek, tak drobné detaily. Nemožné? Daleko od toho!
Frank Chimero to krásně uvádí ve své knize The Shape of Design: „Existuje část, kde umělec ustupuje od stojanu, aby získal nový pohled na dílo. Malba je stejná část blízko i daleko: když je člověk blízko, umělec tvrdě pracuje, aby se prosadil; pokud je to daleko, hodnotí práci, aby analyzoval její kvality. Ustoupí, aby s ním dílo promluvilo. “
Musíme nechat naši práci, naše médium, s námi mluvit. Se vzestupem responzivního designu konečně přijímáme naše médium tak, jak to mělo být: fluidní. Je skvělý čas ustoupit a posoudit práci, analyzovat a přijmout nový způsob, jak dělat věci, nový proces. Časy statických modelů a webových designérů, kteří nerozumí kódu, jsou pryč. Je čas na pohotový proces.
Citlivá metodika
Hned na začátku tohoto článku prozradíme velké tajemství solidního procesu. Protože jsme takoví blázni. Připraven? Reagující proces je zodpovědný proces. Vágní? Možná. Hloupý? Ne. Stejně jako předcházející hnutí za webové standardy tlačí responzivní design web vpřed pomocí metod vhodných do budoucna.
Jako každý proces návrhu by se měl zaměřit na „proč“ za tím vším. Proč tedy existují webové stránky? Dodávat obsah. To by mohlo být založené na úkolech, společenské, informační ... na tom nezáleží. Všechno jde k tomu: začněte důvodem, dobře strukturovaným obsahem a důležitými interakcemi.
Zde jsou otázky, které o našem responzivním procesu návrhu slyšíme nejčastěji.
Jak si nejprve uchovám obsah?
Na začátku projektu jsme všichni tak optimističtí. "Nejprve obsah!" říkáme. "Cíle uživatele!" Pamatujte, co je důležité! “ To je pravda. Ale co to znamená? Jak implementujete proces obsahově první?
I když víte (nebo si myslíte, že víte), je snadné na projekt zapomenout. Dlouhodobé projekty mají tendenci se dál a dál (a dále… a…). Přestaneme přemýšlet o tom, proč, a začneme se soustředit na to, jak. Klameme se, že naše projekty lze rozdělit do samostatných fází „objevování“ a „vývoje“, které mohou existovat samostatně.
Pravdou je, že se musíme pořád ptát proč. Bez ohledu na to, kolik si myslíte, že víte, bez ohledu na to, kolik plánování jste provedli - pokaždé, když se rozhodnete, pokaždé, když navrhnete tlačítko nebo napíšete nadpis, musíte se zeptat ...
Proč?
Proč to dělám? Pro koho to je? Jakého obchodního cíle pomůže mému klientovi dosáhnout? Jakou potřebu to pomůže adresovat mým uživatelům? Nenechávejte pouze obsah jako první. Nejprve si nechte proč.
Díky tomu to zní jednoduše. Ale abyste to udělali dobře, budete muset tlačit. Zatlačte na své klienty a tým, aby nejprve definovali, proč. Žádný Lorem Ipsum, žádné ‚k tomu se dostaneme později '. Udělej si domácí úkol! Všechny vaše způsoby musí začít s pevným důvodem. Ve společnosti Yellow Pencil to znamenalo velké změny ve způsobu, jakým předkládáme, odhadujeme, rozpočet a plánujeme projekty. Museli jsme tlačit na rozpočet a čas, abychom provedli důkladný výzkum, strategii a plánování. Možná taky. Jakmile však vaši klienti a vaše týmy uvidí obrovské výhody definování potřeb obsahu předem, nikdy se neohlédnou.
A naší prací je vzdělávat je. (Přečtěte si vynikající knihu Mika Monteira Design je práce, pokud se chcete dozvědět více o jednání s klienty.) Klienti mohou jen těžko pochopit, jakou hodnotu má celý ten výzkum a práce dopředu. A proč by měli? Na konci nedostanou nic ‚hotového '- a příliš často dostanou pouze fakturu a velký dokument Word.
To není jejich chyba - je to naše chyba. Je naší odpovědností lépe prokázat tuto hodnotu. Na každém kroku musíme všechno vrátit zpět k důležitému důvodu.
To je zvláště důležité pro responzivní design. Responzivní web nevyžaduje mnohem větší úsilí při vývoji, ale znamená mnohem více plánování. Opravdu se ale plánuje, že bychom to měli dělat po celou dobu. Sledujte aktuální projektový cyklus redesignu každé tři tři roky. Chcete v tom pokračovat? Určitě ne.
Tady jsou tedy tři kroky k tomu, abyste ve svém projektovém procesu udrželi obsah na prvním místě.
01. Definujte své obchodní a uživatelské cíle
Vytvořte pro svůj projekt prioritní seznam obchodních a uživatelských cílů. Co chtějí vaši uživatelé nejvíce vědět nebo dělat? Proveďte svůj výzkum. Dělejte informované závěry, ne divoké odhady. Nechte všechny zúčastněné strany, aby souhlasily.
02. Při každé příležitosti je odkazujte
Pokaždé, když se rozhodnete, pokaždé, když někdo navrhne novou funkci nebo designový prvek nebo stránku s obsahem, přimějte ho, aby namapoval požadavek na obchodní a uživatelský cíl. Jaké skutečné potřeby tato funkce splní? Jaký je skutečný důvod? (Tip: ‚Protože chci 'nebo‚ Mám opravdu rád modrou' nebo ‚všichni jsou na Facebooku‘ se nepočítají.)
03. Nebojte se zatlačit
To může být těžké. Vztahy s klienty mohou být křehké a může být lákavé vzdát se bitvy a vyhrát válku. Ale pamatujte, že jsme v tom všichni společně! Není to obchodní vs. uživatel; nás vs.
Setkání s potřebami uživatelů je nejlepší způsob, jak uspokojit obchodní potřeby. Protože bez našich uživatelů nemáme podnikání! Klienti (dobří klienti) vás nenajímají, abyste řekli „ano“ všemu. Pokud tedy váš klient požádá o něco, co nesplní jeho cíle nebo potřeby jeho uživatelů, nebojte se ho vyzvat. Nejde o ego. Jde o vytvoření nejlepšího možného řešení.
04. Posuňte také svůj vlastní tým
To může být také výzva při práci v kreativním týmu. Oddělení rolí - vizuální design, uživatelské prostředí, informační architektura, obsahová strategie, produkce obsahu - může vést k nedorozumění. Jsme zaneprázdněni, jsme zahlceni e-maily. Je těžké zůstat u projektu od začátku do konce, zvláště po dokončení vaší práce.
Vztah vašeho týmu je přinejmenším stejně důležitý jako vztah vašeho klienta. Musíme si připomínat proč, stejně jako to děláme svým klientům. Spolupráce je klíčová. Obsahový plán, drátové modely či návrhy nelze jednoduše „předat“. Pokud je to možné, musíme pracovat ruku v ruce. Je snadné „dokončit“ dodávku a přejít k něčemu jinému. Je mnohem obtížnější zůstat s projektem, když se situace zhoršuje.
Vodopádový přístup ke kreativní práci prostě nefunguje. Agilní spolupráce mezi členy týmu přináší lepší výsledky.
05. Definujte všechny své potřeby obsahu předem
Tady je věc: Plánování responzivních webů trvá déle. Už neplánujeme jen jeden kontext. Plánujeme všechny kontexty, o kterých víme nyní, a některé, které dosud neexistují.
Plánování všech těchto složitostí předem však trvá mnohem méně času, než návrat zpět a dovybavení funkcí a funkcí, které jste nezohlednili. Takže strávte čas / úsilí / rozpočet. Než se pustíte do designu, přinutte své klienty a tým definovat (a zavázat se!) Veškerý jejich obsah. Použijte tabulky stránek. Použijte strukturovaný obsah. Připravte se na svůj obsah hned teď! Nebo plakat později.
Jak mohu z prezentace odebrat obsah?
Slyšíte to hodně po internetu-o-sféře. Ale počkej, co? A počkat - proč?
Protože prezentace se může (a bude) měnit. Způsob, jakým jsme navrhovali webové stránky před 15 lety, je téměř nerozeznatelný od toho, jak je nyní prezentujeme. Ale víte, co se nezměnilo? Slova. Stále je používáme. Internet existuje primárně pro (textový) obsah. Stále jej používáme k řešení informačních problémů; plnit úkoly. Pokud však váš obsah závisí na způsobu prezentace (úvodní stránky Flash, kdokoli?), Existuje reálná pravděpodobnost, že za několik let nebude použitelný. A to je na hovno.
Musíme přestat myslet na obsah z hlediska rozvržení
My (jako průmysl) jsme vyškolili naše klienty, aby mysleli na obsah z hlediska rozvržení. "Dej to do postranního panelu," řekneme. "To by mělo jít do zápatí." Stop! Přestaň. Stop. Nejde o umístění. Jde o prioritu. Jaký je nejdůležitější obsah pro vaše uživatele? Protože hádejte co: změny rozložení v různých kontextech. Na vašem designu malé obrazovky (pravděpodobně) nebude postranní panel.
Obří super-menu, které váš klient chce? Nebudu létat na iPhone.
Vynuťte své klienty, aby plánovali svůj obsah nezávisle na designu
Dobře, nemusíte je nutit. Povzbuďte je. Silně povzbuzujte. Tabulky stránek jsou k tomu skvělé. Pokud jste si ji ještě nepřečetli, přejděte okamžitě k obsahové strategii pro web Kristiny Halvorson a Melissy Rachové, kde najdete další informace o jejich vytváření. Uspořádejte je podle priority. Neodkazujte na umístění ani na rozložení. To vašim klientům pomůže přemýšlet o jejich obsahu produktivnějším způsobem a také dostane proces vytváření obsahu do pohybu před dokončením drátových modelů nebo designu.
Dokončete svůj obsah před designem
Dobře, to není vždy možné. Čím více nejistoty můžete odstranit, než začnete navrhovat, tím méně se budete muset vrátit a změnit věci později.
Používejte skutečný obsah - pokaždé
Pokud je to možné, použijte obsah edge case - zobrazte svým klientům nejsložitější stránky, obrázky a nabídky. Tím se vyhnete překvapení později v procesu, když uvidí svůj nejsmutnější obsah v hotovém produktu.
Funkční drátové rámce v prohlížeči přinášejí velký rozdíl. Umožněte svým klientům sledovat jejich obsah pohybující se a měnící se v celé řadě velikostí obrazovek. Ukažte na to, jak prezentujete své drátové modely (děláte prezentace osobně, že?) Předveďte jim, jak priorita jejich informací zůstává stejná napříč velikostmi obrazovky, zatímco se mění rozložení.
Jak tedy drátové modely fungují pro responzivní designové projekty?
Pevně věříme, že návrh interakce pro RWD se musí do prohlížeče dostat rychle a často. Je téměř nemožné vytvořit statický dokument, který bude popisovat všechno. Samozřejmě bychom mohli vytvořit dokument, který prokáže tři, čtyři nebo pět bodů zlomu, ale to je jen zlomek příběhu. A co všechny okamžiky mezi hraničními body? To se děje v prohlížeči.
Kreslení
Přesto je dobré mít možnost rychle načrtnout své nápady společně. To se nemusí dělat v žádném konkrétním médiu, ale něco na tužce na papíře je. Jde o to, abychom nápady dostali rychle a iterativně. Rádi kreslíme náčrtky, kdykoli je to možné, a k tomu je k dispozici i aplikace: UI Sketcher.
Rámec v prohlížeči
Tady je skutečná vstupenka pro nás. Při demonstraci RWD v prohlížeči rádi znovu používáme vzory a systémy. Samozřejmě jsme mohli pokaždé vytvořit náš vlastní systém od začátku, ale to nám ani našim klientům nepomáhá.
Také rádi používáme rychle reagující prototypové rámce, jako je Twitter Bootstrap nebo Zurb’s Foundation. Osobně se opíráme o nadaci, protože odpovídá našemu pracovnímu postupu. Bylo by skvělé, kdyby jeden z nich zvolil přístup s malou obrazovkou a malou šířkou pásma jako první, ale právě tak postupujeme.
Anotace
Poznámky k drátovým modelům RWD jsou zásadní, ale, jak jsme zjistili, jsou často přehlíženy. Řekněte to nahlas: dokumentace, dokumentace, dokumentace! Viděli jsme několik příkladů od přátel a myslíme si, že porota je stále na „nejlepším“ způsobu, jak správně anotovat drátové modely reagující v prohlížeči. Jak již bylo zmíněno výše, pravidelně používáme Foundation by Zurb a rádi používáme jeho doplněk Reveal k zobrazování našich anotací. Tyto poznámky se zobrazují pouze u větších obrazovek a v ideálním případě je lze zapnout a vypnout.
Používejte skutečný obsah v drátových modelech
O Lorem Ipsum se hodně diskutovalo v drátových modelech a designových maketách, ale pokud nemáte ve svých drátových modelech skutečný obsah, děláte to špatně. Obsah informuje rozhodnutí o interakci a říká, kdy se design rozbije. Jak to může Lorem Ipsum udělat?
Jak nejdříve navrhnu pro malé obrazovky?
Po celá léta jsme navrhovali s ohledem na konkrétní rozlišení. Bylo to výchozí nastavení. Ať už jsme skicovali v poznámkových blocích, vytvářeli drátové konstrukce v OmniGraffle, pracovali ve Photoshopu nebo navrhovali v prohlížeči, věděli jsme, jaká bude naše velikost plátna. Ty dny jsou pryč. Nejprve věříme, že nejprve navrhujeme malou obrazovku a postupně ji vylepšujeme. Jak tedy návrhář změní svůj pracovní postup z pevné velikosti plátna na plynulý?
Na začátku abstraktní návrhy ze zařízení
Pokud nebudeme navrhovat konkrétní zařízení, je nezbytné, abychom přestali myslet na zařízení a začali přemýšlet o zkušenostech. Všechny následující techniky pomáhají návrhářům vytvářet jejich zkušenosti a zároveň zůstat agnostické (až do určité míry).
Použijte dlaždice stylu
Použijte dlaždice stylů k určení směru a rychlé iteraci. Stylové dlaždice umožňují designérovi určit směr návrhového systému, aniž by byly příliš konkrétní. Jejich tvůrkyně Samantha Warrenová je popisuje takto:
"Stylové dlaždice jsou pro případ, kdy je náladový panel příliš vágní a kompilátor je příliš doslovný." Stylové dlaždice vytvářejí přímé spojení se skutečnými prvky rozhraní bez definování rozvržení. “
Vytvořte harmonii rozhraní
Představte si plátno se všemi vizuálními a interaktivními prvky spojenými dohromady. Nevidíte konkrétní rozložení uživatelského rozhraní, ale uvidíte, jak všechny prvky spolupracují. Toto je plátno harmonie rozhraní. Plátno harmonie rozhraní umožňuje návrháři udržet nápady pohromadě, ale nezaměřuje se na žádnou velikost obrazovky. Navíc je to skvělý způsob, jak efektivně komunikovat a dokumentovat navržené prvky, spíše než vytvářet úplného průvodce stylem.
Máte-li zájem o další čtení, zde a zde najdete dva skvělé články o harmonii rozhraní.
Zobrazit vše v prohlížeči
Všechno je třeba spojit v prohlížeči. To je místo, kde design uživatelského rozhraní skutečně ožívá. Je důležité vidět, jak skutečný obsah interaguje s vizuálními prvky. Ve statickém prostředí to není možné udělat správně. Musíte vidět, jak bude reagovat v nativním médiu.
Dosáhněte rovnováhy pomocí statických programů
Mezi prohlížečem a statickými programy, jako je Photoshop, dochází k toku. Měla by existovat rovnováha, která umožňuje plynulé a přirozené vytváření návrhového systému. Jistě, toto se stane ve Photoshopu, ale designér, který navrhuje citlivě, se musí naučit kreativně myslet i v prohlížeči.
Závěr
Ještě jednou, s citem: začněte tím, proč, s dobře strukturovaným obsahem a důležitými interakcemi. Zaměřte se nejprve na malou obrazovku a malou šířku pásma a postupně vylepšujte své pohotové koncepty. Naše médium dospívá. Máme šanci dělat věci správně a měnit svět, jeden webový projekt najednou.
Objevte nejlepších 20 nástrojů pro návrh drátů pro designéry
Steve Fisher koordinuje výzkum, analýzu, design a strategii ve společnosti Yellow Pencil v Kanadě a hovoří o tématech, jako jsou RWD, UX a open source. Alaine Mackenzie je obsahová stratégka ve Yellow Pencil.
