spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Learn2Code 7.5.2014
Hodnoť článok:
5 0

Ako začať s grafickým web dizajnom?

Kvalitný a príťažlivý grafický dizajn je nevyhnutnou súčasťou každého dobrého webu. Za dizajnom sa skrýva mnoho teórie, na ktorú sa v skratke pozrieme v tomto článku.

Mnohí z nás vedia používať Photoshop a vytvoriť v ňom dizajn, ktorý vyzerá atraktívne a pomerne dobre. Za dizajnom, ktorý vytvárame, je obrovské množstvo teórie. Znalosť tejto teórie je chýbajúcou časťou pre mnohých (talentovaných) dizajnérov. V ďalšom texte v skratke preberieme 5 základných oblastí, ktoré by mal dobrý webdizajnér ovládať.

Typografia

Dobrá a prehľadná prezentácia obsahu na webe je rovnako dôležitá ako pekná grafika a vymakaný copywriting. Typografia (na webe) nie je len o výbere niektorého z fontov. Typografia na webe sa skladá zo 4 základných elementov:

1. kontrast: texty na webe sú na to, aby sa čítali. Na to, aby sa čítali dobre, je vhodné použiť správny kontrast farby písma a pozadia. Ak si nie ste istí, či je kontrast dostatočný, spravte si screenshot zo stránky, vložte ho do napr. Photoshopu a zmenťe ho do grayscale.
2. veľkosť písma: príliš malé písmo je ťažšie čitateľné a preto, ak je to možné, nenastavte veľkosť písma v pod 10 alebo 12px.
3. hierarchia: meniť veľkosť písma je jednou z najlepších možností, ako rozlišovať obsah. Ďalšou z možností je mixovanie rôznych štýlov, napríklad používať kapitálky alebo italic pre podnadpisy, alebo zmiešať serif a sans serif.
4. miesto (space): nebojte sa nechať na vašom webe prázdne miesta , tento negatívny alebo biely priestor napomôže k tomu, aby bola pozornosť zameraná na text - obsah. Dobrí návrhári v snahe o dosiahnutie rovnováhy medzi farbou písma a bielymi (alebo negatívnymi) miestami trávia nad svojimi návrhmi pomerne veľa času.

Teória farieb

Použité farby a farebnosť webu patrí k jeho najdôležitejším aspektom, pretože pomocou farieb je možné vyvolať v ľudoch emócie. Farby delíme na teplé a studené. Medzi teplé farby radíme napr. červenú, oranžovú a žltú. Modrá, fialová a zelená su studené farby. Ako základ pre pochopenie farieb a vzťahov medzi nimi slúži tzv. farebný kruh, ktorý predstavuje rozdelenie farieb do troch skupín (primárne, sekundárne a terciárne).

Primárne farby su červená, zelená a modrá (RGB) a ich kombináciou dokážeme vytvoriť všetky ostatné farby. Sekundárne farby vznikajú kombináciou dvoch primárnych farieb a terciárne farby vzniknú vtedy, keď skombinujeme jednu primárnu a jednu sekundárnu farbu.

Farby môžeme rozdeliť na analogické a komplementárne, čím vyjadrujeme vzťah medzi nimi. Analogické farby sú umiestnené vedľa seba a môžeme ich teda dobre kombinovať. Komplementárne farby sú naopak na farebnom kruhu umiestnené oproti sebe a vďaka tomu dokážeme dosiahnuť dostatočný kontrast na našom webe.

Dizajn založený na gridoch

Keď toho už viete veľa o typografii a farbách, je čas pozrieť sa na grid systém vo vašom dizajne. Gridy umožňujú dizajnérovi vytvoriť dizajn, ktorý je prehľadný a čitateľný. Grid systémy sú skvelou pomôckou pri umiestňovaní jednotlivých prvkov do dizajnu.

Jedným z príkladov grid systémov je 960gs, ktorého základ tvoria stĺpce v celkovej šírke 960 pixelov, ktoré sú rozdelené na 12 a 16 stĺpcov. Systémy sa teda líšia v šírke stĺpcov, 12 stĺpcový má stĺpce so šírkou 60px a 16 stĺpcový so šírkou 40px. Každý stĺpec navyše obsahuje 10 pixelový margin vľavo a vpravo. 960 grid systém je vhodný pre rýchle prototypovanie, ale funguje dobre aj v produkčnom prostredí. Použitím tohto systému je možné rozdeliť si jednotlivé časti webu tak, aby vždy pôsobili vyváženým dojmom.

Teória dizajnu

Dizajn vašej webstránky je dôležitý aj z marketingového hľadiska, bude od neho závisieť predaj vášho produktu. Preto je dobré držať sa niektorých základných pravidiel.

Prvým z nich je vizuálna hierarchia. Týmto pojmom sa myslí usporiadanie webu, v akom ho vidí užívateľ. Keďže niektoré časti vašej stránky sú dôležitejšie ako ostatné (ide najmä o formuláre, call-to-action prvky, value propositions a pod.) chcete, aby na ne návštevníci klikali.

Zlatý rez (grécke písmeno phi) je najstarším a najpoužívanejším kompozičným princípom, ktorý má svoje využitie aj vo web dizajne. Ak je šírka vášho layoutu 960px, vydeľte ho číslom 1,618 (phi). Dostanete 593px, čo je šírka pre váš hlavný obsah, zvyšných 367px použite ako sidebar.

Biely priestor (negatívny priestor) je časť stránky, ktorá nie je použitá. Nemala by však byť považovaná za nevyužitú, je jedným z dôležitých elementov vo web dizajne. Správne využitý biely priestor podporuje vizuálnu hierarchiu a zlepšuje prehľadnosť webu.

UI & použiteľnosť

Dobrá používateľnosť webu závisí od mnohých faktorov. Responzívny dizajn a teda dobré ovládanie aj na mobiloch či tabletoch je v súčasnosti trendovou a veľmi potrebnou záležitosťou.

Kvalitný hosting a teda rýchle načítavanie stránok a validné linky tiež napomáhajú k dobrej použiteľnosti. Základným princípom je prehľadnosť - používateľa je ľahké “stratiť" rušivými prvkami a ak na vašej stránke nenájde čo hľadá, odíde. Úlohou dobre nadizajnovaného webu je poskytnúť užívateľovi jednoduchý, prehľadný a user-friendly zážitok. Web musí pôsobiť dôveryhodne - docielite to vytvorením kontaktnej stránky s uvedením adresy a telefónneho čísla. K dobrej použiteľnosti webu v neposlednom rade patrí relevantnosť. Musíte poskytovať obsah, ktorý vaši návštevníci hľadajú a váš dizajn by im mal pomôcť nájsť to, čo hľadajú. Dobrá použiteľnosť sa dolaďuje dlhšiu dobu, vyžaduje si užívateľský prieskum a neustále testovanie.

Dobrý webdizajnér by mal ovládať aj túto teóriu a teda by mal vedieť nielen "ako" to spraviť, ale aj “prečo” to tak spraviť. Potom nasleduje tvrdá práca na sebe, neustále vzdelávanie sa, sledovanie trendov a skúšanie. Pokiaľ by ste sa chceli dozvedieť viac, máte možnosť zúčastniť sa kurzu Vizuálny dizajn webu a aplikácií, na ktorom v priebehu jedného mesiaca vytvoríte kompletný dizajn webu vo Photoshope a naučíte sa základné dizajnérske princípy a techniky.

Learn2Code Learn2Code

Learn2Code je vzdelávací koncept zameraný na výučbu digitálnych zručností. Vzdelávanie je zamerané na design, web a tvorbu mobilných aplikácií a pozostáva z týchto kurzov:
1. Web Designer
2. Web Developer
3. iOS Developer
4. Visual Design
Okrem toho sme v Learn2Code pripravili aj online kurz webdesignu a programovania v PHP pod názvom Webrebel.
Viac info na www.learn2code.sk


Hodnoť článok:
5 0

2 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Tomas Korosi 23.5.2014 10:08:16
@Tomas Dolezal suhlasim, grid 960 bol fajn, ale osobne by som doplnil trocha teba :) niektore weby si 1170px moc neuziju... mame klientov, pre ktorych by taky rozmer vzhladom na slaby content bol strasne velky... samozrejme je to aj o edukovani klienta, ale obcas este stale nie je na skodu vyuzit aj mensie gridy.. v kazdom pripade je velmi dobre grid pouzivat, v tom sa asi zhodneme vsetci :)
2 0 Tomas Dolezal 7.5.2014 23:47:43
Super clanok, niekolko mojich postrehov:

typografia: italic na podnadpisi moc neodporucam

farby: spomenut triadu, odkaz napr. na adobe kuler

grid: 960 bol fajn sam som ho dlho pouzival no dnesk uz skor niaky iny, napr. http://aaronkwhite.com/images/posts/bootstrap_illustrator_template.png

teoria dizajnu: moc nesuhlasim s tym 593px na obsah, porusite gridku. Mozno by som spomenul rytmiku a podobne. Ten obrazok ipadu je konstruovany podla fibonaciho postupnosti.

Zajtra.sk > Dizajn > Grafika > Ako začať s grafickým web dizajnom?


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama