Čo je to Webdizajn?
Webdizajn je kreatívny proces, ktorý sa zameriava na vytváranie vizuálne príťažlivých a funkčných webových stránok. Zahŕňa kombináciu rôznych prvkov vrátane rozloženia, farieb, typografie, grafiky a interaktívnych prvkov, s cieľom poskytnúť príjemný užívateľský zážitok (UX). Webdizajn nie je len o estetike, ale aj o intuitívnom usporiadaní informácií pre jednoduchú navigáciu na webovej stránke. Cieľom webdizajnu je vytvoriť harmonické spojenie medzi funkčnosťou a vizuálnym dojmom. Pre úspešné dosiahnutie tohto cieľa je potrebné porozumieť základným princípom webového dizajnu, ktoré si rozoberieme v tomto článku. Následne vám ukážeme presný postup - krok po kroku, ako si vytvoriť atraktívny webdizajn vo WordPresse.
Kľúčové Pojmy
Nástroje na tvorbu Webdizajnu
Pri tvorbe atraktívneho webdizajnu je potrebné zvoliť vhodný grafický editor v závislosti od vašich skúseností, preferencií a budgetu. Ak hľadáte softwér na úpravu webdizajnu s bohatou funkcionalitou, Adobe XD je tá správna voľba. Nevýhodou je však vyššia cena, ktorá môže odradiť. Adobe XD sa dá kúpiť len ako súčasť balíka Adobe Creative Cloud za 35.99€ mesačne . Ak hľadáte cenovo dostupnejšiu alternatívu k Adobe XD, vyskúšajte Sketch. Výhodou Sketchu je jednoduché a užívateľsky príjemné rozhranie. Nevýhodou je fakt, že Sketch je možné nainštalovať len na zariadenia s operačným systémom MacOS . Ak hľadáte profesionálny systém na správu obsahu a tvorby webových stránok, WordPress je pre vás vhodným riešením. WordPress.org je open source, čo znamená, že je úplne zadarmo. Na výber máte z množstva bezplatných aj platených šablón či pluginov. WordPress umožňuje okrem iného aj vytvoriť si plne funkčný e-shop či zarábať prostredníctvom reklám bez platenia akýchkoľvek provízií. V nasledujúcich odsekoch sa dozviete, ako presne začať s webdizajnom vo WordPresse.
Zvoľte WordPress Tému
WordPress témy sú predpripravené dizajnové šablóny, vďaka ktorým si môžete vytvoriť dizajnovo atraktívnu webovú stránku pomerne rýchlo a jednoducho. V súčasnosti ponúka WordPress viac ako 11 tisíc rôznych tém , z ktorých si vyberie naozaj každý. Pri výbere vhodnej WordPress témy nezabudnite zohľadniť faktory ako responzivita, SEO optimalizácia, a rýchlosť načítavania. Výberom vhodnej témy totiž dokážete pozitívne ovplyvniť tieto faktory, vďaka čomu predídete množstvo trápeniam v budúcnosti s neresponzívnou a pomalou webovou stránkou, ktorá sa umiestňuje na najnižších miestach vo vyhľadávačoch.
Stiahnite ju
Po tom, čo si zvolíte tému, ktorá vám vyhovuje najviac, jednoducho kliknite na tlačidlo “Stiahnuť”. Po stiahnutí témy si ju môžete prispôsobiť presne podľa svojich predstáv kliknutím na “Upraviť”. V nasledujúcom odseku sa dozviete, ako sa zorientovať vo WordPresse a prispôsobiť si WordPress tému presne podľa vašich predstáv.
Ako Prispôsobiť WordPress Tému?
Po tom, čo ste klikli na tlačidlo “Upraviť” sa vám zobrazí prostredie rozdelené na dve časti: v pravej časti môžete vidieť náhľad vašej webovej stránky a v ľavej časti je menu, ktoré obsahuje 5 rôznych tlačidiel. Počnúc od najvyššieho - Navigation, cez Štýly, Pages, Templates, až po Patterns. Poďme si vysvetliť, čo tieto jednotlivé tlačidlá znamenajú a na čo slúžia.
Navigácia
Tlačidlo “Navigation” alebo “Navigácia” slúži na úpravu hlavičky a pätičky webstránky. Po tom, čo naňho kliknete, sa vám vľavo zobrazia dve nasledovné možnosti: “Hlavička navigation” a “Pätička navigation”. Ak chcete upraviť hlavičku, zvoľte prvú možnosť a ak chcete upraviť pätičku, zvoľte druhú možnosť. Po kliknutí na jednu z týchto možností sa vám zobrazí obsah zvolenej časti - viď obrázok - daná hlavička obsahuje tlačidlo "O nás" a pätička tlačidlo "O nás" ako aj "Domov".
Štýly
Druhým tlačidlom v poradí je tlačidlo “Štýly”, ktoré ako už názov napovedá, slúži na úpravu štýlu webovej stránky a to prostredníctvom voľby vhodného fontu, farieb a rozloženia. V sekcii napravo sa vám zobrazí menu s názvom “Štýly” a pod ním 4 tlačidlá: “Typography” (písmo), “Colors” (farby), “Layout” (rozloženie) a “Bloky”. Po kliknutí na najvyššie tlačidlo “Typography” sa vám v rovnakej lište zobrazí výber 5 tlačidiel slúžiacich na úpravu fontu, vrátane úpravy fontu obyčajného písma, linkov, nadpisov, titulkov, a tlačidiel. Po rozkliknutí tlačidla “Colors” sa vám zobrazí v rovnakej lište výber 7 tlačidiel, ktoré slúžia na úpravu farieb, počnúc od farebnej palety, textu, pozadia, odkazov, titulkov, tlačidiel až po farebnú úpravu nadpisov. Po rozkliknutí tlačidla “Layouts” sa vám v tejto lište zobrazí prostredie, v ktorom si budete môcť nastaviť šírku obsahu na webovej stránke (nastaviteľná je veľkosť medzery medzi okrajom webovej stránky a začiatkom textu, ako aj samotná šírka textu) a taktiež aj šírku medzier medzi jednotlivými blokmi. Ak kliknete na tlačidlo “Bloky”, zobrazí sa vám široký výber blokov (sekcií webovej stránky), vrátane bloku textu, nadpisu, obrázku, tlačidla a medzerníka.
Pages
Po kliknutí na tlačidlo “Pages” sa vám v lište naľavo zobrazí zoznam podstránok vašej webstránky, ako napríklad podstránka “O nás” alebo “Výsledky vyhľadávania”. Po tom, čo kliknete na jednu z možností, sa vám zobrazia detaily konkrétnej podstránky, ako je status, slug, template, počet slov a potrebný čas na prečítanie. Ak chcete upraviť túto konkrétnu podstránku, kliknite na ikonku ceruzky umiestnenú vpravo hore v lište vľavo.
Templates
Predposledné tlačidlo v poradí s názvom “Templates “ slúži na správu dizajnových šablón webovej stránky. Po kliknutí na toto tlačidlo sa vám zobrazí zoznam všetkých podstránok webovej stránky. Po tom, čo kliknete na jednu z týchto podstránok, si viete nastaviť počet príspevkov, ktorý na nej chcete mať, povoliť alebo zamietnuť možnosť komentovania nových príspevkov, ako aj upraviť záhlavie či pätu danej podstránky.
Patterns
Po kliknutí na posledné tlačidlo “Patterns” sa vám zobrazí bohatá ponuka predpripravených šablón jednotlivých sekcii webovej stránky, od formulárov, cez kontakt, až po záhlavie webstránky. Napríklad, ak kliknete na tlačidlo “Galéria”, napravo sa vám zobrazí široký výber možností usporiadania obrázkov alebo videí na vašej webovej stránke (viď obrázok). Vďaka týmto prednastaveným šablónam bude pre vás oveľa jednoduchšie vytvoriť atraktívny a unikátny webdizajn, pričom ušetríte množstvo času, ktorý by ste inak museli investovať do vytvárania vlastných šablón.
Tipy na Záver
Menej je niekedy viac. Pri webdizajne to platí dvojnásobne . Vyhnite sa príliš zložitému členeniu. Uprednostnite radšej minimalistický dizajn pre jednoduchšiu orientáciu . Experimentujte s farebnými schémami, ale dbajte na ich súlad s identitou značky . Vyhnite sa príliš malému alebo zle čitateľnému písmu. Použite fotografie, ktoré súvisia s obsahom a zároveň pridávajú estetickú hodnotu . Nezabudnite použiť jednotné farby, písmo a rozloženie pre celú webovú stránku. Skontrolujte, či webová stránka funguje dobre na všetkých zariadeniach, vrátane smartfónov.
Časté Otázky
Webdizajn je kreatívny proces tvorby vizuálne príťažlivých a funkčných webových stránok. Zahŕňa všetko od rozloženia, farieb, typografie (písma), grafiky až po rôzne interaktívne prvky. Jeho cieľom je poskytnúť príjemný užívateľský zážitok.
Z hľadiska webdizajnu poznáme tri základné pojmy, ktorým je dôležité porozumieť.
1. Rozloženie - je spôsob, akým sú jednotlivé prvky webovej stránky usporiadané.
2. Užívateľská skúsenosť (UX) - je celkový dojem, ktorý má návštevník webovej stránky pri interakcii.
3. Responzivita - schopnosť webovej stránky prispôsobiť sa rôznym veľkostiam obrazoviek, napríklad mobilných zariadení a počítačov.
Grafických editorov na tvorbu či úpravu webdizajnu je viac než dosť. Na základe vašich priorít či rozpočtu si viete vybrať ten, s ktorým sa vám bude pracovať najlepšie.
1. Ak hľadáte profesionálny editor s bohatou funkcionalitou, pomôže vám Adobe XD.
2. Ak hľadáte cenovo dostupnejšiu alternatívu s jednoduchým ovládaním a ste užívateľom Macu, vyskúšajte Sketch.
3. Ak hľadáte profesionálny systém na správu obsahu a tvorby webových stránok, WordPress bude pre vás vhodným riešením. WordPress umožňuje okrem iného aj vytvoriť si plne funkčný e-shop či zarábať prostredníctvom reklám bez platenia akýchkoľvek provízií.
Nezabúdajte, že v jednoduchosti je krása.
- Vyhnite sa príliš zložitému dizajnu a prehnaným farebným kombináciám.
- Zvoľte vhodný typ a veľkosť písma.
- Nezabudnite na obrázky a fotografie v dostatočnej kvalite.
- Použite jednotný dizajn pre celú webovú stránku.
Neodpovedali sme na vašu otázku? Napíšte nám na mailovú adresu support@winfo.sk.
