Ucząc się programowania, można natknąć się na dwie odrębne fazy
-
Poznanie podstaw: Zaczynasz zgłębiać anatomię programu komputerowego, uczysz się myśleć o prostych problemach w kategoriach jednostek logicznych i zaczynasz formalizować te jednostki w instrukcje kodu. Na tym etapie poznajesz tematy abstrakcyjne i prostą praktykę. Jeśli zrobi się to dobrze i poświęci mu odpowiednią ilość czasu, każdy będzie w stanie solidnie opanować rozumienie i pisanie prostych programów logicznych przy użyciu wybranego języka.
-
Druga faza, którą większość ludzi uważa za nieco bardziej zniechęcającą, polega na nauce ekosystemu programistycznego: naturalnym następnym krokiem po zdobyciu prostej wiedzy programistycznej jest wybranie subdomeny programistycznej (tworzenie stron internetowych, tworzenie aplikacji mobilnych, systemy wbudowane i podobne ) i zacznij uczyć się, jak rozwiązywać problemy przy użyciu tej konkretnej platformy. Trudność polega na tym, że nie jest to już kwestia omówienia zestawu podstaw, ćwiczenia każdej koncepcji i powtarzania. Często nie jest możliwe omówienie każdego narzędzia, każdej technologii i przestrzeganie wszystkich zasad. Właściwym sposobem na osiągnięcie tego jest przeprowadzenie odpowiedniej ilości eksperymentów i badań. Prawdopodobnie będziesz musiał zdobyć tylko kilka umiejętności i skorzystać z szeregu narzędzi, aby rozpocząć proste zadania. Kiedy już poczujesz się komfortowo na tym poziomie, możesz spróbować rozszerzyć się o nowy zestaw narzędzi i stale się rozwijać. Kierując się tą metodologią, postaramy się zbudować solidne podstawy w dziedzinie tworzenia stron internetowych poprzez eksplorację technologii i narzędzi używanych do budowy prostych stron docelowych.
W tym poście na blogu dokonamy krótkiej eksploracji krajobrazu tworzenia stron internetowych typu frontend, ze szczególnym naciskiem na rozwój stron docelowych. Przejrzymy wybrane zasoby, które zalecamy sprawdzić pod kątem różnych części rozwoju, które możesz napotkać. Pod koniec tego artykułu będziesz miał znacznie jaśniejszy obraz tego, jak zabrać się za tworzenie strony docelowej. Obejrzyj ten film towarzyszący, aby zapoznać się z praktycznym przykładem.
Krajobraz rozwoju strony docelowej
Strona docelowa to termin początkowo używany przez ekspertów ds. marketingu cyfrowego w odniesieniu do samodzielnej strony internetowej wykorzystywanej do celów kampanii marketingowych i reklamowych. Koncepcja jest dość prosta: odwiedzający zainteresowany produktem lub usługą firmy klika w link tego produktu, następnie „ląduje” na stronie internetowej, na której znajduje się bogaty opis zawierający tekst, zdjęcia itp. produktu lub praca. Na stronie znajduje się przycisk zakupu, zwany „CTA” (Call To Action), którego zadaniem jest przekształcenie odwiedzającego w płacącego klienta. Jak można się spodziewać, zapewnienie dobrego doświadczenia użytkownika ma kluczowe znaczenie dla uzyskania dobrego współczynnika konwersji.
W tym artykule poznamy wiele sposobów i narzędzi, które pozwolą nam zbudować strony docelowe spełniające swoją rolę. Należy wspomnieć, że podczas tworzenia stron docelowych związanych z SEO (optymalizacja pod kątem wyszukiwarek) należy wziąć pod uwagę inne kwestie. SEO zostanie omówione w przyszłych warsztatach.
Inspiracje projektowe
Niezależnie od tego, czy masz doświadczenie w tworzeniu stron docelowych, czy dopiero zaczynasz, przekonasz się, że często trudno jest dokładnie określić, jak ma wyglądać Twoja witryna. Często zdarza się również, że pracując z klientami, nie wiedzą oni dokładnie, jakiego projektu chcą dla swojej strony internetowej. Zazwyczaj makieta i prototyp projektu są przekazywane programiście przez projektanta stron internetowych specjalizującego się w tego typu pracach. Pomocne może być posiadanie wiarygodnego źródła projektów stron internetowych. Dzięki takim źródłom będziesz na bieżąco z trendami w projektowaniu, pobudzisz swoją kreatywność i… zaczniesz działać. Dwa najlepsze zasoby, z których możesz skorzystać, aby uzyskać inspirację do swojego kolejnego projektu, to Dribbble i Behance.
Drybling
Dribbble to prawdopodobnie najpopularniejszy zasób w przestrzeni projektowania stron internetowych. To społeczność projektantów, którzy dzielą się swoją pracą, aby doskonalić swoje umiejętności, pomagać sobie nawzajem i zdobywać konstruktywny feedback. Zawiera szeroką gamę projektów z niemal dowolnej tematyki i dziedziny, stworzonych przez kreatywnych ludzi z całego świata, wraz z opiniami społeczności, co czyni go idealnym miejscem do czerpania inspiracji.
Zachowanie
Behance to kolejna popularna społeczność projektantów, która pomoże Ci znaleźć inspirację. Ta strona internetowa oferuje zaawansowane funkcje wyszukiwania, które umożliwiają łatwy dostęp do konkretnych prac, którymi jesteś zainteresowany, za pomocą słów kluczowych, pól i palety kolorów. Należy również zauważyć, że Behance jest częścią Adobe i doskonale integruje się z chmurą kreatywną Adobe.
Zarówno Dribbble, jak i Behance to świetne platformy inspiracji do projektowania stron internetowych i nie można się pomylić z żadną z nich. Zachęcamy do zapoznania się z projektami i wymyślenia własnych!
Prototypowanie projektu
Teraz, gdy zainspirowała Cię praca utalentowanych projektantów, czas zacząć prototypować projekt swojego landing page’a. Prototypowanie to ważny etap tworzenia strony docelowej. Można go zdefiniować jako proces eksperymentalny, podczas którego wdrażasz pomysły w widoczne struktury, abyś mógł je udoskonalić i zweryfikować ze swoim zespołem lub klientem. Pod koniec fazy prototypowania będziesz mieć projekt gotowy do wprowadzenia w życie na Twojej stronie docelowej.
Istnieje mnóstwo rozwiązań programowych, które można wykorzystać do budowy prototypów projektów. W rzeczywistości jest ich tak wiele, że ocena, porównanie i wybranie jednego narzędzia może szybko stać się wyzwaniem. Będziemy używać Figmy, ponieważ jest ona powszechnie używana przez projektantów ux/ui. Jeśli chcesz dowiedzieć się, jak używać Figmy do prototypowania, możesz zapoznać się z naszym przyspieszonym kursem na YouTube tutaj.
Figma
Figma to wszechstronne narzędzie do projektowania, które ułatwia projektantom i programistom UX tworzenie prototypów projektów i współpracę nad nimi na platformie opartej na przeglądarce i hostowanej w chmurze . Figma kładzie nacisk na prostotę i łatwość obsługi.
Interfejs Figmy umożliwia tworzenie elementów i stylizowanie ich poprzez kontrolowanie wyglądu tekstu, siatek i innych komponentów na stronie. Oferuje szeroką gamę uzupełniających wtyczek, takich jak Autoflow do prezentowania przepływów użytkowników, Figmotion do animacji i wiele innych.
Ikony i czcionki
Ikony typografii i stylizacji to jedne z najprostszych funkcji, które można wykorzystać do poprawienia wyglądu dowolnej strony internetowej. Chcesz użyć odpowiedniej czcionki i ikon na swojej stronie docelowej, aby pasowały do ogólnej idei, którą chcesz przekazać. Na szczęście za pomocą Font Awesome lub Google Fonts można łatwo znaleźć i zastosować duży wybór czcionek i ikon.
Czcionka świetna
Font Awesome to zestaw narzędzi do obsługi czcionek i ikon oparty na CSS i Less . Od 2020 r. Font Awesome było używane w 38% witryn korzystających ze skryptów czcionek innych firm, co plasuje ją na drugim miejscu po czcionkach Google (Wikipedia).
Font Awesome jest obsługiwany przez wiele bibliotek frontendowych, takich jak Bootstrap, dla którego został pierwotnie stworzony. Font Awesome sprawia, że integracja czcionek i ikon na stronie internetowej jest tak prosta, jak dodanie łącza CDN. Ta łatwość obsługi w połączeniu z dużym wyborem czcionek i ikon sprawiła, że jest to najpopularniejsze rozwiązanie w kosmosie.
Czcionki Google
Czcionki Google to bezpłatna usługa internetowa o otwartym kodzie źródłowym oferowana przez firmę Google i służąca do osadzania czcionek w witrynach internetowych. Oferuje bezproblemową integrację oraz wysoki poziom elastyczności i dostosowywania.
Wdróż swoją stronę docelową
Skoro już zbudowałeś swój Landing Page, czas podzielić się nim z całością! Ostatnim krokiem jest wdrożenie strony docelowej za pomocą rozwiązania dostawcy hostingu. Github Pages i Vercel to nasze najlepsze typy. Są najpopularniejsze i najłatwiejsze w użyciu. Vercel to narzędzie wprowadzone w naszym warsztacie, ale Github Pages działa w podobny sposób.
Strony Githuba
Jeśli obecnie uczysz się kodować, prawdopodobnie słyszałeś o Githubie. Github to platforma do udostępniania i hostowania kodu w ramach społeczności open source. Oferuje funkcję o nazwie GitHub Pages, która jest usługą hostingową dla publicznych stron internetowych, z której mogą korzystać osoby prywatne i organizacje. Wszystkie strony są swobodnie hostowane w domenie github.io GitHuba lub pod niestandardową nazwą domeny, jeśli ją posiadasz. Strony GitHub to prosty i skuteczny sposób na bezpłatne hostowanie projektów, jeśli używasz już Githuba do kontroli wersji.
Vercel
Vercel to alternatywa dla Github Pages, która oferuje szeroki zakres funkcji i konfiguracji. Pochodzi z bezpłatną wersją. Polecamy Vercel każdemu, kto ma złożony projekt, ponieważ zapewnia doskonałe doświadczenie programistyczne i oferuje doskonałe wsparcie. Akademia Code Labs używa go w procesie programowania.
Wniosek
W tym artykule przedstawiono przydatne narzędzia do tworzenia strony docelowej. Ponownie! Najlepszym sposobem na naukę jest praktyka, dlatego gorąco zachęcamy Cię do wypróbowania tych narzędzi w swoim własnym projekcie! Duża część pracy programisty polega na badaniu istniejących rozwiązań napotykanych problemów i unikaniu wymyślania koła na nowo. Wspaniałą cechą społeczności programistów jest jej charakter oparty na współpracy. Zachęcamy do korzystania z prac udostępnionych przez innych i dodawania własnych!
A jeśli chcesz dowiedzieć się więcej o projektowaniu fajnych stron internetowych i ich budowaniu, zapoznaj się z naszymi Projektowaniem UX/UI i Tworzeniem stron internetowych Bootcampy!
