Uporabna orodja za izdelavo ciljne strani

Pri učenju o programiranju lahko naletimo na dve različni fazi

1. Spoznavanje osnov: začnete raziskovati anatomijo računalniškega programa, se naučite razmišljati o preprostih problemih v smislu logičnih enot in začnete te enote formalizirati v navodila kode. Na tej stopnji spoznavate abstraktne predmete in preprosto prakso. Če bi bilo opravljeno pravilno in bi mu bila dana ustrezna količina časa, bi se lahko vsakdo dobro naučil razumeti in pisati preproste logične programe z uporabo jezika po izbiri.

2. Druga faza, ki se večini ljudi zdi nekoliko bolj zastrašujoča, je sestavljena iz učenja razvojnega ekosistema: naravni naslednji korak po pridobitvi enostavnega znanja programiranja je izbira programske poddomene (spletni razvoj, razvoj mobilnih aplikacij, vgrajeni sistemi in podobno). ) in se začnite učiti o reševanju težav z uporabo te posebne platforme. Težava je v tem, da ne gre več za pokrivanje niza osnov, vadbo vsakega koncepta in ponavljanje. Pogosto je nemogoče pokriti vsako orodje, vsako tehnologijo in slediti vsem načelom. Pravi način, da se tega lotimo, je zdravo eksperimentiranje in raziskovanje. Verjetno boste morali pridobiti le nekaj veščin in uporabiti številna orodja, da boste lahko začeli s preprostimi nalogami. Ko se boste na tej ravni počutili udobno, se lahko poskusite razširiti na nov nabor orodij in se enakomerno razvijati. Po tej metodologiji bomo poskušali zgraditi trdne temelje na področju spletnega razvoja z raziskovanjem tehnologij in orodij, ki se uporabljajo za izdelavo preprostih pristajalnih strani.

V tej objavi v spletnem dnevniku bomo na kratko raziskali pokrajino spletnega razvoja v sprednjem delu s poudarkom na razvoju ciljne strani. Pregledali bomo izbor virov, za katere vam priporočamo, da jih preverite za različne dele razvoja, s katerimi se lahko srečate. Ob koncu tega članka boste imeli veliko jasnejšo sliko o tem, kako se lotiti ustvarjanja ciljne strani. Oglejte si ta spremljevalni video za praktični primer.

Landing Page Development Landscape

Ciljna stran je izraz, ki so ga sprva uporabili strokovnjaki za digitalni marketing za samostojno spletno stran, ki se uporablja za namene trženja in oglaševalske kampanje. Koncept je dokaj preprost: obiskovalec, ki ga zanima izdelek ali storitev podjetja, klikne na povezavo omenjenega izdelka, nato pa »pristane« na spletni strani, ki ima bogat opis, ki združuje besedilo, slike itd. izdelka oz. storitev. Stran vsebuje gumb za nakup, ki se imenuje "CTA" (Call To Action), da bi obiskovalca spremenili v kupca, ki plačuje. Kot lahko pričakujete, je ustvarjanje dobre uporabniške izkušnje najpomembnejše za dobro stopnjo konverzije.

V tem članku se bomo seznanili s številnimi načini in orodji, ki nam bodo omogočili ustvarjanje ciljnih strani, ki izpolnjujejo svojo vlogo. Pomembno je omeniti, da obstajajo tudi drugi premisleki pri gradnji ciljnih strani, povezanih s SEO (optimizacijo iskalnikov). SEO bo obravnavan v prihodnjih delavnicah.

Navdih za oblikovanje

Ne glede na to, ali imate izkušnje z ustvarjanjem ciljnih strani ali ste šele začeli, boste ugotovili, da je pogosto težko natančno določiti, kako želite, da izgleda vaše spletno mesto. Pogosto se tudi zgodi, da pri delu z naročniki ne vedo točno, kakšen dizajn želijo za svojo spletno stran. Ponavadi oblikovalski model in prototip razvijalcu izroči spletni oblikovalec, ki je specializiran za tovrstno delo. Lahko je koristno imeti zanesljiv vir spletnih modelov. Takšni viri vam bodo omogočili, da boste na tekočem z oblikovalskimi trendi, spodbudili svojo ustvarjalnost in ... vam omogočili začetek. Dva izmed najboljših virov, ki ju lahko uporabite za oblikovanje navdiha za svoj naslednji projekt, sta Dribbble in Behance.

Kapljanje

Dribbble je verjetno najbolj priljubljen vir v prostoru spletnega oblikovanja. Je skupnost oblikovalcev, ki delijo svoje delo, da bi izboljšali svoje sposobnosti, pomagali drug drugemu in dobili konstruktivne povratne informacije. Vsebuje široko paleto dizajnov na skoraj vseh temah ali področjih, ki so jih ustvarili ustvarjalni ljudje z vsega sveta, skupaj s povratnimi informacijami skupnosti, zaradi česar je idealen kraj za pridobivanje navdiha.

Behance

Behance je še ena priljubljena oblikovalska skupnost, ki vam lahko pomaga najti navdih. To spletno mesto ponuja napredne funkcije iskanja, ki vam omogočajo preprost dostop do določenega dela, ki vas zanima, z uporabo ključnih besed, polj in barvne palete. Pomembno je tudi omeniti, da je Behance del Adobeja in se lepo integrira z Adobejevim ustvarjalnim oblakom.

Dribbble in Behance sta odlični platformi za navdih za spletno oblikovanje in z nobenim ne boste zgrešili. Spodbujamo vas, da začnete raziskovati dizajne in ustvarite svojega!

Oblikovanje prototipov

Zdaj, ko vas je navdihnilo delo nadarjenih oblikovalcev, je čas, da začnete izdelovati prototip zasnove vaše ciljne strani. Izdelava prototipov je pomembna faza gradnje ciljne strani. Opredeljujemo ga lahko kot eksperimentalni proces, kjer implementirate ideje v vidne strukture, tako da jih lahko izboljšate in potrdite s svojo ekipo ali stranko. Do konca faze izdelave prototipa boste imeli dizajn, ki je pripravljen za oživitev na vaši ciljni strani.

Obstaja množica programskih rešitev, ki jih je mogoče uporabiti za izdelavo prototipov. Pravzaprav jih je toliko, da lahko hitro postane izziv oceniti, primerjati in izbrati eno orodje. Uporabili bomo Figmo, saj jo običajno uporabljajo ux/ui oblikovalci. Če bi se radi naučili uporabljati Figmo za izdelavo prototipov, si lahko ogledate naš hitri tečaj na youtubu tukaj.

Figma

Figma je vse-v-enem oblikovalsko orodje, ki oblikovalcem in razvijalcem uporabniške izkušnje olajša izdelavo in sodelovanje pri oblikovanju prototipov na platformi, ki temelji na brskalniku in gostuje v oblaku. . Figma daje poudarek na preprostost in enostavnost uporabe.

Figmin vmesnik vam omogoča, da ustvarite elemente in jih oblikujete tako, da nadzirate videz besedila, mrež in drugih komponent na strani. Ponuja široko paleto dopolnilnih vtičnikov, kot je Autoflow za predstavitev uporabniških tokov, Figmotion za animacije in še veliko več.

Ikone in pisave

Tipografija in stilske ikone so nekatere od najpreprostejših funkcij, s katerimi polepšate videz katere koli spletne strani. Želite uporabiti pravo pisavo in ikone na ciljni strani, da se ujemajo s splošno idejo, ki jo želite sporočiti. Na srečo je enostavno najti in uporabiti veliko izbiro pisav in ikon s pomočjo Font Awesome ali Google Fonts.

Pisava Awesome

Font Awesome je komplet orodij za pisave in ikone, ki temelji na CSS in Less . Od leta 2020 je Font Awesome uporabljalo 38 % spletnih mest, ki uporabljajo skripte pisav tretjih oseb, kar ga uvršča na drugo mesto za Google Fonts (Wikipedia).

Font Awesome podpirajo številne čelne knjižnice, kot je Bootstrap, za katere je bil prvotno narejen. Font Awesome naredi integracijo pisav in ikon v spletno stran tako enostavno kot vključitev povezave CDN. Ta enostavna uporaba, skupaj z velikim izborom pisav in ikon, je naredila najbolj priljubljeno rešitev v prostoru.

Google Fonts

Google Fonts je brezplačna odprtokodna spletna storitev, ki jo ponuja Google za vdelavo pisav v spletna mesta. Ponuja brezhibne integracije ter visoko stopnjo prilagodljivosti in prilagoditev.

Namestite svojo ciljno stran

Zdaj, ko ste ustvarili svojo ciljno stran, je čas, da jo delite s celoto! Zadnji korak je uvedba ciljne strani z rešitvijo ponudnika gostovanja. Github Pages in Vercel sta naši najboljši izbiri. So najbolj priljubljeni in najlažji za uporabo. Vercel je orodje, predstavljeno v naši delavnici, vendar Github Pages deluje na podoben način.

Strani Github

Če se trenutno učite kodirati, ste verjetno že slišali za Github. Github je platforma za skupno rabo in gostovanje kode kot del odprtokodne skupnosti. Ponuja funkcijo, imenovano GitHub Pages, ki je storitev gostovanja javnih spletnih strani, ki jo lahko uporabljajo posamezniki in organizacije. Vse strani brezplačno gostujejo na GitHubovi domeni github.io ali na domeni po meri, če jo imate. Strani GitHub so preprost in učinkovit način za brezplačno gostovanje vaših projektov, če že uporabljate Github za nadzor različic.

Vercel

Vercel je alternativa Github Pages, ki ponuja široko paleto funkcij in konfiguracij. Na voljo je z brezplačno različico. Priporočamo Vercel za vsakogar z zapletenim projektom, saj omogoča odlično izkušnjo za razvijalce in ponuja odlično podporo. Code Labs Academy ga uporablja kot del svojega razvojnega procesa.

Zaključek

Ta članek je predstavil uporabna orodja za razvoj ciljne strani. Ponovno! Najboljši način učenja je z delom, zato vas močno spodbujamo, da ta orodja uporabite pri svojem osebnem projektu! Velik del razvijalčevega dela je raziskovanje obstoječih rešitev za težave, s katerimi se srečujejo, in izogibanje ponovnemu odkrivanju kolesa. Odlična stvar programerske skupnosti je njena sodelovalna narava. Spodbujamo vas, da izkoristite delo, ki so ga delili drugi, in prispevate svoje!

In če želite izvedeti več o oblikovanju kul spletnih mest in njihovi izdelavi, si oglejte naš UX/UI Design in Spletni razvoj ) Tabor!