Chceme vám prinášať čo najviac tipov a nástrojov na zjednodušenie vašej práce s navrhovaním, tvorbou alebo redizajnom webu. A treba v tom mať aspoň trochu poriadok. Preto vám ukážeme, čo potrebuje k svojej práci web dizajnér a čo web developer.
Web dizajn a UX
Wireframe
Ak hovoríme o poriadku, treba začať od piky. To je napríklad nakreslením si layoutu vašej webky. Pokiaľ ste chytili do ruky pero a papier, nakreslili ste naň textové polia, štvorčeky a obdĺžniky a pridali k nim popisný text, vytvorili ste tak úplne jednoduchý wireframe. Ten má 3 základné ciele: nakresliť rozloženie prvkov, zobraziť hlavný obsah a popísať user interface.
Na všetko sa dajú samozrejme použiť UX/UI nástroje:
Všetky tieto nástroje umožňujú okrem wireframe-ov vytvorenie prototypu alebo mockupov.
Prototyp
Rozdiel medzi prototypom a wireframe je v tom, že prototyp musí byť z vizuálneho hľadiska čo najviac podobný finálnej verzii webu. Poskytuje určitú interakciu a je v ňom zapracovaný webový obsah. Stále však nejde o vytvorenú stránku HTML, CSS alebo JS kódom. Slúži na testovacie účely, odhalenie používateľského správania a vychytanie múch.
Mockupy
Mockup slúži na vizualizáciu finálnej podoby stránky, alebo produktu. Stále však neposkytuje žiadne funkcie, je statický a neklikateľný.
Dobrá správa je, že tak, ako existuje množstvo voľne dostupného kódu na uľahčenie práce, tak existujú aj voľne dostupné wireframe šablóny. Z nich si vyberiete napríklad podľa toho, na čo je vaša budúca webka určená.
PSD šablóny
PSD šablóny sú grafické projekty vytvorené v Adobe Photoshop. Asi netreba hovoriť, že ide celosvetovo o jeden z najpoužívanejších nástrojov v design-to-code procese. Jednotlivé stránky šablóny obsahujú všetky elementy vášho webu, ale opäť bez akéhokoľvek kódu. Ich výhodou je, že všetky elementy sa ukladajú po vrstvách, čiže môžu byť kedykoľvek ľahko modifikovateľné podľa vašich potrieb.
Farebnosť webu
Vybrať vhodnú farebnú schému pre svoj web nie je úplne najľahšie. Existujú určité pravidlá a odporúčania, z čoho by sme mali pri výbere vychádzať, alebo aké farebné kombinácie zvoliť. Nie každý však má cit a šťastnú ruku pri výbere. Našťastie existuje množstvo webových nástrojov, ktoré vám s tým pomôžu.
- Design seeds
- Colorhunt.co
- Adobe Color Wheel
- Material Palette
- Brand Colors
- Flat UI Colors
- Colorcrush
- Paletton
Free stock photos
Fotografie a obrázky sú dôležitou súčasťou vizuálneho obsahu každého webu. Sú často nositeľom informácie, ktorou chcete zaujať návštevníka a udržať si ho. Zároveň reprezentujú vašu stránku v rôznych náhľadoch.
Symboly, ikony a fonty
Táto skupina tvorí tak dôležitý prvok webu a UX, že sme jej už stihli venovať samostatný, podrobnejší blog. Pokiaľ sa chcete inšpirovať, nech sa páči, tu je pár zdrojov.
- Pixeden
- Iconmonstr
- Font Awesome
- Icons8.com
- Round Icons
- iconstore.co
- Flaticon.com
- Google fonts
- Font squirrel
- Adobe fonts
- 1001fonts
Web development
Search engines pre overenie dostupnosti domény
Cesta za vaším vysnívaným webom začína výberom jeho názvu a vhodného typu domény. Ak podnikáte a máte firmu, je úplne bežné, že jej názov už nemusí byť dostupný na typoch domén, o ktoré máte záujem. Pokiaľ práve nechcete riešiť s jej majiteľom odkúpenie, existujú rôzne vyhľadávače – search engines, ktoré vám pomôžu zistiť dostupnosť domény a vedia ponúknuť vhodnú alternatívu.
Frameworky a knižnice
Ani pri rozprávaní o frameworkoch a knižniciach pre web developerov sa nedá všetko hodiť do jedného vreca. Minimálne je potrebné rozlišovať medzi JS a CSS frameworkami a knižnicami. Obidva „typy“ sú vo veľkom využívané po celom svete. Zatiaľ čo JS frameworky slúžia na vytváranie dynamických webov a webových aplikácií, CSS prinášajú responzívnosť, mobile-first prístup, alebo flat dizajn do vašich webov. Určite sa im budeme bližšie venovať v ďalších blogoch.
Najpoužívanejšie CSS frameworky
Najpopulárnejšie JS frameworky
Snippets
„Snippets“ sú nadstavbou CSS frameworkov. Pozostávajú z voľne dostupných komponentov, s ktorými sa už niekto pohral a posunul ich minimálne o úroveň vyššie. Veľmi rozšírené sú bootstrap snippety. Pri preberaní takýchto komponentov si treba pozrieť, s akou verziou bootstrapu sú kompatibilné. Napríklad nedávno do sveta vypustená verzia bootstrapu číslo 5 kompletne zrušila jQuery a podporu pre Internet Explorer.
- Bootsnipp
- Startbootstrap
- Bootstrapious
- Bootdey
- Tutorialrepublic
Code Validation
Vytvorili ste web so všetkým, čo k nemu patrí? Predtým, ako ho budete považovať za dokončený, nechajte si jeho súčasti zvalidovať a uistite sa, či ste naozaj na niečo nezabudli a či kód zodpovedá štandardom alebo zaužívaným praktikám. Nižšie nájdete príklady rôznych validátorov.
