Práce kodéra není jen o psaní tagů, tříd a stylů, ale také o práci s fotkami, ikonami nebo o výběru správné kombinace barev. Zvlášť pokud nemáme po ruce šikovného UX designera nebo grafika, musíme si často poradit sami. V dnešním článku se proto zaměříme na několik vychytávek, které mohou kodérovi usnadnit práci právě s těmito záludnostmi.
Kvalitní fotky zdarma nemusí být nutně boj
Webovou stránku bez jediné fotky si asi nikdo z nás neumí ani představit. Pokud nemáme zrovna e-shop, kde bychom měli nafocené produkty, musíme se zaměřit na kvalitní fotky. Pomineme nyní možnost, že si fotky nafotíme sami, to by bylo na úplně jiný článek. Zaměříme se na to, kde a jak vybrat ilustrační fotky zdarma, které navíc odpovídají dostatečné kvalitě. Nabízejí se samozřejmě různé fotobanky, kterých existuje velké množství. Zaměříme se však na fotobanku Unsplash.com, která nabízí miliony kvalitních fotek naprosto zdarma.
Tato kanadská fotobanka byla spuštěna v roce 2013 a za osm let své existence si získala spoustu spokojených uživatelů, ale i přispěvatelů z řad fotografů. Výhodou je jak nekomerční, tak i komerční využití bez jakýchkoliv dalších souhlasů. Zapovězený je jen prodej fotek a vytváření vlastní fotobanky. Vyhledávat se dá přímo přes search bar, ale k dispozici jsou i předdefinované oblasti zájmu. Na detailu fotky nalezneme i podrobné informace o velikosti, počtu shlédnutí a stažení, ale i typ fotoaparátu, kterým byl snímek pořízen. Při stáhnutí fotky se zobrazí pop-up s možností poděkování autorovi, což vřele doporučuji.
Fotku máme, ale jak s ní dál naložit?
Pravděpodobně nám nebude stačit, že si fotku stáhneme a vložíme do kódu. Fotka bývá ve velkých rozměrech, ale hlavně může mít i několik megabytů. Rychlost načítání stránek a potažmo fotek, jsme řešili už v článku s WEBP formáty, proto si jen zopakujeme, že je sice žádoucí mít na stránce fotky v dostatečné kvalitě, ale zároveň v co nejmenší velikosti. Jak si s velikostí a případně i s různými formáty a úpravami jednoduše poradit? Nemusíme být zrovna mistři v grafickém oboru ani shánět drahé nástroje na úpravy.
/// Software od českého vývojáře
Všichni dozajista známe Photoshop, který je jedním z nejznámějších softwarů na úpravu fotek. Kromě toho, že je zpoplatněný (a ne zrovna malou částkou), tak je i poměrně robustní. Pro úpravu rozměrů a přípravy jiných formátů nad ním nebudeme ani přemýšlet. Obdobu s velmi podobnými funkcemi však nabízí český software Photopea, ve kterém lze navíc pracovat přímo ve webovém prohlížeči online. Třešničkou na dortu může být i možnost celého ovládacího panelu v češtině. Úpravu rozměru provedeme jednoduše. Po nahrání fotky klikneme na Soubor -> Uložit jako a zvolíme požadovaný formát. V tomto kroku zvolíme i požadovanou šířku. Výška se dopočítá automaticky, aby byl zachovaný poměr. Fotku si můžeme uložit rovnou v JPG i WEBP formátu.
Výběr barevných kombinací
Další záludností, s kterou se v rámci kódování webu potýkáme, jsou barvy a jejich vzájemná kombinace. Webová stránka by se měla držet v hlavní barvě našeho loga, případně hlavní barvy naší značky apod. K tomu je však vhodné mít k dispozici další barvy, kterými na webu odlišíme např. tlačítka ve výchozím stavu a při najetí kurzorem, podbarvení odkazů, barvy nadpisů atd. Výborný nástroj, který slouží k výběru barevných variací, ale i kontrole kontrastu, je např. Coolors.co.
V případě, že už svou hlavní barvu známe, použijeme možnost Color picker, kde vložíme kód barvy a nástroj nám vygeneruje konverzi do ostatních barevných modelů (RGB, CMYK, ..), barevné kombinace, které s naší barvou ladí a do třetice kontrolu kontrastu. Pokud žádnou barvu nemáme, použijeme generátor barev. Mezerníkem klikáme a mění se nám barvy. V případě, že se nám některá líbí, můžeme si ji uzamknout a nechat si další barvy opět vygenerovat.
Ikonky jednoduše, kvalitně a zdarma
Mnozí z náš jistě znají a běžně používají Google Fonts. Velice podobně lze použít také nabídku Google Material Icons. Ikonky si lze stáhnout v různých formátech, rozlišení i variantách: filled, outlined, rounded, two-tone a sharp. Implementaci lze provést také pomocí instalace přes npm nebo yarn, případně vložením linku přímo do HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Na závěr bych dodala, že osobně mám nejlepší zkušenostmi právě s těmito nástroji, nicméně jich existuje samozřejmě více a záleží jen na tom, s jakými z nich se vám bude lépe pracovat. Vyzkoušejte a uvidíte, jak vám sednou. :)
