I_P_W12_M04 Etapy projektowania strony internetowej
Publikowanie stron online staje się bezproblemowe, jeśli skorzystasz z odpowiednich narzędzi i platform.
Oto kilka kroków, które mogą Ci pomóc w tym procesie:
Wybór platformy hostingowejhostingowej:
WordPress - popularna platforma do tworzenia stron internetowych, oferująca zarówno darmowe, jak i płatne plany.
Wix - intuicyjny kreator stron z funkcją „przeciągnij i upuść”.
Squarespace - platforma znana z eleganckich szablonów i łatwości użycia.
GitHub Pages - idealne dla programistów, umożliwia hostowanie statycznych stron internetowych bezpłatnie.
Wybór domenydomeny:
Wybierz unikalną nazwę domeny, która będzie łatwa do zapamiętania i związana z treścią twojej strony.
Możesz zarejestrować domenę za pośrednictwem usług takich jak CBA, Bluehost, Hostinger czy home.pl.
Tworzenie treści:
Zdecyduj, jakie treści chcesz publikować na swojej stronie (np. blog, portfolio, sklep internetowy).
Upewnij się, że treści są dobrze napisane, atrakcyjne wizualnie i zoptymalizowane pod kątem SEOSEO.
Projektowanie strony:
Skorzystaj z gotowych szablonów lub stwórz własny projekt.
Upewnij się, że strona jest responsywna, czyli dobrze wygląda na różnych urządzeniach (komputery, tablety, smartfony).
Optymalizacja SEOSEO:
Używaj odpowiednich słów kluczowych w treściach, tytułach i meta opisach.
Zadbaj o szybkie ładowanie strony i optymalizację obrazów.
Dodaj mapę strony (sitemap) i zgłoś ją do Google Search Console.
Publikacja i promocja:
Po zakończeniu tworzenia strony, opublikuj ją na wybranej platformie hostingowej.
Promuj swoją stronę w mediach społecznościowych, na forach i za pomocą kampanii e‑mailowych.
Hostowanie strony w serwisie GitHub
GitHub jest firmą, która na określonych zasadach przechowuje i udostępnia kody projektu. Umożliwia również opublikowanie przygotowanej stronystrony online. Będzie ona widoczna pod adresem: twojanazwauzytkownika.github.io.
Aby opublikować stronę, wymagana jest rejestracja w serwisie GitHub. Stworzenie konta jest proste i nie powinno sprawiać problemów.
Tworzenie i publikowanie projektu
Po wybraniu opcji New project ustawiamy nazwę repozytorium (opcja Repository name). Ważne, aby była ona zgodna z formatem: twojanazwauzytkownika.github.io.
Ustawiamy projekt jako publiczny. Dodajemy do niego również plik Readme. Zmieńmy jego nazwę na index.html.
Wszystkie zmiany zatwierdzamy poprzez opcję Commit new file.
Możemy sprawdzić, czy strona działa.
Nim jednak będziemy mieli szansę przyjrzeć się wynikom naszej pracy, czeka nas kilka zadań do wykonania.
Zapoznaj się z infografiką. Podaj przykłady nowoczesnych witryn, które są praktycznymi przykładami realizacji trendów.
- Infografika o tytule: 7 trendów w projektowaniu stron internetowych.
- Gesty zamiast kliknięć: Ikona dłoni z wysuniętym palcem wskazującym, od którego wychodzą kolorowe fale.
Kiedyś strony internetowe można było przeglądać poprzez przesuwanie suwaka znajdującego się po prawej stronie ekranu. W ten sposób użytkownik przechodził na kolejne, liczne podstrony. Obecnie popularniejsze są strony dłuższe, bardziej rozbudowane. Przesuwając palcem na urządzeniu przenośnym lub przewijając myszą na urządzeniu stacjonarnym, szybciej zapoznajemy się z treścią. Po pobieżnym przejrzeniu zwartości strony, dokonujemy wyboru, czy chcemy przeczytać całość. - Duże elementy interakcyjne: Ikona czarnego kursora muszki wskazującego na duży żółty blok.
Duże elementy są wygodne do oglądania na każdego rodzaju nośniku: od smartfona, poprzez tablet, do monitora komputera stacjonarnego. Aktualnie nagłówki oraz treści istotne są zapisywane większą czcionką, a w powiększone przyciski łatwiej trafić kursorem – takich udogodnień nie było jeszcze parę lat temu. Dodatkowo, by przyciągnąć uwagę odbiorcy, treści przedstawiane są w sposób przejrzysty, intuicyjny. Użytkownik jest zachęcony, by zostać na danej stronie i sukcesywnie odkrywać jej zawartość. Niektóre treści wyświetlają się dopiero po rozwinięciu danych fragmentów strony, po kliknięciu w zaznaczony obiekt. To zwiększa atrakcyjność prezentowanych treści. - Płaski styl graficzny: Ikona przeglądarki z dwoma blokami, żółtym oraz zielonym, obok znajduje się koło z uciętą ćwiartką.
Użytkownicy są niecierpliwi, oczekują szybko ładujących się stron, ale też prostych i przejrzystych, których grafika jest użyteczna i zwraca uwagę na istotne elementy, a nie jest pokazem umiejętności graficznych. Rozwiązaniem jest flat design, czyli projektowanie elementów płaskich, bez cieni i gradientów. Dzięki ograniczeniu efektów graficznych, serwis internetowy szybciej ładuje się na stronie, co jest bardzo ważne przy rosnącej popularności urządzeń mobilnych. - Responsywne obrazy: Ikona smartphona z żółtym i zielonym blokiem na ekranie.
Obok znajduje się laptop z tym samym wzorem żółtego i zielonego bloku.
Internauci używają różnych urządzeń do przeglądania stron WWW, dlatego zamieszczone na nich obrazy powinny mieć rozdzielczość, która nie traci na jakości bez względu na rozmiar ekranu. Obrazy mogą być umieszczane w formacie bitmapy lub wektorów. - Delikatne i lekkie animacje: Ikona dwóch czerwonych strzałek tworzących okrąg.
Zaletą płaskiej grafiki jest jej lekkość i prostota. Pozwala to na użycie animacji w HTML5, czyli rezygnację z technologii Flash. Unikajmy animacji, które nie mają żadnego przekazu, a odwracają uwagę od nagłówka czy tekstu reklamowego. Dobra animacja to taka, która niesie za sobą jakiś przekaz marketingowy i jest wartością dodaną dla użytkownika, np. w przypadku prostej animacji jak rotacja zdjęć, warto by oprócz zdjęć rotowały się slogany dopasowane do tych zdjęć, wtedy przekaz jest ciekawszy. - Widoczny newsletter: Ikona laptopa, który na ekranie posiada otwartą kopertę a na liście wychodzącym z koperty znajduje się znak małpy.
Większość firm ma własną bazę klientów, którym regularnie wysyła newsletter lub informacje o nowościach czy promocjach. Dobrze widoczny moduł newslettera na stronie WWW zwiększa szansę na zapisanie się nowych użytkowników i potencjalnych klientów na listę mailingową. To prosty sposób na zbudowanie bazy adresowej potencjalnych klientów. Email marketing jest jedną ze skuteczniejszych form sprzedaży. - Wzorce i standardy:
Frafika przedstawia siatkę 5x3.
W pierwszym rzędzie w trzy pierwsze kratki wypełnione są kolorem żółtym, czwarta kratka w drugim rzędzie wypełniona jest kolorem zielonym.
Wykonanie strony internetowej często wymaga wielu dni projektowania oraz programowania. Dotyczy to również prostych elementów czy komponentów stron. Ponadto ważne jest utrzymanie spójności i użyteczności stron internetowych. Dlatego warto korzystać z ustandaryzowanych wzorców oraz gotowych bibliotek. W projektowaniu są to np. zestawy piktogramów czy siatki projektowe (tzw. grid). W programowaniu zaś mogą to być wtyczki mediów społecznościowych czy tzw. frameworki ułatwiające budowanie zaawansowanych aplikacji.