Webové trendy pro rok 2010
Puristé říkají, že skvělý design je nadčasový. Ano, v ideálním světě bychom měli ignorovat trendy.
Z pragmatického hlediska je však hodně cenné sledování a začlenění návrhových trendů, zejména pokud jde o webové stránky.
Podívejme se na to: web se mění rychlým tempem. Na rozdíl od jiných médií nejsou návrhové trendy na webu spuštěny pouze estetikou.
Technologie se mění, což může drasticky změnit schopnost média.
V roce 2010 jsme viděli, že návrháři nadále tlačí hranice webového designu, stanovením následujících jasných trendů ...
Návrh tisku
Návrh tisku byl vždy zdrojem inspirace pro web. Webdesign je už dost dlouho na to, aby kultivoval silné jádro návrhářů, kteří nikdy nepracovali v tisku. Výsledkem je, že z tisku vidíme více inspirace, neboť tito návrháři vypadají mimo web.
Písmo Písmo
Jedním z nejdůležitějších otázek typografie je čitelnost. Návrháři tisku vždy upřednostňovali serifové písma, protože hrany zlepšují viditelnost a usnadňují rozpoznání písmen.
Sans-serif fonty jsou obecně považovány za snadněji čitelné na obrazovce. Ale s větším počtem uživatelů, kteří procházejí vysokým rozlišením a vylepšením technologie vyhlazování fontů, písma serifu jsou pro text těla velmi čitelná.
Velké nadpisy
Tiskové designéry používají velké okruhy, aby se věnovaly pozornosti celé věky. Tiskový materiál musel mít velký dopad, pokud by se měl číst vůbec. Pokud jste viděli, že na stole stojí nudný brožura, snažili byste se to vyzvednout? Asi ne.
Tento trend začal v roce 2009 a jen se zvětšil v popularitě. Bylo prokázáno, že velké okruhy upoutávají pozornost a jasně komunikují.
Rozložení více sloupců
Návrháři musí pracovat v rámci omezení svého média. Na rozdíl od webu, tisk neposkytuje žádnou volbu pro posouvání, je vázán tak, jak je to podle rozměrů papíru. Použití několika sloupců vám umožňuje vložit více obsahu do stejného prostoru.
Nyní, se zvýšeným rozlišením obrazovky a příchodem rozvržení mřížky, více návrhářů přizpůsobuje tuto metodu webu, aby usnadnilo používání webových stránek a aby se vešlo do většího obsahu.
Big Lead Image
Obrázek stojí za tisíc slov. Zatímco to může být chvíli předtím, než fotografie mají stejný dopad na web jako v tisku (což má mnohem vyšší rozlišení), přijetí širokopásmového přístupu učinilo velké fotografie mnohem praktičtější.
Vidíme, že více webových stránek využívá velké snímky s vysokým nárazem, které přitahují uživatele a vytvářejí úchvatný zážitek.
Diagramy a infografika
Tiskové designéry používají grafiku a poskytují informace po celé roky. To je nejčastěji vidět v časopisech a výročních zprávách.
Grafika může komunikovat složité vztahy a poměry způsobem, který je příliš obtížný s obyčejným textem. Infografy mají tendenci mít jednoduchý, ale vizuálně bohatý vzhled a více návrhářů přijímá infografiku nebo napodobuje styl ve svých návrzích.
Jednoduchost
Antoine de Saint-Exupery kdysi řekl: "Dokonalost není dosaženo, když už není nic víc, než když je třeba zbavit se." Výhody jednoduchosti designu jsou mnohé.
Hickův zákon nám říká, že čas potřebný k rozhodnutí se zvyšuje s každou možností. Navíc teorie signálu k šumu nám říká, že vše, co nepřidává ke zprávě nebo funkci webové stránky (signál), se stává v cestě a činí návrh méně účinný (šum).
Jednoduché návrhy jsou snadněji použitelné a srozumitelné a umožňují větší jasnost při komunikaci zpráv.
Minimalistický a gridový design
Minimalismus je silný, ale těžko zvládnutelný. Obsahuje nic než podstatné. Vše ostatní je odstraněno, což má za následek maximální dopad přítomných prvků.
Minimalistické návrhy vyžadují silný systém mřížky, aby byl účinný. Samozřejmě, že budou mít spoustu bílého prostoru, takže bez této mřížky by se minimalistický design cítil odpojený a nedbalý. Mřížka jí dává organizaci a strukturu.
Rozvržení jedné stránky
Existuje několik způsobů, jak se zjednodušit. Rozložení na jednu stránku zobrazuje dva způsoby: skrytí a odstraňování.
Efektivní jednostránkové rozložení skrývá všechny prvky, které nejsou prioritou. Pokud chce uživatel vidět jeden z těchto prvků, může klepnout na jeho odkrytí. Je to mnohem efektivnější, než ponechat všechno viditelné, což by zkomplikovalo a ohromilo stránku.
Stejně tak zásada za jednostránkové rozvržení způsobuje, že další stránky nejsou zbytečné. S dostupností výkonných knihoven JavaScriptu a rychlejšími připojeními má mnoho webových stránek několik stránek. Návrháři mohou jednoduše umístit informace na jednu stránku bez obtěžování uživatele hierarchií.
Masivní bílý prostor
V prvních dnech webového designu jsme neměli mnoho práce s obrazovkou, a tak jsme nevykazovali mnoho bílého prostoru. Pokud jste se někdy snažili navrhnout webové stránky pro rozlišení 640 × 480, budete přesně vědět, o čem mluvím.
Nyní, když máme vyšší rozlišení a schopnost skrýt a odhalit prvky s JavaScriptem, využívání bílého prostoru je mnohem jednodušší.
Bílý prostor je pro dobrý design důležitý. To dává oku místo k odpočinku. Přirozeně zlepšuje kvalitu návrhu. A ukazuje, které prvky jsou navzájem příbuzné blízkostí.
Typografické rozvržení
Zatímco jsme byli omezeni na několik vybraných "bezpečné webové fonty" s velmi malou kontrolou toho, jak byly zobrazeny, máme nyní širokou škálu nástrojů pro obohacení naší typografie.
Weboví designéři si už dlouho užívali typ jako jemný nástroj pro komunikaci zpráv. S rostoucí kontrolou a schopnostmi vidíme, že více návrhářů se zaměřuje na typografii jako primární konstrukční prvek.
Techniky CSS3
Nejste si jisti, zda můžete ještě využít CSS3? Přemýšlejte znovu. Weboví průkopníci, jako jsou Andy Clarke a Jeremy Keith, již dlouho hlásali o "progresivním vylepšení" v návrhu webových stránek.
Progresivní vylepšení spočívá v návrhu webových stránek tak, aby byly použitelné na starších prohlížečích a zároveň byly "vylepšeny" pro uživatele, kteří se zavázali k nejnovější technologii.
Navrhování v tomto táboře vám umožní využívat vlastností CSS3, jako jsou zaoblené rohy, pozadí okraje a stíny textů a skříní. Uživatelé moderních prohlížečů uvidí hezčí verzi a ti na starších technologiích ( kašel | IE6 | kašel ) uvidí základní verzi.
Animace CSS3
Animace na webu prošla mnoha etapami. Zpočátku jsme mohli animovat pouze s obrazovými soubory GIF. Pak jsme byli do Flashu docela omezeni. Nyní můžeme vybrat mezi Flash, Silverlight, GIF, JavaScript a dokonce i CSS3. Drobná animace může být zapamatovatelná a CSS3 je lehká a snadná.
Zaoblené rohy
Web 2.0 ve stylu roku 2005 a 2006 udělal zaoblené rohy oblíbené, až na to, že jsou otravné. V té době bylo jejich vytvoření obtížné. Neexistuje žádný způsob, jak vytvořit skutečně zaoblené rohy. Namísto toho byly simulovány pomocí CSS, JavaScript a obrázků.
CSS3 nyní umožňuje generovat zaoblené rohy přímo v prohlížeči, což je nejen usnadňuje vytváření, ale také mnohem efektivnější, protože uživatel nemusí stahovat další obrázky nebo soubory JavaScript.
Návrháři stále více využívají této nové možnosti prohlížeče v roce 2010.
Box a textové stíny
Použití stínů pro vytvoření pocitu hloubky bylo provedeno (a někdy přehnané) již od nejstarších dnů webu. Ale nebylo to vždy praktické. Chcete-li do textu přidat stíny, musíte použít obrázky, což zvyšuje čas načítání a ztěžuje údržbu. Boxové stíny vyžadovaly několik obrázků a CSS triků jako "posuvné dveře".
CSS3 disponuje vysoce přizpůsobitelnými schopnostmi stínu, které umožňují širokou škálu kreativních efektů, včetně nejen stínových stínů, ale i vnitřních stínů. Kreativní návrháři již používají tyto efekty CSS3 k simulaci jak reliéfních, tak i tištěných efektů.
RGBa a Opacity
Po celá léta bylo pracování s opacitou a transparentností na webu téměř nemožné. Měli jste tři možnosti: simulovat průhlednost pomocí plochých obrázků, vypořádat se s nekompatibilitou mezi prohlížeči v systému PNG nebo bojovat s hlavními selektory a filtry průhlednosti CSS.
CSS3 dává návrhářům mnohem lepší konzistenci a svobodu při použití opacity s vlastností RGBa. Zatímco můžete využít transparentnosti bezpočet způsobů, jedna oblast, kterou pomohla, je zejména složitým zázemím překryté poloprůhlednými barvami. Dříve tento efekt byl nepraktický nebo nemožný, aniž by se použil komplexní obraz PNG.
Mobilní kompatibilní design
Mobilní web poskytl milionům uživatelů možnost zkontrolovat svůj bankovní účet při čekání na trati, vyhledávat nejnovější skóre v metru a aktualizovat svůj stav Twitter během jízdy. (Který z nich je nebezpečný zvyk?) A mobilní web stále rychle roste.
Dosáhli jsme toho, že každá společnost musí zvážit, zda bude jejich webová stránka použita na cestách, a pokud ano, jak. Inovativní společnosti již investovaly do užitečných a uživatelsky přívětivých mobilních verzí svých webových stránek.
Tvořivost
Výbušný růst při používání sociálních médií je důkazem, že lidé chtějí spojit a sdílet věci, které jsou vášnivé.
V oblasti designu jsme zaznamenali velký nárůst sdílení a prohlížení práce jiných lidí. Jako designéři jsme nyní bombardováni kreativitou všech ostatních. Nejenže to zvyšuje úroveň kvality designu, ale podporuje sdílení nápadů, které přispívají k kultuře tvořivosti a inovací.
Čisté ilustrace
Pokud jste jako já, vy jste vyrůstal sledovat Disney filmy, obdivovat veškeré úsilí, které šly do vytváření každého snímku animace. Jsme daleko za dny, kdy se ukázalo, že se jedná o inkoust a markery, a tento vývoj v nástrojích vedl k několika velmi kreativním přístupům k návrhu.
Mnoho konstruktérů se učí, že hladké, čisté a ostré ilustrace vytvářejí výrazný pocit, který nelze replikovat fotografie ani jednoduchým kliparty. Výsledkem je široká škála profesionálně ilustrovaných návrhů, které jsou zajímavé a příjemné.
Textured pozadí
Texturované pozadí nejsou nic nového na webu. Ale tato technika zaznamenala v posledních několika měsících zajímavou variabilitu. Mám na mysli to jako "mikro-textury", které jsou jemné, sotva znatelné textury v pozadí.
Miniatury
Možná říkáte: "Miniatury byly od počátku webu. Jak je to trend? "Je pravda, že byly vždy používány, ale jen velmi jednoduše. Budete mít miniaturu, na kterou byste mohli kliknout, abyste získali větší obrázek. Dělalo to práci, ale bylo nudné.
V posledních několika měsících se návrháři začali ptát: "Jak můžeme udělat miniatury více vzrušující?" To vedlo k vzestupu miniatur, které jsou jak chytré, tak využitelné.
vodové barvy
Jak se web vyvíjí, vidíme více návrhářů, kteří se inspirují různými zdroji a médii. Není divu, že mezi těmito prameny patří výtvarné umění.
Jeden ze stylů, které se objevily, je simulace akvarelu. Měkký elegantní vzhled tohoto stylu je zřetelný a uklidňující.
Rukopis
Ručně psaná písma a písma skriptů jsou zneužívána nejvíce. Z tohoto důvodu se mnoho designérů vyhýbá oběma typům, a to buď z nechutenství, nebo kvůli strachu z toho, že vypadají amatérsky. Ale v poslední době mnoho návrhářů zjistilo, že když se používají správně, ručně psaný styl vyjadřuje pocit řemesel a plánování. Používá se v pravém kontextu, je to mocný způsob komunikace.
Sociální média
S lidmi, kteří tráví více času na Facebooku než Google, není divu, že návrháři hledají inovativní způsoby integrace sociálních médií na svých webových stránkách.
Někteří designéři se vydali tak daleko, že publikují svůj obsah v sítích sociálních médií a pak používají své webové stránky k tomu, aby je shromažďovali.
Je bezpečné říci, že v roce 2010 se ukáže, že další návrháři naleznou kreativní způsoby, jak integrovat sociální média na své webové stránky, aby lépe oslovili uživatele.
Pevné prvky
Nyní, když prohlížeče lépe podporují position: fixed element, vidíme jeho chytřejší použití.
Existuje mnoho situací, kdy pevný prvek (například trvalá navigace) může sloužit podnikatelským cílům vlastníka a zpřístupnit webovou stránku více.
Pevné prvky jsou nezapomenutelné a zlepšují zážitek uživatelů. Mají nespočet kreativního využití a budeme i nadále vidět, jak je návrháři využívají.
Tento host post je spolupráce mezi nejlepšími lidmi na Web Hosting Search a designérem a vývojářem Ross Johnson. Podívejte se na Web Hosting Vyhledejte správné web hosting a 3point7designs pro další úžasný design webových stránek Rossem
Který z těchto trendů nejvíce sledujete? Jaké jsou další vznikající trendy?