Når man lærer om programmering, kan man støde på to adskilte faser
-
At lære om det grundlæggende: Du begynder at udforske anatomien i et computerprogram, lærer at tænke på simple problemer i form af logiske enheder og begynder at formalisere disse enheder til kodeinstruktioner. På dette trin lærer du om abstrakte emner og enkel praksis. Hvis det gøres rigtigt og får den passende mængde tid, ville enhver være i stand til at få et solidt greb om at forstå og skrive enkle logiske programmer ved hjælp af et valgfrit sprog.
-
Den anden fase, som de fleste finder en smule mere skræmmende, består i at lære et udviklingsøkosystem: det naturlige næste skridt efter at have erhvervet simpel programmeringsviden er at vælge et programmeringsunderdomæne (webudvikling, mobilapplikationsudvikling, indlejrede systemer og lignende) ) og begynd at lære om, hvordan du løser problemer ved hjælp af den specifikke platform. Vanskeligheden her er, at det ikke længere er et spørgsmål om at dække et sæt grundlæggende elementer, øve hvert koncept og gentage. Det er ofte umuligt at dække hvert værktøj, enhver teknologi og følge ethvert princip. Den rigtige måde at gøre dette på er at lave en sund mængde eksperimenter og forskning. Chancerne er store, at du kun behøver at tilegne dig en håndfuld færdigheder og bruge en række værktøjer til at komme i gang med simple opgaver. Når du er komfortabel på dette niveau, kan du prøve at udvide til et nyt sæt værktøjer og udvikle dig støt. Efter denne metode vil vi forsøge at bygge et solidt fundament inden for webudviklingsdomænet gennem udforskning af de teknologier og værktøjer, der bruges til at bygge simple landingssider.
I dette blogindlæg vil vi lave en kort udforskning af frontend-webudviklingslandskabet med fokus på udvikling af landingsside. Vi vil gennemgå et udvalg af ressourcer, som vi anbefaler dig at tjekke ud for de forskellige dele af udviklingen, du kan støde på. I slutningen af denne artikel vil du have et meget klarere billede af, hvordan du opbygger en landingsside. Tjek denne ledsagende video for et praktisk eksempel.
Landing Page Development Landscape
En landingsside er et udtryk, der oprindeligt blev brugt af eksperter i digital marketing til at henvise til en selvstændig webside, der bruges til marketing- og reklamekampagneformål. Konceptet er ret simpelt: En besøgende, der er interesseret i et produkt eller en service leveret af en virksomhed, klikker på et link til det nævnte produkt, og "lander" derefter på en webside, som har en rig beskrivelse, der kombinerer tekst, billeder osv. af produktet eller service. Siden indeholder en købsknap, som kaldes en "CTA" (Call To Action) for at konvertere den besøgende til en betalende kunde. Som du måske forventer, er det altafgørende at skabe en god brugeroplevelse for at have en god konverteringsrate.
Igennem denne artikel vil vi lære om mange måder og værktøjer, der gør det muligt for os at bygge landingssider, der opfylder deres rolle. Det er vigtigt at nævne, at der er andre overvejelser, når man bygger landingssider relateret til SEO (Search Engine Optimization). SEO vil blive dækket i fremtidige workshops.
Design inspiration
Uanset om du er erfaren med at bygge landingssider eller lige er gået i gang, vil du opleve, at det ofte er svært at udpege præcis, hvordan du ønsker, at din hjemmeside skal se ud. Det er også ofte, når man arbejder med kunder, at de ikke ved præcist, hvilket design de ønsker til deres webside. Normalt vil designmodellen og prototypen blive overdraget til udvikleren af en webdesigner, der er specialiseret i denne form for arbejde. Det kan være nyttigt at have en pålidelig kilde til webdesign. Sådanne kilder vil give dig mulighed for at holde dig ajour med designtrends, skubbe til din kreativitet og ... komme i gang. To af de bedste ressourcer, du kan bruge til at få designinspiration til dit næste projekt, er Dribbble og Behance.
Drible
Dribbble er sandsynligvis den mest populære ressource i webdesignområdet. Det er et fællesskab af designere, der deler deres arbejde for at forbedre deres færdigheder, hjælpe hinanden og få konstruktiv feedback. Den indeholder en bred vifte af designs inden for stort set ethvert emne eller område lavet af kreative mennesker fra hele verden, sammen med community-feedback, hvilket gør det til et ideelt sted at få inspiration.
Behance
Behance er et andet populært designfællesskab, der kan hjælpe dig med at finde inspiration. Denne hjemmeside tilbyder avancerede søgefunktioner, der giver dig nem adgang til specifikt arbejde, du er interesseret i, ved hjælp af nøgleord, felter og farvepalet. Det er også vigtigt at bemærke, at Behance er en del af Adobe og integreres pænt med Adobes kreative sky.
Dribbble og Behance er begge gode platforme til inspiration til webdesign, og du kan heller ikke gå galt. Vi opfordrer dig til at begynde at udforske designs og komme med dit eget!
Design Prototyping
Nu hvor du er blevet inspireret af dygtige designeres arbejde, er det tid til, at du begynder at lave prototyper til designet af din landingsside. Prototyping er en vigtig fase i opbygningen af en landingsside. Det kan defineres som den eksperimentelle proces, hvor du implementerer ideer i synlige strukturer, så du kan forfine og validere dem med dit team eller klient. Ved slutningen af prototypefasen vil du have et design, der er klar til at blive bragt til live på din landingsside.
Der er et væld af softwareløsninger, der kan bruges til at bygge designprototyper. Faktisk er der så mange, at det hurtigt kan blive udfordrende at vurdere, sammenligne og vælge ét værktøj. Vi kommer til at bruge Figma, som det er almindeligt brugt af ux/ui-designere. Hvis du gerne vil lære at bruge Figma til prototyping, kan du tjekke vores lynkursus på youtube lige her.
Figma
Figma er et alt-i-et designværktøj, der gør det nemt for UX-designere og -udviklere at bygge og samarbejde om designprototyper på en browserbaseret, cloud-hostet platform . Figma lægger vægt på enkelhed og brugervenlighed.
Figmas grænseflade giver dig mulighed for at oprette elementer og style dem ved at kontrollere udseendet af tekst, gitter og andre komponenter på tværs af siden. Det tilbyder en bred vifte af komplementære plugins, såsom Autoflow til at vise brugerflows, Figmotion til animationer og mange flere.
Ikoner og skrifttyper
Typografi- og stylingikoner er nogle af de enkleste funktioner at bruge til at hæve udseendet af enhver webside. Du vil bruge den rigtige skrifttype og ikoner på din landingsside for at matche den generelle idé, du ønsker at kommunikere. Heldigvis er det nemt at finde og anvende et stort udvalg af skrifttyper og ikoner ved hjælp af Font Awesome eller Google Fonts.
Font Awesome
Font Awesome er et font- og ikonværktøj baseret på CSS og Less . Fra 2020 blev Font Awesome brugt af 38 % af websteder, der bruger tredjeparts skrifttypescripts, og placerede det på andenpladsen efter Google Fonts (Wikipedia).
Font Awesome understøttes af mange frontend-biblioteker såsom Bootstrap, som det oprindeligt blev lavet til. Font Awesome gør integrationen af skrifttyper og ikoner på en webside lige så let som at inkludere et CDN-link. Denne brugervenlighed sammen med dets store udvalg af skrifttyper og ikoner gjorde det til den mest populære løsning i rummet.
Google Fonts
Google Fonts er en gratis, open source-webtjeneste, der tilbydes af Google til indlejring af skrifttyper på websteder. Det tilbyder sømløse integrationer og et højt niveau af fleksibilitet og tilpasninger.
Implementer din destinationsside
Nu hvor du har bygget din landingsside, er det tid til at dele den med hele! Det sidste trin er at implementere din destinationsside ved hjælp af en hostingudbyderløsning. Github Pages og Vercel er vores topvalg. De er de mest populære og nemmeste at bruge. Vercel er værktøjet introduceret i vores workshop, men Github Pages fungerer på lignende måde.
Github-sider
Hvis du i øjeblikket lærer at kode, er chancerne for, at du har hørt om Github. Github er en platform til deling og hosting af kode som en del af open source-fællesskabet. Den tilbyder en funktion kaldet GitHub Pages, som er en hostingtjeneste for offentlige websider, der kan bruges af enkeltpersoner og organisationer. Alle sider hostes frit på GitHubs github.io domæne, eller på et brugerdefineret domænenavn, hvis du tilfældigvis ejer et. GitHub-sider er en enkel og effektiv måde at hoste dine projekter gratis på, hvis du allerede bruger Github til versionskontrol.
Vercel
Vercel er et Github Pages-alternativ, der tilbyder en bred vifte af funktioner og konfigurationer. Den kommer med en gratis version. Vi anbefaler Vercel til alle med et komplekst projekt, da det giver en fantastisk udvikleroplevelse og tilbyder fantastisk support. Code Labs Academy bruger det som en del af sin udviklingsproces.
Konklusion
Denne artikel introducerede nyttige værktøjer til at udvikle en landingsside. En gang til! Den bedste måde at lære på er ved at gøre, så vi opfordrer dig kraftigt til at prøve disse værktøjer på dit eget personlige projekt! En stor del af en udviklers arbejde er at undersøge eksisterende løsninger på problemer, de støder på, og undgå at genopfinde hjulet. Det fantastiske ved programmeringsfællesskabet er dets kollaborative karakter. Vi opfordrer dig til at drage fordel af det arbejde, der er blevet delt af andre, og til at bidrage med dit eget!
Og hvis du vil lære mere om at designe fede hjemmesider og bygge dem, så vil du se vores UX/UI Design og Webudvikling ) Bootcamps!
