Grafikai tervezés bevezető

Szeretnél egy gyorstalpaló grafikai tanfolyamot a tervezés alapjain túl? Vedd fel a Digital Marketing Institute teljes grafikai tervezési tanfolyamát a HubSpot Academy-n. A grafikai tervezés 4 alapja, amit ismerned kell.

1. Színelmélet

A szín egy kritikus elem, amelyet jól kell eltalálnod a terveidben. A figyelem felkeltésére, a jelentés közvetítésére és természetesen az esztétikára használják.

Általában nem is gondolkodunk el azon, hogy milyen színeket nézünk; gyorsan ítélünk meg dolgokat, és gyakran azonnal felmérjük, hogy valami kívánatos, professzionális, szép, csúnya vagy akár furcsa a színe alapján. A legfontosabb dolog, amire a színek használatával kapcsolatban gondolnunk kell, az a közöttük lévő kontraszt. A kontraszt arra utal, hogy az egyik szín mennyire emelkedik ki a másikból. Kontrasztos színeket használhatsz egy képen belül, hogy például a szöveg kiemelkedjen a háttérből.

Az egymást kiegészítő színek, mint például a sárga és a lila, vagy a kék és a narancssárga, maximális kontrasztot biztosítanak egymással. A kontraszt arra is használható, hogy irányítsa az emberek cselekedeteit; hogy tudassa az emberekkel, mit szeretne, mit tegyenek. Ha növelni akarja az "átkattintást", győződjön meg róla, hogy erős kontraszt van a call-to-action gomb és a design többi része között. A színek kontrasztját egy színkör segítségével ellenőrizheted. A színkör megmutatja, hogy a színek vizuálisan hogyan kapcsolódnak egymáshoz. A komplementer színek például azok, amelyek a színkörön egymással szemben állnak.

Dimenziók a művészetben

A színek vizuális jelzéseknek is jelentést adnak. Például egy zöld gomb általában egy megerősítő műveletet jelez, mint például az "OK" vagy az "Elfogadom". Ha azonban egy nagyméretű 'Elfogad' gombot terveznél, és pirosra festenéd, az valóban összezavarhatná a felhasználót, és bizonyos esetekben az eredmény katasztrofális lehet. Beszéljünk a márkák által leggyakrabban használt színekről, és arról, hogy milyen jelentést vagy érzést tudnak kiváltani a közönségből. A piros szín erőteljes érzelmeket válthat ki - pozitív és negatív érzelmeket egyaránt, hogy sürgősségérzetet keltsen - ezért is hatékony az értékesítésben.

Az étvágyat is serkenti, ezért a gyorséttermi szektorban rendszeresen használják. A narancssárga, egy másik meleg szín, könnyednek és vidámnak számít, ezért kevésbé "vállalati" - érzésű márkákhoz illik. A narancs sötétebb árnyalatai az őszhöz kapcsolódnak, ami a "földiesebb" márkáknak kedvez. A zöld könnyen szemet gyönyörködtető és az egészség szinonimája. Ezért gyakran találkozhatsz vele olyan márkáknál, amelyek egészségügyi termékeket népszerűsítenek, mint például a gyógyszerek vagy az élelmiszermárkák. A növekedéshez vagy a hatalomhoz is köthető, például pénzügyi vagy katonai szervezeteknél.

A kék viszont nyugtató hatással van az elmére, és az értelem színe, de az erő, a bölcsesség és a bizalom színe is, ezért használják olyan széles körben. A márkák számára biztonságos választás, de a márkáknak mérlegelniük kell, hogy segít-e nekik kitűnni a térben.

A rózsaszínt történelmileg a nőiesség ábrázolására használták, például a Barbie és a Cosmopolitan magazin esetében. Manapság azonban sok mainstream márka használja a célközönségtől függetlenül, mint például a Lyft. A fiatalságot ábrázolja, de egyben kényelmet is sugall és a reményt képviseli. A rózsaszínt számos iparágban sikeresen használták már arra, hogy "kitörjenek a formából".

A fekete a luxus és a hatalom szinonimája. Egy kis mennyiségű élénk színnel kombinálva energiát adhat a kifinomultságnak. A fekete jól illik egyes iparágakhoz, például a divathoz - de talán nem másokhoz, például az egészségügyhöz.

A fehér és az ezüst a tisztaságot képviseli, és gyakran használják a modern megjelenéshez. Ezt azonban óvatosan kell használni, mivel hiányozhat belőle a személyiség. Sok márka a fehéret egy másik, dominánsabb szín kiegészítésére használja. Ha jól van kivitelezve, a fehér szín hozzáadása a designhoz modern, egyszerű és tiszta megjelenést biztosít.

2. Képek

Láttuk, hogy a képek nagyon jól alkalmazhatók a digitális médiában, de van néhány általános szempont, amit figyelembe kell venni. Először is, a közönség jól reagál a képekre, amelyeken emberek szerepelnek. Ez segít az érzelmi kapcsolat kialakításában, mivel a kampányok valódi embereket céloznak meg, és a képeknek ezt kell tükrözniük. A képminőség szintén nagyon fontos. Amikor a vásárlók online vásárlást fontolgatnak, olyan képeket szeretnének megvizsgálni, amelyek a termék nagyfokú részletességét adják. Az emberek gyakran azért hagynak el egy e-kereskedelmi webhelyet, mert a termék képe nem elég jó minőségű ahhoz, hogy segítse őket a döntés meghozatalában. Ez negatívan befolyásolja a termékről alkotott benyomásukat, és elveszítheted az eladást.

Amikor tehát képeket választasz a tervezés részeként, győződj meg arról, hogy a képek nagy felbontásúak, azaz HD minőségűek, és megfelelnek a közönség által használt eszköznek. Ne legyenek megnyújtva vagy pixelesek. Ezután ne feledd, hogy a webes forgalom nagy része mobileszközről érkezik - ezért nagyon fontos, hogy teszteld grafikáid mobilon, hogy megbizonyosodjon arról, hogy kisebb méreteken is jól néznek ki. Ha nem, fontold meg, hogy grafikájának külön változatát készítsd el kifejezetten a mobileszközöket használó emberek számára.

Itt egy útmutató a különböző képernyőméretekhez legjobban illeszkedő képméretekről:

Banner kép: 2000px széles és 800px hosszú

Csúszka: 1920 px széles és 890 px hosszú

Ikon: 300px széles és 300px hosszú.

Poszt/esemény: 425 px széles és 220 px hosszú

Portfólió: 1920px széles és 768px hosszú

Legyen világszínvonalú digitális marketinges

3. Tipográfia

Mi a helyzet a tipográfiával, illetve az általad használt betűtípusokkal? Fontos, hogy amikor a vizuális megjelenésedhez betűtípust választasz, ne próbálkozz valami vadul mással. Az olvasók elvárják, hogy ismerős betűtípusokat lássanak, például a rendszerszerű betűtípusokat - például Arial, Helvetica, Roboto. Egy weboldalon maximum két-három betűtípuscsaládot használj, a hirdetéseidhez és képeidhez pedig még kevesebbet. Figyelje meg az alábbi képet. Hány betűtípust tudsz megszámolni rajta?

Mi az a betűtípuscsalád? A betűtípuscsalád egyszerűen a betűtípusok csoportosítását jelenti, amelyeket a közösen használt tervezési stílusok határoznak meg. Például a roboto egy olyan család, amely félkövér, dőlt vagy vékony stílusokkal rendelkezik. Találkozhatsz "Serif" és "Sans-serif" betűtípusokkal is. A "serif" egy kis, díszítő vonal, amelyet egy karakterhez adnak hozzá. A legelterjedtebb szerif betűtípus a Times Roman. Egy gyakori, szerifák nélküli, azaz "sans serif" betűtípus a Helvetica. A szerif betűtípusokat a szöveg olvashatóságának javítására használják például blogokban, cikkekben vagy újságokban.

Próbálj meg nem több mint 10 szót használni soronként. A címsorokhoz fontold meg egy nagyobb méretű, sans-serif betűtípus használatát. Gondoskodj a megfelelő hangsúlyozásról - vagy méretről és "súlyról" - a szöveg prioritásának megfelelően. A legjobb gyakorlat az is, hogy ne adjon szöveget közvetlenül a képhez, különösen a webdesignban, és ehelyett a webes csapattal együttműködve helyezze át a képen a reszponzív szöveget. Hogy miért? A képre helyezett szöveggel az a probléma, hogy ha a kép mobilon van, akkor a szöveg néha túl kicsi ahhoz, hogy el lehessen olvasni.

Egy másik szempont a lokalizáció. Mivel a szöveg fix, nem tud automatikusan lefordítani. Az alábbi képen egy Google Translate segítségével magyarra fordított webhely látható. Láthatja, hogy a cselekvésre való felhívások nem HTML-ek - ehelyett képek, amelyek tartalmazzák a szöveget, ami azt jelenti, hogy a szöveg nem fordítható le. Ha szöveget kell hozzáadni, például egy közösségi médiaképhez vagy blogképhez, ügyeljen a megfelelő színkontrasztra.

Például ezt a weboldalt itt a háttérszín kétféle variációjával elemeztük. A másodiknak jobb a kontrasztja, ami olvashatóbbá teszi a szöveget. Egy gyors "hack" a jobb háttérszín-kontraszt hozzáadásához az, ha sötétíti a keretet, mint ennél a példánál. Ne feledd: a kép és az üzenet kombinációja, valamint annak megfogalmazása, sőt, még a használt betűtípusok is dönthetnek a közönség elérésének sikere és kudarca között.

4. Összetétel

Ha már ismered a képed színeit, képi világát és betűtípusait, akkor ezeket a lehető legjobban össze kell illesztened - és itt jön a képkompozíció. A célod az kell, hogy legyen, hogy a design a lehető legegyszerűbb és legelegánsabb legyen. A rendetlenség és a vizuális zajok eltávolítása segít a felhasználónak, hogy egyszerre csak egy feladatra koncentráljon. Ha már minden felesleges információt eltávolítottál, gondoskodnod kell arról, hogy a tartalom - vagyis az összes kép, gomb, szín, alakzat és szöveg - világos és logikus módon legyen elrendezve. A grafikai tervezés minden egyes tartalmi elemének egyetlen célt kell szolgálnia. Amikor tervezést készítesz, kérdezd meg magadtól: "Mi a célja?" Valamire kell rávezetni a felhasználót? Tájékoztasd őket?

Arra ösztönözd őket, hogy folytassák az olvasást? Töltsön ki egy űrlapot? Vagy csak azért van, hogy információt adjon? Még ha több célt is tűzött ki maga elé a tartalommal kapcsolatban, válasszon ki egyet, és győződjön meg róla, hogy a tervezés során a végfelhasználó számára világossá válik, hogy mi a cél. Most pedig beszéljünk az egyszerűség erejéről a designban. Ahogy Nick Babich UX-szakértő mondja, "A minimalizmus nem az elemek lecsupaszításáról szól, hanem arról, hogy csak annyit adj hozzá, amennyi elég ahhoz, hogy azok elmeséljék a történetedet."

Két kulcsfontosságú módja van annak, hogy a dizájnod egyszerű legyen. Először is, biztosítsd, hogy használj fehér teret; másodszor pedig távolíts el mindent, ami nem feltétlenül szükséges. A fehér tér segít a figyelmet arra összpontosítani, amit a felhasználónak látni szeretne. Segít a felhasználónak, hogy ne legyen túlterhelt attól, amit lát. A designban minden elemnek célt kell szolgálnia. A felesleges információk összevisszaságot és zavaróvá tehetik a designt. A "fehér tér" nagyszerű példája a Medium nevű blogplatform. A Medium weboldala nem vonja el a felhasználóit reklámbannerekkel vagy frusztráló felugró ablakokkal.

Ehelyett a megfelelő tartalmat helyezi előtérbe, és olyan információkat mutat, amelyeket az olvasók valóban látni akarnak. Ahelyett, hogy a publikálás dátumát mutatná, valójában az olvasás időtartamát mutatja - ami nagyon okos! Nos, mindenki felismeri a "rosszul kinéző" weboldalakat, ha látja őket. Nézzük meg például a CNN-t 2000-ben. Nem feltétlenül azért tartjuk ezt rossznak, mert régi, hanem inkább azért, mert a kompozíció kusza, és a tartalom nehezen olvasható anélkül, hogy elvonatkoztatnánk tőle.

Az egyszerű dizájnnak nem kell unalmasnak lennie, de egy dolgot kell előtérbe helyeznie, mint az oldal középpontját. Az Instagram egy másik jó példa erre. Az elsődleges cél a képek megtekintése, és minden mást lecsupaszítanak. Szükséged van egy kis inspirációra? A HubSpot összeállított egy listát 32 inspiráló weboldaldesignról. Szóval ne feledd! Koncentrálj a legfontosabb dolgok - a színek, a képek, a tipográfia és a kompozíció - helyes megválasztására, és a dizájnjai el fogják találni a célt a közönség körében.