Späť na blog
Vzdelávanie

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

Marián Kristeľ
07.05.2014
8 minút čítania
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 blog poste. 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

Typografia tvorí 80-90% z web stránky. Pri množstve informácií a textov, ktoré denne prechádzame, je nevyhnutné udržať čo najjednoduchší a najrýchlejší spôsob, ako sa dostať ku informáciám, ktoré potrebujeme.
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 zmeňte 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 ľuďoch emócie. Farby delíme na teplé a studené. Medzi teplé farby radíme napr. červenú, oranžovú a žltú. Modrá, fialová a zelená sú 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 sú č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. Okrem toho poznáme monochromatické či triadické farebné schémy.
Najdôležitejšia vec, ktorú by ste mali mať na pamäti, je že farby vo vašich grafických návrhoch by mali zlepšiť zážitok z čítania a nie odvádzať od neho pozornosť. Pri výbere tých správnych farieb vám pomôžu online nástroje, napr. Adobe Color CC / Adobe Kuler (color.adobe.com).

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.
Grid systémov je samozrejme viacero, každý si môže zvoliť taký, ktorý mu viac vyhovuje. Rozhodne je ale veľkou výhodou grid používať.

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.
Nebojte sa bieleho miesta na webe. 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 platné 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 Visual Design, na ktorom sa v priebehu 6 týždňov naučíte sa základné dizajnérske princípy a techniky a vytvoríte logo, základný dizajn manuál a dizajn webu. 
Marián Kristeľ
Mám na starosti marketing a operations v Skillmea | (spolu)organizujem programátorský workshop Rails Girls Bratislava | ambasádor EU Code Week na Slovensku

Mohlo by ťa zaujímať

Tipy pre programátorských začiatočníkov
Vzdelávanie
18.02.2014
Marián Kristeľ

Tipy pre programátorských začiatočníkov

Všadeprítomnosť technológií, neustále využívanie rôznych aplikácií a tiež narastajúce povedomie o start-upoch a ich "success stories" spravili zo znalosti programovania veľmi populárnu tému. Pre ľudí, ktorí začínajú alebo chcú začať s programovaním, prinášame pár začiatočníckych tipov. 1. Začnite s konkrétnym projektom v hlave  Je to dôležité z toho hľadiska, že učenie nám pôjde jednoduchšie a ostaneme motivovaní neprestať. Dobré je tiež mať prehľad o súčasných aplikáciách a produktoch (napr. Facebook, Twitter) a počas kurzu sa snažiť vytvoriť rovnakú funkčnosť. V začiatkoch je potrebné ujasniť si, čo chceme naprogramovať alebo vytvoriť. Ak to je len webstránka, začneme s HTML a CSS. Ak to má byť aplikácia, ktorá komunikuje s databázou, zvolíme si na to vhodný programovací jazyk. 2. Učte sa vami zvolený jazyk Odporúčame začať s Ruby a Ruby on Rails, výhody tohto jazyka a frameworku sme popísali v jednej z našich blogových správ. Je možné začať aj s iným jazykom, mnohí odporúčajú napr. Python, ale ruby komunita je známa množstvom open source nástrojov a pluginov, ktoré napomáhajú programátorom vytvárať funkcionalitu svojich projektov rýchlo a popri tom sa učiť základy. Venujte vami zvolenému jazyku toľko času, koľko je potrebné. 3. Vytrvajte v učení Mnohí po nadobudnutí základov programovania prestanú s ďalším učením sa s tým, že už začínajú rozumieť programovaniu. A potom zistia, že sa mýlia a je tu ešte veľa práce. Dostať sa do tohto ďalšieho levelu vyžaduje aj zmenu myslenia, a preto je potrebné byť vytrvalý. Super spôsob, ako začať so zložitejšími projektami, je stiahnuť si kód z niektorých open-source repozitárov na funkcionalitu, ktorá vás zaujíma. Hľadanie vhodných repozitárov na GitHube a upravovanie kódu pre potreby vášho projektu je fajn spôsob ako naštartovať vlastný projekt. Na webe je mnoho kvalitných online programátorských tutoriálov, napr. od Lynda.com alebo Treehouse. Ak však preferujete fyzické školenia s inštruktorom, ktorého sa môžete čokoľvek opýtať a ktorý vám poradí pri riešení programátorských problémov, v Learn2Code ponúkame dlhodobé školenia zamerané na web dizajn, web development a tvorbu mobilných aplikácii pre iOS.
Darujte nám 2% z daní
Vzdelávanie
30.01.2014
Marián Kristeľ

Darujte nám 2% z daní

Aj tento rok môžu zamestnanci, fyzické aj právnické osoby venovať 2% zo svojich daní neziskovým organizáciám. Občianske združenie Learn2Code bolo založené v decembri 2012 za účelom poskytovania a šírenia vzdelávania v oblasti najmodernejších technológií. Čo sme už spravili? V lete 2013 sme zorganizovali detský programátorský tábor iKid Summer Code Camp. Tohto tábora sa zúčastnilo 21 detí vo veku 11 až 15 rokov a počas 3 dní sa im podarilo naprogramovať si vlastnú hru v programovacom jazyku Ruby. So začínajúcimi programátormi a programátorkami sme strávili skvelé 3 dni a tešíme sa na ďalší podobný kurz pre najmladších kóderov. Koncom augusta 2013 sme do Bratislavy pritiahli Rails Girls. Bolo to vôbec po prvýkrát, čo sa na Slovensku konal tento 2-dňový bezplatný workshop pre dievčatá, ktoré sa chcú naučiť programovať a tvoriť webové aplikácie. 50 dievčat pod vedením 15 mentorov zo Slovenska, Česka, Rakúska a Nemecka vytváralo svoje väčšinou prvé webové aplikácie v Ruby on Rails. Na základe našej veľmi dobrej skúsenosti s letným táborom a veľkého záujmu detí o technológie sme v novembri 2013 otvorili dlhobobý programátorský kurz pre deti vo veku 10 až 14 rokov Kid Developer. Deti učíme algoritmickému a logickému mysleniu a využívame k tomu moderné výučbové nástroje ako napr. Scratch alebo Mit App Inventor. Deti počas programu tvoria vlastné hry, animácie a interaktívne príbehy.  Čo chceme spraviť?Chceme aj naďalej pokračovať v popularizácii programovania a venovať sa aktivitám na pritiahnutie mladej generácie ku kódovaniu. V roku 2014 chceme znovu zorganizovať letné programátorské tábory pre deti a pokračovať v programe Kid Developer. V tomto roku chceme pokračovať vo všetkých našich aktivitách, a na to nám môžu pomôcť vaše 2% z daní. Ako darovať 2 percentá?Identifikačné údaje o občianskom združení Learn2Code je nutné uviesť vo Vašom daňovom priznaní ak ste firma, alebo ak podávate priznanie priamo daňovému úradu. Ak ste zamestnanec, odovzdajte ich Vášmu zamestnávateľovi: Názov: Learn2Code Forma: občianske združenie Sídlo: Kukučínova 5, 01001 Žilina IČO: 42346703 Ak ste zamestnanec a nepodávate daňové priznanie: 2. Do 15.2.2014 požiadajte svojho zamestnávateľa o vykonanie ročného zúčtovania zaplatených preddavkov na daň. Požiadajte ho o vystavenie Potvrdenia o zaplatení dane. 4. Ak ste v roku 2013 neboli dobrovoľníkom, alebo dobrovoľnícky odpracovali menej ako 40 hodín, vypočítajte si 2% zo zaplatenej dane (suma musí byť minimálne 3 €). 6. Ak ste v roku 2013 odpracovali dobrovoľnícky minimálne 40 hodín a získate o tom Potvrdenie od vysielajúcej organizácie alebo Potvrdenie od prijímateľa dobrovoľníckej pomoci, vypočítajte si 3% zo zaplatenej dane. 8. Vyplňte Vyhlásenie o poukázaní 2% dane a obe tlačivá spolu s Potvrdením doručte do 30.4.2014 na daňový úrad podľa Vášho bydliska (ak poukazujete 3% z dane, povinnou prílohou je aj Potvrdenie o odpracovaní minimálne 40 hodín dobrovoľníckej činnosti). Ak ste fyzická osoba, ktorá si daňové priznanie podáva sama (SZČO): 2. Ak ste v roku 2013 neboli dobrovoľníkom, alebo dobrovoľnícky odpracovali menej ako 40 hodín, vypočítajte si 2% zo zaplatenej dane (suma musí byť minimálne 3 €). 4. Ak ste v roku 2013 odpracovali dobrovoľnícky minimálne 40 hodín a získate o tom Potvrdenie od vysielajúcej organizácie alebo Potvrdenie od prijímateľa dobrovoľníckej pomoci, vypočítajte si 3% zo zaplatenej dane. 6. V daňovom priznaní pre fyzické osoby (FO-typ A, FO-typ B) sú v kolónky na poukázanie 2(3)% dane v prospech Learn2Code, o.z. (Oddiel VIII.).  8. Riadne vyplnené daňové priznanie doručte do 31.3.2014 na daňový úrad podľa Vášho bydliska a v tomto termíne aj zaplaťte daň z príjmov. Ak ste právnická osoba: 2. Ak do 31.3.2014 darujete na verejnoprospešné účely sumu vo výške aspoň 0,5% svojej dane, môžete poukázať 2% dane z príjmu. 4. Ak do dátumu podania daňového priznania nedarujete na verejnoprospešné účely sumu vo výške aspoň 0,5% svojej dane, môžete poukázať iba 1,5% dane z príjmu.  6. Riadne vyplnené daňové priznanie doručte v lehote, ktorú máte na podanie daňového priznania, na daňový úrad podľa Vášho sídla a v tomto termíne aj zaplaťte daň z príjmov. V prípade akýchkoľvek otázok nám napíšte email alebo zavolajte 0948 828 228. Ďakujeme za podporu našich vzdelávacích aktivít.
Rozhovor s Mariánom Staňom
Vzdelávanie
11.12.2013
Skillmea tím

Rozhovor s Mariánom Staňom

Ako si sa dostal k IT?Začal som ako siedmak na 8-bitovom počítači Didaktik M. Bol to kamarátov stroj, programy som si značil na papier a potom u kamaráta prepisoval. Pre ktoré technológie si sa rozhodol?Môj výber bol na začiatku  90. rokov veľmi obmedzený. Používal som jazyk BASIC, pretože iný nebol na Didaktiku k dispozícii. Na gymnáziu som pridal Turbo Pascal a skúšal som Assembler. Čo bolo pre teba v začiatkoch najťažšie?Dostatok kvalitnej literatúry. Každý túžil robiť pekné hry, ale málokto vedel, ako. Bavilo ma experimentovať a skúšať veci, o ktorých som nevedel ako dopadnú. Dodnes si napríklad spomínam, ako som náhodnými zápismi do RAM objavil videopamäť.  Koľko ti trvalo dostať sa na úroveň profesionálneho programátora?Našťastie som mal na strednej škole kvalitných učiteľov programovania, takže som sa s ich pomocou naučil programovať pomerne rýchlo. V profesionálnej sfére som však veľa vody nenamútil, ťahalo ma to skôr do školstva. Je podľa teba programovanie nevyhnutnou zručnosťou budúcnosti?Absolútne. Dnes sa počítače využívajú v každej oblasti a na všetko. Kto nevie a nezačne čím skôr, bude čoskoro výrazne znevýhodnený. Myslíš si, že je dôležité, aby sa deti učili programovať?Je to veľmi dobrý spôsob na zmysluplné vyplnenie času, ktorý zároveň rozvíja ich schopnosti vo viacerých oblastiach - logické myslenie, komunikácia, manažment času a plánovanie, správne odhadovanie svojich schopností.

Nezmeškaj info o nových kurzoch a špeciálnych ponukách