Når man lærer om programmering, kan man komme over to forskjellige faser
-
Lære om det grunnleggende: Du begynner å utforske anatomien til et dataprogram, lærer hvordan du tenker på enkle problemer i form av logiske enheter, og begynner å formalisere disse enhetene til kodeinstruksjoner. På dette stadiet lærer du om abstrakte emner og enkel praksis. Hvis det gjøres riktig og gitt riktig mengde tid, vil hvem som helst kunne få et solid grep om å forstå og skrive enkle logiske programmer ved å bruke et valgfritt språk.
-
Den andre fasen, som de fleste synes er litt mer skremmende, består av å lære et utviklingsøkosystem: det naturlige neste trinnet etter å ha tilegnet seg enkel programmeringskunnskap er å velge et programmeringsunderdomene (webutvikling, mobilapplikasjonsutvikling, innebygde systemer og lignende ) og begynne å lære om hvordan du løser problemer ved å bruke den spesifikke plattformen. Vanskeligheten her er at det ikke lenger er et spørsmål om å dekke et sett med grunnleggende, praktisere hvert konsept og gjenta. Det er ofte umulig å dekke hvert verktøy, hver teknologi og følge hvert prinsipp. Den riktige måten å gå frem på er å gjøre en sunn mengde eksperimentering og forskning. Sjansen er stor for at du bare trenger å tilegne deg en håndfull ferdigheter, og bruke en rekke verktøy for å komme i gang med enkle oppgaver. Når du er komfortabel på dette nivået, kan du prøve å utvide til et nytt sett med verktøy og utvikle deg jevnt og trutt. Etter denne metodikken vil vi prøve å bygge et solid fundament innen webutviklingsdomenet gjennom utforskning av teknologiene og verktøyene som brukes til å bygge enkle landingssider.
I dette blogginnlegget vil vi gjøre en kort utforskning av frontend-nettutviklingslandskapet, med fokus på utvikling av landingssider. Vi vil gå gjennom et utvalg ressurser som vi anbefaler deg å sjekke ut for de ulike delene av utviklingen du kan støte på. Mot slutten av denne artikkelen vil du ha et mye klarere bilde av hvordan du bygger en landingsside. Ta en titt på denne følgevideoen for et praktisk eksempel.
Landingssideutviklingslandskap
En landingsside er et begrep som opprinnelig ble brukt av digital markedsføringseksperter for å referere til en frittstående nettside som brukes til markedsførings- og reklamekampanjeformål. Konseptet er ganske enkelt: en besøkende som er interessert i et produkt eller en tjeneste levert av et selskap klikker på en lenke til det nevnte produktet, og "lander" deretter på en nettside som har en rik beskrivelse som kombinerer tekst, bilder osv. av produktet eller service. Siden inneholder en kjøpsknapp, som kalles en "CTA" (Call To Action) for å konvertere den besøkende til en betalende kunde. Som du kanskje forventer, er det avgjørende å skape en god brukeropplevelse for å ha en god konverteringsfrekvens.
Gjennom denne artikkelen vil vi lære om mange måter og verktøy som vil tillate oss å bygge landingssider som oppfyller deres rolle. Det er viktig å nevne at det er andre hensyn når man bygger landingssider relatert til SEO (Search Engine Optimization). SEO vil bli dekket i fremtidige workshops.
Designinspirasjon
Enten du har erfaring med å bygge landingssider eller bare har begynt, vil du oppdage at det ofte er vanskelig å finne nøyaktig hvordan du vil at nettstedet ditt skal se ut. Det er også ofte slik, når man jobber med kunder, at de ikke vet nøyaktig hvilket design de ønsker for nettsiden sin. Vanligvis vil designmodellen og prototypen bli overlevert til utvikleren av en webdesigner som spesialiserer seg på denne typen arbeid. Det kan være nyttig å ha en pålitelig kilde til webdesign. Slike kilder vil tillate deg å holde deg oppdatert med designtrender, presse kreativiteten din og... komme i gang. To av de beste ressursene du kan bruke for å få designinspirasjon til ditt neste prosjekt er Dribbble og Behance.
Drible
Dribbble er sannsynligvis den mest populære ressursen i webdesignområdet. Det er et fellesskap av designere som deler arbeidet sitt for å forbedre ferdighetene sine, hjelpe hverandre og få konstruktive tilbakemeldinger. Den inneholder et bredt spekter av design innen omtrent alle emner eller felt laget av kreative mennesker fra hele verden, sammen med tilbakemeldinger fra samfunnet, noe som gjør det til et ideelt sted å få inspirasjon.
Behance
Behance er et annet populært designfellesskap som kan hjelpe deg med å finne inspirasjon. Denne nettsiden tilbyr avanserte søkefunksjoner som gir deg enkel tilgang til spesifikt arbeid du er interessert i, ved å bruke nøkkelord, felt og fargepalett. Det er også viktig å merke seg at Behance er en del av Adobe, og integreres pent med Adobes kreative sky.
Dribbble og Behance er begge gode plattformer for webdesigninspirasjon, og du kan ikke gå galt med noen av dem. Vi oppfordrer deg til å begynne å utforske design og komme opp med dine egne!
Design Prototyping
Nå som du ble inspirert av arbeidet til talentfulle designere, er det på tide for deg å begynne å lage prototyper for utformingen av landingssiden din. Prototyping er en viktig fase av å bygge en landingsside. Det kan defineres som den eksperimentelle prosessen der du implementerer ideer i synlige strukturer, slik at du kan avgrense og validere dem med teamet eller klienten. Ved slutten av prototypingfasen vil du ha et design som er klart til å bringes til live på landingssiden din.
Det finnes en mengde programvareløsninger som kan brukes til å bygge designprototyper. Faktisk er det så mange at det fort kan bli utfordrende å vurdere, sammenligne og velge ett verktøy. Vi kommer til å bruke Figma, slik det ofte brukes av ux/ui-designere. Hvis du vil lære hvordan du bruker Figma for prototyping, kan du sjekke ut vårt lynkurs på youtube rett her.
Figma
Figma er et alt-i-ett-designverktøy som gjør det enkelt for UX-designere og utviklere å bygge og samarbeide om designprototyper på en nettleserbasert, skybasert plattform . Figma legger vekt på enkelhet og brukervennlighet.
Figmas grensesnitt lar deg lage elementer og style dem ved å kontrollere utseendet til tekst, rutenett og andre komponenter på tvers av siden. Den tilbyr et bredt spekter av komplementære plugins, som Autoflow for å vise brukerflyter, Figmotion for animasjoner og mange flere.
Ikoner og skrifter
Typografi- og stilikoner er noen av de enkleste funksjonene å bruke for å heve utseendet til enhver nettside. Du vil bruke riktig font og ikoner på landingssiden din for å matche den generelle ideen du ønsker å kommunisere. Heldigvis er det enkelt å finne og bruke et stort utvalg av fonter og ikoner ved å bruke Font Awesome eller Google Fonts.
Font Awesome
Font Awesome er et verktøysett for fonter og ikoner basert på CSS og Less . Fra og med 2020 ble Font Awesome brukt av 38 % av nettstedene som bruker tredjeparts fontskript, og plasserte den på andreplass etter Google Fonts (Wikipedia).
Font Awesome støttes av mange frontend-biblioteker som Bootstrap, som den opprinnelig ble laget for. Font Awesome gjør integrasjonen av fonter og ikoner på en nettside like enkelt som å inkludere en CDN-kobling. Denne brukervennligheten, sammen med det store utvalget av fonter og ikoner, gjorde det til den mest populære løsningen i rommet.
Google Fonts
Google Fonts er en gratis, åpen kildekode-netttjeneste som tilbys av Google for skriftinnbygging på nettsteder. Den tilbyr sømløse integrasjoner og et høyt nivå av fleksibilitet og tilpasninger.
Distribuer landingssiden din
Nå som du har bygget landingssiden din, er det på tide å dele den med hele! Det siste trinnet er å distribuere landingssiden din ved å bruke en hostingleverandørløsning. Github Pages og Vercel er våre toppvalg. De er de mest populære og enkleste å bruke. Vercel er verktøyet introdusert i verkstedet, men Github Pages fungerer på samme måte.
Github-sider
Hvis du for øyeblikket lærer å kode, er sjansen stor for at du har hørt om Github. Github er en plattform for deling og hosting av kode som en del av åpen kildekode-fellesskapet. Den tilbyr en funksjon kalt GitHub Pages, som er en vertstjeneste for offentlige nettsider som kan brukes av enkeltpersoner og organisasjoner. Alle sidene ligger fritt på GitHubs github.io-domene, eller på et tilpasset domenenavn hvis du tilfeldigvis eier et. GitHub-sider er en enkel og effektiv måte å være vert for prosjektene dine gratis hvis du allerede bruker Github for versjonskontroll.
Vercel
Vercel er et Github Pages-alternativ som tilbyr et bredt spekter av funksjoner og konfigurasjoner. Den kommer med en gratisversjon. Vi anbefaler Vercel for alle med et komplekst prosjekt, siden det gir en flott utvikleropplevelse og gir god støtte. Code Labs Academy bruker det som en del av utviklingsprosessen.
Konklusjon
Denne artikkelen introduserte nyttige verktøy for å utvikle en landingsside. En gang til! Den beste måten å lære på er å gjøre, så vi oppfordrer deg sterkt til å prøve disse verktøyene på ditt eget personlige prosjekt! En stor del av en utviklers arbeid er å undersøke eksisterende løsninger på problemer de møter, og unngå å finne opp hjulet på nytt. Det flotte med programmeringsfellesskapet er dets samarbeidende natur. Vi oppfordrer deg til å dra nytte av arbeidet som har blitt delt av andre og bidra med ditt eget!
Og hvis du vil lære mer om å designe kule nettsteder og bygge dem, så vil du sjekke ut UX/UI Design og Web Development ) Treningsleir!
