A programozás megismerése során két különálló fázissal találkozhatunk
-
Az alapok elsajátítása: Elkezdi felfedezni egy számítógépes program anatómiáját, megtanulja, hogyan gondolkodjon egyszerű problémákon logikai egységekkel, és kezdje el ezeket az egységeket kódutasításokká formalizálni. Ebben a szakaszban az elvont tárgyakat és az egyszerű gyakorlatokat tanulja meg. Ha jól csinálják és megfelelő mennyiségű időt kapnak, bárki meg tudja érteni és meg tudja írni az egyszerű logikai programokat a választott nyelv használatával.
-
A második szakasz, amelyet a legtöbben kicsit ijesztőbbnek találnak, a fejlesztési ökoszisztéma elsajátításából áll: az egyszerű programozási ismeretek elsajátítása után a következő természetes lépés a programozási aldomain kiválasztása (webfejlesztés, mobilalkalmazás-fejlesztés, beágyazott rendszerek és hasonlók). ), és kezdje el megtanulni, hogyan lehet problémákat megoldani az adott platform használatával. A nehézség itt az, hogy többé nem az alapok egy halmazának lefedése, az egyes fogalmak gyakorlása és ismétlés kérdése. Gyakran lehetetlen minden eszközt, minden technológiát lefedni és minden elvet követni. Ennek megfelelő módja az egészséges mennyiségű kísérletezés és kutatás. Valószínűleg csak néhány készségre lesz szüksége, és számos eszközt kell használnia az egyszerű feladatok elvégzéséhez. Ha már jól érzi magát ezen a szinten, megpróbálhat új eszközkészlettel bővíteni, és folyamatosan fejlődni. Ezt a módszertant követve igyekszünk szilárd alapot építeni a webfejlesztés területén az egyszerű landing oldalak készítéséhez használt technológiák és eszközök feltárásával.
Ebben a blogbejegyzésben röviden áttekintjük a frontend webfejlesztési környezetet, különös tekintettel a céloldal fejlesztésére. Végignézünk egy válogatott erőforrást, amelyekben azt javasoljuk, hogy tekintse meg a fejlesztés különböző részeit, amelyekkel találkozhat. A cikk végére sokkal tisztább képet fog kapni arról, hogyan kell elkészíteni a céloldalt. Tekintse meg ezt a kísérő videót gyakorlati példáért.
Céloldal fejlesztési táj
A céloldal egy olyan kifejezés, amelyet kezdetben a digitális marketing szakértők használtak, és egy önálló weboldalra utalnak, amelyet marketing és reklámkampányok céljára használnak. A koncepció meglehetősen egyszerű: egy cég terméke vagy szolgáltatása iránt érdeklődő látogató rákattint az adott termék linkjére, majd „leszáll” egy weboldalra, amelyen gazdag leírás található a termékről szöveggel, képekkel stb. szolgáltatás. Az oldal tartalmaz egy vásárlás gombot, amelyet „CTA-nak” (Call To Action) hívnak, hogy a látogatót fizető vásárlóvá alakítsa. Ahogy az várható is, a jó felhasználói élmény megteremtése elengedhetetlen a jó konverziós arány eléréséhez.
Ebben a cikkben számos olyan módszert és eszközt fogunk megismerni, amelyek lehetővé teszik számunkra, hogy olyan céloldalakat készítsünk, amelyek betöltik szerepüket. Fontos megemlíteni, hogy a SEO-val (Search Engine Optimization) kapcsolatos landing oldalak készítésénél egyéb szempontok is érvényesülnek. A SEO-val a jövőbeni workshopok foglalkoznak.
Tervezési inspiráció
Akár jártas a nyitóoldalak készítésében, akár csak most kezdi, látni fogja, hogy gyakran nehéz meghatározni, hogy pontosan milyennek szeretnéd kinézni a webhelyedet. Az ügyfelekkel való munka során is gyakran előfordul, hogy nem tudják pontosan, milyen dizájnt szeretnének weboldaluknak. Általában a tervmakettet és a prototípust egy ilyen jellegű munkára szakosodott webdesigner adja át a fejlesztőnek. Hasznos lehet, ha megbízható webtervezési forrásunk van. Az ilyen források lehetővé teszik, hogy naprakészen tartsa a tervezési trendeket, erősítse kreativitását, és… kezdje el. A két legjobb forrás, amellyel tervezési ihletet meríthet következő projektjéhez, a Dribbble és a Behance.
Dribbble
A Dribbble valószínűleg a legnépszerűbb forrás a webdesign terén. Ez egy tervezők közössége, akik megosztják egymással munkájukat, hogy készségeiket fejlesszék, segítsék egymást, és konstruktív visszajelzéseket kapjanak. Dizájnok széles skáláját tartalmazza szinte bármilyen témában vagy területen, amelyeket kreatív emberek készítettek a világ minden tájáról, valamint közösségi visszajelzéseket, így ideális hely az ihletszerzéshez.
Behance
A Behance egy másik népszerű tervezői közösség, amely segíthet ihletet meríteni. Ez a webhely speciális keresési funkciókat kínál, amelyek kulcsszavak, mezők és színpaletta használatával könnyű hozzáférést biztosítanak az Önt érdeklő konkrét munkákhoz. Azt is fontos megjegyezni, hogy a Behance az Adobe része, és szépen integrálódik az Adobe kreatív felhőjével.
A Dribbble és a Behance egyaránt remek platform a webdesign inspirációjához, és egyikkel sem hibázhatsz. Javasoljuk, hogy kezdje el felfedezni a terveket, és készítse el a sajátját!
Tervezési prototípus
Most, hogy ihletet kaptál a tehetséges tervezők munkáiból, itt az ideje, hogy elkezdd készíteni a nyitóoldal tervezését. A prototípuskészítés a nyitóoldal elkészítésének fontos szakasza. Kísérleti folyamatként definiálható, ahol az ötleteket látható struktúrákká valósítja meg, így finomíthatja és érvényesítheti őket csapatával vagy ügyfelével. A prototípus-készítési szakasz végére elkészül egy terv, amely készen áll arra, hogy életre keltsék a nyitóoldalon.
Számos szoftvermegoldás használható épülettervezési prototípusokhoz. Valójában olyan sok van, hogy gyorsan kihívást jelenthet egy eszköz értékelése, összehasonlítása és kiválasztása. A Figmát fogjuk használni, mivel az ux/ui designerek általában használják. Ha szeretnéd megtanulni a Figma használatát prototípuskészítéshez, nézd meg a YouTube-on található gyorstanfolyamunkat itt.
Figma
A Figma egy minden az egyben tervezőeszköz, amely megkönnyíti a felhasználói élmény tervezőinek és fejlesztőinek a tervezési prototípusok létrehozását és együttműködését egy böngészőalapú, felhő által üzemeltetett platformon. . A Figma az egyszerűségre és a könnyű használatra helyezi a hangsúlyt.
A Figma felülete lehetővé teszi elemek létrehozását és stílusát a szöveg, rácsok és egyéb összetevők megjelenésének szabályozásával az oldalon. A kiegészítő beépülő modulok széles skáláját kínálja, mint például az Autoflow a felhasználói folyamatok bemutatásához, a Figmotion az animációkhoz és még sok más.
Ikonok és betűtípusok
A tipográfia és a stílusikonok a legegyszerűbb funkciók közé tartoznak, amelyekkel bármely weboldal megjelenését feldobhatja. A megfelelő betűtípust és ikonokat szeretné használni a céloldalon, hogy megfeleljen a közölni kívánt általános elképzelésnek. Szerencsére a Font Awesome vagy a Google Fonts segítségével könnyű megtalálni és alkalmazni a betűtípusok és ikonok nagy választékát.
Font Awesome
A Font Awesome a CSS és a Less betűtípus- és ikoneszközkészlete. . 2020-tól a Font Awesome-ot a harmadik féltől származó betűtípus-szkripteket használó webhelyek 38%-a használta, ezzel a Google Fonts (Wikipedia) után a második helyre került.
A Font Awesome-ot számos frontend könyvtár támogatja, például a Bootstrap, amelyhez eredetileg készült. A Font Awesome olyan egyszerűvé teszi a betűtípusok és ikonok integrálását egy weboldalon, mint egy CDN-hivatkozást. Ez az egyszerű használat, valamint a betűtípusok és ikonok széles választéka tette a legnépszerűbb megoldássá a térben.
Google Fonts
A Google Fonts egy ingyenes, nyílt forráskódú webszolgáltatás, amelyet a Google kínál a webhelyek betűtípus-beágyazásához. Zökkenőmentes integrációt, valamint nagyfokú rugalmasságot és testreszabást kínál.
Telepítse a céloldalt
Most, hogy elkészítette céloldalát, ideje megosztani az egészvel! Az utolsó lépés a céloldal üzembe helyezése tárhelyszolgáltatói megoldással. A Github Pages és a Vercel a legjobb választásunk. Ezek a legnépszerűbbek és a legkönnyebben használhatók. A Vercel a műhelyünkben bemutatott eszköz, de a Github Pages is hasonló módon működik.
Github oldalak
Ha jelenleg tanulsz kódolni, valószínűleg hallottál már a Githubról. A Github egy platform a kód megosztására és tárolására a nyílt forráskódú közösség részeként. A GitHub Pages nevű funkciót kínálja, amely nyilvános weboldalak tárhelyszolgáltatása, amelyet magánszemélyek és szervezetek használhatnak. Az összes oldalt szabadon tárolják a GitHub github.io domainjén, vagy egyéni domain néven, ha véletlenül van ilyen. A GitHub oldalak egy egyszerű és hatékony módja annak, hogy projektjeit ingyenesen tárolja, ha már Githubot használja a verziókezeléshez.
Vercel
A Vercel a Github Pages alternatívája, amely funkciók és konfigurációk széles skáláját kínálja. Ingyenes verzióval érkezik. Mindenkinek ajánljuk a Vercelt, akinek összetett projektje van, mivel nagyszerű fejlesztői élményt és támogatást nyújt. A Code Labs Academy a fejlesztési folyamat részeként használja.
Következtetés
Ez a cikk hasznos eszközöket mutat be a céloldal létrehozásához. Újra! A tanulás legjobb módja a cselekvés, ezért nyomatékosan javasoljuk, hogy saját személyes projektje során próbálja ki ezeket az eszközöket! A fejlesztők munkájának nagy része az, hogy feltárja a felmerülő problémák meglévő megoldásait, és elkerülje a kerék újrafeltalálását. A programozói közösségben az a nagyszerű, hogy együttműködik. Arra biztatjuk, hogy használja ki a mások által megosztott munkát, és járuljon hozzá a sajátjával!
Ha pedig többet szeretne megtudni a menő webhelyek tervezéséről és készítéséről, akkor nézze meg UX/UI Design és Webfejlesztés oldalainkat. ) Bootcamps!
