Navrhování v prohlížeči mě mě vyděsilo. Ne proto, že to bylo těžké, ale proto, že jsem si myslel, že skončím s designem složeným z mnoha malých krabiček, něco tak obecného a nevýrazného, že bych to konečně skončila ve Photoshopu.
Tento strach se ukázal jako naprosto neoprávněný. Nejen, že se moje návrhy více zaměřily, tak jsem je také rychleji dokončila a zapojila jsem klienty dříve do procesu prostřednictvím interakcí a diskusí.
Design je design. Nezáleží na tom, zda se to děje v softwarovém programu nebo je napsáno v kódu. Navrhování v prohlížeči není o nic těžší než návrh ve Photoshopu. Stejně jako každý nástroj, který potřebujete k jeho učení a nakonec zvládnutí.
Design je iterativní proces, který je pro klienty obtížnější. Někdy je pro klienty těžké si přesně představit, co popisujete; navrhování v prohlížeči může být zapojeno do celého procesu spíše než jen do fáze návrhu.
V podstatě se fáze designu a vývoje slučují a pokud jste přirozeně dobří v designu a vývoji front-end, budete mít v projektech navrhnout, jako by se kachna dostala do vody.
Jedním z hlavních výhod návrhu v prohlížeči je, že můžeme navrhnout na základě realistických očekávání. Někdy navrhování v softwaru může vytvářet nepředvídané problémy pro vývoj front-end. UI prvky by mohly být navrženy bezvýrazně nebo možná prostě nedávají smysl, je těžké klientovi vysvětlit, proč jste něco změnili, ne proto, že nebudou rozumět, ale proto, že jste ji již v návrhu a to schválený. Navrhování v prohlížeči se hodí k myšlence na jednoduchost.
Než přemýšlím o návrhu, musím mít plán. Jen proto, že používám jiný nástroj, neznamená, že se můj proces změní. Mám rád poměrně pevný plán předtím, než začnu navrhovat a potřebuji vědět, co navrhuji, proč navrhuji, pro koho navrhuji, pozadí klienta a veškeré informace o službách nebo produktech, které budu muset zaměřit na.
Po zjištění těchto věcí budu mít lepší představu o tom, jaký produkt je nebo co klient dělá, jak dlouho to dělá, co je odlišuje od konkurence, kdo je jejich uživatelská základna a jaká je primární a sekundární cíle webových stránek budou.
Já osobně chci mít doklady o všechno. Obvykle mám dokumentaci k mapě stránek, obsahu, výzvám k akci a architektuře stránek. V době, kdy začnu navrhovat, bych měl mít jasnou strategii pro návrh a celý obsah by měl být shromážděn.
Skicování je klíčové, jestli budu něco navrhnout v prohlížeči. Můžu vyčistit obsahové oblasti tužkou a papírem, získat zpětnou vazbu a rychle začít i do základů svého designu.
Nakreslil jsem návrh založený na plánu, který jsem popsal výše, a ujistil jsem se, že mám všechny obsahové oblasti a výzvy k vytyčené akci. Skicování by mělo být rychlé, nestrávit mnoho času zdokonalovat nic. Mělo by být dostatečně solidní, aby se ukázalo klientovi, ale dost nedůstojné, abyste je mohli dokončit za méně než hodinu.
Dále chci prototypovat stránky z mých skic v HTML a CSS. Prototyp je spousta šedých rámečků s textem a obrázky pro zástupné symboly. Šedé boxy se chovají jako kontejnery pro obsah, když skutečně začínám navrhovat. Největší výhodou v prototypování s kódem je to, že klient může komunikovat s prototypem a uvidíte, jak architektura stránek funguje, tak pokud je něco vypnuto nebo potřebuje rafinovaný, zvládneme jej nyní spíše než ve spuštění.
Než začneme navrhovat, potřebujeme nějaký styl, který by založil náš design. Musíme určit barvy a písma, které budeme používat s potenciálními strukturami a vzory. To je místo, kde hrají stylové dlaždice.
Stylové dlaždice byly vytvořeny Samanthou Warrenem a já je už nějakou dobu používám. Pomáhají klientům vidět včasný a velmi jednoduchý stylový průvodce, který můžeme použít k zahájení projektování. Líbí se mi vytvořit několik z nich, abych zjistil, který klient preferuje tak, že ho mohu zúžit na jednu. Zjistil jsem, že jsou také velmi důležité v procesu schvalování a pomáhají předcházet úplnému odmítnutí.
Teď jsme připraveni začít projektovat. Pokud jste zvyklí na navrhování v softwarovém programu, jako je Photoshop nebo Sketch, to se moc neliší. Pomocí našeho prototypového souboru začneme přidávat falešný obsah do našeho značkování. V tomto okamžiku přesně víme, co se děje v každé sekci obsahu v označení a mřížka již byla definována, takže by to nemělo trvat tak dlouho.
Teď začnu vrstvovat styly na mém obsahu. Přidám základní barvy, typografie a rozvržení. Jakmile jsou základní styly dokončeny, odjedu a podívám se na ně. Líbí se mi obrazovka natočila některé části návrhu, aby se později zmínily.
Jakmile jsem spokojen se základní vrstvou, rád bych si vzal poznámky o tom, co je třeba upřesnit. Na základě těch poznámek s největší pravděpodobností použiji Photoshop nebo Skica přidat textura nebo něco s hmatatelným pocitem. Photoshop a Skica jsou skvělé nástroje pro rychlé vylepšení prvků složité uživatelské rozhraní, takže ušetřím všechno, co by mohlo být bolest,
Důvod, proč to dělám, je to, že chci, aby byla moje kódová základna štíhlá a čistá a čím víc kódujete, komentujete a odstraňujete, tím více se nakloní a nafoukne vaše kódová základna.
Pokud jste museli navrhnout v prohlížeči vždy od začátku, věci se mohou zdát, že trvají navždy, ale pokud začnete z vlastní databáze, rámce, můžete eliminovat opakované kroky. Začněte s vlastní verzí Inicializátor , které používám s vlastní citlivou mřížkou postavenou v Sass (http://sass-lang.com/). Použití vlastního rámce mi dává představa o prototypování a designu.
S knihovnou společných vzorků uživatelského rozhraní je také skvělý způsob, jak vytvořit rychlý prototyp a zvýší účinnost návrhu v prohlížeči. používám Vyslovený text k kódování a jedna věc, kterou jsem se naučil využít, je vlastní úryvky, které můžete vytvořit. Do seznamu mých úryvků jsem přidal několik variant navigace, seznamů, postranních panelů a dalších společných prvků, abych je mohl rychle umístit do mého značkování jednoduchou akcí. Používám také účty Codepen a JSFiddle uložit vzory. Dan Cederholm vytvořil skvělou motivu WordPress pro ukládání společných vzorů Hrušky . Používá příspěvky k ukládání kódu, který můžete editovat živě v předním panelu pro testování a náhled změn.
Praktická a praktická aplikace vám pomohou při navrhování v prohlížeči. Je pravděpodobné, že pokud uděláte jakýkoli vývoj na front-end, již máte základní rámec, ze kterého můžete začít a máte již nějaké společné vzory, které můžete použít.
Nyní stačí, abyste začali navrhovat v prohlížeči a nakonec přijdete s pracovním procesem, který bude efektivní a pracuje ve vašem procesu. S praxí se dostanete rychleji.