Hogyan indítsa el lapos kialakítású portfólióját. Lapos kialakítás: múlt, jelen és jövő. Mi nem lapos kialakítás?

Mi az a lapos kialakítás? Ez a tervezési irány az egyik legtöbbet vitatott az interneten. Röviden, a lapos kialakítás egy rendkívül leegyszerűsített stílus, amelynek gyökerei a minimalizmusig nyúlnak vissza. De ez nem egészen minimalizmus, mivel ez a stílus sokféle formát ölthet a tervezési követelményektől függően. Ahhoz, hogy jobban megértsük, mi az a lapos kialakítás, jobb, ha visszafelé megyünk, és meghatározzuk, mi az, ami biztosan nem az.

Ez nem 3D. Maga a 3D grafika lehetővé teszi nagyon valósághű, de ugyanakkor kétdimenziós képek készítését. A 3D-vel ellentétben a lapos kialakítás nem fordít nagy figyelmet a mélységet és dimenziót létrehozó részletekre, például az árnyékokra, a csúcsfényekre és a textúrákra.

Ez nem szkeuomorfizmus. A lapos dizájn a valódi tárgyakat vagy folyamatokat utánzó pszeudo-volumetrikus tervezési elemek alternatívájaként jelent meg. A skeuomorfizmus különféle hatások aktív felhasználását jelenti: árnyékok, tükröződések, reflexek és valósághű textúrák. Lapos kivitelben ilyen nincs és nem is lehet.

Az emberek először 2012-2013-ban kezdtek beszélni a lapos tervezésről, amikor ez a stílus először megjelent. A tendencia nagyon érezhető volt és nagy zajt okozott, hiszen a Microsoft az elsők között fejlesztette ki ezt az irányt. Az új felülettel rendelkező Windows 8 megjelenése örökre megváltoztatta a tervezést, és nagymértékben előre meghatározta a web fejlődési vektorát, legalábbis annak vizuális összetevőjét.

Nem állt félre az Apple sem, amely a pszeudo-volumetriás elemeket is elhagyta készülékei interfészeinek kialakításánál. A Microsoft és az Apple új valóságot teremtett, amelyben az elavult dizájnnal rendelkező webhelyeknek nincs helyük. Ugyanakkor az Apple nem járt el olyan radikálisan, mint örök versenytársa, és fokozatosan megszabadult a skeuomorfizmus elemeitől.

Maga a lapos kialakítás se nem jó, se nem rossz, a webdesignerek teszik kényelmessé vagy kényelmetlenné. De legyünk őszinték, extrém formáiban a lapos kialakítás nem tűnik túl esztétikusnak. Valószínűleg a legjobb érzékelés zónája ebben az esetben valahol a középen van a lapos és az ál-térfogat elemek között.

Elképzelhető, hogy az elmúlt években uralkodó szélsőséges egyszerűsítési tendenciát valami más váltja fel. Ennek van néhány előfeltétele – például a Google tervezői által létrehozott Material Design irányvonal.

ADAPTÍV TERVEZÉSSEL KOMPATIBILIS

A Microsoft és az Apple eltávolodása a skeuomorfizmustól az interfész tervezésében nagy következményekkel járt. Az új stílust szinte azonnal elfogadták az UX új megközelítéseként. Azóta a lapos kialakítás domináns trendté vált, amely továbbra is releváns. Manapság a lapos elemek mindenütt jelen vannak, weboldalakon, alkalmazásokban és különféle eszközök kijelzőjén látjuk őket.

A lapos kialakítás alapelvei a tervezési kategóriák széles skálájára érvényesek, de szigorú rácsozatai és leegyszerűsített grafikái a legjobban a kis képernyőméretű készülékeken jelennek meg.

A minimalizmus irányába mutató tendencia nagymértékben leegyszerűsítette a tervezők munkáját – könnyebbé vált számukra olyan felületek tervezése, amelyek bármilyen típusú eszközön megfelelően jelennek meg. A pszeudo-volumetrikus elemek esetében minden nem így volt - néha az asztali képernyőn elképesztően elképesztő kezelőfelület mobileszközön érthetetlenné változott.

A lapos kialakítás egyik fő előnye a méretezhetőség. A lapos elemek mérettől függetlenül jól néznek ki, és a pixel tökéletes kialakítással ellentétben sokkal könnyebb velük dolgozni.

RUGALMAS PLATFORM

Az egyszerűségre törekvő lapos kialakítást jó rugalmasság jellemzi: általában minden elem homogén geometriai formákból készül, ami leegyszerűsíti a kiegyensúlyozott elrendezés létrehozását, ahol minden modulnak vagy blokknak megvan a maga helye. Minden elem könnyen megkülönböztethető, és ami fontos, működés közben gyorsan cserélhetőek anélkül, hogy megsértenék az eredeti beállításokat.

A rácsok rugalmas szerkezettel is rendelkeznek, amely különféle konfigurációkban biztosítható. Ez lehetővé teszi a tervezők számára, hogy a legoptimálisabb megközelítéseket hozzanak létre, amelyek a legjobban mutatják be az adott tartalmat. A korlátozások hiánya és a rács módosításának szükségessége új elemek módosítása vagy hozzáadása esetén jelentősen felgyorsítja a munkafolyamatot.

OLVASHATÓ TIPOGRÁFIA

A lapos kialakítás jelentősen megváltoztatta a tervezők tipográfiával kapcsolatos gondolkodását. Az új stílus más megközelítést igényelt a betűtípusok kiválasztásában és az elrendezés minőségében. Ennek eredményeként az árnyékok és a különféle effektusok hiánya megkönnyítette a szövegek olvashatóságát.

A lapos dizájnt a sans-serif betűtípusok széleskörű használata jellemzi, ez azonban nem akisoma, és a serifek lapos elemekkel kombinálva is jól mutathatnak. A serif betűtípusok meglehetősen megfelelőek lesznek címsorként, és a fő szövegben is használhatók, ha a tipográfia nem sérti a kompozíciós egységet.

MÍNUSZOK

Úgy tűnhet, hogy a lapos kialakításnak nincsenek hátrányai, de ez nem így van. A letisztult vonalak és formák hangsúlyozására irányuló törekvésük során egyes tervezők abba a csapdába esnek, hogy az esztétikára összpontosítanak, miközben figyelmen kívül hagyják a használhatóságot. Az egyszerű és szép kialakítás, amelyben nincs semmi felesleges, nem mindig kényelmes, és az ilyen hibák különösen hangsúlyosak mobileszközök használatakor.

Lapos kivitelben gyakran nehéz meghatározni, hogy melyik elem interaktív és melyik nem. Minden ugyanaz, nincsenek nyilvánvaló különbségek, minden elem egy síkban fekszik. Az egyszerűségre törekedve a tervezők véletlenül elrejthetik vagy akaratlanul is elrejtik a fontos funkciókat vagy műveleteket, és a felhasználó, aki nem látja a szokásos felszólításokat, elveszítheti a tájékozódást az oldalon.

Vegyük ezt az oldalt példaként. Milyen elemek interaktívak benne. Minden? Vagy csak néhányat? Homályos. Ezt csak véletlenszerűen lehet kideríteni, de ezek felesleges mozdulatok, ami nem kívánatos.

AZ EGYÉNISÉG ELVESZTÉSE

Minden márka, vállalkozás vagy tervezési projekt esetében az egyediség rendkívül fontos. Legyen szó weboldalról, alkalmazásról, füzetről, poszterről vagy névjegykártyáról, a designnak eredetinek és jól felismerhetőnek kell lennie.

A lapos kialakítás egyik hátránya a vizuális stílus. Az egyszerű geometriai formák használata gyakran két teljesen különböző mintát eredményezhet, amelyek nagyon hasonlítanak egymáshoz. A lapos elemeket használó tervezőknek korlátozottak a választási lehetőségeik, mivel nem áll rendelkezésükre az elfogadható lehetőségek széles választéka. A közelmúltban az interneten sok olyan klónoldalt láthatunk, amelyek valójában nem klónok. Ez csak egy véletlen. Ráadásul az egybeesés kellemetlen, mivel az oldal elveszíti annyira szükséges egyéniségét, hogy eltéved a többi, hasonló kialakítású erőforrás hátterében.

Néha viccessé válik. Ezeket a képeket nézve azt gondolhatja, hogy ugyanannak az alkalmazásnak különböző részeit nézzük. De nem, Marco La Mantia és Simone Lippolis tervezők egymástól függetlenül dolgoztak. Alapvető geometriai formák és fehér sans-serif betűtípusok a fő tervezési elemek – ez több mint logikus döntés. De az eredmény katasztrofális - ugyanaz a színséma teljesen megfosztotta a design egyediségét. És nagyon sok ilyen eset van.

DIVAT KERESÉSE

A lapos kialakítás sokáig az egyik legmenőbb trend marad, egyszerűen azért, mert jól mutat a mobileszközök kijelzőjén. De sok tervező nem csak azért választja a lakást, mert lehetővé teszi számukra, hogy gyorsan megoldják a legtöbb problémát, hanem azért is, mert vágynak valami modern és divatos létrehozására.

A divat hajszolása során azonban komoly hibát követhet el: ha ész nélkül követi az összes trendet, akkor teljesen megfeledkezhet a design hasznosságáról. Egy lakás lehet nagyon szép, elegáns és még kecses is, de a tervező választását mégis a funkcionalitásnak kell meghatároznia, nem pedig a szépség iránti vágynak. Néha csak árt annak a vágy, hogy valami divatosat „belasszunk” egy dizájnba, például a hosszú árnyékok, a lapos kialakítás egyik legismertebb jellemzője.

Előttünk Alexander Lototsky és Erik Malmskeld tervezők munkái. Ezek tipikus példák a hosszú árnyékok használatára a tervezésben. Ez most senkit nem fog meglepni, de egy időben, és mindkét alkotás még 2013-ban született, amikor a lapos dizájn még csak divatba jött, nagyon érdekes és vonzó volt az új vizuális stílus. Ennek eredményeként annyi hasonló ikon jelent meg, hogy ma az árnyékok használata képletes és érdektelen megoldás. Valamikor divat volt, de ma már nem. Az árnyékok olyanok, mint az árnyékok. Semmi értelme nincs bennük, semmilyen hasznos funkciót nem töltenek be.

ROSSZ BETŰVÁLASZTÁS

Minden tervező arról álmodik, hogy valami szépet és egyben funkcionálist alkosson. De az esztétika érdekében rossz döntéseket hozhat, amelyek befolyásolják a használhatóságot. Példa erre a vékony és könnyű betűtípusok őrülete. Az ilyen típusú tipográfia tisztának és könnyednek tűnik, de nehezen olvasható.

Néha indokolt a vékony betűtípus kiválasztása – például a címsorokban való használathoz. De ha a fő szöveget ugyanazzal a betűtípussal írják be, gyakran lehetetlen elolvasni. Az ilyen hibák különösen a mobileszközökön észlelhetők – a kis képernyőméret jelentősen csökkenti a tartalom olvashatóságát.

LAKÁS 2.0

Az elmúlt néhány évben a tervezők lapos elemekkel kísérleteztek, és sok új dolgot hoztak a lapos tervezésbe. A stílus teljesen kialakult, és mint minden más kialakult stílusnak, ennek is megvannak az előnyei és hátrányai.

Megjelenésének hajnalán a lakást szigorú vizuális egyszerűség jellemezte. Még a színátmeneteket sem tartották nagy becsben, bár semmiképpen sem mondanak ellent a lapos kialakítás elveinek.

De fokozatosan a tervezők elkezdtek eltávolodni a túl egyszerű megoldásoktól, és megpróbáltak valamiféle kompromisszumos megoldást találni a lapos és a skeuomorfizmus között. Az eredmény egy új stílus, amelyet egyes tervezők Flat 2.0-nak hívnak. A dizájnelemekben fokozatosan kezdtek megjelenni az árnyékok, színátmenetek, sőt világos, szinte láthatatlan szerkezetek. A lapos kialakítás egyértelműen hiányzik a mélységből, és a tervezők elkezdtek hibrid megközelítéseket alkalmazni. Például vizuálisan rendezze el az elemeket különböző szinteken, kísérletezzen árnyalatokkal és árnyékokkal. A hibrid megközelítés másik gyakran használt példája az ikonok és a lapos vektoros illusztrációk, hanem a fényképek használata is.

A Google sokat tett a Flat 2.0 népszerűsítéséért. A Material Design Guideline egy olyan új vizuális nyelv létrehozására tett kísérlet, amely egyesíti a lapos és háromdimenziós tervezési elemeket. A Google ajánlásai nagyon részletesek és könnyen követhetők. Ugyanakkor a Google nem ragaszkodik az irányelvben megfogalmazott összes szabály szigorú betartásához – a tervezők kísérletezhetnek, létrehozhatják saját eredeti projekteiket, amelyek sokféle elemet kombinálhatnak.

KÖVETKEZTETÉS

Ma a Flat 2.0 formálódási szakaszban van, de már teljesen világos, hogy milyen irányba fog ez a stílus fejlődni. Lényeges változás nem várható – a Google, az Apple és a Microsoft irányadók nem adják fel teljesen. Ha vannak változások, azok jelentéktelenek lesznek - új megközelítések jelennek meg, valaki érdekes „trükkel” áll elő, a kísérletek továbbra is a skeuomorfizmusból a legjobbat veszik ki. Globális értelemben azonban nem kell igazán újat várni - a lapos design hosszú távú trend, és csak a még nem létező új technológiákhoz legjobban illő stílus tudja kimozdítani meghódított pozícióiból.

Viszonylag a közelmúltban népszerűvé vált az olyan tervezési irány, mint a FLAT vagy a lapos kialakítás.

A Windows 8 és újabb verziók felhasználói már ismerik a FLAT dizájnt, hiszen a rendszer betöltésekor ez a képernyő az első, amivel találkoznak.

A FLAT design megjelenése a mobil alkalmazások terjedésének köszönhető. És ez szerintem annak köszönhető, hogy a FLAT tervezési objektumok vektoros objektumok felhasználásával jönnek létre, és ennek megfelelően könnyebben adaptálhatók a különböző kütyüplatformokhoz.

FLAT – a kialakítás a következő tulajdonságokkal rendelkezik:

Színátmenetek, összetett textúrák és árnyékok teljes vagy részleges elutasítása , aminek személy szerint nagyon örülök. Nincs panaszom az árnyékokra, és magam is szeretem használni őket, de hagyd, hogy a színátmenetes megjelenítés örökös problémái eltűnjenek.

Előtérbe kerül a tipográfia, a geometria. Főleg, ha webdizájnról van szó.

Harmónia és. A design korlátozott számú színt használ. Íme egy példa a népszerű FLAT tervezési palettára.

Kreatív tájékoztató ikonok használata.

Mint már mondtam, a FLAT design nagyon népszerűvé vált a mobil alkalmazásokban, mivel fő jellemzője az egyszerű elrendezés és az alkalmazkodóképesség. A FLAT tervezés az infografikában is elterjedt, mivel az információ harmonikus észlelésére épül, a tipográfia és a színek konstruktív technikáinak felhasználásával.

Egy időben a webdizájn legnépszerűbb trendje a Web 2.0 volt. Most a helyét a FLAT design vette át. A divatnak megvan az a szokása, hogy visszatér a jól elfeledett régihez, hogy valami újat alkosson belőle. Ki tudja, mikor megy ki a FLAT design a divatból, de egyelőre élvezze az aktuális trend egyszerűségét, harmóniáját és információtartalmát. A lapos dizájn egyébként már a 80-as években is népszerű volt, de akkor a műszaki jellemzők és az árnyékok és színátmenetek megjelenítésének képtelensége miatt. És most a legtöbb vezető IT-cég áttért a lapos tervezésre.

Nos, mi is alkalmazkodni fogunk a változó világhoz. A következő cikkben megmutatom, hogyan hozhat létre FLAT stílusú ikonokat egyszerű formák segítségével a Photoshopban.

Ha a kiadványaim felkeltették érdeklődését, akkor azt javaslom, hogy kövesse az oldal legújabb frissítéseit.

(2 384 alkalommal látogatva, ma 1 látogatás)

Aki mobilalkalmazásokat, weboldalakat fejleszt, írt nekünk egy rovatot, és mindent a helyére tett a lapos és anyagtervezés terén.

Általánosságban elmondható, hogy a lapos kialakítás és az anyagkialakítás közötti különbség finom. Egy olyan személy számára, aki nem rendelkezik mély ismeretekkel a grafikai tervezésben, valóban nagyon hasonlónak tűnhet. Ebben a cikkben megpróbálok „világítani” a köztük lévő különbségekre. További ismereteket kap, amelyek annyira szükségesek, hogy véletlenül se sértse meg a tervező finom természetét.

Egy kis történelem

Mielőtt elkezdenénk beszélni a két legnépszerűbb tervezési irányzat közötti különbségekről, nézzük meg, honnan származnak. Van egy vélemény, hogy az anyagkialakítást lapos alapon hozzák létre. Akkor honnan jött a lapos kialakítás?

Skeuomorfizmus

Amikor a felhasználói felületről és a webdesignról van szó, a skeuomorfizmus fogalma egy olyan megközelítésre utal, amelynek fő gondolata az utánzás. Anélkül, hogy túlságosan belemennénk a részletekbe, emlékezzünk csak az Apple iOS 7 előtti interfészeire a „valósághű textúrákkal, világítással és lenyűgöző hatásokkal”.

Azt a kísérletet, hogy a digitális objektumokat a valós társaikra hasonlítsák, az indokolta, hogy megkönnyítsék a felhasználók interakcióját az eszközzel. Valójában ez az oka annak, hogy az összes valósághű textúrájú interfész évek óta uralja a digitális világot. A skeuomorf tervezés nagyszerű munkát végez abban, hogy segítse a felhasználókat zökkenőmentesen áttérni a valós világból a digitális világba.

A mobiltechnológia térnyerésével azonban fokozatosan egyre inkább a kényelemre és a könnyű kezelhetőségre kell összpontosítani. Egyetértek, ezen a területen jelentősen növekszik az igény a különböző eszközökről elérhető mobil megoldások létrehozására. És ebben a pillanatban az egyszerűség válik a tervezés új standardjává.

Megjegyzés: Semmi esetre se gondolja, hogy a szkeuomorfizmus teljesen eltűnt. Széles körben használják olyan játékokban, ahol valósághű világot kell létrehozni, és segíteni kell a játékosoknak, hogy érezzék a karakterüket, hogy mélyen elmerüljenek a játék folyamatában.

Lapos kialakítás

Ez a stílus teljesen mentes a háromdimenziós objektumoktól. Nagyjából elmondható, hogy a lapos kialakításból hiányoznak az olyan stilisztikai elemek, mint a vetett árnyékok, a textúrák, a színátmenetek, de odafigyel a betűtípusok, színek és ikonok játékára. De miért volt szükség mindezekre? A válasz egyszerű.

Először is, a lapos kialakítás jelentősen csökkenti az oldal betöltési idejét. A „nehéz” skeuomorf részletek (gondoljunk csak bele: rétegek, serif betűtípusok, színátmenetek) hiánya „könnyebbé teszi a lapos design elemeket”, ami viszont jelentősen felgyorsítja a betöltési időt. Ezenkívül a lapos elemek egyformán vonzóak a nagy és alacsony felbontású képernyőkön.

Másodszor, az egyszerű képek gyorsabban tudják átadni az ötletet a felhasználóknak, mint a részletes illusztrációk: vázlatosak, ezért meglehetősen könnyen érthetők.

És persze a viszonylag egyszerű betűtípusú lapos ikonok valóban fontos tartalmakra irányíthatják a felhasználók figyelmét.

Mára a lapos kialakítás megérdemelt elismerésben részesült, de még mindig vannak problémái. Az ilyen problémák legnyilvánvalóbb példája a Windows 8 Microsoft általi kiadása volt. Ezt az operációs rendszert a lapos tervezés úttörőjének tartják, és támogatja a Metro design koncepcióját. Problémákhoz az vezetett, hogy a cég szükségesnek tartott a tipográfiára nagyobb figyelmet fordítani, mint magára a grafikára.

Az NN Group által végzett Windows 8 használhatósági teszt eredményei azt mutatták, hogy a felhasználók nehezen tudtak megkülönböztetni a kattintható és nem kattintható objektumokat. A felhasználók panaszkodtak, hogy a statikusnak tűnő objektumok valóban kattinthatók. Emiatt a cég fő küldetése – a felhasználók segítése a rendszer helyes értelmezésében – meghiúsult.

Egy másik cég, amelyet gyakran a lapos kialakítással társítanak, az Apple. Eltávolodtak a skeuomorf dizájnelemektől a 2013-ban kiadott iOS 7 mobil operációs rendszerben. Ezúttal egy kicsit jobban fogadták az átállást, főként annak köszönhetően, hogy a cég nem próbálta meg teljesen frissíteni a felhasználói felület koncepcióját, hanem egyszerűen bevezetett néhány változtatást a lapos kialakítás felé. Ez lehetővé tette a felhasználók számára, hogy az operációs rendszerekkel és webhelyekkel kapcsolatos korábbi tapasztalataik alapján használják a terméket.

Anyagkialakítás

Tisztázzuk most: az anyagdizájn inkább márkatermék, mint spontán tervezési irányzat, amely széles körben elfogadott. Főleg ez különbözteti meg lapos kialakításától.

Azzal, hogy egy tervezési anyagot „márkásnak” nevezünk, azt értem, hogy világosan meghatározott ajánlások és elvek egész sora van, amelyeket minden önmagát tisztelő tervező követ. Teljesen nyilvánvaló, hogy a Google miért vezette be a Material Design-t: egységesíteni kellett a dizájnt, hogy az alkalmazások ugyanúgy nézzenek ki a sok Android-eszköz közül bármelyiken.

Bár meglehetősen funkcionális, a lapos kialakítást továbbra is nehezen érthetőnek tartják. Az igazság az, hogy a képernyőn lévő lapos tárgyak megzavarhatják a felhasználókat (főleg azokat, akik nem jártak a mobil és webes felületek használatában). Ezért az anyagtervezés igyekszik visszahozni a szkeuomorfizmus elemeit, de erősen leegyszerűsített formában. A képek laposnak tűnnek, különösen, ha színekről van szó, de a Z-tengely jelenlétének köszönhetően továbbra is többdimenziósak.

Más szavakkal, az anyagtervezést a lapos kialakítás továbbfejlesztett változatának nevezhetjük a skeuomorfizmus elemeivel - animációval, árnyékokkal és rétegekkel. Így a termék intuitívabbá tehető a navigáció szempontjából, és elkerülhető a szükségtelen bonyolultság az általános stíluson belül.

A lapos kialakítás előnyei és hátrányai

Hagyjuk magunk mögött a stílusok fejlődésének történetét, és térjünk át valami jelentősebbre – felsoroljuk a lapos kialakítás erősségeit és gyengeségeit.

• Minimalizmus és stílus
• Intuitivitás. Könnyebben közvetítheti ötleteit a felhasználók felé.
• Időt és erőforrásokat takarít meg. Az oldalak sokkal gyorsabban töltődnek be, kisebb sávszélesség-fogyasztás mellett.
• Koncentrálj a tartalomra. A felület mentes a felesleges részletektől, amelyek elvonhatják a figyelmet az igazán értékes információkról.
• Egyformán jól néz ki különböző eszközökön, legyen az PC böngésző vagy okostelefon.
• Felgyorsítja a webhely- vagy alkalmazástervezési folyamatot azáltal, hogy kiküszöböli a szükségtelen tervezési érintéseket.

• Minimalista stílus.
• Intuitív szinten meglehetősen intuitív. Az anyagkialakítás egyformán könnyen áttekinthető lesz mind a tapasztalt felhasználók, mind a kezdők számára.
• Mérsékelt skeuomorfizmus. Minden valósághűbbnek tűnik a Z-tengely használatának köszönhetően (egy egyedülálló Google-koncepció).
• Van egy sor kézikönyv, amelyet folyamatosan frissítenek. Ezért minden tervező mindig hozzájuk fordulhat, ha nehézségek merülnek fel a munkafolyamat során.
• A webes megoldások animációja javasolt. Nem kell emlékeztetni arra, hogy az emberek mennyire szeretik a mozgást. Ezenkívül az animáció lehetővé teszi, hogy a kezelőfelületet áttekinthetőbbé és intuitívabbá tegye.

• Van tulajdonosa (Google cég). Ezért minden kérdéssel és fejlesztési javaslattal a tulajdonoshoz kell fordulni.
• A Z tengely miatt a tervezési folyamat tovább tarthat.
• Az animált elemek több erőforrást igényelnek.
• Az irányelvek szigorú betartása korlátozhatja a terv eredetiségét.

Összesít

Valójában az egyik vizsgált tervezési megközelítés nem tekinthető egyértelmű előnynek a másikkal szemben, mivel a lapos és az anyagstílusok egymás mellett haladnak. Mindkettő hihetetlenül népszerű, és mindkettő mentes a túlzott realizmustól. Az anyagtervezés a lapos kialakítás utódja, míg maga a lapos kialakítás a túl nehéz és valósághű megoldásokra adott reakció. Az anyagkialakítás hozzáadott valamit, amitől a lapos kialakítás mindig is igyekezett távolodni – egy kis skeuomorfizmus. Bár egy dolog mindig más lesz e megközelítések között: az anyagtervezés a Google szabadalmaztatott terméke, a lapos tervezés pedig több tervezési gyakorlat ötvözésének eredménye, amely elsősorban az általános egyszerűségre törekszik.

Valójában a lapos kialakítás sokat fejlődött az elmúlt években, a teljesen „lapos” stílustól a „félig lapos” stílusig. Most már lehetővé teszi a rétegek és a finom árnyékok használatát, hogy az objektumok mélyebben jelenjenek meg, mint ahogy korábban megjelentek. Tehát te és én a lapos kialakítás 2.0 boldog kortársai vagyunk.

Végül semmi sem akadályozza meg, hogy megpróbálja kombinálni ezt a két megközelítést egy igazán funkcionális és felhasználóbarát termék létrehozásához. Tehát merítsen ihletet a lap- és anyagtervezési guruktól, és kezdjen dolgozni!

Ha elírási hibát talál, jelölje ki, és nyomja meg a Ctrl + Enter billentyűkombinációt! A kapcsolatfelvételhez használhatja.

A közelmúltban óriási népszerűségre tett szert a weboldalak és felhasználói felületek tervezésében egy sajátos stílus, amelyet elemeinek stilizációja miatt laposnak neveznek.

Ha egy Flat szabályok szerint készült weboldalt nézel, nem fogsz látni színátmeneteket, árnyékokat, a hangerő vagy a textúra legcsekélyebb nyomát sem. A lapos stílus alapelvei az egyszerűség, a tömörség és a minimalizmus. A fő megkülönböztető jellemzők azok a dolgok, amelyekre összpontosíthat - élénk szokatlan színek, nem szabványos tipográfia, grafikai primitívek.

Manapság egyre több tervező alkalmazza ezt az irányzatot munkájában, de a Flat stílus különösen népszerűvé vált a modern mobil operációs rendszerek, a Windows Phone és az iOS 7 elterjedésével, hiszen ennek a trendnek a követői, bár nem ragaszkodnak azt teljesen.

Cégünknek már van tapasztalata a Flat stílusú weboldalak készítésében, és szívesen segítünk egy lapos weboldal elkészítésében!

Ebben a cikkben kiemeljük a lapos kialakítás alapelveit, amelyeket követnie kell, ha a lakást szeretné projektje fő stílusaként használni.

Az alábbiakban elemezünk és példákat adunk néhány lapos stílust használó webhelyre.

1. Távolítsa el az összes effektust

A lapos kialakítás alapelve egy olyan kétdimenziós kép létrehozása, amely már önmagában is lapos. Ugyanakkor meg kell szabadulnia minden olyan elemtől, amely legalább némi mélységet adhat a képnek: színátmenetek, sima átmenetek, árnyékok, ferdék, hangerő, textúrák stb. A kép minden elemének kemény szélei vannak, és nem tűnnek ki vagy mélyek a kép többi eleméhez képest.

A lapos kialakításban nem talál olyan elemeket, amelyek megpróbálnak valósághűnek látszani (skeuomorfizmus), 3D animációt, valósághű ikonokat stb. Maga a dizájn azonban igyekszik a hagyományoshoz hasonló maradni, de most a címkék, a gombok és a navigáció kerülnek előtérbe.

Első pillantásra a lapos kialakítást használó webhely túl egyszerűnek tűnhet, bár valójában ezt a stílust az elemek világos hierarchiája, az összes felhasználói interakciós eszköz kényelmes elhelyezése jellemzi, és ezért magas használhatósági pontszáma van.

2. Egyszerű elemek használata

A lapos kivitelben kitűzött céljaik eléréséhez a tervezők gombokat és ikonokat használnak. A lehető legintuitívabbnak és kattinthatóbbnak kell lenniük. Mint minden más interfész elemnek, ezeknek is laposnak és egyszerűnek kell lenniük, további effektusok nélkül. A tervezők gyakran egyszerű geometriai formákat is használnak - téglalapokat, köröket és négyzeteket, így minden alakzat külön tárgy lehet.

3. Koncentráljunk a tipográfiára

Mivel az előző elv szerint a lapos kialakítású grafika egyszerű, rendkívül fontos elem a tipográfia - a feliratok tervezése. A lapos kivitelben a tipográfia kerül előtérbe a gombokkal együtt.

A betűtípusoknak olvashatónak kell lenniük, és természetesen összhangban kell lenniük a dizájnnal, mivel egy egyszerű kialakításnál a rendkívül díszes betűtípusok nem fognak kinézni. Azonban ne használjon közönséges betűtípusokat, jobb kísérletezni, és kiválasztani azt, amely felkelti a felhasználó figyelmét.

Megfontolhatná egy egyszerű sans-serif betűtípus kombinálását néhány új betűtípussal, amelyet művészeti elemként fognak fel. A betűtípusoknak egyszerűbbé és áttekinthetőbbé kell tenniük a tervezést, míg a gombok és egyéb elemek csak az interaktivitás fokozását szolgálják.

4. Vonjuk fel a figyelmet színekkel

A lapos kialakításban szinte a szín játssza a fő szerepet. Ha figyelmesen tanulmányozza az ezen koncepció alapján létrehozott webhelyeket, az első dolog, ami felkelti a figyelmet, az élénk színpaletta. Általában több kontrasztos tiszta (árnyalatok nélküli) színből áll, kettő vagy három, bár ez a szám elérheti a nyolcat is. Ezenkívül ezeket a színeket általában egyformán használják.

A legnépszerűbb színek az elsődleges és a másodlagos színek. Vagyis az alapszínek (cián, bíbor, sárga, fekete) és a keverésük alapján kapott színek. Szintén nagyon gyakran retro színeket használnak a színsémában lapos kialakítás létrehozásakor, például lazac, lila stb.

5. Minimalizmus

A lapos kialakítás egyszerű, és jól illeszkedik a minimalista megközelítéshez.

A webhely általános kialakításánál kerülni kell a túl sok csengőt és sípot. Persze az egyszerű színek és szövegek nem biztos, hogy elegendőek. Ezért, ha vizuális effektusokat szeretne hozzáadni, egyszerű fényképeket kell választania. Egyes kiskereskedelmi termékoldalak lapos kialakítást használnak, hogy termékeiket egyszerű, nem zavaró háttérre helyezzék.

Megjegyzendő, hogy egyes fényképek természetes mélységűek, de összességében beleillik a teljes tervezési síkba

Lapos kialakítás (lapos kialakítás) népszerű stílus weboldalak és felületek, valamint operációs rendszerek tervezésében, melynek jellemzője az egyszerűség, a kifinomultság és a minimalizmus. A lapos kialakítás 2010-ben kezdett népszerűvé válni a skeuomorfizmus ellentéteként.

Skeuomorfizmus- más tárgy formájából másolt, de eltérő anyagokból vagy eltérő módszerekkel készült fizikai dísz vagy dizájnelem. Ilyen például a szegecsutánzattal díszített kerámia, amely hasonló fémből készült edényekre emlékeztet, vagy egy számítógépes naptár, amely egy papír íróasztali naptár összetűzött oldalainak megjelenését utánozza (definíció: Wikipédia).

A lapos stílus népszerűsítését a tervezésben elősegítette, hogy a Microsofttól megjelent a Windows 8 operációs rendszer Metro stílusban, valamint az iOS 7, amelyben az Apple szintén lapos stílust választ. Ez után kezdődik a lapos tervezés igazi korszaka. Hamarosan a nagy keresőszolgáltatások és alkalmazások – a Google, a Youtube – áttérnek a Flat-designra, sok olyan oldal jelenik meg, amelyek a lapos stílus elveit alkalmazzák. Az elmúlt években a lapos design vezető szerepet tölt be a globális weboldaltervezési trendekben.

A lapos kialakítás előnyei

1. Praktikusság- a lapos kialakítás lehetővé teszi a stílusok, szkriptek és animációk számának minimalizálását, ami lehetővé teszi a webhely gyorsabb betöltését.
2. Könnyen adaptálható- A lapos kialakítás elég könnyen alkalmazkodik a különböző képernyőfelbontásokhoz.
3. Egyszerű használat- az egyszerűsített stílusnak köszönhetően a felhasználók könnyebben érzékelik az oldalon található információkat.
4. szépség- a külső pártatlanság és az egyszerű dizájn lehetővé teszi, hogy egy olyan dizájnra összpontosítson, amely igazán magával ragad.

A lapos weboldal tervezés 5 alapelve

A lapos kialakítás egyáltalán nem unalmas, ahogyan első pillantásra tűnhet. Tisztaságuknak és kifinomultságuknak köszönhetően a tervezési megoldások stílusosak és szépek lehetnek, felesleges zaj nélkül, így Ön termékére vagy szolgáltatására koncentrálhat.

1 - 2D objektumok használata

A lapos kialakítás kizárja olyan elemek használatát, amelyek mélységet és térfogatot adnak egy objektumnak: árnyékok, színátmenetek, csúcsfények, textúrák, tükröződések, animáció. Egy objektum leképezésekor csak a körvonalai jelennek meg.

2 - Ikonok és egyszerű tárgyak

A lapos ikonok és az egyszótagos alakzatok világos körvonalakkal és azonos színekkel lehetővé teszik a tervezés lehető legegyszerűsítését és világosabbá tételét. A kezelőszervek intuitívvá válnak a felhasználó számára, és ösztönzik az interakciót.

3 - Egyszerű betűtípusok a tervezési stílusban

A lapos kivitelben nagy figyelmet fordítanak a tipográfiára és a betűtípusokra. A dőlt betűket itt nem használjuk, a betűtípus harmonikusan illeszkedik a weboldal dizájnjába, nem csak a tartalomban, hanem a navigációban is. Még a webhely betűtípusaiban is a minimalista stílus javasolt.

4 - Színjáték

A lapos kialakítás több alapszínt tartalmaz, amelyek kizárják a sima átmenetek és színátmenetek használatát, de lehetnek világosak és kontrasztosak egymással.

5 - Minimalizmus

A lapos kialakítás magában foglalja az elemek vizualizálását, a képernyő teljes szélességében, és egyúttal az információ minimalizálását.

Van olyan, hogy szinte lapos kialakítás. Ez a lapos kialakítás egyik koncepciója, amely az egyszerű elemek és a kétdimenziós tér használata. Példa erre egy jó minőségű fotó, amely elmosja a hátteret vagy elsötétül. Ez lehetővé teszi az objektum mélységének és perspektívájának létrehozását.

Lapos kiviteli példák

Az interneten, beleértve a fehérorosz szegmenst is, számos példát találhat lapos kialakítású webhelyek fejlesztésére különböző témákban, beleértve a hírforrásokat, portálokat és még online boltokat is.