Zpět na blog
Vzdělávání

Jak začít s grafickým web designem?

Marián Kristeľ
07.05.2014
8 minut čtení
Jak začít s grafickým web designem?
Kvalitní a přitažlivý grafický design je nezbytnou součástí každého dobrého webu. Za designem se skrývá mnoho teorie, na kterou se ve zkratce podíváme v tomto blogu postu. Mnozí z nás umí používat Photoshop a vytvořit v něm design, který vypadá atraktivní a poměrně dobře. Za designem, který vytváříme, je obrovské množství teorie. Znalost této teorie je chybějící částí pro mnohé (talentované) designéry. V dalším textu ve zkratce probereme 5 základních oblastí, které by měl dobrý webdesignér ovládat. 

Typografie

Typografie tvoří 80-90% z web stránky. Při množství informací a textů, které denně procházíme, je nutné udržet co nejjednodušší a nejrychlejší způsob, jak se dostat k informacím, které potřebujeme.
Dobrá a přehledná prezentace obsahu na webu je stejně důležitá jako pěkná grafika a vymakaný copywriting. Typografie (na webu) není jen o výběru některého z fontů. Typografie na webu se skládá ze 4 základních elementů: 

1. kontrast: texty na webu jsou k tomu, aby se četly. K tomu, aby se četli dobře, je vhodné použít správný kontrast barvy písma a pozadí. Pokud si nejste jisti, zda je kontrast dostatečný, udělejte si screenshot ze stránky, vložte jej do např. Photoshopu a změňte jej do grayscale.
2. velikost písma: příliš malé písmo je obtížněji čitelné a proto, pokud je to možné, nenastavte velikost písma v pod 10 nebo 12px. 
3. hierarchie: měnit velikost písma je jednou z nejlepších možností, jak rozlišovat obsah. Další z možností je mixování různých stylů, například používat kapitálky nebo italic pro podnadpisy, nebo smíchat serif a sans serif. 
4. místo (space): nebojte se nechat na vašem webu prázdná místa , tento negativní nebo bílý prostor napomůže k tomu, aby byla pozornost zaměřena na text - obsah. Dobří návrháři ve snaze o dosažení rovnováhy mezi barvou písma a bílými (nebo negativními) místy tráví nad svými návrhy poměrně mnoho času.

Teorie barev 

Použité barvy a barevnost webu patří k jeho nejdůležitějším aspektům, neboť pomocí barev lze vyvolat v lidech emoce. Barvy dělíme na teplé a studené. Mezi teplé barvy řadíme např. červenou, oranžovou a žlutou. Modrá, fialová a zelená jsou studené barvy. Jako základ pro pochopení barev a vztahů mezi nimi slouží tvz. barevný kruh , který představuje rozdělení barev do tří skupin (primární, sekundární a terciární).
Primární barvy jsou červená, zelená a modrá (RGB) a jejich kombinací dokážeme vytvořit všechny ostatní barvy. Sekundární barvy vznikají kombinací dvou primárních barev a terciární barvy vzniknou tehdy, když zkombinujeme jednu primární a jednu sekundární barvu. Barvy můžeme rozdělit na analogické a komplementární, čímž vyjadřujeme vztah mezi nimi. 

Analogické barvy jsou umístěny vedle sebe a můžeme je tedy dobře kombinovat. Komplementární barvy jsou naopak na barevném kruhu umístěny naproti sobě a díky tomu dokážeme dosáhnout dostatečného kontrastu na našem webu. Kromě toho známe monochromatické či triadické barevné schémata.

Nejdůležitější věc, kterou byste měli mít na paměti, je že barvy ve vašich grafických návrzích by měly zlepšit zážitek ze čtení a ne odvádět od něj pozornost. Při výběru těch správných barev vám pomohou online nástroje, například. Adobe Color CC / Adobe Kuler (color.adobe.com).

Design založený na gridech 

Když toho už víte hodně o typografii a barvách, je čas podívat se na grid systém ve vašem designu. Gridy umožňují designérovi vytvořit design, který je přehledný a čitelný. Grid systémy jsou skvělou pomůckou při umísťování jednotlivých prvků do designu. Jedním z příkladů grid systémů je 960gs, jehož základ tvoří sloupce o celkové šířce 960 pixelů, které jsou rozděleny na 12 a 16 sloupců. Systémy se tedy liší v šířce sloupců, 12 sloupcový má sloupce o šířce 60px a 16 sloupcový o šířce 40px. Každý sloupec navíc obsahuje 10pixelový margin vlevo a vpravo. 960 grid systém je vhodný pro rychlé prototypování, ale funguje dobře i v produkčním prostředí. Použitím tohoto systému lze rozdělit si jednotlivé části webu tak, aby vždy působily vyváženým dojmem.
Grid systémů je samozřejmě více, každý si může zvolit takový, který mu více vyhovuje. Rozhodně je ale velkou výhodou grid používat.

Teorie designu 

Design vaší webstránky je důležitý iz marketingového hlediska, bude na něm záviset prodej vašeho produktu. Proto je dobré držet se některých základních pravidel. Prvním z nich je vizuální hierarchie. Tímto pojmem se myslí uspořádání webu, v jakém jej vidí uživatel. Jelikož některé části vaší stránky jsou důležitější než ostatní (jde zejména o formuláře, call-to-action prvky, value propositions apod.) chcete, aby na ně návštěvníci klikali. Zlatý řez (řecké písmeno phi) je nejstarším a nejpoužívanějším kompozičním principem, který má své využití i ve web designu.
Nebojte se bílého místa na webu. Bílý prostor (negativní prostor) je část stránky, která není použita. Neměla by však být považována za nevyužitou, je jedním z důležitých elementů ve web designu. Správně využitý bílý prostor podporuje vizuální hierarchii a zlepšuje přehlednost webu.

UI & použitelnost 

Dobrá uživatelnost webu závisí na mnoha faktorech. Responzivní design a tedy dobré ovládání i na mobilech či tabletech je v současnosti trendovou a velmi potřebnou záležitostí.
Kvalitní hosting a tedy rychlé načítání stránek a platné linky také napomáhají k dobré použitelnosti. Základním principem je přehlednost - uživatele je snadné "ztratit" rušivými prvky a pokud na vaší stránce nenajde co hledá, odejde. Úkolem dobře nadesignovaného webu je poskytnout uživateli jednoduchý, přehledný a user-friendly zážitek . s uvedením adresy a telefonního čísla.K dobré použitelnosti webu v neposlední řadě patří relevance.Musíte poskytovat obsah, který vaši návštěvníci hledají a váš design by jim měl pomoci najít to, co hledají.Dobrá použitelnost se dolaďuje delší dobu, vyžaduje uživatelský průzkum a neustálé testování. 

Dobrý webdesignér by měl ovládat i tuto teorii a tudíž by měl umět nejen „jak“ to udělat, ale i „proč“ to tak udělat. Potom následuje tvrdá práce na sobě, neustálé vzdělávání se, sledování trendů a zkoušení. Pokud byste se chtěli dozvědět více, máte možnost zúčastnit se kurzu Visual Design , na kterém se během 6 týdnů naučíte základní designérské principy a techniky a vytvoříte logo, základní design manuál a design 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 tě zajímat

Tipy pro programátorské začátečníky
Vzdělávání
18.02.2014
Marián Kristeľ

Tipy pro programátorské začátečníky

Všudypřítomnost technologií, neustálé využívání různých aplikací a také narůstající povědomí o start-upech a jejich „success stories“ udělali ze znalosti programování velmi populární téma. Pro lidi, kteří začínají nebo chtějí začít s programováním, přinášíme pár začátečnických tipů. 1. Začněte s konkrétním projektem v hlavě  Je to důležité z toho hlediska, že učení nám půjde jednodušší a zůstaneme motivováni nepřestat. Dobré je také mít přehled o současných aplikacích a produktech (např. Facebook, Twitter) a během kurzu se snažit vytvořit stejnou funkčnost. V začátcích je třeba si ujasnit, co chceme naprogramovat nebo vytvořit. Pokud to je jen webstránka, začneme s HTML a CSS. Má-li to být aplikace, která komunikuje s databází, zvolíme k tomu vhodný programovací jazyk. 2. Učte se vámi zvolený jazyk Doporučujeme začít s Ruby a Ruby on Rails, výhody tohoto jazyka a frameworku jsme popsali v jedné z našich blogových zpráv . Je možné začít is jiným jazykem, mnozí doporučují např. Python, ale ruby ​​komunita je známá množstvím open source nástrojů a pluginů, které napomáhají programátorům vytvářet funkcionalitu svých projektů rychle a přitom se učit základy. Věnujte vámi zvolenému jazyku tolik času, kolik je zapotřebí. 3. Vytrvejte v učení Mnozí po nabytí základů programování přestanou s dalším učením se s tím, že už začínají rozumět programování. A pak zjistí, že se mýlí a je tu ještě hodně práce. Dostat se do tohoto dalšího levelu vyžaduje také změnu myšlení, a proto je třeba být vytrvalý. Super způsob, jak začít se složitějšími projekty, je stáhnout si kód z některých open-source repozitářů na funkcionalitu, která vás zajímá. Hledání vhodných repozitářů na GitHube a upravování kódu pro potřeby vašeho projektu je fajn způsob jak nastartovat vlastní projekt. Na webu je mnoho kvalitních online programátorských tutoriálů. od Lynda.com nebo Treehouse . Pokud však preferujete fyzická školení s instruktorem, kterého se můžete cokoliv zeptat a který vám poradí při řešení programátorských problémů, v Learn2Code nabízíme dlouhodobá školení zaměřená na web dizajn, web development a tvorbu mobilních aplikácí pro iOS.
Darujte nám 2% z daní
Vzdělávání
30.01.2014
Marián Kristeľ

Darujte nám 2% z daní

I letos mohou zaměstnanci, fyzické i právnické osoby věnovat 2% ze svých daní neziskovým organizacím. Občanské sdružení Learn2Code bylo založeno v prosinci 2012 za účelem poskytování a šíření vzdělávání v oblasti nejmodernějších technologií. Co jsme už udělali?V létě 2013 jsme zorganizovali dětský programátorský tábor iKid Summer Code Camp . Tohoto tábora se zúčastnilo 21 dětí ve věku 11 až 15 let a během 3 dnů se jim podařilo naprogramovat si vlastní hru v programovacím jazyce Ruby. Se začínajícími programátory a programátorkami jsme strávili skvělé 3 dny a těšíme se na další podobný kurz pro nejmladší kodéry.[Image] Koncem srpna 2013 jsme do Bratislavy přitáhli Rails Girls . Bylo to vůbec poprvé, co se na Slovensku konal tento 2-denní bezplatný workshop pro dívky, které se chtějí naučit programovat a tvořit webové aplikace. 50 dívek pod vedením 15 mentorů ze Slovenska, Česka, Rakouska a Německa vytvářelo své většinou první webové aplikace v Ruby on Rails. [Image] Na základě naší velmi dobré zkušenosti s letním táborem a velkého zájmu dětí o technologie jsme v listopadu 2013 otevřeli dlouhobobý programátorský kurz pro děti ve věku 10 až 14 let Kid Developer. Děti učíme algoritmickému a logickému myšlení a využíváme k tomu moderních výukových nástrojů. Scratch nebo Mit App Inventor. Děti během programu tvoří vlastní hry, animace a interaktivní příběhy.  Co chceme udělat?Chceme i nadále pokračovat v popularizaci programování a věnovat se aktivitám na přitažení mladé generace ke kódování. V roce 2014 chceme znovu zorganizovat letní programátorské tábory pro děti a pokračovat v programu Kid Developer. V letošním roce chceme pokračovat ve všech našich aktivitách a na to nám mohou pomoci vaše 2% z daní. Jak darovat 2 procenta?Identifikační údaje o občanském sdružení Learn2Code je nutné uvést ve Vašem daňovém přiznání jste-li firma, nebo pokud podáváte přiznání přímo daňovému úřadu. Pokud jste zaměstnanec, předejte je Vašemu zaměstnavateli: Název: Learn2Code Forma: občanské sdružení Adresa: Kukučínova 5, 01001 Žilina IČ: 42346703 Pokud jste zaměstnanec a nepodáváte daňové přiznání: 1. Do 15.2.2014 požádejte svého zaměstnavatele o provedení ročního zúčtování zaplacených záloh na daň. Požádejte ho o vystavení Potvrzení o zaplacení daně . 2. Pokud jste v roce 2013 nebyli dobrovolníkem, nebo dobrovolnicky odpracovali méně než 40 hodin, vypočítejte si 2% ze zaplacené daně (částka musí být minimálně 3 €). 3. Pokud jste v roce 2013 odpracovali dobrovolnický minimálně 40 hodin a získáte o tom Potvrzení od vysílající organizace nebo Potvrzení od příjemce dobrovolnické pomoci , vypočítejte si 3% ze zaplacené daně. 4. Vyplňte Prohlášení o poukázání 2% daně a obě tiskopisy spolu s Potvrzením doručte do 30.4.2014 na daňový úřad dle Vašeho bydliště (pokud poukazujete 3% z daně, povinnou přílohou je i Potvrzení o odpracování minimálně 40 hodin dobrovolnické činnosti). Pokud jste fyzická osoba , která si daňové přiznání podává sama ( OSVČ ): 1. Pokud jste v roce 2013 nebyli dobrovolníkem, nebo dobrovolnicky odpracovali méně než 40 hodin, vypočítejte si 2% ze zaplacené daně (částka musí být minimálně 3 €). 2. Pokud jste v roce 2013 odpracovali dobrovolnický minimálně 40 hodin a získáte o tom  Potvrzení od vysílající organizace  nebo  Potvrzení od příjemce dobrovolnické pomoci , vypočítejte si 3% ze zaplacené daně. 3. V daňovém přiznání pro fyzické osoby (FO-typ A, FO-typ B) jsou v kolonce na poukázání 2(3)% daně ve prospěch Learn2Code, oz (Oddíl VIII.).  4. Řádně vyplněné daňové přiznání doručte do 31.3.2014 na daňový úřad dle Vašeho bydliště a v tomto termínu i zaplaťte daň z příjmů. Pokud jste právnická osoba : 1. Pokud do 31.3.2014 darujete na veřejně prospěšné účely částku ve výši alespoň 0,5% své daně, můžete poukázat 2% daně z příjmu. 2. Pokud do data podání daňového přiznání nedarujete pro veřejně prospěšné účely částku ve výši alespoň 0,5% své daně, můžete poukázat pouze 1,5% daně z příjmu.  3. Řádně vyplněné daňové přiznání doručte ve lhůtě, kterou máte k podání daňového přiznání, na daňový úřad dle Vašeho sídla a v tomto termínu i zaplaťte daň z příjmů. V případě jakýchkoli dotazů nám napište email nebo zavolejte 0948 828 228. Děkujeme za podporu našich vzdělávacích aktivit.
Rozhovor s Mariánem Staněm
Vzdělávání
11.12.2013
Skillmea

Rozhovor s Mariánem Staněm

Jak ses dostal k IT?Začal jsem jako sedmák na 8bitovém počítači Didaktik M. Byl to kamarádův stroj, programy jsem si značil na papír a pak u kamaráda přepisoval. Pro které technologie ses rozhodl?Můj výběr byl na začátku 90. let velmi omezený. Používal jsem jazyk BASIC, protože jiný nebyl na Didaktiku k dispozici. Na gymnáziu jsem přidal Turbo Pascal a zkoušel jsem Assembler. Co bylo pro tebe v začátcích nejtěžší?Dostatek kvalitní literatury. Každý toužil dělat pěkné hry, ale málokdo věděl, jak. Bavilo mě experimentovat a zkoušet věci, o kterých jsem nevěděl jak dopadnou. Dodnes si například vzpomínám, jak jsem náhodnými zápisy do RAM objevil videopaměť.  Kolik ti trvalo dostat se na úroveň profesionálního programátora?Naštěstí jsem měl na střední škole kvalitní učitele programování, takže jsem se s jejich pomocí naučil programovat poměrně rychle. V profesionální sféře jsem však moc vody nenamoutil, táhlo mě to spíše do školství. Je podle tebe programování nezbytnou dovedností budoucnosti?Absolutně. Dnes se počítače využívají v každé oblasti a na všechno. Kdo neví a nezačne co nejdříve, bude brzy výrazně znevýhodněn. Myslíš si, že je důležité, aby se děti učily programovat?Je to velmi dobrý způsob pro smysluplné vyplnění času, který zároveň rozvíjí jejich schopnosti ve více oblastech – logické myšlení, komunikace, management času a plánování, správné odhadování svých schopností.

Nezmeškej info o nových kurzech a speciálních nabídkách