När man lär sig om programmering kan man stöta på två distinkta faser
-
Lär dig om grunderna: Du börjar utforska anatomin i ett datorprogram, lär dig att tänka på enkla problem i termer av logiska enheter och börjar formalisera dessa enheter till kodinstruktioner. I detta skede lär du dig om abstrakta ämnen och enkel övning. Om det görs rätt och får rätt tid, skulle vem som helst kunna få ett bra grepp om att förstå och skriva enkla logiska program med ett valfritt språk.
-
Den andra fasen, som de flesta tycker är lite mer skrämmande, består av att lära sig ett utvecklingsekosystem: det naturliga nästa steget efter att ha förvärvat enkel programmeringskunskap är att välja en programmeringsunderdomän (webbutveckling, mobilapplikationsutveckling, inbyggda system och liknande ) och börja lära dig om hur du löser problem med den specifika plattformen. Svårigheten här är att det inte längre är en fråga om att täcka en uppsättning grunder, öva på varje koncept och upprepa. Det är ofta omöjligt att täcka varje verktyg, varje teknik och följa varje princip. Det rätta sättet att gå tillväga är att göra en hälsosam mängd experiment och forskning. Chansen är stor att du bara behöver skaffa dig en handfull färdigheter och använda ett antal verktyg för att komma igång med enkla uppgifter. När du är bekväm på den här nivån kan du försöka expandera till en ny uppsättning verktyg och utvecklas stadigt. Efter denna metod kommer vi att försöka bygga en solid grund inom området webbutveckling genom att utforska de teknologier och verktyg som används för att bygga enkla målsidor.
I det här blogginlägget kommer vi att göra en kort utforskning av frontend-webbutvecklingslandskapet, med fokus på målsidesutveckling. Vi kommer att gå igenom ett urval av resurser som vi rekommenderar att du kollar in för de olika delarna av utvecklingen du kan stöta på. I slutet av den här artikeln har du en mycket tydligare bild av hur du bygger en målsida. Kolla in den här kompanjonsvideon för ett praktiskt exempel.
Landscape Development Landscape
En målsida är en term som ursprungligen användes av experter på digital marknadsföring för att referera till en fristående webbsida som används för marknadsförings- och reklamkampanjsyften. Konceptet är ganska enkelt: en besökare som är intresserad av en produkt eller tjänst som tillhandahålls av ett företag klickar på en länk till nämnda produkt och "landar" sedan på en webbsida som har en rik beskrivning som kombinerar text, bilder etc. av produkten eller service. Sidan innehåller en köpknapp, som kallas en "CTA" (Call To Action) för att omvandla besökaren till en betalande kund. Som du kanske förväntar dig är det avgörande att skapa en bra användarupplevelse för att ha en bra konverteringsfrekvens.
I den här artikeln kommer vi att lära oss om många sätt och verktyg som gör att vi kan bygga målsidor som fyller sin roll. Det är viktigt att nämna att det finns andra överväganden när man bygger målsidor relaterade till SEO (Search Engine Optimization). SEO kommer att behandlas i framtida workshops.
Designinspiration
Oavsett om du har erfarenhet av att bygga landningssidor eller bara har börjat, kommer du att upptäcka att det ofta är svårt att sätta fingret på exakt hur du vill att din webbplats ska se ut. Det är också ofta så, när man arbetar med kunder, att de inte vet exakt vilken design de vill ha för sin webbsida. Vanligtvis skulle designmockupen och prototypen överlämnas till utvecklaren av en webbdesigner som specialiserat sig på denna typ av arbete. Det kan vara bra att ha en pålitlig källa för webbdesign. Sådana källor gör att du kan hålla dig uppdaterad med designtrender, driva på din kreativitet och... komma igång. Två av de bästa resurserna du kan använda för att få designinspiration för ditt nästa projekt är Dribbble och Behance.
Dribbla
Dribbble är förmodligen den mest populära resursen inom webbdesign. Det är en gemenskap av designers som delar med sig av sitt arbete för att förbättra sina färdigheter, hjälpa varandra och få konstruktiv feedback. Den innehåller ett brett utbud av mönster inom nästan vilket ämne eller område som helst gjorda av kreativa människor från hela världen, tillsammans med feedback från samhället, vilket gör det till en idealisk plats att få inspiration.
Behance
Behance är en annan populär designgemenskap som kan hjälpa dig att hitta inspiration. Den här webbplatsen erbjuder avancerade sökfunktioner som ger dig enkel tillgång till specifikt arbete du är intresserad av, med hjälp av nyckelord, fält och färgpalett. Det är också viktigt att notera att Behance är en del av Adobe och integreras snyggt med Adobes kreativa moln.
Dribbble och Behance är båda fantastiska plattformar för webbdesigninspiration och du kan inte gå fel med någon av dem. Vi uppmuntrar dig att börja utforska design och komma med din egen!
Design Prototyping
Nu när du har blivit inspirerad av talangfulla designers arbete, är det dags för dig att börja skapa prototyper för designen av din målsida. Prototyper är en viktig fas i att bygga en målsida. Det kan definieras som den experimentella processen där du implementerar idéer i synliga strukturer, så att du kan förfina och validera dem med ditt team eller klient. I slutet av prototypfasen kommer du att ha en design som är redo att väckas till liv på din målsida.
Det finns en uppsjö av mjukvarulösningar som kan användas för att bygga designprototyper. Faktum är att det finns så många att det snabbt kan bli utmanande att utvärdera, jämföra och välja ett verktyg. Vi kommer att använda Figma, eftersom det vanligtvis används av ux/ui-designers. Om du vill lära dig hur du använder Figma för prototypframställning kan du kolla in vår snabbkurs på youtube precis här.
Figma
Figma är ett allt-i-ett-designverktyg som gör det enkelt för UX-designers och -utvecklare att bygga och samarbeta om designprototyper på en webbläsarbaserad molnbaserad plattform . Figma lägger tonvikt på enkelhet och användarvänlighet.
Figmas gränssnitt låter dig skapa element och stil dem genom att kontrollera utseendet på text, rutnät och andra komponenter över hela sidan. Det erbjuder ett brett utbud av kompletterande plugins, som Autoflow för att visa upp användarflöden, Figmotion för animationer och många fler.
Ikoner och teckensnitt
Typografi- och stilikoner är några av de enklaste funktionerna att använda för att förhöja utseendet på en webbsida. Du vill använda rätt typsnitt och ikoner på din målsida för att matcha den allmänna idén du vill kommunicera. Lyckligtvis är det lätt att hitta och använda ett stort urval av typsnitt och ikoner med Font Awesome eller Google Fonts.
Font Awesome
Font Awesome är en verktygslåda för teckensnitt och ikoner baserad på CSS och Less . Från och med 2020 användes Font Awesome av 38 % av webbplatserna som använder teckensnittsskript från tredje part, vilket placerade det på andra plats efter Google Fonts (Wikipedia).
Font Awesome stöds av många frontend-bibliotek som Bootstrap, som det ursprungligen gjordes för. Font Awesome gör integrationen av typsnitt och ikoner på en webbsida lika enkel som att inkludera en CDN-länk. Denna enkla användning, tillsammans med dess stora urval av typsnitt och ikoner, gjorde det till den mest populära lösningen i rymden.
Google Fonts
Google Fonts är en gratis webbtjänst med öppen källkod som erbjuds av Google för typsnittsinbäddningar på webbplatser. Det erbjuder sömlösa integrationer och en hög nivå av flexibilitet och anpassningar.
Distribuera din målsida
Nu när du har byggt din målsida är det dags att dela den med hela! Det sista steget är att distribuera din målsida med hjälp av en värdleverantörslösning. Github Pages och Vercel är våra toppval. De är de mest populära och enklaste att använda. Vercel är verktyget som introduceras i vår workshop, men Github Pages fungerar på liknande sätt.
Github-sidor
Om du för närvarande lär dig koda är chansen stor att du har hört talas om Github. Github är en plattform för att dela och hosta kod som en del av öppen källkodsgemenskap. Den erbjuder en funktion som heter GitHub Pages, som är en värdtjänst för offentliga webbsidor som kan användas av individer och organisationer. Alla sidor finns fritt på GitHubs github.io-domän, eller på ett anpassat domännamn om du råkar äga ett. GitHub-sidor är ett enkelt och effektivt sätt att vara värd för dina projekt gratis om du redan använder Github för versionskontroll.
Vercel
Vercel är ett Github Pages-alternativ som erbjuder ett brett utbud av funktioner och konfigurationer. Den kommer med en gratisversion. Vi rekommenderar Vercel för alla med ett komplext projekt, eftersom det ger en fantastisk utvecklarupplevelse och erbjuder bra stöd. Code Labs Academy använder det som en del av sin utvecklingsprocess.
Slutsats
Den här artikeln introducerade användbara verktyg för att utveckla en målsida. Igen! Det bästa sättet att lära sig är genom att göra, så vi uppmuntrar dig starkt att prova dessa verktyg i ditt eget personliga projekt! En stor del av en utvecklares arbete är att undersöka befintliga lösningar på problem de stöter på och undvika att uppfinna hjulet på nytt. Det fina med programmeringsgemenskapen är dess samarbetsskapande karaktär. Vi uppmuntrar dig att ta vara på det arbete som har delats av andra och att bidra med ditt eget!
Och om du vill lära dig mer om att designa coola webbplatser och bygga dem, då vill du kolla in våra UX/UI Design och Webbutveckling ) Bootcamps!
