Când învățați despre programare, puteți întâlni două faze distincte
-
Învățați despre elementele fundamentale: Începeți să explorați anatomia unui program de calculator, învățați cum să vă gândiți la probleme simple în termeni de unități logice și începeți să formalizați aceste unități în instrucțiuni de cod. În această etapă, înveți despre subiecte abstracte și practică simplă. Dacă se face corect și se acordă timpul adecvat, oricine ar putea înțelege și scrie programe logice simple folosind limbajul ales.
-
A doua fază, pe care majoritatea oamenilor o consideră ceva mai descurajantă, constă în învățarea unui ecosistem de dezvoltare: următorul pas natural după dobândirea de cunoștințe simple de programare este alegerea unui subdomeniu de programare (dezvoltare web, dezvoltare de aplicații mobile, sisteme încorporate și similare). ) și începeți să învățați cum să rezolvați problemele utilizând acea platformă specifică. Dificultatea aici este că nu mai este vorba de a acoperi un set de elemente fundamentale, de a practica fiecare concept și de a repeta. Este adesea imposibil să acoperiți fiecare instrument, fiecare tehnologie și să urmați fiecare principiu. Modul corect de a face acest lucru este să faci o cantitate sănătoasă de experimentare și cercetare. Sunt șanse să aveți nevoie doar să dobândiți o mână de abilități și să utilizați o serie de instrumente pentru a începe cu sarcini simple. Odată ce vă simțiți confortabil la acest nivel, puteți încerca să vă extindeți într-un nou set de instrumente și să evoluați în mod constant. Urmând această metodologie, vom încerca să construim o bază solidă în domeniul dezvoltării web prin explorarea tehnologiilor și instrumentelor folosite pentru construirea paginilor de destinație simple.
În această postare pe blog, vom face o scurtă explorare a peisajului dezvoltării web frontend, cu accent pe dezvoltarea paginii de destinație. Vom parcurge o selecție de resurse pe care vă recomandăm să le consultați pentru diferitele părți ale dezvoltării pe care le puteți întâlni. Până la sfârșitul acestui articol, veți avea o imagine mult mai clară despre cum să construiți o pagină de destinație. Consultați acest videoclip însoțitor pentru un exemplu practic.
Landing Page Development Landscape
O pagină de destinație este un termen folosit inițial de experții în marketing digital pentru a se referi la o pagină web independentă utilizată în scopuri de marketing și campanii de publicitate. Conceptul este destul de simplu: un vizitator interesat de un produs sau serviciu furnizat de o companie face clic pe un link al produsului respectiv, apoi „aterizează” pe o pagină web care are o descriere bogată care combină text, imagini etc. ale produsului sau serviciu. Pagina conține un buton de cumpărare, care se numește „CTA” (Call To Action) pentru a transforma vizitatorul într-un client plătitor. După cum vă puteți aștepta, crearea unei experiențe bune de utilizator este esențială pentru a avea o rată de conversie bună.
Pe parcursul acestui articol, vom afla mai multe modalități și instrumente care ne vor permite să construim pagini de destinație care să-și îndeplinească rolul. Este important de menționat că există și alte considerații la construirea paginilor de destinație legate de SEO (Search Engine Optimization). SEO va fi acoperit în viitoare workshop-uri.
Inspirație pentru design
Indiferent dacă aveți experiență în construirea paginilor de destinație sau abia la început, veți descoperi că de multe ori este greu să identificați exact cum doriți să arate site-ul dvs. De asemenea, de multe ori, atunci când lucrează cu clienții, aceștia nu știu exact ce design își doresc pentru pagina lor web. De obicei, macheta de design și prototipul ar fi predate dezvoltatorului de către un web designer specializat în acest tip de muncă. Poate fi util să aveți o sursă de încredere de design web. Astfel de surse vă vor permite să fiți la curent cu tendințele de design, să vă impulsionați creativitatea și... să începeți. Două dintre cele mai bune resurse pe care le puteți folosi pentru a obține inspirație de design pentru următorul dvs. proiect sunt Dribbble și Behance.
Dribling
Dribbble este probabil cea mai populară resursă din spațiul de web design. Este o comunitate de designeri care își împărtășesc munca pentru a-și îmbunătăți abilitățile, a se ajuta reciproc și a obține feedback constructiv. Conține o gamă largă de modele în aproape orice subiect sau domeniu, realizate de oameni creativi din întreaga lume, împreună cu feedbackul comunității, făcându-l un loc ideal pentru a obține inspirație.
Behance
Behance este o altă comunitate populară de design care vă poate ajuta să găsiți inspirație. Acest site web oferă funcții de căutare avansate care vă oferă acces ușor la anumite lucrări care vă interesează, folosind cuvinte cheie, câmpuri și paleta de culori. De asemenea, este important să rețineți că Behance face parte din Adobe și se integrează perfect cu Adobe Creative Cloud.
Dribbble și Behance sunt ambele platforme grozave de inspirație pentru design web și nu poți da greș cu nici una. Vă încurajăm să începeți să explorați modele și să vii cu propriile tale!
Design Prototyping
Acum că v-ați inspirat din munca designerilor talentați, este timpul să începeți să prototipați designul paginii dvs. de destinație. Prototiparea este o etapă importantă a construirii unei pagini de destinație. Poate fi definit ca procesul experimental în care implementați ideile în structuri vizibile, astfel încât să le puteți rafina și valida cu echipa sau clientul dvs. Până la sfârșitul fazei de prototipare, veți avea un design care este gata să fie adus la viață pe pagina dvs. de destinație.
Există o multitudine de soluții software care pot fi utilizate pentru construirea de prototipuri de proiectare. De fapt, sunt atât de multe încât poate deveni rapid dificil să evaluezi, să compari și să alegi un singur instrument. Vom folosi Figma, deoarece este folosit în mod obișnuit de către ux/ui designers. Dacă doriți să învățați cum să utilizați Figma pentru prototipuri, puteți consulta cursul nostru rapid pe youtube chiar aici.
Figma
Figma este un instrument de proiectare all-in-one care facilitează proiectanților și dezvoltatorilor UX să construiască și să colaboreze la prototipuri de design pe o platformă bazată pe browser, găzduită în cloud . Figma pune accent pe simplitate și ușurință în utilizare.
Interfața Figma vă permite să creați elemente și să le stilați controlând aspectul textului, grilelor și a altor componente de-a lungul paginii. Oferă o gamă largă de pluginuri complementare, cum ar fi Autoflow pentru prezentarea fluxurilor de utilizatori, Figmotion pentru animații și multe altele.
Pictograme și fonturi
Pictogramele de tipografie și stil sunt unele dintre cele mai simple caracteristici de utilizat pentru a îmbunătăți aspectul oricărei pagini web. Doriți să utilizați fontul și pictogramele potrivite pe pagina de destinație pentru a se potrivi cu ideea generală pe care doriți să o comunicați. Din fericire, este ușor să găsiți și să aplicați o selecție mare de fonturi și pictograme folosind Font Awesome sau Google Fonts.
Font Minunat
Font Awesome este un set de instrumente pentru fonturi și pictograme bazat pe CSS și Less . Începând cu 2020, Font Awesome a fost folosit de 38% dintre site-urile care folosesc scripturi de fonturi terțe, plasându-l pe locul doi după Google Fonts (Wikipedia).
Font Awesome este acceptat de multe biblioteci frontend, cum ar fi Bootstrap, pentru care a fost creat inițial. Font Awesome face integrarea fonturilor și pictogramelor într-o pagină web la fel de ușoară precum includerea unui link CDN. Această ușurință de utilizare, împreună cu selecția sa mare de fonturi și pictograme, au făcut-o cea mai populară soluție din spațiu.
Fonturi Google
Google Fonts este un serviciu web gratuit, cu sursă deschisă, oferit de Google pentru încorporarea fonturilor în site-uri web. Oferă integrări perfecte și un nivel ridicat de flexibilitate și personalizări.
Implementează-ți pagina de destinație
Acum că ți-ai construit pagina de destinație, este timpul să o distribui întregului! Pasul final este să vă implementați pagina de destinație folosind o soluție de furnizor de găzduire. Github Pages și Vercel sunt alegerile noastre de top. Sunt cele mai populare și mai ușor de utilizat. Vercel este instrumentul introdus în [atelierul] nostru (https://youtu.be/mTfbzZDSv2I), dar Github Pages funcționează într-un mod similar.
Pagini Github
Dacă în prezent înveți să codificați, sunt șanse să fi auzit de Github. Github este o platformă pentru partajarea și găzduirea codului ca parte a comunității open-source. Oferă o caracteristică numită GitHub Pages, care este un serviciu de găzduire pentru pagini web publice care poate fi folosit de persoane și organizații. Toate paginile sunt găzduite gratuit pe domeniul github.io al GitHub sau pe un nume de domeniu personalizat dacă se întâmplă să dețineți unul. Paginile GitHub sunt o modalitate simplă și eficientă de a vă găzdui proiectele gratuit dacă utilizați deja Github pentru controlul versiunilor.
Vercel
Vercel este o alternativă Github Pages care oferă o gamă largă de funcții și configurații. Vine cu o versiune gratuită. Recomandăm Vercel pentru oricine are un proiect complex, deoarece oferă o experiență excelentă pentru dezvoltatori și oferă un suport excelent. Code Labs Academy îl folosește ca parte a procesului său de dezvoltare.
Concluzie
Acest articol a introdus instrumente utile pentru a dezvolta o pagină de destinație. Din nou! Cel mai bun mod de a învăța este prin practică, așa că vă încurajăm cu tărie să încercați aceste instrumente în propriul proiect personal! O mare parte a muncii unui dezvoltator este să cerceteze soluțiile existente la problemele pe care le întâmpină și să evite reinventarea roții. Lucrul grozav al comunității de programare este natura sa colaborativă. Vă încurajăm să profitați de munca care a fost împărtășită de alții și să contribui cu a ta!
Și dacă doriți să aflați mai multe despre proiectarea site-urilor web interesante și construirea lor, atunci doriți să consultați UX/UI Design și Web Development ) Bootcamps!
