Při učení o programování se můžeme setkat se dvěma odlišnými fázemi
-
Seznámení se základy: Začnete zkoumat anatomii počítačového programu, naučíte se přemýšlet o jednoduchých problémech z hlediska logických jednotek a začnete tyto jednotky formalizovat do instrukcí kódu. V této fázi se učíte o abstraktních předmětech a jednoduché praxi. Pokud by se to dělalo správně a bylo by mu věnováno přiměřené množství času, každý by byl schopen dobře pochopit a psát jednoduché logické programy pomocí zvoleného jazyka.
-
Druhá fáze, kterou většina lidí považuje za trochu skličující, spočívá v naučení se vývojářskému ekosystému: přirozeným dalším krokem po získání jednoduchých znalostí programování je výběr programovací subdomény (vývoj webu, vývoj mobilních aplikací, vestavěné systémy a podobně ) a začněte se učit, jak řešit problémy pomocí této konkrétní platformy. Potíž je v tom, že již nejde o pokrytí souboru základů, procvičování každého konceptu a opakování. Často je nemožné pokrýt každý nástroj, každou technologii a dodržovat všechny zásady. Správný způsob, jak toho dosáhnout, je udělat zdravé množství experimentů a výzkumu. Je pravděpodobné, že budete muset získat jen hrstku dovedností a používat řadu nástrojů, abyste mohli začít s jednoduchými úkoly. Jakmile budete na této úrovni spokojeni, můžete se pokusit rozšířit na novou sadu nástrojů a neustále se vyvíjet. Podle této metodiky se pokusíme vybudovat pevné základy v oblasti webového vývoje prostřednictvím zkoumání technologií a nástrojů používaných pro vytváření jednoduchých vstupních stránek.
V tomto příspěvku na blogu provedeme krátký průzkum prostředí frontendového vývoje webu se zaměřením na vývoj vstupní stránky. Projdeme si výběr zdrojů, které vám doporučujeme prozkoumat pro různé části vývoje, se kterými se můžete setkat. Na konci tohoto článku budete mít mnohem jasnější představu o tom, jak postupovat při vytváření vstupní stránky. Praktický příklad najdete v tomto doprovodném videu.
Landing Page Development Landscape
Vstupní stránka je termín původně používaný odborníky na digitální marketing k označení samostatné webové stránky používané pro účely marketingu a reklamních kampaní. Koncept je poměrně jednoduchý: návštěvník se zájmem o produkt nebo službu poskytovanou společností klikne na odkaz uvedeného produktu, poté se „dostane“ na webovou stránku, která má bohatý popis kombinující text, obrázky atd. produktu nebo servis. Stránka obsahuje tlačítko nákupu, které se nazývá „CTA“ (Call To Action) za účelem přeměny návštěvníka na platícího zákazníka. Jak můžete očekávat, vytvoření dobrého uživatelského dojmu je prvořadé pro dobrý konverzní poměr.
V tomto článku se seznámíme s mnoha způsoby a nástroji, které nám umožní vytvářet vstupní stránky, které plní svou roli. Je důležité zmínit, že při vytváření vstupních stránek souvisejících se SEO (optimalizace pro vyhledávače) existují i další aspekty. SEO bude zahrnuto v budoucích workshopech.
Designová inspirace
Ať už máte zkušenosti s vytvářením vstupních stránek nebo teprve začínáte, zjistíte, že je často těžké přesně určit, jak chcete, aby vaše webové stránky vypadaly. Často se také při práci s klienty stává, že přesně nevědí, jaký design pro svou webovou stránku chtějí. Obvykle by návrhový model a prototyp předal vývojáři webový designér, který se specializuje na tento druh práce. Může být užitečné mít spolehlivý zdroj webových návrhů. Takové zdroje vám umožní držet krok s designovými trendy, prosadit vaši kreativitu a... začít. Dva z nejlepších zdrojů, které můžete použít k získání designové inspirace pro svůj další projekt, jsou Dribbble a Behance.
Dribling
Dribbble je pravděpodobně nejoblíbenějším zdrojem v oblasti webdesignu. Je to komunita designérů, kteří sdílejí svou práci, aby zlepšili své dovednosti, pomáhali si a získali konstruktivní zpětnou vazbu. Obsahuje širokou škálu návrhů v téměř jakémkoli tématu nebo oboru vytvořených kreativními lidmi z celého světa spolu se zpětnou vazbou komunity, což z něj dělá ideální místo pro získání inspirace.
Behance
Behance je další populární komunita návrhářů, která vám může pomoci najít inspiraci. Tato webová stránka nabízí pokročilé vyhledávací funkce, které vám umožňují snadný přístup ke konkrétní práci, o kterou máte zájem, pomocí klíčových slov, polí a palety barev. Je také důležité poznamenat, že Behance je součástí Adobe a úhledně se integruje s Adobe Creative cloud.
Dribbble a Behance jsou skvělé platformy pro inspiraci webdesignu a ani s jedním neuděláte chybu. Doporučujeme vám začít zkoumat návrhy a přijít s vlastním!
Design Prototyping
Nyní, když jste se nechali inspirovat prací talentovaných designérů, je čas, abyste začali prototypovat design vaší vstupní stránky. Prototypování je důležitou fází budování vstupní stránky. Lze jej definovat jako experimentální proces, při kterém implementujete nápady do viditelných struktur, takže je můžete vylepšit a ověřit se svým týmem nebo klientem. Na konci fáze prototypování budete mít návrh, který bude připraven k oživení na vaší vstupní stránce.
Existuje nepřeberné množství softwarových řešení, která lze použít pro vytváření prototypů návrhu. Ve skutečnosti je jich tolik, že se může rychle stát náročným vyhodnotit, porovnat a vybrat jeden nástroj. Budeme používat Figma, jak ji běžně používají designéři ux/ui. Pokud byste se chtěli naučit používat Figmu pro prototypování, můžete se podívat na náš rychlokurz na youtube přímo zde.
Figma
Figma je návrhářský nástroj typu vše v jednom, který usnadňuje návrhářům a vývojářům UX vytvářet a spolupracovat na návrhových prototypech na cloudové platformě založené na prohlížeči. . Figma klade důraz na jednoduchost a snadné použití.
Rozhraní Figma vám umožňuje vytvářet prvky a stylovat je ovládáním vzhledu textu, mřížek a dalších komponent na stránce. Nabízí širokou škálu doplňkových pluginů, jako je Autoflow pro předvádění uživatelských toků, Figmotion pro animace a mnoho dalších.
Ikony a písma
Typografie a styling ikon jsou některé z nejjednodušších funkcí, které lze použít ke zlepšení vzhledu jakékoli webové stránky. Chcete na své vstupní stránce použít správné písmo a ikony, aby odpovídaly obecné myšlence, kterou chcete sdělit. Naštěstí je snadné najít a použít velký výběr písem a ikon pomocí Font Awesome nebo Google Fonts.
Písmo úžasné
Font Awesome je sada nástrojů pro písma a ikony založená na CSS a Less . Od roku 2020 používalo Font Awesome 38 % webů, které používají skripty písem třetích stran, čímž se umístil na druhé místo po Google Fonts (Wikipedia).
Font Awesome je podporován mnoha frontend knihovnami, jako je Bootstrap, pro který byl původně vytvořen. Font Awesome umožňuje integraci písem a ikon na webové stránce stejně snadno jako vložení odkazu CDN. Toto snadné použití spolu s velkým výběrem písem a ikon z něj udělalo nejoblíbenější řešení v prostoru.
Písma Google
Google Fonts je bezplatná webová služba s otevřeným zdrojovým kódem nabízená společností Google pro vkládání písem do webových stránek. Nabízí bezproblémovou integraci a vysokou úroveň flexibility a přizpůsobení.
Nasaďte svou vstupní stránku
Nyní, když jste vytvořili svou vstupní stránku, je čas ji sdílet s celým! Posledním krokem je nasazení vaší vstupní stránky pomocí řešení poskytovatele hostingu. Github Pages a Vercel jsou naše nejlepší tipy. Jsou nejoblíbenější a nejsnáze se používají. Vercel je nástroj představený v našem workshopu, ale Github Pages funguje podobným způsobem.
Stránky Github
Pokud se právě učíte kódovat, je pravděpodobné, že jste slyšeli o Githubu. Github je platforma pro sdílení a hostování kódu jako součást open-source komunity. Nabízí funkci nazvanou GitHub Pages, což je hostingová služba pro veřejné webové stránky, kterou mohou používat jednotlivci i organizace. Všechny stránky jsou volně hostovány na doméně GitHub github.io nebo na vlastním názvu domény, pokud nějakou vlastníte. Stránky GitHub představují jednoduchý a efektivní způsob, jak zdarma hostovat své projekty, pokud již Github pro správu verzí používáte.
Vercel
Vercel je alternativa Github Pages, která nabízí širokou škálu funkcí a konfigurací. Dodává se s bezplatnou verzí. Vercel doporučujeme každému se složitým projektem, protože přináší skvělou zkušenost pro vývojáře a nabízí skvělou podporu. Code Labs Academy jej používá jako součást svého vývojového procesu.
Závěr
Tento článek představil užitečné nástroje pro vývoj vstupní stránky. Znovu! Nejlepší způsob učení je praxí, proto vám důrazně doporučujeme vyzkoušet tyto nástroje na svém vlastním osobním projektu! Velkou částí práce vývojářů je zkoumat existující řešení problémů, s nimiž se setkávají, a vyhýbat se znovuobjevování kola. Skvělá věc na komunitě programátorů je její povaha spolupráce. Doporučujeme vám využít práci, o kterou se podělili ostatní, a přispět svou vlastní!
A pokud se chcete dozvědět více o navrhování skvělých webů a jejich vytváření, pak se chcete podívat na naše UX/UI Design a Web Development Výcvikové tábory!
