Typografia

Vytvorenie webovej stránke určite nie je jednoduchým procesom. Web dizajnér ma mnoho náročných úloh a povinností. Medzi najdôležitejšie určite patrí dizajn a výber tej správnej typografie pre Váš web. Má to veľmi logický dôvod – väčšina z obsahu na webe je vo forme textu. Treba myslieť na to, že nikto nemá rád čítanie textov napísaných malých písmom alebo naopak, až takým veľkým, že pri čítaní strávi polku dňa len posúvaním stránky, hlavne na smartfóne. Dobre spravená typografia prinesie čitateľovi príjemný zážitok pri čítaní Vášho webu a zvýši pravdepodobnosť, že sa na Vašu webstránku ešte vráti prečítať ďalšie texty. Cieľom dizajnéra webstránky by malo byť zobraziť obsah v čo najjednoduchšej forme a v čo najvyššej kvalite.

Keďže tvorba webstránok zahŕňa mnoho aktivít a nástrah, popri práci s responzívnym dizajnom a upravovaním obrázkov sa často môže zabudnúť aj na nastavenie typografie stránky. Základnými princípmi typografie sú dobrá štruktúra textu a využitie nenápadných detailov, ktoré u čitateľa vzbudia záujem a prilákajú ho čítať viac alebo neskôr. Oproti minulosti to dnešní web dizajnéri určite majú ľahšie, keďže existuje mnoho písem, ktoré sa dajú využiť na webe a pomocou CSS kódu jednoducho upraviť. Ale tým pádom aj výber sa stále zväčšuje a správna voľba typografie je veľmi dôležitá.

Najpodstatnejšie prvky pri tvorbe typografie pre Vašu webovú stránku sú písmo a kontrast. Pri písme je dôležitá hierarchia, teda ako je daný text členený a akú má veľkosť. Netreba zabudnúť ani na medzery medzi jednotlivými slovami či odsekmi a na riadkovanie, ktoré bude nie príliš husté ale ani riedke.

Najdôležitejšou a viac menej prvou úlohou webového dizajnéra v oblasti typografie je výber toho správneho písma. Tento výber nie je jednoduchý a často typy obľúbených písem menia podľa aktuálnych trendov. Písmo by v každom prípade malo ladiť s Vašou značkou, dizajnom alebo logom či filozofiou. Najlepšie je vybrať také písmo, ktoré nepoužíva žiaden z Vašich konkurentov a dá sa unikátne identifikovať iba s Vašou stránkou. Zároveň by ste mali však dbať na to, že toto písmo je podporované všetkými najviac používanými prehliadačmi. Taktiež si treba overiť, či daný typ písma podporuje špeciálne znaky či diakritiku, hlavne ak sa chystáte tvoriť stránku určenú pre slovenský trh.

Podstatným prvkom typografie je taktiež hierarchia obsahu na webstránke. Nápisy jednotlivých sekcií, zvýraznené úseky textu či členenie textu, to všetko rozumieme pod hierarchiou. Dôležité je, aby čitateľ dokázal odhadnúť, ktorá časť textu je dôležitá a tak si čítal práve tú sekciu, ktorú chcete aby navštívil alebo sa o nej informoval. Webová stránka by mala byť prehľadná a jasná. Každý element na stránke má určitú funkciu, ale aj rôzny stupeň dôležitosti. Na prvý pohľad by malo byť jasné, ktorá časť textu je nadpis alebo poznámka pod čiarou, ktorá je pre čitateľa asi najmenej zaujímavá. Riadkovanie je dôležité na to, aby sa text dal dobre čítať a bol atraktívny pre oko čitateľa. Tak sa čitateľ môže rozhodnúť stráviť na Vašej stránke dlhší čas, prípadne prečítať si viac článkov.

A nakoniec ešte spomenieme ďalšiu dôležitú súčasť typografie a tou je kontrast. Je dôležité, že text a pozadie sú od seba jasne a prehľadne oddelené a odlíšené. Zlepšuje to čitateľnosť textu a pritiahne pozornosť aj starších čitateľov.

7 tipov pre web dizajnéra

Nižšie si uvedieme 10 tipov pre každého web dizajnéra, ktoré Vám pomôžu pri tom navrhnúť, vytvoriť a spravovať úspešný web.

1. Vaša webová stránka by mala odrážať identitu Vášho produktu alebo obsahu

Ak je Vaša spoločnosť založená na predaji určitého typu produktu alebo zverejňovaniu špecifického obsahu, mali by ste sa zamerať pri vývoji a dizajne webu práve na toto. Váš čitateľ by si mal automaticky spojiť dizajn Vášho webu s produktom alebo obsahom, ktorý ponúkate. Takýto dizajn posilní Vašu pozíciu na trhu a taktiež si tak získate množstvo potencionálnych zákazníkov. Ak ešte nemáte logo alebo obchodné meno pre Váš projekt, je najvyšší čas, aby ste niečo vymysleli a od toho môžete odvodiť ďalší postup.

2. Pochopte cieľ Vašej webovej stránky

Čo chcete pomocou Vašej webstránky docieliť? Aké sú Vaše hlavné ciele? Je nutné aby sa tieto odrážali aj na dizajne webstránky, pretože ak budete mať chaotickú a neprehľadnú webovú stránku, nikto ju už viackrát nenavštívi a vy stratíte potencionálnych zákazníkov. Niektoré spoločnosti používajú web na zriadenie novej značky, predaj výrobku alebo budovanie zákazníckej základne.

3. Zistite, ktorí návštevníci majú najväčší potenciál skonvertovať na platiaceho zákazníka

Počas fázy vývoja je nutné identifikovať potenciálnu zákaznícku základňu alebo cieľové publikum. Väčšina firiem má niekoľko cieľových skupín, z ktorých každá navštívi webové stránky z rôznych dôvodov. Je teda kľúčom k úspechu navrhnúť stránku tak, aby bola čo najpríťažlivejšia pre Vaše cieľové publikum a prispôsobená ich potrebám.

4. Zamerajte sa na konverziu návštevníkov na platiacich zákazníkov

Návštevníci webu sa stávajú platiacimi zákazníkmi niekoľkými spôsobmi. Môžu si zakúpiť produkt alebo službu, získať viac informácií alebo sa zúčastniť na propagovanej konferencii. Iní si môžu stiahnuť elektronickú knihu alebo informovať sa o ponuke. Interakciou s Vašou webovou stránkou návštevník urobí prvý krok, aby sa stal Vašim zákazníkom. Úspešné webové stránky poskytujú návštevníkom informácie, ktoré potrebujú.

5. Najdôležitejším prvkom každej webovej stránky je značka

Vašu značku tvorí viac ako len názov, logo a slogan. To, ako komunikujete, kto ste, čo ponúkate a prečo by sa pre Vás mal niekto rozhodnúť sú oveľa dôležitejšie prvky Vašej značky alebo webu. Je to Váš prísľub týkajúci sa kvality Vašich produktov a služieb, podľa ktorého sa zákazníci rozhodnú. Odráža hodnoty Vašej spoločnosti, pomáha budovať dôveru a definuje Váš úspech.

6. Vystupujte z davu

Nebojte sa vyskúšať jedinečné názvy a divoké dizajnérske nápady pri vývoji nových webových stránok. Vedecké štúdie ukázali, že ak webový návštevník zopakuje názov Vašej značky trikrát, je oveľa menej pravdepodobné, že na ňu zabudne. Takže zvážte jedinečný názov – alebo aspoň jedinečný dizajn!

7. Verte v seba a Váš úspech

Najlepšie dizajny a najúspešnejšie stránky na webe sú tie, ktoré odrážajú dôveru, optimizmus a úspech. Správny tón, farby a písmo Vám môže pomôcť pri šírení Vášho mena a získavaní nových zákazníkov. Vždy sa sústreďte na taký dizajn, ktorý vo Vás vyvolá čo najviac pozitívnych pocitov. Nikdy nenavrhujte stránku len z toho dôvodu, aby bola. Zahrňte nové funkcie, ktoré nikto z vašich konkurentov nemá. Urobte Váš web sviežim, jedinečným a súčasným. Súčasne vylepšíte zážitok pre návštevníkov a získajte tak viac platiacich zákazníkov.

Mobilný dizajn

Viete, že už za pár rokov bude na svete niekoľkých mesiacov bude v obehu viac mobilov ako je celkovo na svete obyvateľov? Chytré telefóny sú už každodennou súčasťou nášho života a nemožno ich z neho odmyslieť. Práve preto je dôležité, aby Vaša nová webová stránka mohla v dnešnej dobe konkurovať inovatívnym a interaktívnym dizajnom najmä pre smartfóny. Už sa ale dávno nejedná len o dizajn webovej stránky, ktorý je prispôsobený prehliadaniu obsahu na mobile, ale zahŕňa aj vývoj separátnych aplikácií a iných možností prístupu cez sociálne siete.

Predtým než sa pustíme do dizajnu webovej stránky pre mobilné zariadenie si treba uvedomiť niekoľko základných faktov. Nie každé mobilné zariadenia má rovnaký rozmer. Tablety sú často schopné zobrazovať takmer kompletnú webovú stránku bez toho, aby obsah vyzeral skreslene. Naopak na smartfóne je vzhľadom na malý display určite nutné zjednodušenie zobrazenia obsahu a dôraz na detail. Predstavíme Vám teda niekoľko rád, ako správne zvládnuť dizajn určený špeciálne pre mobilné prehliadače a zariadenia.

1. Venujte sa prieskumu, aké zariadenia používajú Vaši čitatelia.

Aj napriek veľkému úsiliu nie je možné spraviť dokonalú webstránku pre každého užívateľa. Práve preto je najlepšie zistiť najpoužívanejšie prehliadače a mobilné zariadenia Vašich čitateľov. Budete sa tak môcť sústrediť na dizajn zameraný najmä na tieto, aby čo najväčší počet zákazníkov bol spokojný a mal dokonalý zážitok z prehliadania Vášho webu. Je dôležité poznať či čitatelia používajú iPhone alebo Android a aké prehliadač uprednostňujú.

2. Dbajte na stručnosť.

Na rozdiel od stránok pre prehliadanie na počítači, je nutné aby užívateľ na mobile či smartfóne mal prehľad čo môže na Vašej stránke robiť, kde čítať, prípadne pridávať obsah a kde je skryté navigačné menu. Preto si musíte ujasniť účel, dizajn a rozmiestnenie Vašej webovej stránky už vopred a nie vždy sa tieto parametre zhodujú pre webstránku zobrazenú na mobile alebo počítači. Čitateľ by sa mal vedieť ľahko dostať z jedného článku na druhý a rýchlo sa vrátiť späť kedykoľvek bude chcieť.

3. Sústreďte sa na dizajn v jednom stĺpci.

Mobilné zariadenia s menším displejom určite poteší dizajn a text, ktorý sa nachádza v jednom stĺpci. Najlepšie v tomto prípade je použiť responzívny dizajn, v ktorom sa obsah prispôsobuje veľkosti displeja.

4. Ušetrite miesto použitím ikon.

Využitie ikon sa odkazy na sociálne siete, kontaktné možnosti alebo iné ovládacie prvky je určite prínosom pre zážitok užívateľa na Vašej webovej stránke. Ak využijete rôzne ikony, môžete nielen ušetriť čas, keďže užívateľ nemusí spraviť toľko klikov a aj miesto, ktoré môžete využiť na zobrazenie iného dôležitého obsahu.

5. Vyskúšajte si to na vlastnom telefóne.

Určite ste už niekedy na svojom mobile prehliadali webovú stránku a museli ste si obrazovku priblížiť, keďže ikony alebo písmo boli moc malé, aby ste na nich mohli prstom ťuknúť alebo ich dobre vidieť. Podľa najnovších prieskumov by políčka na webovej stránke prispôsobenej na zobrazovanie na mobilnom zariadení nemali mať menej ako 44 pixelov. Taktiež v dnešnej uponáhľanej dobe je človek často odkázaný na držanie a ovládanie smartfónu len jednou rukou. Myslite teda na to aj pri dizajne webstránky. Mala by byť plne ovládateľná jedných prstom, najčastejšie palcom.

Responzívny dizajn webstránky

Responzívna webová stránka je taká, ktorá sa vie automaticky prispôsobiť danému zariadeniu, na ktorom sa zobrazuje. Takéto riešenie má mnoho výhod, ale pretože vytvorenie webovej stránky s takýmto dizajnom je komplikované, časovo a finančne náročné, nestretávame sa s ním v dnešnej dobe tak často, ako by nám bolo milé.

Najväčšia výhoda responzívného riešenia je vytvorenie jedného HTML kódu, ktorý sa prispôsobuje neskôr jednotlivým zariadeniam a prehliadačom, na ktorom je zobrazovaný. Nie je teda už nutné vytvárať separátny HTML kód pre mobilnú verziu Vašej webovej stránky. Jednoducho v danom HTML kóde označíte prvky, ktoré sú dôležité pre zobrazovanie obsahu na jednotlivých zariadeniach a tým sa obsah jednoducho prispôsobuje veľkosti tabletu či telefónu. Môžete zároveň vypustiť prvky, ktoré pre toto zobrazovanie nie sú dôležité a ušetríte čas, za ktorý sa webstránka načíta a zrýchlite tak prehliadanie stránok a zlepšíte dojem o stránke u Vášho čitateľa.

Ale nie je to všetko také jednoduché ako sa zdá. Na tvorbu a riešenie responzívného webu je nutné využitie CSS frameworku. Frameworky sú už hotové systémy pozostávajúce zo šablón a rôznych metód, ktoré sú potrebné na daný dizajn a jeho tvorbu. Každý framework je testovaný tisíckami užívateľov a často sa v ňom objavuje množstvo kódu, ktorý umožňuje ľahkú úpravu na danú webstránku. Vyberte si framework, správne ho implementujte a hotovo! Nevýhodou je určite ale to, že ako webový dizajnér Vašej stránky nemáte plnú kontrolu nad fungovaním a štruktúrou kódu na webstránke. Vždy si ale treba pozrieť, koľko času ušetríte použitím už hotového frameworku. Tvorba vlastného kódu webstránky od úplného začiatku sa odporúča len pokročilým užívateľom so znalosťou programovacích jazykov a s veľa časom. Ušetrení čas totiž môžete využiť aj výhodnejšie ako tvorbou kódu, ktorý pred Vami už niekto dávno vytvoril a ešte aj otestoval.

Ale predtým, než začnete rozmýšľať nad responzívnym dizajnom Vašej webstránky Vám odporúčame zopakovať si znalosti programovania či tvorby webstránok, keďže tie Vám iste padnú vhod. Taktiež nezabúdajte na to kódovať s istou štruktúrou, aby ste neskôr mali lepší prehľad o Vašom kóde a vedeli lepšie opraviť prípadné chyby alebo vykonať úpravy. Zvyčajne sa na internete môžete ľahko dostať k informáciám o pravidlách správania webových stránok na jednotlivých zariadeniach.

A aby toho nebolo málo, sa v poslednej dobe začala využívať technika Mobile first. Ako už názov napovedá je to technika, pri ktorej sa na začiatku kódovanie webstránky zaoberáme najprv dizajnom pre mobilné telefóny. Dôvod je veľmi jednoduchý. Už si neprezeráme jednotlivé webové stránky na stolnom počítači alebo notebooku, ale čoraz častejšie na mobile, keď sme na cestách alebo len niekde vonku. Aj tu chceme mať možnosť, prehliadať si webovú stránku tak, aby boli dostupné všetky menu, obrázky alebo videá tak, aby sme ich mohli prezerať bez rušivých elementov, ako sú skresané okná, odseknutý text alebo video, ktoré nejde prehrať. A aj rýchlosť internetu na mobile je pochopiteľne nižšia, a tak je lepšie ak sa webová stránka odbremení od kódu, ktorý dizajn stránky neovplyvňuje a rýchlejšie sa načíta.

Ak sa pre svoju webovú stránku rozhodnete siahnuť na responzívny dizajn, je nutné zvážiť niekoľko faktorov. Dôležité je napríklad točenie obrazovky na mobiloch, podpora webových prehliadačov či rôznych zariadení, ako sú tablety, iPhone alebo mobily s operačným systémom Android.

Programy na úpravu obrázkov

Ak chcete mať peknú webovú stránku, nezaobídete sa bez programu na úpravu fotiek a obrázkov. Každý človek sa rád pozrie na vkusne zoradené fotky alebo zaujímavé koláže. Uveďme si teda nižšie 5 najobľúbenejších editorov obrázkov.

GIMP

GIMP je skratka GNU Image Manipulation Program, čo v preklade znamená program na manipuláciu s obrázkami GNU. Ide o voľne distribuovaný program pre také úlohy, ako je retušovanie fotografií, kompozícia obrázkov a tvorba obrázkov. Je vhodný najmä pre nadšencov a technicky zdatných ľudí, ktorí na svoju webstránku nemajú veľký rozpočet. Jednoducho môžete vložiť obrázok, ktorý chcete upraviť alebo začať úplne od začiatku vytvorením nového unikátneho obrázku s pomocou dostupných nástrojov. Voľne dostupný program ponúka množstvo nových modulov, ktoré si môžete nainštalovať na rozšírenie funkcionality ak už ste sa naučili základné ovládanie a možnosti.

Skicár

Skicár určite patrí medzi najviac používané programy na úpravu obrázkov a fotografií, keďže sa štandardne nachádza na každom počítači s operačným systémom Windows. Pomocou skicára možno ľahko a jednoducho upraviť základné parametre obrázku, ako je výška či šírka, prípadne ozvláštniť obrázok doplňujúcimi prvkami. Je vhodný pre začiatočníkov a keďže je voľne dostupný, nie je vhodný na pokročilejšie operácie alebo viacvrstevné manipulovanie s obrázkami. Toto možno nájsť v jeho vyspelejšom bratovi, programe Paint.NET.

Picasa

Tento voľne dostupný program od firmy Google poteší určite ľudí, ktorí si nielen obrázky a fotky radi upravujú, ale zároveň aj organizujú. Program totižto ponúka možnosť organizovať obrázky do rôznych priečinkov a záložiek, tak že stále nájdete obrázok na správnom mieste, tam kde ste ho uložili. Ušetrí Vám veľa času pri tvorbe Vašich webstránok, keďže môžete obrázky triediť napríklad podľa sekcií na Vašej stránke a tak sa k ním rýchlo dostať. Bonusom je taktiež až 1TB úložisko, na ktoré môžete Vaše fotky uložiť, aby zbytočne nezaberali priestor na Vašom počítači. Okrem dôkladnej úpravy fotiek a množstvu funkcií, ponúka možnosť zdieľania fotiek, čo je obzvlášť dôležité pre marketingové smerovanie Vašej webstránky a reklamy na sociálnych sieťach.

PhotoScape

Tento program sa hodí najmä pre profesionálnych editorov obrázkov, keďže je založený najmä na optimalizácií fotiek a ich úprave z formátu RAW. Prostredníctvom tohto programu taktiež môžete začať budovať Vašu knižnicu fotiek a obrázkov.

Photoshop

Asi najznámejším programom na upravovanie fotiek alebo obrázkov je Photoshop. Vhodný je najmä pre firmy, ktoré sa zaoberajú fotografiou alebo profesionálnou úpravou obrázkov či tvorbou log. Ceny sa pohybujú pri základnom balíku od 150 eur ročne. Tento program je k dispozícii pre systémy Windows, ale aj Mac. Adobe Photoshop je veľmi výkonná aplikácia, ktorú používajú mnohí profesionálni fotografi a dizajnéri. Môžete použiť Photoshop pre takmer akýkoľvek druh úpravy obrázkov, akým je napríklad retušovanie fotografií, vytváranie kvalitnej grafiky a oveľa viac.

Vzhľadom k tomu, že Photoshop je primárne navrhnutý pre profesionálov, môže jeho použitie byť trochu náročné, najmä ak to idete robiť po prvýkrát. To znamená, že nemusíte rozumieť všetkým funkciám aplikácie Photoshop a efektívne ich používať. Ak chcete upravovať fotografie na cestách, Adobe ponúka niekoľko rôznych mobilných aplikácií. Zatiaľ čo tieto aplikácie neobsahujú toľko funkcií ako softvér pre stolné počítače, môžu byť dobrou voľbou na rýchle úpravy v mobilnom zariadení.