Ingyenes WebDesign / WebDesigner Tanfolyam 4. rész

Ingyenes WebDesign / WebDesigner Tanfolyam – Miről fog szólni a tanfolyam 4. része?

Ha nem olvasta még… – A tréning/tanfolyam korábbi részei:

Ingyenes WebDesign / WebDesigner Tanfolyam (1. rész)

Ingyenes WebDesign / WebDesigner Tanfolyam (2. rész)

Ingyenes WebDesign / WebDesigner Tanfolyam (3. rész)


Hol is hagytuk abba a 3. részben? – akit érdekel itt megnézheti a cikket

Beszéltünk a színekről, a színkörről, aztán váltottunk a tipográfiára.

Most egy kicsit visszalépünk, mert a színek alkalmazása, a kontrasztok, a színpszichológia, a színek által kiváltott érzelmi hatások, a színek társítása, a színpaletták olyan fontosak, hogy nem szabad kihagynunk a tanfolyam/tréning anyagából.

Így egy kicsit visszacsatolva, s visszatérve, ezen részeket taglaljuk egy kicsit, példákkal fűszerezve, hiszen ezek rendkívül fontos témák. Akkor vágjunk is bele a 4. részbe

A Kontraszt használata

Az egyik fontos színelméleti alapelv a kontraszt használatára vonatkozik. Minél nagyobb a kontraszt, annál jobban kiemelkedik két szín egymásból.

A kontraszt értékelésénél fontos, hogy ne csak a színeket (pl. kék és zöld), hanem azok tónusát is figyelembe vegyük. Két különböző szín egyenletes tónussal nem hoz létre nagy kontrasztot.

A lenti példák, persze némi sarkítást is tartalmaznak például az utolsó mintánál, a gyengébb kontraszt esetén az átlátszóságot (opacity) is csökkentettük, de ebben van szándékosság is. Korábban láttam 1-2 oldalt, ahol ezzel is játszottak és majdnem a lenti példához hasonló eredményt értek el – gondolom nem szándékosan -.

Azonban arra is célszerű odafigyelni, hogy ami a mi monitor beállításunknál jól látható, lehet, hogy másnál nem az lesz, így ha lehet inkább ne vagy ritkán alkalmazzunk csak szövegre átlátszóságot. Ha mégis tesszük, egymástól nagyon eltérő, kontrasztos szöveg és háttér esetén tegyük.

Egy egyszerű trükk két szín kontrasztszintjének meghatározásához, ha szürkeárnyalatra (grayscale) alakítjuk át őket – a kontrasztkülönbség sokkal szembetűnőbb lesz (lásd lent).

Kontraszt_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Kontraszt_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Ha lehet, mindenképpen használjunk kontraszt ellenőrzőt! (Akár a korábbi, a tanfolyamunk 3. részben említett coolors oldal is alkalmas erre!) – Néha ezt a részt rutinból csináljuk, de a remek kontraszton is nagyon sokat javíthatunk, ha erre kiemelten figyelünk. Ebben a toolok, a coolors és hasonló oldalon található online megoldások nagyon nagy segítséget tudnak nyújtani. Ezért vannak, használjuk őket!

Kontraszt_Grayscale_Szürkeárnyalat_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Kontraszt_Grayscale_Szürkeárnyalat_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

A kontraszt a megjelenésünk egyik kulcs eleme!

Általánosságban elmondható, hogy a weboldalak tervezésénél a nagyobb olvashatóság miatt nagy kontrasztú színeket szeretnénk használni. Például fehér szöveg sötét háttéren, vagy fordítva. A kontraszt felhívja a figyelmet, és vizuálisan kiemelhet bizonyos fontos elemeket.

A túl sok színkontraszt egy weboldalon azonban megviselheti a szemünket.

WebServe_ingyenes-webdesign-webdesigner-tanfolyam-4.-resz_WebDesign_training_free_ingyenes_colorKid
WebServe_ingyenes-webdesign-webdesigner-tanfolyam-4.-resz_WebDesign_training_free_ingyenes_colorKid

Nézze meg ezt a bejegyzést, hogy többet megtudjon a színelméletről és arról, hogyan alkalmazza azt a weboldal tervezésében.

Használjuk a színpszichológiát a márka üzeneteinek és értékeinek közvetítésére.

A színpszichológia a színeknek az érzéseinkre, érzelmeinkre és viselkedésünkre gyakorolt hatására utal. Bár kissé szubjektív, a színpszichológia segíthet abban, hogy tudat alatt értelmes módon befolyásoljuk a weboldalunkat meglátogató embereket, az ő reakcióikat az oldallal, tartalmával kapcsolatban kiváltott érzéseiket. Ez teszi a tervezés és a marketing hatékony eszközévé.

A színek érzelmeket váltanak ki

Az emberek részben azért vonzódnak bizonyos színekhez, mert úgy érzik magukat, mintha éreznék ezeket a színeket illetve befolyásolja érzelmüket, hozzáállásukat, és akár hangulatukat.

A másik oldalról viszont a színek olyan zsigeri reakciót is kiválthatnak, amely arra késztet valakit, hogy elkerülje a velük való kapcsolatot.

Ha mindez kissé érthetetlennek hangzik, az azért van, mert hiányzik a kirakósból egy fontos darab: a kontextus.

Egy bizonyos kontextusban a piros szín félelmet és szorongást kelthet bennünk. Egy másikban szenvedélyt és izgalmat kelthet.

Ha a színt a weboldal tervezésében egy bizonyos érzelem közvetítésére szeretnénk használni, akkor annak zökkenőmentesen kell illeszkednie az oldal többi eleméhez, például a tipográfiához, a képekhez és a szöveghez. Ezt a szem előtt tartva tekintsük át a színek és az érzelmek közötti leggyakoribb asszociációkat.

Közös színtársítások

Az alábbi színtársítások referenciaként használhatók, amikor mérlegeljük, hogy mely színek képviselik a legjobban az adott márkát.

Mit kell éreznie a célközönségnek, amikor a márka weboldalával találkozik?

Milyen lépéseket kellene tennie?

A megfelelő kontextusban a színek jelenthetik a különbséget egy elkötelezett potenciális vásárló és egy érdektelen járókelő között.

  • Piros: szenvedély, hatalom, szerelem, veszély, izgalom.
  • Kék: nyugalom, bizalom, kompetencia, béke, logika, megbízhatóság.
  • Zöld: egészség, természet, bőség, jólét.
  • Sárga: boldogság, optimizmus, kreativitás, barátságosság.
  • Narancs: szórakozás, szabadság, melegség, kényelem, játékosság.
  • Lila: luxus, titokzatosság, kifinomultság, lojalitás, kreativitás.
  • Rózsaszín: gondoskodás, szelídség, őszinteség, melegség.
  • Barna: természet, biztonság, védelem, támogatás.
  • Fekete: elegancia, hatalom, irányítás, kifinomultság, depresszió.
  • Fehér: tisztaság, béke, világosság, tisztaság.

Színpaletta létrehozása

Most, hogy jobban megértettük a színelméletet és a színpszichológiát, jól felkészültünk arra, hogy színpalettát hozzunk létre saját vagy ügyfelünk weboldalához.

A színpalettát érdemes előre átgondolni, megtervezni. Ezeket a színeket beállítani Hexadecimális, RGB – vagy kinek milyen szimpatikus – értékekben pontosan meghatározni. Ezekre szükség lesz a későbbiekben a brand építéshez, logo design-hoz, marketing elemek, cégmarketing és céges weboldal használatához is.

Színpaletta

Tehát a színpaletta. Az első szín, amelyet kiválasztunk, a márka elsődleges színe kell, hogy legyen. Nem összetévesztendő a színkörben szereplő elsődleges színekkel, ebben az esetben az “elsődleges szín” a paletta fő színére utal.

Itt jön igazán jól a színpszichológia.

A továbbiakban mutatunk példát olyan márkára/márkákra, amelyek hatékonyan használták a színpszichológiát elsődleges márkaszínük kiválasztásához.

CocaCola_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
CocaCola_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
CocaCola_2_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
CocaCola_2_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

A Coca-Cola büszkén mutogatja élénk piros színét. Forrás: Brands & Products | The Coca-Cola Company ; Coca-Cola Global Home | Site Locator Coca-Cola Global https://www.coca-cola.com

Egy korábbi példát megismételve, a Coca-Cola Company egy olyan márka, amely fogta az elsődleges színét, az élénk pirosat, és ezt is használta, használja elsődleges színének. Ez a szín az egész weboldalukon és a reklámjaikban megtalálható. A palettájukon az egyetlen másik szín a fekete és a fehér, amelyeket a szöveghez használnak.

A piros szín a Coca-Colát az izgalom, a szeretet és a melegség érzéseivel társítja.

Színpaletta típusok

A színpalettáknak öt fő típusa van: analóg, monokróm, hármas, komplementer és osztott komplementer. Ezek bármelyike felhasználható egy weboldal hatékony színpalettájának kialakításához. Az alábbiakban megnézünk néhány példát arra, hogyan használják az egyes színpaletta-típusokat a webhelyek tervezésében.

Analóg

Az analóg színek olyan színek, amelyek egymás mellett helyezkednek el a színkörön. Az ilyen típusú paletta nagyon szépen mutathat, mert a színek nagyon szépen illeszkednek egymáshoz. A hatás azonban túlságosan finom lehet, és megakadályozhatja, hogy bármelyik elem eléggé kiemelkedjen.

Analóg-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Analóg-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Az analóg színek nagyon közel helyezkednek el egymáshoz a színkörön.

Hotel_Minimalista_Analóg-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Hotel_Minimalista_Analóg-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Minimalista design,  analóg színekkel – Forrás WP templates – Analogous Color Palettes in Web Design | EntheosWeb Blog

Monokromatikus

A monokromatikus színpaletták egyetlen színre épülnek, amelyhez különböző árnyalatok társulnak. Az analóg palettákhoz hasonlóan a monokromatikus paletták is nagyon kellemes látványt nyújthatnak.

A webdesignban azonban érdemes a monokromatikus palettát kiegészíteni egy kiegészítő színnel, hogy felhívjuk a figyelmet a fontos elemekre.

Monokromatikus-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Monokromatikus-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

A monokromatikus színek többnyire fényerősség-változással járnak.

Rosaluna_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Rosaluna_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Rosaluna

Triád vagy hármas színpaletta

A hármas színpaletták három színből állnak, amelyek a színkörön egymástól egyenlő távolságra vannak, és háromszöget alkotnak. Ezt a fajta színpalettát kissé kockázatos használni a webhelyek tervezésénél, mert zajosnak tűnhet. A kontextustól függően azonban a hármas színpaletta nagyon hatásos lehet fiatalos, játékos és/vagy művészi márkák esetében.

Triád-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Triád-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

A triád színek egyenletesen helyezkednek el a színkörön.

SMI_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
SMI_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Forrás: smi.com

Komplementer, Kiegészítő

Az egymást kiegészítő színpaletták a színkör ellentétes végein elhelyezkedő színeket tartalmaznak. Ezek a paletták nagyon hatékonyak a webdesignban, mert vizuális egyensúlyt és feszültséget teremtenek.

Ha azonban a színeket egyformán használjuk, a feszültség túl nagy lehet. Ehelyett válasszuk az egyik komplementer színt elsődleges márkaszínnek, a másikat pedig használjuk akcentusszínként, kiegészítőnek.

Kiegészítő-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Kiegészítő-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Az egymást kiegészítő színek a színkörön egymással szemben állnak.

­­

Aerial_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Aerial_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Forrás: Aerial – Climate Action for Everyone

Osztott komplementer, Split kiegészítő

Az osztott komplementer színpaletták hasonlóak a komplementer palettákhoz, de egy harmadik színt is tartalmaznak, amely a színkörön az egyik komplementer szín mellett helyezkedik el.

Ez a fajta színpaletta a weboldalak tervezésénél is nagyon hatékony, és nagyobb vizuális izgalmat adhat anélkül, hogy túl nagy zajt keltene.

Rengeteg prémium márka használja ezt a színkombinációt!

Split-Kiegészítő-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Split-Kiegészítő-Színpaletta_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Shelby_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Forrás: Shelby Kay

Kissmetrics_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
Forrás: Kissmetric WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Tetradikus/dupla-komplementer modell (inkább érdekességként) – nem része az öt fő típusnak

JulieCo_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes
JulieCo_WebServe_ingyenes webdesign webdesigner tanfolyam 4. rész_WebDesign_training_free_ingyenes

Hogyan használjuk a színpalettákat a weboldal tervezésében

A színpaletták létrehozásához különböző online eszközöket használhatunk. Az egyik ezek közül, amelyet a fenti képernyőképeken is láthatunk, az Adobe Color. Ezzel az eszközzel a színkerékkel játszadozhatunk, hogy a fent felsorolt öt színpalettatípus bármelyikével egyéni palettát hozzunk, hozhassunk létre.

Akár feltölthetünk egy képet is, amelyből kivehetjük a színeket, vagy a Felfedezés fülre kattintva oldalakat és oldalakat böngészhetünk a színpaletták között.

Elsődleges, másodlagos, hangsúlyszín, 60/30/10-es szabály

Kezdetnek három színt javaslunk választani a palettához: egy fő (vagy elsődleges) színt, egy másodlagos színt és egy akcentusszínt/hangsúlyszínt. Ezután alkalmazzuk a 60/30/10-es szabályt, hogy ezeket a színeket alkalmazzuk a weboldal tervezésében. E szabály szerint a felhasznált szín 60%-a legyen a főszín, 30%-a a másodlagos szín, és 10%-a az akcentusszín. Ne feledjük, hogy a fekete és a fehér is színnek számít.

A 60/30/10 szabállyal kapcsolatban fontos megjegyezni, hogy ez inkább iránymutatás, mint szabály. Lehet, hogy például háromnál több színt szeretnénk beépíteni a palettánkba.

A fő tanulság az, hogy az elsődleges színre kell összpontosítani, a többi színt pedig az elemek elválasztására, kontrasztok létrehozására és a fontos jellemzők kiemelésére célszerű használnunk.

A tanfolyamainkkal alap szinten elsajátíthatjuk a színek használatát a weboldalak tervezésénél

Ebben a bejegyzésben a színelmélet és a színpszichológia alapjait ismertettük, valamint azt, hogyan használjuk őket a hatásos színpaletták létrehozásához a weboldalak tervezésében.

De mint tudjuk, a szín önmagában nem a funkcionális webdesign mindent eldöntő eleme; ahhoz, hogy jó minőségű, nagy értékű weboldalakat hozzunk létre az ügyfelek számára, a színelveket a stratégiával, a tipográfiával, az elrendezéssel, a UX-szel és még sok mással kell kombinálnunk.

Ha tetszett amit itt olvasott, ossza meg mással is! Köszönjük!

Facebook
LinkedIn
Twitter
Pinterest
Email
Print

Nézze meg további cikkeinket is:

Weboldal készítés Web Blog WebDesign, WordPress Weboldal készítés Online jelenlét Blog WebP a legjobb Webes képformátum és fotó formátum?

WebP a legjobb Webes képformátum és fotó formátum?

Jó a WebP, és én továbbra is használni fogom a WebP formátumú képeket. Persze ésszel és fenntartással. Figyelembe véve a fent leírtakat, azaz a böngésző/kliens kompatibilitást, a célcsoportot, a SEO és UX szempontokat, a file méretre és minőségre vonatkozó ellenőrzéseket használat előtt.

Tovább »
WordPress 6.1 MISHA WordPress 6.1 HU WordPress 6.1 Magyar WordPress 61

WordPress 6.1 HU

A WordPress 6.1-ben olyan fejlesztésekkel léphet kapcsolatba, amelyek továbbra is intuitívabbá teszik a webhelyek létrehozását, miközben minden eddiginél tovább feszegetik a kreatív határokat.

Tovább »
SEO Kulcsszavak kulcsszó keywords - webserve.hu

Hány SEO kulcsszót használjak a cikkemben?

Összegezve, legyen tisztában azzal, hogy a kulcsszavak elhelyezése sokkal fontosabb, mint a sűrűség vagy a gyakoriság. Tegye be őket a meta címbe és a meta leírásba, az URL-ben is alkalmazza és nem utolsó sorban természetesen a szövegtörzsben is. A címben, valamint néhány feliratban is meg kell jelenniük. Fontos, hogy használja őket a képfájlok neveiben és az alternatív szövegekben.

Amint látja, nem az a kérdés, hogy hány kulcsszót használjon a SEO érdekében, hanem az, hogy hogyan használja őket hatékonyan.

Tovább »
HungarianEnglishGermanFrenchSpanish
takarékos_malacpersely WebServe kedvezmény, takarékos popup

Takarékossá tettük árainkat!

2022 december 15-ig megrendelt weboldal készítési projekt esetén 1+1 ajándék! Kód:”MalacomVan!”

( 1 hónap karbantartás  + 1 óra konzultáció )

Maradjon még! :)

Ajándékkal várjuk!
Szeretne Sikeresebb lenni?

 

Válasszon weboldal készítési kedvezmény vagy ingyenes weboldal mini audit közül. Írja meg itt, melyiket szeretné.

A felhasználói élmény javítása érdekében az oldalon sütiket alkalmazunk.