Zásady práce s farbami a textom na webe I.časť

Farba je jedným zo základných a najviac užitočných nástrojov pre každého webdizajnéra. V kombinácií s textom môže upútať pozornosť návštevníka web stránky, ovplyvňuje jeho celkové vnímanie a emócie. V tomto článku a pokračovaní II.časti by sme si povedali ako sú farby a typografia dôležité pre dizajn web stránky. Ako ich môžeme prepojiť, aby čo najlepšie vystihli podstatu web stránky .

Farba je základným dizajnovým prvkom, ktorý vidíme všade vôkol seba vo svojom živote a taktiež aj na každej webovej stránke, ktorú sa rozhodneme navštíviť. V súčasnosti sa webdizajnéri neboja používať farby viac odvážne ako tomu bolo v minulosti. Farby často používame na to, aby sme určitému prvku na webe venovali väčšiu pozornosť.

 Rozdelenie farieb

Farby z hľadiska vzťahu medzi sebou môžeme rozdeliť do dvoch hlavných skupín:  analogické farby a komplementárne farby.

Analogické farby

Analogické farby sú na farebnom kruhu umiestnené hneď vedľa seba, vďaka čomu sa spolu dobre kombinujú, no často neposkytujú dostatočný kontrast.

analog farby

Komplementárne farby

Komplementárne farby sa navzájom dopĺňajú a na farebnom kruhu sú umiestnené presne oproti sebe. Ich kombináciou sa dá dosiahnuť dostatočný kontrast a živosť stránky. Patria sem kombinácie farieb, ako modrá + oranžová, fialová + žltá                        a červená + zelená.

komplementárne farby

Kontrast

Kontrast znižuje namáhanie očí a fokusuje pozornosť návštevníkov webstránky tým, že jasne rozlišuje elementy na webe. Naj častejším príkladom kontrastu je efektívny výber farby pozadia a textu. Ak niekedy máte o kontraste pochybnosti, najjednoduchší spôsob pre dosiahnutie dobrého výsledku je použiť čo najviac svetlé pozadie a tmavú farbu pre text. Toto je jedna zo základných oblastí teórie farieb, ktorá je pre použiteľnosť webstránky rozhodujúca. Okrem textu je možné prostredníctvom kontrastu upozorniť diváka aj na konkrétne prvky webstránky.

kontrast

Ak chcete upriamiť pozornosť na určitú oblasť webstránky, použijete rôzne kontrastné farby a týmto spôsobom môžete upriamiť pozornosť na konkrétne prvky webu.

Pestrofarebnosť

Pestrofarebnosť Pestrofarebnosť či tzv. živosť farieb diktujú emócie vášho dizajnu. Jasnejšie farby vedú užívateľa webstránky k tomu, že sa cíti viac energický, čo je obzvlášť účinné, keď sa snažíte propagovať produkt alebo vyvolávať určitú emocionálnu reakciu. Naopak tmavšie odtiene farieb návštevníka webstránky uvoľnia a umožnia mu zamerať svoju pozornosť na iné prvky.

pestrofarebnosť

Význam jednotlivých farieb

Väčšina farieb, ktoré poznáme sa dajú vnímať dvoma spôsobmi – pozitívne alebo negatívne. Samozrejme záleží aj na tom, v akých odtieňoch danú farbu použijeme a aké ďalšie farby ju obklopujú resp. dopĺňajú.

V tejto časti uvedieme, čo ktorá farba reprezentuje.

Červená

Červená patrí medzi energické teplé farby. Je symbolom ohňa, vášne a sily. Pomáha stimulovať chuť do jedla, energiu a vzrušenie. Prináša aj negatívne pocity ako zlosť a hnev.

c

Oranžová

Oranžová vzniká kombináciou dvoch susedných farieb na farebnom kruhu – červenej a žltej farby. Oranžová symbolizuje šťastie, radosť, osvieženie a slnečný svit. Je to veselá farba, evokujúca detskú neviazanosť. Nie je taká agresívna ako červená, no má niektoré jej vlastnosti. Stimuluje duševnú aktivitu, no tiež reprezentuje ignoranciu a podvod.

o

Žltá

Svetlá žltá je veľmi veselá farba, ktorá reprezentuje radosť, inteligenciu, svetlo, energiu, optimizmus a šťastie. Špinavá žltá nás vedie k opatrnosti, kritike, lenivosti a žiarlivosti.

ž

Zelená

Zelená symbolizuje prírodu, čistotu a má hojivé účinky. Preto je môžeme vidieť napríklad v nemocniciach. Pôsobí ako symbol rastu, harmónie a bezpečia. Zelená je aj symbolom peňazí, a poukazuje na chamtivosť alebo žiarlivosť. Tiež môže byť symbolom neskúsenosti.

z.jpg

Modrá

Modrá je upokojujúca farba vyžarujúca stabilitu a skúsenosť. Preto ju používajú najmä silné a stabilné spoločnosti. Tiež môže symbolizovať dôveru a spoľahlivosť. Šedšie odtiene modrej odhaľujú jej negatívnu stránku. Môže priniesť pocit chladu, depresie a pasivity.

m

Fialová

Fialová je farba prepracovanosti, poukazujúc na bohatstvo a luxus. Podporuje zmysel pre duchovnosť a tvorivosť. Jasnejšia fialová symbolizuje magickosť, a preto je vhodné jej použitie na podporu kreativity a ženskosti. Tmavšie odtiene fialovej zasa ľahko vyčarujú pocit pochmúrnosti a smútku.

f

Čierna

Aj keď čierna farba nie je súčasťou farebného kruhu, jej zastúpenie pri tvorbe stránok je pomerne časté. Je často spájaná s výkonnosťou, eleganciou, sofistikovanosťou a hĺbkou. Hovorí sa, že čierny odev počas pracovného pohovoru poukazuje na respondenta ako na silnú osobnosť. Čierna sa spája aj s negatívnymi predstavami a to so smrťou, tajomstvom a niečim neznámym. Je to farba smútku a preto musí byť použitá s citom.

cierna

Biela

Biela, ktorá tiež nie je súčasťou farebného kruhu, symbolizuje čistotu, nevinnosť, nádej, slobodu a bezpečnosť. Negatívne dojmy z bielej farby sú zima, chlad a drsnosť.

b

Aké sú súčasné trendy v používaní farieb?

Leo Widrich na svojom blogu rieši otázku, prečo Facebook používa modrú farbu. Okrem toho, že sa dozvieme, že Mark Zuckerberg je do istej miery farboslepý a modrú farbu vníma najlepšie….

Facebook_14

Na 90% hodnotíme produkt iba na základe jeho farby. Preto ak berieme do úvahy to, že riešime dizajn webových stránok, farba hrá jednu z najdôležitejších úloh. V súčasnosti z pozadia vystupujú žiarivé farby. Dizajnéri používajú pestrofarebné farby na to, aby upriamili pozornosť ľudí na dôležité prvky webu.

Dôležité je zapamätať si, že výber farieb z opačného farebného spektra vytvára pre ľudské oko vizuálnu harmóniu. Vysoký kontrast umožňuje ľahko čítať text a navádzať pozornosť užívateľa želaným smerom na webe.

Reklamy

5 Replies to “Zásady práce s farbami a textom na webe I.časť”

  1. Pekné obrázky aj keď ku každej farbe možno neboli nutné… Prvé odstavce začínajú vždy slovom Farba/y, možno je dobré použiť synonymum. Inak veľmi pekne spracované.

    Liked by 1 person

  2. @martinzavadsky
    Fajný článok, ale pri danom nadpise by som čakal asi niečo iné. Väčšinu článku tvoria opisy významu farieb, čo som sa rozprávajú skôr deti na prvom stupniť. Pri ZÁSADÁCH by som skôr očakával citácie napr. z tohoto štandardu: https://www.w3.org/TR/WCAG21/#contrast-minimum

    A tiež určite si na 90% nevyberám produkt podľa farby…

    @dusanmraz Som zvedavý na synonymum slova farba 😀 ja také nepoznám

    Liked by 2 people

  3. Mám rád ak je text vhodne doplnený obrázkami. Dnes sa na webe počíta ak je málo ale výstižného textu a k tomu priložený obrázok, ktorý tiež niečo povie.
    Príspevok je označený ako 1.časť, takže je možné očakávať, že v ňom budú základy, uvidíme čo bude v 2.časti(3., 4., 5., … :-)).
    Záver článku veľa o súčasných trendoch nehovorí, možno bude mať pokračovanie. Zrejme tvrdenie, že “Na 90% hodnotíme produkt iba na základe jeho farby. ” je odniekiaľ prevzaté. Asi by nezaškodilo v takýchto prípadoch uviesť odkiaľ sme niečo prevzali i keď aj vtedy by sme mali zvažovať, či to môže byť ozaj pravda, keďže sa pod to autor podpisuje. Tiež si myslím ako Patrik, že to asi nebude pravda.
    Už sa teším na pokračovanie príspevku.

    Liked by 2 people

  4. Martinko bude aj ďalšie pokračovanie ? 🙂 teším sa 🙂 oceňujem pestrosť a rozmanitosť farebných obrázkov. Mám rada, keď je v článku veľa obrázkov. Význam farieb je popísaný dobre tak isto sa mi páči aj časť o kontraste 🙂

    Liked by 2 people

Pridaj komentár

Please log in using one of these methods to post your comment:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa /  Zmeniť )

Google photo

Na komentovanie používate váš Google účet. Odhlásiť sa /  Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa /  Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa /  Zmeniť )

Connecting to %s