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!
Tanfolyam ajánló
