Pri učení sa o programovaní je možné naraziť na dve odlišné fázy
-
Učenie sa o základoch: Začnete skúmať anatómiu počítačového programu, naučíte sa premýšľať o jednoduchých problémoch z hľadiska logických jednotiek a začnete tieto jednotky formalizovať do inštrukcií kódu. V tejto fáze sa dozviete o abstraktných témach a jednoduchom cvičení. Ak by sa to urobilo správne a venovalo by sa mu primerané množstvo času, každý by bol schopný dobre pochopiť a písať jednoduché logické programy pomocou zvoleného jazyka.
-
Druhá fáza, ktorú väčšina ľudí považuje za trochu skľučujúcu, pozostáva z učenia sa vývojového ekosystému: prirodzeným ďalším krokom po získaní jednoduchých znalostí programovania je výber programovacej subdomény (vývoj webu, vývoj mobilných aplikácií, vstavané systémy a podobne). ) a začnite sa učiť, ako riešiť problémy pomocou tejto konkrétnej platformy. Problém je v tom, že už nejde o pokrytie súboru základov, precvičenie každého konceptu a opakovanie. Často je nemožné pokryť každý nástroj, každú technológiu a dodržiavať všetky zásady. Správny spôsob, ako to urobiť, je urobiť zdravé množstvo experimentov a výskumu. Je pravdepodobné, že budete musieť získať iba niekoľko zručností a použiť množstvo nástrojov, aby ste mohli začať s jednoduchými úlohami. Keď budete na tejto úrovni spokojní, môžete sa pokúsiť rozšíriť na novú sadu nástrojov a neustále sa vyvíjať. Podľa tejto metodiky sa pokúsime vybudovať pevné základy v oblasti vývoja webu prostredníctvom skúmania technológií a nástrojov používaných na vytváranie jednoduchých vstupných stránok.
V tomto blogovom príspevku urobíme krátky prieskum prostredia frontendového vývoja webu so zameraním na vývoj vstupnej stránky. Prejdeme si výber zdrojov, ktoré vám odporúčame pozrieť na rôzne časti vývoja, s ktorými sa môžete stretnúť. Na konci tohto článku budete mať oveľa jasnejšiu predstavu o tom, ako postupovať pri vytváraní vstupnej stránky. Praktický príklad nájdete v tomto sprievodnom videu.
Landing Page Development Landscape
Vstupná stránka je termín pôvodne používaný odborníkmi na digitálny marketing na označenie samostatnej webovej stránky používanej na účely marketingu a reklamných kampaní. Koncept je pomerne jednoduchý: návštevník, ktorý sa zaujíma o produkt alebo službu poskytovanú spoločnosťou, klikne na odkaz daného produktu, potom sa „dostane“ na webovú stránku, ktorá má bohatý popis kombinujúci text, obrázky atď. produktu, resp. služby. Stránka obsahuje tlačidlo nákupu, ktoré sa nazýva „CTA“ (Call To Action), aby sa návštevník zmenil na platiaceho zákazníka. Ako môžete očakávať, vytvorenie dobrej používateľskej skúsenosti je prvoradé pre dobrý konverzný pomer.
V tomto článku sa dozvieme o mnohých spôsoboch a nástrojoch, ktoré nám umožnia vytvárať vstupné stránky, ktoré plnia svoju úlohu. Je dôležité spomenúť, že pri vytváraní vstupných stránok súvisia so SEO (optimalizácia pre vyhľadávače) aj ďalšie úvahy. SEO bude zahrnuté v budúcich workshopoch.
Dizajnová inšpirácia
Či už máte skúsenosti s vytváraním vstupných stránok alebo len začínate, zistíte, že je často ťažké presne určiť, ako chcete, aby váš web vyzeral. Pri práci s klientmi sa tiež často stáva, že presne nevedia, aký dizajn pre svoju web stránku chcú. Zvyčajne by návrhár a prototyp odovzdal vývojárovi webový dizajnér, ktorý sa špecializuje na tento druh práce. Môže byť užitočné mať spoľahlivý zdroj webových návrhov. Takéto zdroje vám umožnia držať krok s dizajnovými trendmi, posunúť vašu kreativitu a... začať. Dva z najlepších zdrojov, ktoré môžete použiť na získanie inšpirácie pre svoj ďalší projekt, sú Dribbble a Behance.
Dribling
Dribbble je pravdepodobne najpopulárnejším zdrojom v oblasti webového dizajnu. Je to komunita dizajnérov, ktorí zdieľajú svoju prácu s cieľom zlepšiť svoje zručnosti, navzájom si pomáhať a získať konštruktívnu spätnú väzbu. Obsahuje širokú škálu návrhov v takmer akomkoľvek predmete alebo oblasti, ktoré vytvorili kreatívni ľudia z celého sveta, spolu so spätnou väzbou komunity, vďaka čomu je ideálnym miestom na získanie inšpirácie.
Behance
Behance je ďalšia populárna dizajnérska komunita, ktorá vám môže pomôcť nájsť inšpiráciu. Táto webová stránka ponúka pokročilé funkcie vyhľadávania, ktoré vám umožňujú jednoduchý prístup ku konkrétnej práci, o ktorú máte záujem, pomocou kľúčových slov, polí a farebnej palety. Je tiež dôležité poznamenať, že Behance je súčasťou Adobe a úhľadne sa integruje s Adobe Creative cloud.
Dribbble a Behance sú skvelé platformy pre inšpiráciu webdizajnu a ani s nimi nemôžete urobiť chybu. Odporúčame vám začať skúmať návrhy a prísť s vlastným!
Dizajn prototypu
Teraz, keď ste sa inšpirovali prácou talentovaných dizajnérov, je čas, aby ste začali prototypovať dizajn vašej vstupnej stránky. Prototypovanie je dôležitou fázou budovania vstupnej stránky. Dá sa definovať ako experimentálny proces, v ktorom implementujete nápady do viditeľných štruktúr, aby ste ich mohli vylepšiť a overiť so svojím tímom alebo klientom. Na konci fázy prototypovania budete mať dizajn pripravený na uvedenie do života na vašej vstupnej stránke.
Existuje množstvo softvérových riešení, ktoré sa dajú použiť na vytváranie prototypov dizajnu. V skutočnosti je ich toľko, že môže byť rýchlo náročné vyhodnotiť, porovnať a vybrať jeden nástroj. Budeme používať Figmu, ako ju bežne používajú ux/ui dizajnéri. Ak by ste sa chceli naučiť používať Figmu na prototypovanie, môžete si pozrieť náš rýchlokurz na youtube priamo tu.
Figma
Figma je nástroj na návrh typu všetko v jednom, ktorý uľahčuje dizajnérom a vývojárom UX zostavovať prototypy dizajnu a spolupracovať na nich na cloudovej platforme založenej na prehliadači . Figma kladie dôraz na jednoduchosť a jednoduchosť použitia.
Rozhranie Figma vám umožňuje vytvárať prvky a upravovať ich štýl ovládaním vzhľadu textu, mriežok a ďalších komponentov na stránke. Ponúka širokú škálu doplnkových doplnkov, ako je Autoflow na predvádzanie používateľských tokov, Figmotion na animácie a mnoho ďalších.
Ikony a písma
Typografia a štýl ikon sú jedny z najjednoduchších funkcií, ktoré môžete použiť na zlepšenie vzhľadu akejkoľvek webovej stránky. Chcete na svojej vstupnej stránke použiť správne písmo a ikony, aby zodpovedali všeobecnej myšlienke, ktorú chcete komunikovať. Našťastie je ľahké nájsť a použiť veľký výber písiem a ikon pomocou Font Awesome alebo Google Fonts.
Písmo úžasné
Font Awesome je súprava nástrojov pre písma a ikony založená na CSS a Less . Od roku 2020 používalo Font Awesome 38 % stránok, ktoré používajú skripty písiem tretích strán, čím sa umiestnili na druhé miesto po Google Fonts (Wikipedia).
Font Awesome je podporovaný mnohými frontend knižnicami, ako je Bootstrap, pre ktorý bol pôvodne vytvorený. Font Awesome uľahčuje integráciu písiem a ikon na webovej stránke, ako je vloženie odkazu CDN. Táto jednoduchosť použitia spolu s veľkým výberom písiem a ikon z neho urobili najobľúbenejšie riešenie v priestore.
Písma Google
Google Fonts je bezplatná webová služba s otvoreným zdrojom ponúkaná spoločnosťou Google na vkladanie písiem do webových stránok. Ponúka bezproblémovú integráciu a vysokú úroveň flexibility a prispôsobenia.
Nasaďte svoju vstupnú stránku
Teraz, keď ste vytvorili svoju vstupnú stránku, je čas zdieľať ju s celým! Posledným krokom je nasadenie vašej vstupnej stránky pomocou riešenia poskytovateľa hostingu. Github Pages a Vercel sú naše najlepšie tipy. Sú najobľúbenejšie a najjednoduchšie sa používajú. Vercel je nástroj predstavený v našom workshope, ale Github Pages funguje podobným spôsobom.
Stránky Github
Ak sa práve učíte kódovať, je pravdepodobné, že ste už počuli o Github. Github je platforma na zdieľanie a hosťovanie kódu v rámci komunity s otvoreným zdrojovým kódom. Ponúka funkciu s názvom GitHub Pages, čo je hostingová služba pre verejné webové stránky, ktoré môžu používať jednotlivci a organizácie. Všetky stránky sú voľne hosťované na doméne GitHub github.io alebo na vlastnom názve domény, ak ju náhodou vlastníte. Stránky GitHub predstavujú jednoduchý a efektívny spôsob, ako bezplatne hostiť svoje projekty, ak už Github používate na kontrolu verzií.
Vercel
Vercel je alternatíva Github Pages, ktorá ponúka širokú škálu funkcií a konfigurácií. Dodáva sa s bezplatnou verziou. Vercel odporúčame každému, kto má komplexný projekt, pretože prináša skvelý zážitok pre vývojárov a ponúka skvelú podporu. Code Labs Academy ho používa ako súčasť svojho vývojového procesu.
Záver
Tento článok predstavil užitočné nástroje na vývoj vstupnej stránky. Opäť! Najlepším spôsobom učenia je prax, preto vám dôrazne odporúčame vyskúšať si tieto nástroje na svojom osobnom projekte! Veľkou časťou práce vývojárov je skúmať existujúce riešenia problémov, s ktorými sa stretávajú, a vyhýbať sa opätovnému objavovaniu kolesa. Skvelá vec na komunite programátorov je jej povaha spolupráce. Odporúčame vám využiť prácu, o ktorú sa podelili iní, a prispieť svojou vlastnou!
A ak sa chcete dozvedieť viac o navrhovaní skvelých webových stránok a ich vytváraní, potom si pozrite naše UX/UI Design a Web Development Bootcampy!
