Od autora: Zdravím vás priatelia! Dnes si povieme, čo je flat dizajn, alebo plochý dizajn webstránky. Tento termín si už dlho získal srdcia webových dizajnérov a dodnes je sebavedomo trendy. Najväčšie spoločnosti(Google, YouTube, Microsoft, Apple Inc. atď.) ho používajú na navrhovanie svojich webových stránok a aplikácií. Ešte stále nepatríte do sekty priaznivcov dizajnu plochých webstránok? Potom ideme k vám!
Čo je podľa vás dôvodom takej divokej popularity flat dizajnu? Odpoviem vám v skratke: naozaj to funguje! V tomto článku vám vysvetlím, čo tento štýl je, poviem vám o jeho výhodách a nevýhodách a ukážem vám niekoľko vynikajúcich príkladov plochého dizajnu webových stránok, ktoré vás určite inšpirujú k veľkým veciam. Tak, poďme!
Všetko to začalo skeuomorfizmom
Pre tých, ktorí nevedia, skeuomorfizmus nie je špinavé slovo a iný štýl webdizajnu. Plochý dizajn je často prezentovaný ako opak skeuomorfizmu, čo podľa mňa nie je úplne správne. Ide skôr o zjednodušenie ako o antagonizmus.
Do roku 2010 bol skeuomorfizmus dominantným štýlom v dizajne rozhrania. Zobrazoval prvky tak, ako sa javili v skutočnosti, aktívne využíval textúry, tiene, odrazy a ďalšie atribúty trojrozmerného obrazu. Apple vynaložil v tomto ohľade mimoriadne úsilie a starostlivo skopíroval väčšinu softvérových objektov zo skutočných objektov.
Čoskoro pseudokonvexné ikony prestali priťahovať väčšinu používateľov a webových vývojárov, čo znamenalo začiatok éry plochého dizajnu webových stránok. Svet dospel k záveru, že všetko dekoratívne prvky je potrebné odstrániť a zostane len to, čo je vhodné pre interakciu koncového používateľa.
“Najlepší dizajn je čo najmenší dizajn”
Ako sa do vody pozrel Dieter Rams - slávny priemyselný dizajnér, ktorý je proti rušivému dizajnu, animačným efektom atď. V júni 2013 Apple Inc. predstavil revolučný iOS 7, ktorý dostal všetky atribúty plochého štýlu webdizajnu. Lietadlo však okamžite „neporazilo“ realizmus a objem.
Používatelia dlho nemohli zabudnúť na kúzlo Steva Jobsa a ikony, „ktoré chcete lízať“. Mnohí sa dokonca rozlúčili s „úbohou Sedmičkou“ a prešli na „žiariaci Android“. Priliali olej do ohňa a veľké množstvo chyby prítomné v systéme iOS 7 a belavý, priesvitný dizajn s paralaxou a animáciou „snot“ pri otváraní aplikácií.
Tí, ktorí rezignovali na nevyhnutnú realitu a zostali pri operačnom systéme Apple, si nakoniec uvedomili, že plochý web dizajn nielen zaujímavo vyzerá, ale do všetkých aplikácií vnáša poriadok a jednotný vizuálny štýl.
Výhody a nevýhody plochého dizajnu
Výhody použitia tohto štýlu zahŕňajú:
prehľadnosť kompozície a stručnosť vizuálnych pomôcok. Responzívne rozhranie v štýle „nič nadbytočné“, vďaka ktorému si používatelia rýchlo uvedomia, čo im chceli sprostredkovať;
dôraz na dobrú typografiu. Obsah je na prvom mieste, čo je pri dnešnom množstve informácií mimoriadne dôležité;
menšia veľkosť webových stránok a rýchlejší výkon stránky vďaka minimálnemu počtu vizuálne efekty. To je užitočné najmä pri vytváraní adaptívnych verzií, pretože jednoduchšie formy, tým jednoduchšie je zobraziť ich na malých obrazovkách mobilných zariadení.
Plochý web dizajn má aj svoje nevýhody:
obmedzenie fantázie webového dizajnéra na zjednodušené farby, typografiu a ikonografiu. Preto je riziko vytvorenia nudnej a nevýraznej webovej stránky vyššie;
nedostatok trojrozmernosti a tieňov niekedy sťažuje pochopenie toho, či na prvok možno kliknúť alebo nie;
nedostatok konkrétnych pevných pravidiel.
Ak ste sa rozhodli použiť na svojej stránke tento štýl, gratulujeme – svedčí to o tom, že vám záleží na používateľskom zážitku a kráčate s dobou. Ak s webovým dizajnérom len začínate a neviete, ako správne použiť plochý dizajn, aby vaša stránka vyzerala relevantne bez zjednodušovania, vyskúšajte tieto tipy:
Zabudnite na „tehlové steny“ a svetlé pozadie. Plochý webový dizajn má tendenciu používať na pozadí jednoduché, hladké a mäkké obrázky.
Moderné tendencie a prístupy vo vývoji webu
Naučte sa algoritmus pre rýchly rast od nuly pri vytváraní webových stránok
Žiadne prechody, 3D ikony, animované prechody alebo iné špeciálne efekty. To všetko urobí váš web ťažším a pridá rozruch – potrebujete to?
Použite ploché ikony s jasnými obrysmi na zvýšenie pohodlia a funkčnosti.
Použite svetlé, šťavnaté farebná paleta. Teraz sú trendom tóny slnečného spektra: svetložltá, ružová a zelená. Hlavnou vecou nie je preháňať to - na stránke by nemali byť viac ako 3 farby.
Zamerajte sa na typografiu. V plochom dizajne sú uprednostňované jasné, originálne nápisy, ktoré vytvárajú výzvu na akciu a poskytujú jednoduchú navigáciu po stránke. Aj tu je dôležité nepreháňať to. Zabudnite na „ručne písané“ a iné ozdobné fonty. Na zvýraznenie nadpisov môžete použiť veľké písmená.
Nebojte sa použiť rôzne geometrické tvary. Štvorce, kruhy, čiary a iné tvary nielen zlepšia štruktúru webu, ale vytvoria aj prehľadnú hierarchiu a rozdelia obsah. Používatelia to ocenia, verte mi.
Zjednodušte navigačné menu a ďalšie prvky lokality čo najviac. Pre tlačidlá použite bežné obdĺžniky bez tieňov alebo zvýraznenia.
Webové stránky s plochým dizajnom sa tak v priebehu rokov stali štandardom, ktorý akceptuje úplne každý. Pozrite sa na väčšinu moderných webových stránok - sú ploché až do jadra.
Na záver uvediem sľúbené príklady vydareného flat dizajnu, ktoré vám môžu poslúžiť ako inšpirácia pri vytváraní vlastných majstrovských diel.
1. Webová stránka http://dunked.com.
Populárna platforma na publikovanie portfólií, zameraná na zástupcov rôznych tvorivé profesie. Minimalistický plochý web dizajn navodzuje pocit spoľahlivej a zrozumiteľnej služby, ktorá nerozptyľuje pozornosť zbytočnými špeciálnymi efektmi.
2. Rozhranie Microsoft.
Microsoft je jednou zo spoločností, ktoré urobili plochý štýl tak populárnym. Možno si pamätáte prehrávač Zune, konkurenta iPodu, ktorý Microsoft vydal v polovici 21. storočia? Dizajn tohto produktu sa teda výrazne líšil od väčšiny aplikácií tej doby, najmä vďaka veľkej typografii, plochým ikonám, veľkým a jasným tvarom.
Toto rozhranie, ktoré sa nazývalo Metro, neskôr migrovalo na osobné počítače (OS Windows 8), rozhranie Xbox 360 a ďalšie softvérové produkty Mircosoft.
3. Webová stránka http://www.vox.com.
Tak čo, inšpirujete sa? Preč s pseudorealistickou 3D estetikou!
To je všetko. Prihláste sa na odber a zdieľajte naše články so svojimi priateľmi v sociálnych sieťach. Vysoké konverzie pre vás!
Moderné trendy a prístupy vo vývoji webu
Naučte sa algoritmus pre rýchly rast od nuly pri vytváraní webových stránok
Čo je plochý dizajn? Tento dizajnový smer je jedným z najdiskutovanejších na internete. Plochý dizajn je skrátka extrémne zjednodušený štýl, ktorého korene siahajú k minimalizmu. Ale to nie je práve minimalizmus, pretože tento štýl dokáže zobrať najviac rôzne tvary v závislosti od požiadaviek na dizajn. Ak chcete lepšie pochopiť, čo je plochý dizajn, je lepšie vrátiť sa späť a definovať, čo určite nie je.
Toto nie je 3D. Samotná 3D grafika vám umožňuje získať veľmi realistické, no zároveň dvojrozmerné obrázky. Na rozdiel od 3D sa nekladie dôraz na plochý dizajn veľa pozornosti detaily, ktoré vytvárajú hĺbku a rozmer, ako sú tiene, svetlá a textúry.
Toto nie je skeuomorfizmus. Plochý dizajn sa objavil ako alternatíva k pseudo-volumetrickým dizajnovým prvkom, ktoré napodobňovali skutočné objekty alebo procesy. Skeuomorfizmus zahŕňa aktívne používanie rôznych efektov: tiene, odrazy, reflexy a realistické textúry. Nič z toho v plochom prevedení je a nemôže byť.
Ľudia prvýkrát začali hovoriť o plochom dizajne v rokoch 2012-2013, keď sa tento štýl prvýkrát objavil. Tento trend bol veľmi citeľný a spôsobil veľa hluku, pretože Microsoft bol jedným z prvých, ktorí vyvinuli tento smer. Vydanie Windows 8 s novým rozhraním navždy zmenilo dizajn a do značnej miery predurčilo vektor vývoja webu, aspoň jeho vizuálnej zložky.
Bokom nezostal ani Apple, ktorý upustil aj od pseudovolumetrických prvkov v dizajne rozhraní svojich zariadení. Vznikol Microsoft a Apple nová realita, v ktorej nebolo miesto pre stránky so zastaraným dizajnom. Apple zároveň nepostupoval tak radikálne ako jeho večný konkurent a postupne sa zbavil prvkov skeuomorfizmu.
Plochý dizajn sám o sebe nie je dobrý ani zlý, sú to weboví dizajnéri, ktorí ho robia pohodlným alebo nepohodlným. Ale aby som bol úprimný, v mojom extrémne prejavy plochý dizajn nevyzerá veľmi esteticky. Zóna najlepšieho vnímania je v tomto prípade pravdepodobne niekde uprostred medzi plochými a pseudoobjemovými prvkami.
Je dosť možné, že dominantný pre viacerých v posledných rokoch trend k extrémnemu zjednodušovaniu bude nahradený niečím iným. Sú na to isté predpoklady – napríklad smer Material Design, ktorý vytvorili dizajnéri Google.
KOMPATIBILNÉ S ADAPTÍVNYM DIZAJNOM
Odklon Microsoftu a Apple od skeuomorfizmu v dizajne rozhrania mal veľké dôsledky. Nový štýl bol takmer okamžite prijatý ako nový prístup k UX. Odvtedy sa plochý dizajn stal dominantným trendom, ktorý je stále aktuálny. Ploché prvky sú dnes všadeprítomné, vidíme ich na weboch, v aplikáciách a na displejoch rôznych zariadení.
Princípy plochého dizajnu sa vzťahujú na širokú škálu dizajnových kategórií, ale jeho prísne mriežky a zjednodušená grafika sa najlepšie zobrazia na zariadeniach s malými rozmermi obrazovky.
Trend smerom k minimalizmu značne zjednodušil prácu dizajnérom – uľahčilo sa im navrhovať rozhrania, ktoré sa správne zobrazujú na akomkoľvek type zariadenia. V prípade pseudo-volumetrických prvkov nebolo všetko tak - niekedy sa rozhranie, ktoré vyzeralo úžasne na obrazovke pracovnej plochy, zmenilo na niečo nepochopiteľné na mobilnom zariadení.
Jednou z hlavných výhod plochého dizajnu je jeho škálovateľnosť. Ploché prvky vyzerajú dobre bez ohľadu na veľkosť a na rozdiel od dizajnu dokonalého pre pixely sa s nimi oveľa ľahšie pracuje.
FLEXIBILNÁ PLATFORMA
Plochý dizajn sa v snahe o jednoduchosť vyznačuje dobrou flexibilitou: všetky prvky sú spravidla vytvorené z homogénnych geometrických tvarov, čo zjednodušuje vytvorenie vyváženého usporiadania, kde má každý modul alebo blok svoje miesto. Všetky prvky sú ľahko rozlíšiteľné a čo je dôležité, počas prevádzky sa dajú rýchlo zameniť bez porušenia pôvodného nastavenia.
Mriežky majú tiež flexibilnú štruktúru, ktorá môže byť poskytnutá v rôznych konfiguráciách. To umožňuje dizajnérom vytvárať tie najoptimálnejšie prístupy najlepšia cesta demonštrovať dostupný obsah. Absencia obmedzení a nutnosť úpravy mriežky v prípade zmeny alebo pridania nových prvkov výrazne urýchľuje pracovný tok.
ČITATEĽNÁ TYPOGRAFIA
Plochý dizajn výrazne zmenil spôsob, akým dizajnéri uvažujú o typografii. Nový štýl si vyžadoval iný prístup k výberu fontov a kvalite rozloženia. Výsledkom bolo, že absencia tieňov a rôznych efektov uľahčili čítanie textov.
Plochý dizajn sa vyznačuje rozsiahlym používaním bezpätkového písma, nejde však o akisomu a pätky môžu vyzerať dobre aj v kombinácii s plochými prvkami. Patkové fonty budú celkom vhodné ako nadpis a dajú sa použiť aj v hlavnom texte, ak typografia nenarúša kompozičnú jednotu.
MÍNUSKY
Môže sa zdať, že plochý dizajn nemá žiadne nevýhody, ale nie je to tak. V snahe zdôrazniť čisté línie a tvary sa niektorí dizajnéri dostanú do pasce zamerania sa na estetiku, pričom zanedbávajú použiteľnosť. Jednoduchý a krásny dizajn, v ktorom nie je nič zbytočné, nie je vždy vhodný a takéto chyby sú obzvlášť výrazné pri používaní mobilných zariadení.
V plochom dizajne je často ťažké určiť, ktorý prvok je interaktívny a ktorý nie. Všetko je rovnaké, neexistujú žiadne zjavné rozdiely, všetky prvky ležia v rovnakej rovine. V snahe o jednoduchosť môžu dizajnéri neúmyselne skryť alebo nevedomky zamaskovať dôležité vlastnosti alebo akcie a používateľ, ktorý nevidí obvyklé výzvy, môže stratiť orientáciu na stránke.
Vezmime si túto stránku ako príklad. Aké prvky v ňom sú interaktívne. všetky? Alebo len nejaké? Nejasné. To sa dá zistiť len náhodne, ide však o zbytočné pohyby, čo je nežiaduce.
STRATA INDIVIDUALITY
Pre každú značku, obchod alebo dizajnový projekt je jedinečnosť nanajvýš dôležitá. Či už ide o webovú stránku, aplikáciu, brožúru, plagát alebo vizitku, dizajn musí byť originálny a dobre rozpoznateľný.
Jednou z nevýhod plochého dizajnu je jeho vizuálny štýl. Použitie jednoduché geometrické tvaryčasto vedie k tomu, že dva úplne odlišné dizajny sú veľmi odlišné podobný priateľ na kamaráta. Dizajnéri, ktorí využívajú ploché prvky, sú vo svojich možnostiach limitovaní, pretože toho nemajú veľa k dispozícii. veľký výber prijateľné možnosti. IN V poslednej dobe Na internete môžete vidieť veľa klonových stránok, ktoré v skutočnosti klonmi nie sú. Je to len náhoda. Okrem toho je náhoda nepríjemná, pretože stránka stráca svoju veľmi potrebnú individualitu a stráca sa na pozadí iných zdrojov s podobným dizajnom.
Niekedy to príde vtipné. Pri pohľade na tieto obrázky si možno myslíte, že sa pozeráme na rôzne časti tej istej aplikácie. Ale nie, dizajnéri Marco La Mantia a Simone Lippolis pracovali nezávisle od seba. Základné dizajnové prvky sú použité ako geometrické obrazce a biele bezpätkové písmo je viac ako logické riešenie. Výsledok je však katastrofálny - rovnaká farebná schéma úplne pripravila dizajn o jeho jedinečnosť. A takých prípadov je veľa.
NAHĽADÁVANIE MÓDY
Plochý dizajn zostane na dlhú dobu jedným z najhorúcejších trendov, jednoducho preto, že vyzerá dobre na displejoch mobilných zariadení. Ale mnohí dizajnéri si vyberajú ploché nielen preto, že im to umožňuje rýchlo vyriešiť väčšinu problémov, ale aj kvôli ich túžbe vytvoriť niečo moderné a módne.
Pri hľadaní módy však môžete urobiť vážnu chybu: ak bezmyšlienkovite sledujete všetky trendy, je celkom možné zabudnúť na užitočnosť dizajnu. Byt môže byť veľmi krásny, elegantný a dokonca pôvabný, ale výber dizajnéra by mal byť určený funkčnosťou a nie túžbou po kráse. Túžba „strčiť“ do dizajnu niečo módne mu niekedy len škodí, napríklad dlhé tiene, jedna z najznámejších čŕt plochého dizajnu.
Pred nami sú diela dizajnérov Alexandra Lototského a Erika Malmskelda. Toto sú typické príklady použitia dlhých tieňov v dizajne. Teraz to už nikoho neprekvapí, no svojho času, a obe diela vznikli ešte v roku 2013, keď plochý dizajn práve prichádzal do módy, bol nový vizuálny štýl veľmi zaujímavý a atraktívny. V dôsledku toho sa objavilo toľko podobných ikon, že dnes je použitie tieňov vzorovým a nezaujímavým riešením. Kedysi to bolo v móde, ale už nie. Tiene sú ako tiene. Nie je v nich žiadny zmysel, nie užitočná funkcia nedodržiavajú.
ZLÝ VÝBER PÍSMA
Každý dizajnér sníva o vytvorení niečoho krásneho a zároveň funkčného. Ale v snahe o estetiku môžete urobiť zlé rozhodnutia, ktoré ovplyvňujú použiteľnosť. Príkladom je šialenstvo pre tenké a svetlé písma. Tento typ typografie pôsobí čisto a ľahko, no je aj ťažko čitateľný.
Niekedy je voľba tenkého písma opodstatnená – napríklad pre použitie v nadpisoch. Ale keď je hlavný text napísaný rovnakým písmom, často je nemožné ho prečítať. Takéto chyby sú obzvlášť viditeľné na mobilných zariadeniach - malá veľkosť obrazovka výrazne znižuje čitateľnosť obsahu.
PLOCHÝ 2.0
Počas posledných rokov dizajnéri experimentovali s plochými prvkami a priniesli do plochého dizajnu veľa nových vecí. Štýl je plne formovaný a ako každý iný zavedený štýl má svoje klady a zápory.
Na úsvite svojho vzhľadu sa byt vyznačoval prísnou vizuálnou jednoduchosťou, nebol tam žiadny náznak tieňov alebo štruktúr. Dokonca ani gradienty neboli vysoko cenené, hoci v žiadnom prípade neodporujú princípom plochého dizajnu.
Postupne sa však aj dizajnéri začali vzďaľovať jednoduché riešenia, snažiac sa nájsť nejaké kompromisné riešenie medzi plochým a skeuomorfizmom. Výsledok bol nový štýl, ktorý niektorí dizajnéri nazývajú Flat 2.0. V dizajnových prvkoch sa postupne začali objavovať tiene, prechody a dokonca aj svetlé, takmer neviditeľné štruktúry. Plochému dizajnu zjavne chýba hĺbka a dizajnéri začali využívať hybridné prístupy. Napríklad vizuálne usporiadať prvky na rôzne úrovne, experimentujte s odtieňmi a tieňmi. Ďalším často používaným príkladom hybridného prístupu je použitie nielen ikon a plochých vektorových ilustrácií, ale aj fotografií.
Urobila veľa pre propagáciu Flat 2.0 spoločnosť Google. Material Design Guideline je pokusom o vytvorenie nového vizuálneho jazyka, ktorý kombinuje ploché a objemové prvky dizajn. Odporúčania Google sú veľmi podrobné a dajú sa ľahko dodržiavať. Google zároveň netrvá na prísnom dodržiavaní všetkých pravidiel uvedených v smernici – dizajnéri môžu experimentovať, vytvárať vlastné originálne projekty, ktoré môžu kombinovať rôzne prvky.
ZÁVER
Dnes je Flat 2.0 vo fáze formovania, ale smer, akým sa bude tento štýl vyvíjať, je už celkom jasný. Výrazné zmeny sa neočakáva – tvorcovia trendov Google, Apple a Microsoft sa nevzdajú. Ak dôjde k zmenám, budú bezvýznamné - objavia sa nové prístupy, niekto príde so zaujímavým „trikom“, pokusy budú naďalej brať to najlepšie zo skeuomorfizmu. V globálnom ponímaní však netreba očakávať niečo skutočne nové – plochý dizajn je dlhodobý trend a z vydobytých pozícií ho môže vytlačiť len štýl, ktorý najlepšie vyhovuje novým technológiám, ktoré ešte neexistujú.
