20 Rising Web Design trendy sledovat v roce 2017
Uplynul další rok a návrháři se dívají dopředu do budoucnosti. Mnoho slibných designových trendů V roce 2017 budou vybuchnout. V loňském roce jsem se zabýval trendy v designu 2016 a viděli jsme mnoho změn od té doby.
Takže, pro tento post jsem si vybral 20 nejlepších trendů to jsem si všiml získání trakce v roce 2017. Tyto trendy designu se mohou týkat jakékoli webové stránky, tak, aby se vaše oči z těchto technik, jak jsme se pohybují do roku 2017 a dále.
1. “Vybrané v” odznaky
Startupy, blogy, SaaS projekty a dokonce i malé firmy nyní používají “jak je uvedeno v” odznaky na svých internetových stránkách. Tyto odznaky často odkaz na články na blogy hlavního proudu jako HuffPo, Forbes, CNN, Fox a další zpravodajské stanice.
Cílem je ověření webové stránky a vybudovat důvěru s novými návštěvníky. Je to pro někoho snadnější důvěřovat webové stránce, když vidí, že to bylo uvedených v autoritativních publikacích.
Ve skutečnosti mnoho top blogy ocenit expozici, tak to opravdu pomáhá všem zúčastněným. Tyto velké stránky často uvolnit jejich loga online ale můžete také najít transparentní PNGs nebo SVGs jen tím, že se kolem vás otočíte.
Také je doporučeno, abyste odkaz na původní článek uvádějící vaše stránky. To to dokazuje jste opravdu zmínil na webu, a nejste jen tvořící nároky.
2. Tučné všechny čepice nav odkazy
Viděl jsem desítky elegantních navigačních menu všichni spoléhají na stejný design. Tyto nav linky písmo a velikost ale obvykle mají podobné vlastnosti, jako:
- Všechny čepice
- Tučně
- Rovnoměrně rozmístěné
- Zarovnáno na pravý roh
Domovská stránka Zazzle je skvělým příkladem. Ale můžete to najít na mnoha spouštěcích stránkách protože je to čistý způsob sdílení odkazů které lze snadno číst a snadno procházet.
Tento trend většinou spojuji s podniky a technologickými startupy ale to může být převládající na blogy příliš.
Poznamenejte si příště uvidíte tento trend, protože je to všude. A očekávám, že do roku 2017 bude dobře růst.
3. Blogy ve stylu časopisu
Blogování byl takový nika koncept v časných 2000s. Pokud jste běžel blog v roce 2003 to bylo považováno za roztomilý malý koníček. V průběhu více než deseti let se tento trend radikálně změnil. Nyní mohou blogy poskytovat příjem na plný úvazek, a začínají vypadat mnohem více jako digitální časopisy.
Podívejte se na původní design TechCrunch, když se poprvé objevil v roce 2006. Vypadá to jako obecný blog WordPress?
Nyní se podívejte na aktuální domovskou stránku Techcrunch v roce 2017:
Nejen to vypadá jako časopis, to také funguje jako jeden. TechCrunch vydává každý den desítky (ne-li stovky) nových příspěvků. Jsou zdrojem # 1 pro spouštění zpráv.
Trendy designu ve stylu časopisu znamenají velký rozdíl. Domovská stránka používá velký příběh sekce, každý příspěvek má vlastní miniaturu, a stránky článku uprostřed titulku.
Když o tom přemýšlíte, TechCrunch se moc nezměnil. Je to stále “jen blog”. Ale je navržen a spravován jako časopis, a to dělá rozdíl.
4. Video pozadí
Autoplaying zvuk je možná nejvíce nepříjemný trend na webu. Ale překvapivě, automatické přehrávání videa (bez zvuku) je rychle rostoucí trend. Můžete si to všimnout na desítkách obchodních míst, kde video pozadí přebírá celou obrazovku.
Tato technika se mi líbí, když je správně aplikována. Tak dlouho, dokud video se týká stránek a nebrání obsahu, Myslím, že je to skvělý efekt použít v záhlaví.
5. Ghost tlačítka
Tak jako minimalismus se dále živí do webdesignu se objevuje mnoho nových trendů. Jedním z těchto trendů je vzestup ghost tlačítek které nemají vnitřní výplň, ale mají vnější hranici.
Většinu času tato tlačítka kontrast s ostatními upozornit. Toto můžete vidět na domovské stránce Instantmojo se zeleným tlačítkem pro přihlášení přímo vedle ghost tlačítko odkazující na živé demo.
Ostatní stránky byly přijaty čistě duchů na jejich knoflíky. Skvělým příkladem je nové rozložení Bootstrap.
Myslím, že ghost tlačítka pracují na stránkách, které k minimalismu. Nemusí být skvělý pro všechny webové stránky, ale vidím, že jejich užívání se každým rokem zvyšuje.
6. Volby pro modální okna
Modální okna jsou super otravná a nedokážu si představit, že by je někdo chtěl. nicméně je prokázáno, že zvyšují počet registrací, a obchodníci nemohou ignorovat techniky, které fungují.
To je důvod, proč si myslím, že modální opt-in okna budou dál stoupat v roce 2017.
Nejsou to moje nejoblíbenější věc a nikdy je nepřidávám na své webové stránky. Ale pokud je cílem zvýšení počtu registrací, pak modální okna jsou jistým způsobem, jak dostat věci do pohybu.
Dokonce i nové pluginy cílový výstup který spustí modální kdykoliv se uživatel pokusí opustit stránku. Ostatní modály se objeví po x sekundách nebo jsou nastaveny tak, aby se otevřely, když se uživatel posouvá dolů.
Bez ohledu na to, jak jsou modály spouštěny, jak jsou navrženy, nebo jak se o nich cítíte, myslím, že budou na dlouhou trať.
7. Ilustrace a vektorové umění
S novými programy pro návrh vektorů, jako je Sketch a Affinity Designer, je na webu nová vlna ilustrátorů. Grafický design a design rozhraní se neustále spojují s více multidisciplinárními designéry, než kdy dříve.
To znamená, že uvidíme mnohem více vlastních ikon a celostránkové ilustrace v blízké budoucnosti.
Mnozí ilustrátoři jsou praktikováni umělci, takže si myslím, že uvidíme více pozadí celé stránky s digitálním malířským softwarem, podrobně zpracovaným jako koncept art.
8. Pevné posuvné postranní lišty
První vlna pevné konstrukce zaměřené na navigační lišty. Ty jsou až příliš běžné, zejména v citlivých provedeních, kde je pevně navarený navbar replikuje pocit nativní mobilní aplikace.
Ale v roce 2017 očekávám ještě jeden lepkavý prvek-lepící postranní panel.
Téměř každý hlavní blog používá tento druh lepícího postranního panelu. To udržuje obsah v zobrazení neustále zvyšuje a zvyšuje pravděpodobnost, že uživatelé budou komunikovat s obsahem postranního panelu.
Plus s desítkami bezplatných pluginů jQuery, které mohou replikovat efekt sticky sidebar. Je to jednodušší, než kdy jindy, nastavit to na jakékoli webové stránky.
9. Obsah na stránce
Nedávná případová studie to zjistila Dlouhodobý obsah překonává shortform v hodnocení a kvalitě uchování uživatelů. Udělené to není vždy pravda, protože některé dotazy lze rychle odpovědět.
Ale s mnohem dlouhodobějším obsahem na webu je přirozené vidět více článků obsahu. Uvidíte to na dlouhých stránkách s recenzemi nebo v článcích, které se dělí na uvedené položky.
Přidání obsahu může zlepšit uživatelský komfort a pomoci rozdělte čtení na menší kousky. Obsah může také pomoci vaše stránky hodnost lepší! Pokud Google zjistí, že vaše stránka je cenná, možná získat skokové odkazy ve výsledcích vyhledávání.
To může být pravda, že toCs jsou poměrně vzácné právě teď. Očekávám však, že tento trend vyskočí v průběhu roku 2017 a mnoho let po něm.
10. Zářivě barevné vzory
Nejsem si jistý, zda se tento trend vynořil z minimalismu nebo jako reakce na materiální design společnosti Google. Ale narazil jsem na desítky webových stránek, které používají světlé pastelové barvy v kombinaci s dalšími zářivými odstíny vytvořit velmi fantastický vzhled.
Domovská stránka Rentberry je skvělým příkladem, který také využívá tuny gradientů. A má to i výše uvedené “Vybrané v” odznaky umístěné pod! Dva trendy na jednom místě.
Všimnete si, že barvy neprostupujte celou stránku, a jsou ztlumeny jinými odstíny bílé a šedé.
Viděl jsem jich dost sytých barevných schémat věřit, že jsou na vzestupu.
11. Posouvejte animace
Weboví designéři vědí o rolování a jak hrozný je. Ale to není to, co jsem myslel s titulem “rolování animací”. Viděl jsem mnoho stránek, které teď animovat obsah při posouvání kolem určité části stránky.
Tento trend je většinou omezena na spouštění domovských stránek a společností SaaS , které chtějí nějaký pizzazz v jejich designu.
Nemůžu říct, jestli je to obzvláště užitečný trend. To určitě chytí oko ale nemyslím si, že nabízí mnohem víc než estetiku. Přesto je to trend, který se zdá být rychlý a kdy používá se šetrně to může být opravdu elegantní.
12. Jednostránkové aplikace (SPA)
Jednostránkové aplikace jsou webové stránky postavena čistě s hovory Ajax. JavaScript stahuje obsah ze serveru a načte dynamicky, tak stránku nikdy se neobnoví.
Běžnými příklady jsou weby jako Gmail a Facebook. Ale s více technologie JS, Všiml jsem si stále více a více SPA. Sakra, dokonce i CodePen může být považován za SPA.
Díky výkonným frontendovým knihovnám jako React & Aurelia bude v roce 2017 ještě jednodušší vytvořit SPA od nuly..
13. Přepínatelné vyhledávací lišty
Kdysi to byly vyhledávací pole byly vždy v dohledu někde na webové stránce, buď v postranním panelu nebo v navigaci. Ale v poslední době jsem si všiml mnohem více vyhledávacích polí, která se dostanou ve výchozím nastavení skryté, a musí být přepnut do zobrazení.
Jistě šikovný trend šetří místo na stránce zatímco ještě přístupnost vyhledávací funkce. Pokud si nejste jisti, kam umístit vyhledávací formulář v novém designu, můžete zvážit použití přepínacího pole spojeného s ikonou lupy v navigaci.
14. Zprávy Adblock
To není pravda blokování reklam je na vzestupu. Jedinou otázkou je, jak vydavatelé tento trend zvládnou. Některé stránky zdvořile přidávat zprávy do reklamních prostorů jako Time.com. Na Hongkiatu si všimnete interní reklamy, které vyplní prázdno tento odkaz dále na stránku.
Jeden vážný trend, který vidím narůstá bloků obsahu adblock. To je technika “blokovat blokátory reklam”. Tato funkce je již zavedena na mnoha velkých webech, jako jsou Business Insider a Forbes. Bohužel to bolí jak uživatele, tak vydavatele, a to vše pochází z nekvalitních reklamních technik.
V konečném důsledku nezáleží na tom, kdo jste viní nebo kde stojíte v diskusi o blokování reklam. Adblock pluginy instalují více lidí a očekávám více vydavatelů.
15. Čisté ikony SVG
Grafika SVG už se vsunuli do webu, ale každým dnem se zvětšují. A mám pocit, že 2017 bude obrovský rok pro SVG na webu.
Můžete najít tisíce sady ikon SVG zdarma na stránkách, jako je Flaticon, pokud víte, jak hledat. Ale můžete také kód SVG do HTML, například pomocí tohoto příkladu na CodePen.
Takže návrháři mají možnost používat SVG a vývojáři mají také možnost používat SVG. Moderní podpora prohlížeče vypadá dobře přes palubu, takže není problém s kompatibilitou. Vše, co je potřeba, je dost návrhářů rozpoznat sílu SVG a začít je používat!
16. Adobe XD
Adobe uhasila plnou beta verzi Adobe XD v roce 2016 a od té doby rychle roste. V současné době podporuje Mac i Windows, a jeho ve fázi testování před úplným vyválcováním.
Můžete se zamyslet nad myšlenkou jakéhokoliv programu předjíždějícího Sketch, ale Adobe je hlavní softwarovou společností kreativních prací. Plus Sketch je stále pouze Mac, zatímco Adobe je chtějí podpořit každého.
Pevně věřím, že budeme v příštím roce číst mnohem více o Adobe XD. Může se stát go-to software pro navrhování maket UI-tak můžeme konečně použít Photoshop jako nástroj pro manipulaci s fotografiemi (jak bylo zamýšleno).
S nástupem nového softwaru, přichází desítky tutoriály a výukové sady GUI také. Můžete najít spoustu Adobe XD zdarma v Dribbble spolu s dvou nových stránek zaměřených na XD Designmine a XD Guru.
17. Více hamburgerových menu
Miluj to nebo nenávidíš to Hamburger je tady, aby zůstal. Existuje spousta studií použitelnosti argumentují proti nabídkám skrytým z pohledu. Ale s malou obrazovkou a jen tolika alternativami není zatím lepší alternativa.
Ikony Hamburger jsou pomalé stát se rozpoznatelnými symboly pro menu nav. Stejně jako ikona lupy naznačuje “Vyhledávání”, ikona se třemi bary bude brzy synonymem “Jídelní lístek”.
To platí pro většinu tech-důvtipných jednotlivců. Každým rokem se však více lidí dostane na chytré telefony a začne prohlížet mobilní web. A učí se to spojit ten hamburger s nav menu bez konce v dohledu.
18. Ikony funkcí produktu
O tomto trendu jsem psal na Treehouse, ale nedávno jsem se o něm nezmínil. A do roku 2017 je tento trend bude obrovský. Je to asi nejběžnější způsob sdílet funkce produktu na domovské stránce.
Začnete tím vytvoření seznamu funkcí pro váš produkt. Produkt může být cokoliv od programu SaaS až po téma WordPress nebo dokonce fyzickou položku.
Pak můžete buď design vlastní ikony nebo najít sadu ikon reprezentovat tyto vlastnosti. To je nejlepší vyhnout se obecným vlastnostem jako “spolehlivý” nebo “rychle” protože většina lidí to očekává.
Místo toho seznam funkcí na tom vlastně záleží. Pokud je to prémiové téma WP možná seznam, že je citlivý, kolik widgetů je dodáván s, nebo jak funguje menu.
Tyto ikony funkcí pracovat jako vizuály pomoci prodávat každou funkci. Samotný text je těžko konzumovat vizuály jsou však mnohem snazší pochopit na první pohled.
19. CTA nad záhybem
Výzva k akci tradičně umístěny po celé internetové stránce. Ale s návštěvníky méně času na webových stránkách, je důležité mít silnou CTA přímo nad záhybem.
Tyto výzvy k akci mohou být tlačítka, opt-in formuláře nebo jiné vstupy přimět lidi, aby podnikli nějaké kroky například přihlášení nebo čtení příspěvku na blogu.
Nemohu vám říct, jak navrhnout CTA nebo jak ji optimalizovat pro konverze. Ale mohu říci, že se zdá, že tento trend staví tyto CTA nad záhybem a jasným výhledem pro všechny návštěvníky.
20. Menší obsahové oblasti
Monitory rostly tak velké, že většina webových stránek musí nastavte maximální šířku. Je to mnohem těžší číst věty, když jsou 2000px široké ve srovnání s pouze 700px široký.
Menší obsah je spotřebovávat, a nakonec vytváří lepší zkušenosti na obsahově náročných webových stránkách.
Myslím, že si to více designérů uvědomuje a bude to pomalu omezit velikost jejich obsahových oblastí. Dávám přednost maximální šířce 750px, ale můžete jít až na 600px nebo méně.
Kratší odstavce s méně vět a menších obsahových oblastí bude vždy zvýšit čitelnost. Významné publikace, jako například NY Times, se mohou lišit od vlastních strukturálních směrnic. Ale pro jednoduchý blog nebo obchodní stránky, trend se pohybuje směrem k delší obsah s menšími oblastmi odstavců a obsahu.
Balení
Existuje mnoho dalších trendů, které jsem v tomto příspěvku nedokázal pokrýt, ale myslím, že těch 20 je nejzajímavější. Jak postupujeme do roku 2017, mělo by být zřejmé, které trendy explodují a které ne.
A pokud máte jiné nápady nebo návrhy pro nadcházející trendy v designu, neváhejte a napište komentář níže.
