Koncepce rozvoje webu Všechny webové designéry by měli rozumět

Je toho hodně, o čem je třeba říci rozdělení mezi designéry a vývojáři. Je zde mnoho konstruktérů / vývojářů, kteří mohou pochopit obě strany mince, ale je jich málo a daleko.

Kreativní projekty se daří řádnou komunikaci. To však může být obtížné, když si návrháři a vývojáři nejsou jisti, jak na to mluvit s ostatními. Nemyslím si, že návrháři potřebují vědět, jak psát správný JavaScript, ani by si vývojáři neměli vybrat typografii. Jsou tu ale některé základní témata že si myslím, že jdou oběma směry.

Následující témata jsou mojí osobní odpovědí důležité nápady na vývoj webu, které by všichni návrháři měli chápat. Jako designér / vývojář sám vím, jak matoucí může být studium obou oblastí. Ale vždy stojí za to se naučit, protože jasné porozumění zlepšuje komunikaci a dělá tvůrce mnohem cennější pro tvůrčí tým.

Chování kódu frontendu

Web designéři jsou často myšlenka mít dovednosti frontend spolu s jejich talentem designu. Toto je téma, o kterém se diskutuje, většinou proto, že existuje žádná správná odpověď.

Návrháři by měli dělat, co oni jsou pohodlné. Pokud to znamená pouze dělat vizuální design, pak je to tak. Krátké pochopení technologií frontendu však může vytvořit stejného projektanta intuitivnější při tvorbě aktiv pro vývojáře.

Věřím, že každý návrhář by měl alespoň rozumět tři základní jazyky vývoje frontendu (HTML, CSS a JS) spolu s jejich používáním. Například většina rozbalovacích nabídek se spoléhá na jazyk JavaScript, ale existují také alternativy pouze pro CSS.

Když designér vyrábí rozevírací nabídku, může o tom přemýšlet jeho implementace pomocí kódu. Návrhář, který chápe, které prvky vyžadují JavaScript, může být lépe připraven pochopit, co žádají vývojáře, aby stavěli.

To je možné bez učení napsat jeden řádek kódu.

CSS se provádí styl. To je většinou statické stranou od CSS animace a CSS vytváří většinu vizuálů na stránce. Nejdynamičtější funkce jsou vytvořeny pomocí JavaScriptu.

Pokud pochopíte toto rozdělení, bude vdechovat vědomé úsilí do projektové práce. To také nutí UX návrháře pohybu zvažovat kolik práce jde do animace rozhraní.

Reagující techniky

Každý web designer by měl alespoň znát termín citlivý design. To umožňuje webovým stránkám přizpůsobit různým velikostem obrazovky, ke každému z nich patří jiné uspořádání. Rozměry zařízení při použití nového rozložení jsou definovány zarážkami, přidáno do (jednoho z) souborů CSS.

Body přerušení jsou specifikovány a určité šířky pixelů (a / nebo někdy výška), buď minimální nebo maximální, při které se rozvržení přizpůsobí velikosti obrazovky. Odpovídající rozvržení tedy bude na monitoru s rozlišením 1080px vypadat jinak než na smartphonu 320px.

Chcete-li zjistit, jak breakpoints fungují na reálných stránkách, podívejte se na webové stránky Media Queries.

Vaším úkolem jako projektanta je zvážit, jak by každý bod zlomu mohl ovlivnit maketu. Můžete být pověřeni navrhováním několika comps, každý montáž do různých rozměrů obrazovky.

Jakmile jste pochopili, že bod zlomu CSS definuje podmínky, kdy se rozvržení změní, budete mít mnohem jednodušší čas předávání těchto prostředků týmu dev..

Myslíš, že modulární s návrhy

Vývojáři vždy chtějí kód opakovaného použití co nejvíce, protože tento přístup umožňuje rozvoj méně podrobně a snižuje velikost souborů - ve skutečnosti je to důležitá technika optimalizace kódu.

Modulární design popisuje způsob vytváření webových stránek mimo “modulů” to může být časem. Myslíte, že tlačítka, vstupy do formulářů, styly záhlaví nebo blokové poznámky s efektním stylem.

jestli ty konstrukčních prvků modulárně, pro vývojáře je snazší kódovat rozvržení pomocí opakovaně použitelných CSS tříd. Vždy je dobré přemýšlet o tom, kde můžete přiměřeně znovu použít stejné barvy, textury a prvky stránky, ale musíte být inteligentní neublížit celkové estetice.

Je to ještě lepší, když vy opatřit poznámkami které prvky jste kopírovali napříč různými maketami, takže vývojáři mohou označte tyto části webu opakovaným kódem - rychlejší a jednodušší.

Modulární konstrukce se týká atomový design, oba přístupy jsou spíše zaměřeny na vývojáře. nicméně vizualizace vám pomůže pochopit, jak kód funguje, takže pokud se snažíte vizualizovat modulární design podívejte se na tento post vidět několik příkladů.

Pochopte snímky sítnice a SVG

Obvykle je to práce designéra připravit obrázky, zachytit všechny potřebné fotografie a design ikony od nuly. To znamená, že za to nesou odpovědnost výhradně návrháři doručování vizuálních prostředků vývojáři nakonec kódují do rozvržení. Proto je důležité porozumět velikosti sítnice a předat aktiva podporovaná sítnicí vývojářům spolu s konečnými maketami.

Velmi doporučuji tento Smashing Magazine post, pokud se chcete dozvědět více o pracovních postupech návrhu sítnice. Retinize Jedná se o bezplatnou sbírku akcí Photoshopu, které mohou automaticky vytvářet verze sítnice svých aktiv.

Většina designérů již tuto podporu podporuje @ 2x obrázky, ale novější zařízení iPhone 6+ mají @ 3x rozlišení. Nicméně, některé projekty se neobtěžují s @ 3x velikostí obrazu, tak se poraďte se svým vedoucím projektu před dokončením všech aktiv.

Poslední věc, kterou je třeba zvážit, je pokroku SVG na webu. Všechny moderní prohlížeče podporují SVG, což je a vektorový formát obrazu. To znamená, že ikony SVG budou automaticky bez ztráty kvality, takže nepotřebujete prostředky sítnice pro grafiku SVG.

Ne všechny kreativní týmy jsou ochotny jít s SVG pro web design ačkoli. Jistě jsou podporovány prohlížeči, ale v některých případech mohou být také obtížné implementovat. Proto je komunikace pro úspěšného projektanta / vývojáře zásadní.

Diskutujte o výhodách a nevýhodách používání vektorové grafiky a rozhodněte se, co bude pro každý projekt nejlepší. Prostě s pochopením těchto funkcí budete moci komunikovat s vývojáři jasně, a dokonce jim pomoci kód layout pro podporu sítnice.

Pochopte dostupnost

Progresivní vylepšení a ladná degradace jsou dva různé způsoby řešení stejného problému: přístupnost. Ne všichni uživatelé budou na zařízeních nebo spouští prohlížeče, které podporují 100% dynamických funkcí webu.

Tito uživatelé by měli stále dostávat zkušenosti, a to je třeba řešit správným kódováním. Někteří čtenáři obrazovky mohou ignorovat všechny JavaScript a CSS kód, ale webové stránky stále musí fungovat.

Nedávno jsem udělal post pokrytí progresivní vylepšení podrobně, protože je to můj preferovaný způsob vývoje. Progresivní vylepšení začíná velmi jednoduchými funkcemi, pak pracuje více “pokročilý” funkce.

Půvabná degradace je opačný přístup kde všechny hlavní funkce jsou navrženy jako první, pak se vývojář rozhodne, jak s těmito funkcemi zacházet, pokud uživatel nepodporuje JavaScript nebo CSS.

Je nepravděpodobné, že by byl návrhář požádán, aby udělal makety pro každou z těchto situací. Je však důležité, aby konstruktéři chápali tyto termíny a co znamenají, protože oni ovlivňují proces vývoje. To platí zejména pro projekty, jejichž dostupnost je velkým problémem.

V zavírání

Některá témata jsem přeskočila, protože je považuji za volitelné. Ovládání verze, zpracování chyb a animace JavaScriptu je několik složitějších témat, která by se návrháři mohli chlubit.

Ale pravdivě, body, na které se tento příspěvek zaměřuje, budou více než pomoci návrhářům pochopit požadavky vývojového týmu. Tím, že jen skimming povrchu webového vývoje budete získat vhled , které vám pomohou komunikovat nápady a sympatizovat s problémy, které se vyskytují během výroby.

Pokud hledáte další související obsah, podívejte se na tyto příspěvky:

• Jak efektivně komunikovat s vývojáři (smashingmagazine.com)
• Pomozte návrhářům a vývojářům naučit se navzájem porozumět (uie.com)
• Učení k kódu vám dává výhody jako UX Designer (jessicaivins.net)