Flat design vs. webdesign

A korábbi években a webdesign területén a legnagyobb újdonság az úgynevezett Flat webdesign megjelenése volt. Olyannyira hatással volt a tervezőkre, hogy még az Apple és a Microsoft is követte a trendet és mindkét számítástechnikai óriás ezzel a dizájnnal jelentette meg új operációs rendszerét.

Ugyan a Top School weboldala nem ezzel a design stílussal készült, ettől függetlenül nem mehetünk el szó nélkül mellette mi sem. útmutatónkkal webdesigner tanfolyamunk résztvevőinek és a webdesignernek szeretnénk segítséget nyújtani. Röviden összefoglaljuk az új design legfontosabb jellemzőit, és összeállítottunk egy hosszú listát azokról az eszközökről is, amelyek hasznos segítséget nyújthatnak a Flat design tervezése során, legyen szó web grafikáról, mobil felületről vagy bármilyen más számítógépes projektről.

Ha még nem értesz a weboldal készítéshez vagy webdesign néhány hasznos képzés és tanfolyam:

• Grafikus tanfolyam
• Webdesigner weboldal készítés tanfolyam
• Designer tanfolyam
• Webszerkesztő honlap készítés

Flat design legfőbb jellemzői

A hagyományos webdesign grafikai megoldásaival szemben a Flat dizájn nélkülözi mindazokat az effekteket, amelyeket korábban a grafikusok gyakran használtak annak érdekében, hogy realisztikus vagy 3D hatást érjenek el. Jellemzően szinte teljesen hiányoznak e webdesign eszköztárból az olyan hagyományos webdesign díszítő elemek is, mint például az éles szögek, domború elemek, árnyékok, színátmenetek, csillogó vagy mesterséges textúrák.

A Flat designt az úgynevezett minimalista stílus jellemzi, amelynek fő ismérve az egymástól kontraszt alapon jól elkülönülő, de nem telített színek, amelyek gyakran retro hatást keltenek a szemlélőben. Ennek az átfogó trendnek a részeként újra megjelentek a nagyon hangsúlyos, egyszerű tiszta fehér terek, amelyeket a színek és egyszerű vonalak bontanak éles formákra.

Új stílus vesztesei a weboldalakon egyértelműen az animációk, ugyanis ezek tipikusan nincsenek jelen a Flat dizájnban. A letisztult vonalvezetésű, egyszerű és alapvető tipográfia és a nagy képek minden korábbi webdesign stílusnál nagyobb szerepet kaptak a Flat designban annak ellenére, hogy ez a stílusjegy alapvetően jellemző volt a korábbi években népszerű, úgynevezett minimál design stílusára is, mondván a nagy helyek megadják a lehetőséget a tartalomnak a megfelelő érvényesüléshez.

A Flat designt megjelenését követően számos támadás érte. Kritikusai elsősorban egyszerűségét, a már-már gyerekes illusztrációkat és a UI (user interface) bonyolult használatát hozták fel hiányosságaiként. Mindezek ellenére rövid idő alatt különösen nagy népszerűségre tett szert, elsősorban a csupán néhány oldat tartalmazó, egyszerűbb weboldalaknál vagy az érintőképernyős mobil alkalmazásoknál. Itt érdemes megemlíteni, hogy a Microsoft új operációs rendszereinél is ezt a stílust alkalmazza Metro néven, hasonlóan az Apple céghez, amelyik az iOS7 mobil rendszernél vezette be elsőként a Flat designt.

Design, webdesign gyűjtemények

Az alábbiakban csoportba szedtük a stílusra leginkább jellemző hasznos, letölthető design- és webdesign szetteket.

Flat UI Flat webdesign kit (ingyenes)

A webdesign szettet a Freepik.com webdesigner cég tervezte, számos elemet tartalmaz a webes navigációtól a különböző legördülő menükön és közösségi megosztó eszközökön át az e-kereskedelmi modulokig. Flat webdesign kit és mini tutorial
Ha egyedül nem boldogul vele hasznos segítség a Webdesigner képzés

Designmodo Flat UI (ingyenes)

Designmodo az egyik olyan első webdesigner csapat volt, amelyik átvette a Flat dizájnt, mint trendet. Az élénk színeket tartalmazó UI szett több száz elemet tartalmaz, beleértve a gombokat, ikonokat, színmintákat és menü részeket. Ingynes Flat UI modern webdesign tervezéshez
Ha segítégre van szüksége: Webdesigner tanfolyam

Metro UI kit (ingyenes)

A Metro UI kit színes blokkjait és egyszerű tipográfiáját a Microsoft mobil Flat koncepciója ihletette, egyaránt megtalálható benne naptár, statisztikák, diagram, ikonok, menük és kereső elemek. Metro design kit webdesigner képzés anyagaihoz
Ha nem tudja hogy kezdjen hozzá: Webdesigner képzés

FLAT IKONOK

A Flat stílusú ikonok a mobil UI tervezése és a webdesign gombok, navigációs elemek készítésénél egyaránt jól használhatók. Számos UI kithez hasonlóan az ikoncsomagok is rendszerint PSD Photoshop formátumban tölthetőek le, megkönnyítve ezzel a grafikai elemek testre szabását. általában jól használhatók, de vannak olyan esetek, amikor érdemes a szettben található vektor formátumokat használni, vagy újrarajzolni azokat Illustratorral vagy CorelDraw szoftverekkel, így elkerülhetők a méretezés során keletkező minőségromlások.

Freebie PSD – Flat ikonok (ingyenes)

Ebben a grafikai csomagban komplex ikonokat találunk Flat stílusban. általánosságban elmondható róluk, hogy részletesebbek és kidolgozottabbak, mint a szokásos Flat design elemek. Ingyenes photoshop flat webdesign ikon

Flat közösségi média ikonok (ingyenes)

Manapság már egyetlen weboldal, webdesign sem teljes a közösségi média linkek sorozata nélkül. A Designmodo szettje 35 közösségi média gombot tartalmaz. A színsémára jellemző, hogy mind szimbolikájában, mind pedig élénk színeiben passzol a közösségi média által használt webdesignhoz, így teremtve meg a vizuális összhangot. Webdesign ikonok
Ha nem tudja hogy kezdjen hozzá: Webdesigner képzés

MOCKUP éS EGYéB FLAT ELEMEK

Apple termék sablonok (ingyenes)

Az Apple sablonok a tervezésen túl az ügyféllel történő prototípusgyártásban is segítségünkre lehetnek. Ingyens mockup webdesign és programozó képzésekhez
Ha nem tudja hogy kezdjen hozzá: Webdesigner képzés

Kördiagram (ingyenes)

A vázlatok általában a grafikonok legnehezebben beépíthető grafikai elemei közé tartoznak. A látszat ellenére PSD formátum könnyen szerkeszthető lesz Photoshop grafikai szoftverben, mivel a diagram egyes részei vektoros formátumban kerültek bele. Photoshop kördiagramm adatok megjelenítéséhez webdesigner számára ajánlott
Ha nem tudja hogy kezdjen hozzá: Webdesigner tanfolyamok

WEB SABLONOK, WEBDESIGN TEMPLATE

Egyre nagyobb számban jelennek meg az Interneten a Flat webdesign sablonok, amelyek alapján még a kezdő webdesigner is könnyen össze tud állítani egy látványos webdesignt.

Hostcompare sablonok

A webdesign sablon a trendnek megfelelő elemeket és színeket használja. A többi web sablonhoz hasonlóan ennek is az a célja, hogy alapot adjon a tervezéshez és nem az, hogy azonnal eladható designt adjon. így természetesen még némi tervező munkát igényel, amihez nem árt a Photoshop ismeret. Webdesign sablon flat alappal

iPhone flat dizájn UI sablon

Könnyen használható iPhone sablonokat tartalmazó Flat stílusú design, amiben mindent megtalálsz, amire szükséged lehet a kezdéshez. iPhone flat design UI alap

SZíNSéMáK

Mint minden vizuális kommunikációs elemnek és stílusnak, így a Flat designak is nagyon fontos részét alkotják a színek és azok keverési sajátosságai. Ez a stílus gyakran kombinál három, négy, öt vagy akár több élénk színválasztékot a szokásos design-tervezési megoldások helyett, amelyben egy-két domináns szín alkalmazására szűkítették a tervezők az alkalmazott színek számát.

A színkeverés három típusa terjed el:

• telt és világos: a szórakoztató, könnyed stílusú elemekhez javasolják, a színek kiválasztásánál célszerű vagy olyanokat választani, amelyek telítettségben és árnyalatban alkotnak párokat, vagy pedig olyanokat, amelyek komplementer párok.
• a monoton séma: gyakran egy vibráló színárnyalattal kezdődik, mint például smaragdzöld vagy barackszín, vagy akár mindkettő árnyalatai és tónusai.
• sokszínű színpaletta alkalmazása: színek keverése, összeválogatása helyett ez a dizájnopció inkább minden oldalnak, panelnek ad különböző színeket.

Flat dizájn színpaletta (ingyenes)

Nagyszerű kezdeményezés, nem csak a színeket, de a HTML-t és CSS-t kódot megkapjuk a weboldalon. http://codepen.io/cobblucas/pen/iGpIf

Flat UI Colors (ingyenes)

A Flat UI colors egy olyan egyszerű weboldal, amely a Flat dizájnban használatos legnépszerűbb színárnyalatokat és azok RGB kódját teszi könnyen elérhetővé. Flat UI színsémák profi webdesigner számára

ColourLovers (ingyenes)

A ColourLovers használói több ezer olyan színkombinációt hoztak létre, ami jellemző lehet a Flat stílusra. Színválasztó design és webdesign oldal
Ha nem tudja hogy kezdjen hozzá: Webdesigner képzések

Grafikus tanfolyam

Nézd meg az grafikus szakmai képzéshez készített speciális Flat design alkalmazó weboldalunk. A Flat designen mellett úgynevezett Parallax Scrolling technikát alkalmaz, amelynek lényege egy mondatban: kevesebb kattintás és több görgetés!

Vissza design, grafika és webdesign cikkekhez