Obsah
- Pohotová metodika
- Ako si najskôr uchovám obsah?
- Prečo?
- 01. Definujte svoje obchodné a užívateľské ciele
- 02. Odkazujte ich na každú príležitosť, ktorú dostanete
- 03. Nebojte sa zatlačiť
- 04. Presuňte tiež svoj vlastný tím
- 05. Definujte vopred všetky svoje potreby v oblasti obsahu
- Ako odstránim obsah z prezentácie?
- Musíme prestať myslieť na obsah z hľadiska rozloženia
- Donútte svojich klientov, aby plánovali svoj obsah nezávisle od dizajnu
- Pred dizajnom dokončite svoj obsah
- Používajte skutočný obsah - zakaždým
- Ako teda fungujú drôtové rámy pre responzívne dizajnérske projekty?
- Skicovanie
- Rámec v prehliadači
- Anotácie
- Použite skutočný obsah v drôtových modeloch
- Ako najskôr navrhnem pre malé obrazovky?
- Na začiatku abstraktné vzory zo zariadení
- Použite dlaždice štýlu
- Vytvorte harmóniu rozhrania
- Zobraziť všetko v prehliadači
- Dosiahnite rovnováhu pomocou statických programov
- Záver
Povedzme si jasne: dizajn je riešením iba vtedy, ak sa zameriava na hlbšie problémy, ktoré sú za tým, prečo za všetkým. Našou prácou by mal byť vždy solídny proces, musíme však prijať niečo pružnejšie. Naše médium sa nakoniec ukázalo ako tekuté, nemalo by to tak byť? Popremýšľajte o dizajne systému: musíte vidieť celý obraz aj drobné detaily. Nemožné? Ďaleko od toho!
Frank Chimero to krásne uvádza vo svojej knihe The Shape of Design: „Existuje časť, v ktorej umelec ustupuje od stojana, aby získal nový pohľad na dielo. Maľba je rovnakou časťou zblízka i zďaleka: keď je človek blízko, umelec tvrdo pracuje, aby sa presadil; pokiaľ je to tak, hodnotí prácu s cieľom analyzovať jej kvality. Odstúpi, aby s ním dielo prehovorilo. “
Musíme nechať našu prácu, naše médium, hovoriť s nami. S nástupom responzívneho dizajnu konečne prijímame naše médium tak, ako to malo byť: fluidné. Je to vynikajúci čas ustúpiť a zhodnotiť prácu, analyzovať a prijať nový spôsob robenia vecí, nový proces. Časy statických makiet a webových dizajnérov, ktorí nerozumejú kódu, sú preč. Je čas na pohotový proces.
Pohotová metodika
Hneď na začiatku tohto článku prezradíme veľké tajomstvo solídneho procesu. Pretože sme takí blázni. Pripravený? Pohotový proces je zodpovedný proces. Vague? Možno. Hlúpy? Nie. Rovnako ako pohyb webových štandardov pred ním, aj responzívny dizajn posúva web vpred pomocou metód priateľských k budúcnosti.
Ako každý proces návrhu, aj tento by sa mal zamerať na „dôvod“, ktorý za tým všetkým stojí. Prečo teda existujú webové stránky? Dodávať obsah. To by mohlo byť založené na úlohách, sociálne, informačné ... na tom nezáleží. Všetko závisí od toho: začnite odôvodnením, dobre štruktúrovaným obsahom a dôležitými interakciami.
Tu sú otázky, ktoré počujeme najčastejšie o našom procese responzívneho navrhovania.
Ako si najskôr uchovám obsah?
Na začiatku projektu sme všetci takí optimistickí. „Najskôr obsah!“ hovoríme. „Ciele používateľov! Pamätajte, čo je dôležité! “ Je to pravda. Čo to však znamená? Ako implementujete proces založený na prvom obsahu?
Aj keď viete (alebo si myslíte, že viete), je ľahké pri procese projektu zabudnúť. Dlhodobé projekty majú tendenciu sa ťahať ďalej a ďalej (a ďalej ... a ďalej ...). Prestaneme myslieť na prečo a začneme sa sústrediť na to, ako. Klameme sa, že naše projekty sa dajú rozdeliť do samostatných fáz „objavovania“ a „vývoja“, ktoré môžu existovať nezávisle.
Pravdou je, že sa stále musíme pýtať prečo. Bez ohľadu na to, koľko si myslíte, že viete, bez ohľadu na to, koľko plánovania ste vykonali - zakaždým, keď sa rozhodnete, zakaždým, keď navrhnete gombík alebo napíšete nadpis, musíte sa opýtať ...
Prečo?
Prečo to robím? Pre koho to je? Aký obchodný cieľ pomôže dosiahnutiu môjho klienta? Aká potreba pomôže mojim používateľom pri riešení? Nenechajte si iba obsah ako prvý. Najprv si nechajte dôvod.
Vďaka tomu to znie ľahko. Ale aby ste to zvládli dobre, budete musieť tlačiť. Zatlačte na svojich klientov a tím, aby najskôr definovali ich dôvody. Žiadny Lorem Ipsum, žiadne „k tomu sa ešte dostaneme“. Urob si domácu úlohu! Všetky vaše spôsoby riešenia musia začať pevným dôvodom. V spoločnosti Yellow Pencil to znamenalo veľké zmeny v spôsobe predkladania, odhadovania, rozpočtu a plánovania projektov. Museli sme tlačiť na rozpočet a čas na dôkladný výskum, stratégiu a plánovanie. Môžete tiež. Ale akonáhle vaši klienti a vaše tímy uvidia obrovské výhody definovania obsahových potrieb vopred, už sa nikdy nepozerajú späť.
A našou úlohou je vzdelávať ich. (Ak sa chcete dozvedieť viac informácií o jednaní s klientmi, prečítajte si vynikajúcu knihu Mika Monteira Dizajn je práca.) Klienti môžu len ťažko pochopiť, aké dôležité je robiť celý tento výskum a pracovať vopred. A prečo by mali? Na konci nedostanú nič „hotové“ - a príliš často dostanú iba faktúru a veľký dokument vo formáte Word.
To nie je ich chyba - je to naša chyba. Našou zodpovednosťou je preukázať túto hodnotu lepšie. Na každom kroku musíme všetko vrátiť späť k dôležitému dôvodu.
To je obzvlášť dôležité pre responzívny dizajn. Responzívny web nevyžaduje oveľa väčšie úsilie pri vývoji, ale znamená to oveľa viac plánovania. Naozaj však plánujeme, že by sme to mali robiť po celý čas. Dajte pozor na súčasný projektový cyklus redizajnu každé tri roky. Chceš v tom pokračovať? Určite nie.
Teda sú to tri kroky, aby ste v procese projektu udržali obsah na prvom mieste.
01. Definujte svoje obchodné a užívateľské ciele
Vytvorte pre svoj projekt prioritný zoznam obchodných a užívateľských cieľov. Čo chcú vaši používatelia najviac vedieť alebo urobiť? Robte si prieskum. Robte informované závery, nie divoké dohady. Nechajte všetky svoje zainteresované strany, aby súhlasili.
02. Odkazujte ich na každú príležitosť, ktorú dostanete
Zakaždým, keď sa rozhodnete, zakaždým, keď niekto navrhne novú funkciu alebo dizajnový prvok alebo stránku s obsahom, prinútite ho, aby požiadavku namapoval na obchodný a užívateľský cieľ. Akú skutočnú potrebu táto funkcia uspokojí? Aký je skutočný dôvod? (Rada: ‚Pretože chcem‘ alebo ‚Mám naozaj rád modrú‘ alebo ‚Všetci sú na Facebooku‘ sa nepočítajú.)
03. Nebojte sa zatlačiť
Môže to byť ťažké. Vzťahy s klientmi môžu byť chúlostivé a môže byť lákavé vzdať sa bitky a vyhrať vojnu. Pamätajte však, že sme v tom všetci spolu! Nie je to podnikanie vs užívateľ; my vs oni.
Napĺňanie potrieb používateľov je najlepší spôsob, ako uspokojiť obchodné potreby. Pretože bez našich používateľov nemáme podnikanie! Klienti (dobrí klienti) vás nenajímajú, aby ste povedali ‘áno‘ všetkému. Ak teda váš klient požiada o niečo, čo nesplní jeho ciele alebo potreby jeho používateľov, nebojte sa ho vyzvať. Nejde o ego. Ide o vytvorenie najlepšieho možného riešenia.
04. Presuňte tiež svoj vlastný tím
To môže byť tiež výzva pri práci v kreatívnom tíme. Oddelenie rolí - vizuálny dizajn, používateľská skúsenosť, informačná architektúra, stratégia obsahu, produkcia obsahu - môže viesť k nesprávnej komunikácii. Dávame si zabrať, sme zahltení e-mailmi. Je ťažké zostať pri projekte od začiatku do konca, zvlášť po dokončení vašej práce.
Vzťah vášho tímu je minimálne taký dôležitý ako vzťah vášho klienta. Musíme si pripomínať prečo, tak ako to robíme aj my svojim klientom. Spolupráca je kľúčová. Obsahový plán, drôtové rámy alebo návrhy nemôžete jednoducho „odovzdať“. Pokiaľ je to možné, musíme pracovať ruka v ruke. Je ľahké ‚dokončiť‘ dodávku a prejsť na niečo iné. Je oveľa ťažšie zostať pri projekte, keď bude ťažké.
Vodopádový prístup k tvorivej práci jednoducho nefunguje. Agilná spolupráca medzi členmi tímu umožňuje lepšie výsledky.
05. Definujte vopred všetky svoje potreby v oblasti obsahu
Tu je vec: plánovanie responzívnych webov trvá dlhšie. Už neplánujeme iba jediný kontext. Plánujeme všetky kontexty, o ktorých vieme teraz, a niektoré, ktoré ešte neexistujú.
Plánovanie všetkých týchto zložitostí vopred však trvá oveľa menej času, ako návrat späť a dodatočné vybavenie funkcií a funkcií, ktoré ste nezohľadnili. Takže venujte čas / úsilie / rozpočet. Donútte svojich klientov a váš tím, aby definovali (a zaviazali sa!) Všetok ich obsah skôr, ako sa pustíte do návrhu. Použite tabuľky stránok. Používajte štruktúrovaný obsah. Pripravte si svoj obsah do budúcnosti už teraz! Alebo si poplač neskôr.
Ako odstránim obsah z prezentácie?
Počujete to veľa okolo internetu-o-sféry. Ale počkaj čo? A počkať - prečo?
Pretože prezentácia sa môže (a bude) meniť. To, ako sme navrhovali webové stránky pred 15 rokmi, je takmer nerozoznateľné od toho, ako ich prezentujeme teraz. Ale viete, čo sa nezmenilo? Slová. Stále ich používame. Internet existuje predovšetkým pre (textový) obsah. Stále ho používame na riešenie informačných problémov; na splnenie úloh. Ak však váš obsah závisí od spôsobu prezentácie (úvodné stránky Flash, ktokoľvek?), Existuje veľká pravdepodobnosť, že nebude použiteľný za niekoľko rokov. A to je na hovno.
Musíme prestať myslieť na obsah z hľadiska rozloženia
My (ako priemysel) sme našich klientov vyškolili, aby premýšľali o obsahu z hľadiska rozloženia. "Dajte to na bočný panel," povieme. "To by malo ísť do päty." Prestaň! Prestaň. Prestaň. Nejde o umiestnenie. Je to o priorite. Aký je najdôležitejší obsah pre vašich používateľov? Pretože hádajte čo: rozloženie sa mení v rôznych kontextoch. Na vašom dizajne s malou obrazovkou (pravdepodobne) nebude bočný panel.
Obrovská super-ponuka, ktorú chce váš klient? Nebudem lietať na iPhone.
Donútte svojich klientov, aby plánovali svoj obsah nezávisle od dizajnu
Dobre, nemusíte ich nútiť. Povzbudzujte ich. Silne povzbudiť. Tabuľky stránok sú na to skvelé. Ak ste to ešte nečítali, ihneď prejdite na obsahovú stratégiu pre web Kristiny Halvorson a Melissy Rachovej, kde nájdete ďalšie informácie o ich vytváraní. Usporiadajte ich podľa priority. Neodkazujte umiestnenie ani rozloženie. To pomôže vašim klientom produktívnejším spôsobom premýšľať o ich obsahu a tiež sa dostane do pohybu proces vytvárania obsahu pred dokončenými drôtovými modelmi alebo návrhmi.
Pred dizajnom dokončite svoj obsah
Dobre, to nie je vždy možné. Čím viac neistoty môžete vylúčiť skôr, ako začnete s návrhom, tým menej sa budete musieť vrátiť a zmeniť veci neskôr.
Používajte skutočný obsah - zakaždým
Ak je to možné, použite obsah prípadu na okraji - ukážte svojim klientom najkomplikovanejšie stránky, obrázky a ponuky. Vyhnete sa tak prekvapeniam neskôr v procese, keď uvidia svoj najnepríjemnejší obsah v hotovom produkte.
Funkčné drôtové rámce v prehliadači robia svet odlišnými. Umožnite svojim klientom sledovať ich obsah, ktorý sa pohybuje a mení v rôznych veľkostiach obrazoviek. Poukážte na to, keď predstavujete svoje drôtové rámy (robíte osobné prezentácie, však?) Predveďte im, ako zostáva priorita ich informácií rovnaká na rôznych veľkostiach obrazovky, zatiaľ čo sa mení rozloženie.
Ako teda fungujú drôtové rámy pre responzívne dizajnérske projekty?
Pevne veríme, že návrh interakcie pre RWD sa musí do prehliadača dostať rýchlo a často. Je takmer nemožné vytvoriť statický dokument, ktorý bude popisovať všetko. Iste, mohli by sme vytvoriť dokument, ktorý demonštruje tri, štyri alebo päť zlomových bodov, ale to je len zlomok príbehu. Čo všetky momenty medzi hraničnými bodmi? To sa deje v prehliadači.
Skicovanie
Napriek tomu je dobré mať možnosť rýchlo načrtnúť svoje nápady spoločne. To sa nemusí diať v žiadnom konkrétnom médiu, ale niečo na ceruzke na papieri je. Ide o to, aby sme nápady dostali rýchlo a iteratívne. Radi skicujeme, kedykoľvek je to možné, a k tomu existuje dokonca aj aplikácia: UI Sketcher.
Rámec v prehliadači
Toto je skutočný lístok pre nás. Pri demonštrácii RWD v prehliadači radi opakovane používame vzory a systémy. Samozrejme, mohli by sme zakaždým vytvoriť nový systém od nuly, ale to nepomáha nám ani našim klientom.
Tiež by sme radi využívali rýchlo reagujúce prototypové rámce, ako napríklad Twitter’s Bootstrap alebo Zurb’s Foundation. Osobne sa prikláňame k nadácii, pretože to zapadá do nášho pracovného toku. Bolo by skvelé, keby jeden z nich použil prístup s malou obrazovkou a malou šírkou pásma ako prvý, ale tak to funguje.
Anotácie
Anotácie pre drôtové modely RWD sú nevyhnutné, ale, ako zistíme, sú často prehliadané. Povedzte to nahlas: dokumentácia, dokumentácia, dokumentácia! Videli sme niekoľko príkladov od priateľov a myslíme si, že porota je stále na najlepšom spôsobe, ako správne anotovať drôtové modely reagujúce v prehliadači. Ako už bolo spomenuté vyššie, pravidelne používame Foundation by Zurb a radi používame jeho doplnok Reveal na zobrazovanie našich anotácií. Tieto anotácie sa zobrazujú iba pre väčšie obrazovky a v ideálnom prípade je možné ich zapnúť a vypnúť.
Použite skutočný obsah v drôtových modeloch
O Loremovi Ipsumovi sa veľa diskutovalo o drôtových modeloch a dizajnérskych modeloch, ale ak nemáte skutočný obsah v drôtových modeloch, robíte to zle. Obsah informuje o rozhodnutiach o interakcii a povie vám, kedy sa dizajn pokazí. Ako to môže urobiť Lorem Ipsum?
Ako najskôr navrhnem pre malé obrazovky?
Roky sme navrhovali s ohľadom na konkrétne rozlíšenie. Bolo to predvolené nastavenie. Či už sme skicovali v notebookoch, tvorili drôtové rámy v OmniGraffle, pracovali vo Photoshope alebo navrhovali v prehliadači, vedeli sme, aká bude naša veľkosť plátna. Tie dni sú preč. Sme presvedčení, že najskôr navrhujeme malé obrazovky a postupne ich vylepšujeme. Ako teda dizajnér zmení svoj pracovný postup z pevnej veľkosti plátna na plynulý?
Na začiatku abstraktné vzory zo zariadení
Pokiaľ nenavrhujeme konkrétne zariadenie, je nevyhnutné, aby sme prestali myslieť na zariadenia a začali myslieť na zážitky. Všetky nasledujúce techniky pomáhajú návrhárom vytvárať ich skúsenosti a zároveň zostať agnostické (až do určitej miery).
Použite dlaždice štýlu
Pomocou dlaždíc štýlu určte smer a rýchlo iterujte. Štýlové dlaždice umožňujú návrhárovi určiť smerovanie návrhového systému bez toho, aby bol príliš konkrétny. Ich tvorkyňa Samantha Warren ich popisuje takto:
"Štýlové dlaždice štýlov slúžia, keď je náladový panel príliš neurčitý a kompilátor príliš doslovný." Štýlové dlaždice vytvárajú priame spojenie so skutočnými prvkami rozhrania bez definovania rozloženia. “
Vytvorte harmóniu rozhrania
Predstavte si plátno so všetkými spojenými vizuálnymi a interaktívnymi prvkami. Nevidieť konkrétne rozloženie používateľského rozhrania, ale zistiť, ako všetky prvky spolupracujú. Toto je plátno harmónie rozhrania. Plátno harmónie rozhrania umožňuje návrhárovi udržiavať nápady pohromade, ale nezameriava sa na žiadnu veľkosť obrazovky. Okrem toho je to skvelý spôsob, ako efektívne komunikovať a dokumentovať navrhnuté prvky, a nie vytvárať úplného sprievodcu štýlmi.
Ak máte záujem o ďalšie čítanie, tu a tu nájdete dva vynikajúce články na tému harmónie rozhraní.
Zobraziť všetko v prehliadači
Všetko je potrebné spojiť v prehliadači. To je miesto, kde dizajn používateľského rozhrania skutočne ožíva. Vidieť, ako skutočný obsah interaguje s vizuálnymi prvkami, je zásadné. V statickom prostredí to nie je možné urobiť správne. Musíte vidieť, ako bude reagovať v natívnom médiu.
Dosiahnite rovnováhu pomocou statických programov
Medzi prehliadačom a statickými programami, ako je napríklad Photoshop, existuje prúdenie. Mala by existovať rovnováha, ktorá umožní, aby bol návrhový systém vytvorený svižne a prirodzene. Iste, stane sa to vo Photoshope, ale dizajnér, ktorý navrhuje zodpovedne, sa musí naučiť, ako kreatívne myslieť, aj v prehliadači.
Záver
Ešte raz, s citom: začnite tým, prečo, s dobre štruktúrovaným obsahom a dôležitými interakciami. Zamerajte sa najskôr na malú obrazovku a malú šírku pásma a postupne vylepšujte svoje pohotové koncepty. Naše médium dospieva. Máme šancu robiť veci dobre a meniť svet, jeden webový projekt po druhom.
Objavte najlepších 20 nástrojov pre wireframing pre návrhárov
Steve Fisher koordinuje výskum, analýzu, dizajn a stratégiu v Yellow Pencil v Kanade a hovorí o témach, ako sú RWD, UX a open source. Alaine Mackenzie je stratégka pre obsah v spoločnosti Yellow Pencil.
