20 Nejžhavějších trendů, které budou tvar Web Design Přijďte 2016
S každým rokem dopředu se na horizontu objevuje mnoho nových trendů v designu. Oblast webového designu se vždy mění s novými nástroji, pracovními postupy a osvědčenými postupy pro konstrukci použitelných rozvržení.
Je těžké předpovědět, které přesné trendy budou mít největší pozornost. Nedávná historie však ukazuje trendy, které rostou jako požár. Zorganizoval jsem 20 unikátních trendů, které v roce 2015 získaly trakci a do roku 2016 budou pravděpodobně pokračovat i nadále.
1. Sketch App pro UI Design
Skica rychle nahradí Photoshop pro všechny úlohy návrhu UI od drátové modely s nízkou věrností na high-fidelity mockups & ikony designu.
Sketch App je pouze Mac aplikace určená speciálně pro webové a mobilní designéry. Nabízí hladší pracovní prostředí pro řemeslné vektorové prvky pro jakékoli rozhraní, ale také si zachovává mnoho funkcí, které očekáváte od aplikace Photoshop, jako jsou textové efekty a styly vrstev.
Zatímco neexistuje žádný důkaz, že by Sketch někdy byl vydán pro Windows, stále se stal cennou volbou pro uživatele OS X. Zjednodušený workflow a levnější cenovka dávají Adobe běh za své peníze. Pokud Sketch bude i nadále poskytovat nejlepší UI design zážitek pak to bude určitě i nadále roste dobře do roku 2016 a dále.
2. IDE založená na prohlížeči
Desktop IDE byly po desetiletí s možností od Notepad + po Xcode a Visual Studio. IDE usnadňuje zápis kódu s návrhy a zvýrazněním syntaxe (mimo jiné).
Tradičně IDEs byly vydány jako desktopové aplikace. Během posledních několika let jsme zaznamenali dramatický nárůst cloudových IDE založených na prohlížeči. To nevyžaduje žádný jiný software než webový prohlížeč, který devs umožňuje psát kód z jakéhokoliv počítače s přístupem na internet.
Cloud IDE fungují spíše jako webové aplikace, kde můžete ukládat úryvky kódu do účtu pro sdílení nebo osobní ukládání. CodePen je jedním z nejpopulárnějších IDE s podporou pro HTML / CSS / JS a vlastní předzpracování jako Jade / Haml a LESS / SCSS.
Mozilla Thimble je další IDE pro začínající vývojáře, kteří se chtějí naučit, jak kódují. Také Codeply je skvělé pro testování specifických responzivních frameworků, jako je Bootstrap nebo Zurb's Foundation, aniž byste museli stahovat nějaké soubory.
3. Free Sass / SCSS Mixins
Preprocessors byli trendy po celá léta, ale teprve nedávno se staly hlavním proudem natolik, že se cítily všudypřítomné v celém oboru web design / development. V dnešní době se zdá být zvláštní psát vanilla CSS, když Sass / SCSS může poskytnout mnohem více.
Jednou z výhod je rostoucí nabídka knihoven Sass mixin. Jednoduché mixiny jsou jako úryvky kódu nebo základní funkce pro generování opakovatelného kódu v CSS. I když můžete vždy psát své vlastní, mnoho vývojářů bylo tak laskavé, že uvolní zdarma mixins online.
Některé mixiny přicházejí v knihovnách jako Bourbon, zatímco jiné mohou být samostatné položky. Vyzkoušejte vyhledávání v GitHub pro Sass / SCSS mixiny, abyste zjistili, co můžete najít.
4. Rozvržení karet
Rozvržení webových stránek bylo poprvé popularizováno Pinterestem před několika lety a od té doby se stalo trendem pro obsahově náročné webové stránky. Volné pluginy jako jQuery Masonry lze použít k napodobení tohoto stylu rozložení animovanými kartami pro různé výšky a šířky.
Rozvržení karty je nejlepší použít na stránkách se spoustou dat, která by měla být skenovatelná. Vstupní stránka pro Chytré karty Google používá k inzerci volitelných karet pro aplikaci Chytré karty Google rozložení karet.
Můžete si představit rozložení karet jako dynamičtější mřížky se zaměřením na minimalizaci obsahu na holé základy, abyste mohli seznamovat více položek dohromady. Online magazíny jako UGSMAG a The Next Web jsou dokonalými příklady rozvržení karet, které slouží k prezentaci posledního obsahu příspěvku.
5. Vlastní Explainer videa
Velké i malé společnosti se k trendu vlastních videí vysílají. Tito jsou často vytvořeni s animací jako Crazy Egg příklad. Jiná videa se však spoléhají na skutečné záběry jako Instagram Direct.
Účelem vysílacího videa je ukázat, jak výrobek nebo služba funguje. Návštěvníci si mohou prohlédnout seznam funkcí a stále nemají tušení, jak tento produkt funguje. Videa objasňují vše vizuálně a za pár minut pokrývají důležité věci.
Pokud si chcete vyzkoušet své vlastní vysvětlení, podívejte se na tento kurz Udemy. Je to podrobná studie zaměřená na videa pro návrh vstupní stránky.
6. Live Product Previews
Návrh vstupní stránky zaznamenal neuvěřitelný růst vyplývající z větší rychlosti internetu a možností prohlížeče. Jeden hlavní trend, který jsem si všiml, je přidání náhledů živých produktů na domovské stránky nebo vlastní vstupní stránky.
Vezměte si například stránku produktu Slack. Obsahuje video prohlídku a vektorovou grafiku pokrývající rozhraní Slack. Tyto náhledy produktů mají potenciálním uživatelům poskytnout pohled na to, jak produkt funguje.
Webydo je další skvělý příklad s živou animací hrající na domovské stránce. To umožňuje návštěvníkům vidět Webydo v akci, aniž by museli ručně demo produkt. Pro náhledy produktů však nemusíte vždy spoléhat na animace. Iconjar používá jednoduchý snímek PNG k zobrazení toho, co je produkt a jak funguje.
7. Automatizovaní běžci úloh
Svět vývoje frontendu se změnil tolika novými osvědčenými postupy pro tvorbu webových stránek. Úkoly běžců / sestavovací systémy jako Gulp a Grunt jsou používány mnohem častěji pro všechny úkoly, které dříve vyžadovaly ruční práci.
Automatizace je životním prostředkem rychlého obratu a rozbíjení kvalitního kódu. Stroje nedělají chyby, takže čím více můžete s jistotou automatizovat, tím méně problémů budete mít (teoreticky).
Chcete-li se dozvědět více, podívejte se na tento příspěvek Reddit, který vysvětluje, jak běžci pracují. Tyto nástroje v podstatě spouští JS kód, který bude automatizovat části vašeho pracovního postupu, buď vlastní JS nebo skripty napsané jinými uživateli.
8. Nativní mobilní aplikace JS
Jsem velkým zastáncem používání správných nástrojů pro tuto práci. V případě vývoje mobilních aplikací to znamená Java pro Android, Objective-C / Swift pro iOS.
Ale ne každý se chce naučit nový jazyk, jen aby vytvořil mobilní aplikaci. Naštěstí se stává, že nativní aplikace budou vytvořeny a zkompilovány s alternativními knihovnami, jako je NativeScript nebo React Native.
Mezera pro to, aby se stal programátorem pro mobilní aplikace, se zkracuje se schopností vytvářet mobilní aplikace pomocí JavaScriptu. PhoneGap je další možností založenou na HTML / CSS / JS kódu.
I když se proces vytváření značně liší, JS se rychle stává řešením pro kodéry, kteří chtějí vytvářet mobilní aplikace bez učení nového jazyka..
9. Nástroje spolupráce pro návrh
Okamžité zasílání zpráv a skupinový chat je již delší dobu než deset let. Tyto zdroje se však tradičně opíraly o prostý text s určitou schopností připojit soubory.
Nově vznikajícím trendem je schopnost sdílet živé dokumenty v rámci chatových aplikací. Pozoruhodný je jeden příklad kde anotations a komentáře mohou být vrstvené přímo na vrcholu dokumentu. To dává návrhářům čistou možnost sdílet práci přímo s každým v týmu.
Slack je v současnosti nejoblíbenější chatová aplikace, která podporuje mnoho podobných funkcí. Rostoucí uživatelská základna Slack byla neústupná při vytváření rozšíření, která výrazně zlepšují možnosti Slacku a vazby na další produkty, jako jsou Hangouts, MailChimp a dokonce i WordPress.
10. Reagující rámce frontendu
Frontendové rámce, jako je Bootstrap, jsou již několik let a nadále se osvědčují na projektech jak osobního, tak profesionálního. Reagující design si vynutil cestu do rámců a vytvořil poptávku po kódu frontendu místo pouhého backendu (Django, Laravel, atd.).
Přechod do roku 2016 Myslím, že budeme číst mnohem více o responzivních rámcích frontend a jejich hodnotě ve webových projektech. Mnoho devs netrpělivě čeká na vydání Foundation 6 a veřejné verze v1 Bootstrap 4.
Jiné méně známé rámce, které byste mohli vyzkoušet, zahrnují Gumby a Pure CSS.
11. Větší zaměření na UX Design
Oblast designu uživatelských zkušeností bude i nadále rychle růst s více designéry a vývojáři upozornění. UI design je součástí UX designu, ale není to konečný cíl. Uživatelské rozhraní je prostředkem ke konci, jehož konec je fantastický uživatelský zážitek.
Jen před 5 lety jsem byl s UX sotva obeznámen nebo jak to bylo použito pro návrh rozhraní. Nyní máme zdroje jako UX Stack Exchange a bezplatné UX e-knihy. Pokud nevíte mnoho o uživatelských zkušenostech, pak je nejlepší čas studovat a naučit se, jak lze principy UX aplikovat na všechny formy digitálních rozhraní.
12. Manažeři balíčků
Manažeři digitálních balíčků vzrostli tak rychle, že jsou prakticky požadavkem moderního vývoje webu. Řešení jako Bower a NPM mohou ušetřit spoustu času při spouštění nových projektů.
Zvládnutí jakékoli nové technologie potrvá určitý čas a přichází s křivkou učení. Ale pokud je jedna věc, kterou by měl vědět každý vývojář (nebo backend) vývojář, je to správce balíčků. Vyžadují určité znalosti příkazů terminálu, ale jakmile si zvyknete na proces, nikdy se nebudete chtít vrátit.
13. Pokročilé animace uživatelského rozhraní
Přechody CSS3 byly pouze začátkem dlouhodobého trendu animace na webu. Nyní máme desítky CSS a JavaScript knihoven věnovaných animaci. Věci, které jsem nikdy nesníval, jsou nyní postaveny a dostupné zdarma, pokud víte, kde hledat.
Animace není podmínkou dobrého designu. Při správném použití to však může být dobrý design.
Sledujte animované trendy rozhraní a zjistěte, co můžete odvést z různých webových stránek. Nezapomeňte, že webová animace není film Disney a měla by se s ní zacházet s respektem. Použijte animaci jemně tak, aby vylepšila rozhraní, aniž by se stala rušivým nebo rušivým prvkem designu.
14. Návrháři učení se kódu
Téma horkého tlačítka letos bylo pro designéry, kteří se učili kódovat. Někteří návrháři se domnívají, že není jejich úkolem psát kód, zatímco jiní se domnívají, že se stává normou a měli by být přijati.
Četl jsem o tomto tématu ohromné diskuse a fascinující příspěvky, které se zdají být jen emocionální. Dobrý design je jen hezký obrázek bez kódu. Přesto se zaměřit na oba vyžaduje, aby designer strávil méně času cvičením řemesla.
Existuje tedy definitivní odpověď? Někteří by argumentovali tím, že se zvyšuje životaschopnost práce u návrhářů, kteří znají kódování frontendu. Co když ale někdo nechce psát kód? Stojí za to se naučit soutěžit?
Cítím, že nejjasnější odpověď je dělat, co chcete. Zdá se však, že toto téma je stále na stole mnoha designérů, kteří budou pravděpodobně pokračovat v diskusi do roku 2016.
15. Bezplatné online nástroje a webové stránky
Dříve to bylo, že všechny programy byly spuštěny z pracovní plochy bez ohledu na to, co jste potřebovali udělat. Ale v dnešní době jsem neustále ohromen, kolik webapps jsou k dispozici zdarma online.
Najdete zde vše od kódování URL / dekódování až po zcela zdarma editor Markdown. Dokonce i Disk Google přidal produkty Microsoft Office do prohlížeče (opět zcela zdarma).
Současná úroveň výpočetního výkonu a homogenní standardy z webových prohlížečů nabízejí zdánlivě neomezené množství příležitostí. Komplexní úlohy, jako je obnovení tvorby komprese obrazu, lze zpracovávat přímo z okna prohlížeče.
16. Růst webových komponent
Webové komponenty se snaží řešit problémy složitosti pro vývojáře. Webové stránky WebComponents mají velké zdroje a materiály, které vývojářům umožní začít s tímto tématem.
Pokud si nejste jisti, jak porozumět modulárním webovým komponentám, podívejte se na tento příspěvek a dozvíte se více.
Zatímco komponenty nejsou zvláště vyhozeny do hlavního proudu, jsou diskutovány profesionálními vývojáři po celém světě. Google vydal Polymer, což je rámec používaný pro přidávání webových komponent přes JS a HTML.
To nemusí být praktické, pokud jde o velké klientské projekty. Nicméně technologie je k dispozici a s trochou praxe můžete zvládnout koncepty s lehkostí. Chcete-li se dozvědět více a zobrazit pár ukázek kódu, můžete si přečíst tento příspěvek na modulárních webových komponentách.
17. Online studijní materiály
Všichni víme, že nyní je nejjednodušší čas naučit se jakoukoliv dovednost z pohodlí vašeho počítače. Zdá se, že on-line vzdělávací trh roste exponenciálně s novými kurzy a webové stránky vyskakování každý rok.
Cítím se jistější než kdy jindy, že uvidíme vzestup online učení. Místa jako Treehouse a CodeSchool nabízí neuvěřitelné kurzy vedle novějších lokalit, jako je Bitfountain a Learn-Verified..
Pokud se jedná o předmět, který se chcete naučit, existuje pravděpodobně kurz online - zejména pokud se chcete naučit digitální techniky, jako je návrh uživatelského rozhraní nebo vývoj aplikací.
18. JavaScript na straně serveru
Zatímco v minulosti existovaly možnosti pro server JS na straně serveru, žádný z nich nepronikl tak rychle jako Node.js. JavaScript devs se zamilovali do této knihovny a sledovali, jak vzniká přímá konkurence s jinými jazyky backendu, jako je Python nebo PHP.
Uzel umožňuje vývojářům vytvářet webové stránky pomocí jediného jazyka pro kód frontend + backend. A zdroje jako Node Package Manager dávají Node.js ještě větší hodnotu.
Z toho, co mohu říci, Node je stále na vzestupu a pokračuje v získávání trakce od průmyslových nadšenců. Ať už se chystáte učit uzel, nebo ne, není pochyb o tom, že bude i nadále růst jako hlavní trend v roce 2016.
19. Funkce webových stránek podporovaných dotykem
Prohlížeče Smartphone vždy podporovaly dotykové funkce pro všechny webové stránky, aby byla zajištěna zpětná kompatibilita. Nedávno jsem si všiml více pluginů a vlastních funkcí připojených na webové stránky se specifickým cílem zpracování dotykových událostí.
Zásuvné moduly jako Photoswipe a Dragend.js jsou konstruovány tak, aby zvládly přesouvání a klepání na dotykové obrazovky. Vypadá to, že weboví vývojáři nejen budují citlivé webové stránky, ale také webové stránky s dotykovou podporou.
Pokud budete hledat v okolí, najdete několik opravdu působivých funkcí, které jsou pro web založeny a které se spoléhají pouze na dotykové události.
20. Materiálový design na webu
Vydání materiálního designu společnosti Google bylo pro projektanty Android obrovským úspěchem. Materiálový design je považován za designový jazyk, který má zjednodušit proces vytváření uživatelských rozhraní pro smartphony Android.
V průběhu času web designéři vzali toto srdce a postavili celé webové stránky založené na novém designu Google jazyk. Zdá se, že trend vývoje materiálu se posunul za hranice pouze mobilních aplikací do světa webového designu.
Lidi, kteří chtějí stavět materiální webové stránky, nemusí ani vynalézat kolo. Volné knihovny jako Material UI a Materialize nabízejí vlastní kódy pro strukturování nového uspořádání nad základem materiálového designu.
Zavření
Při pohledu na tyto trendy by mělo být jasné, že vidíme skutečné společné úsilí webové komunity, aby byl proces vytváření webových stránek snazší. Všichni chceme ušetřit čas v našem každodenním pracovním postupu.
Od založení webu jsme viděli mnoho technologií, které mají být nahrazeny lepšími alternativami. Tyto trendy v roce 2016 prosazují jednotnější sadu návrhových technik, které usnadní a zredukují webové stránky budov.
