Jak będzie wyglądała twoja strona internetowa?

Jak będzie wyglądać twoja strona internetowa? Omawia prace planistyczne i projektowe, które trzeba wykonać przed rozpoczęciem pisania kodu, w tym "Jakie informacje zawiera moja strona internetowa?", "Jakich czcionek i kolorów chcę użyć?" oraz "Co robi moja strona?".


Pierwsza sprawa: planowanie

Zanim cokolwiek zrobisz, potrzebujesz kilku pomysłów. Co właściwie powinna robić twoja strona? Strona internetowa może robić w zasadzie wszystko, ale przy pierwszej próbie lepiej zachować prostotę. Zaczniemy od stworzenia prostej strony internetowej z nagłówkiem, obrazem i kilkoma akapitami.

Na początek, musisz odpowiedzieć sobie na te pytania:

  1. O czym jest twoja strona internetowa? Lubisz psy, Nowy York albo Pac-Mana?
  2. Jakie informacje prezentujesz na ten temat? Napisz tytuł i kilka akapitów i pomyśl o obrazku, który chcesz pokazać na swojej stronie.
  3. Jak wygląda twoja strona internetowa, w prostych, ogólnych założeniach. Jaki jest kolor tła? Jaka czcionka jest odpowiednia: formalna, kreskówkowa, pogrubiona i donośna, subtelna?

Uwaga: Złożone projekty wymagają dokładnych wytycznych, które zagłębiają się we wszystkie szczegóły dotyczące kolorów, czcionek, odstępów między elementami na stronie, odpowiedniego stylu pisania itd. Nazywa się to czasem przewodnikiem projektanta, systemem projektowania lub księgą marki, a przykład można zobaczyć w systemie projektowania Firefox Photon Design System.


Szkicowanie twojego projektu

Następnie złap za ołówek i papier i naszkicuj z grubsza, jak chcesz, aby twoja strona wyglądała. Na pierwszej prostej stronie internetowej, nie ma zbyt wiele do szkicowania, ale należy już teraz wyrobić sobie ten nawyk. To naprawdę pomaga — nie musisz być jak Van Gogh!

Uwaga: Nawet przy prawdziwych, skomplikowanych stronach internetowych, zespoły projektowe zazwyczaj rozpoczynają od szkiców wstępnych na papierze, a następnie budują cyfrowe makiety przy użyciu edytora graficznego lub technologii sieciowych.

W skład zespołów webowych często wchodzi zarówno grafik, jak i projektant doświadczeń użytkownika (UX). Graficy przygotowują wizualizacje strony internetowej. Projektanci UX mają nieco bardziej abstrakcyjną rolę w zajmowaniu się tym, jak użytkownicy będą doświadczać i wchodzić w interakcję ze stroną internetową.


Dobieranie zasobów

W tym momencie warto zacząć kompletować treść, która ma pojawić się na twojej stronie.

Tekst

Nadal powinieneś mieć te kilka paragrafów i tytuł przygotowany wcześniej. Miej je w zanadrzu.

Kolor motywu strony

Aby wybrać kolor, użyj tej strony, przygotowanej przez W3Schools i znajdź kolor, jaki ci się podoba. Kiedy klikniesz na wybrany kolor, zobaczysz dziwny, sześciocyfrowy kod, jak np. #660066. To jest tzw. kod hexadecymalny (ang. hex code), który reprezentuje twój kolor. Na razie skopiuj go w jakieś bezpieczne miejsce.

Obrazy

Aby wybrać jakiś obraz, odwiedź Grafikę Google i znajdź coś, co ci odpowiada.

  1. Kiedy wybierzesz jakiś obraz, kliknij na niego aby zobaczyć go w większym rozmiarze.
  2. Kliknij na obraz prawym klawiszem myszy (Ctrl + klik na Macu), wybierz Zapisz obraz jako... i wybierz miejsce na komputerze, gdzie chcesz go zapisać. Możesz też skopiować adres URL obrazu, z paska adresowego twojej przeglądarki, aby mieć go pod ręką i skorzystać z niego w przyszłości

Pamiętaj jednak o tym, że większość obrazów w internecie, również tych w Grafice Google, jest chronione prawami autorskimi. Żeby zminimalizować prawdopodobieństwa naruszenia czyichś praw, możesz skorzystać z narzędzi filtrowania Google. Kliknij w przycisk Narzędzia, następnie w Prawa użytkowania i wybierz Oznaczone do ponownego wykorzystania

Czcionki

Aby wybrać czcionkę:

  1. Odwiedź witrynę Google Fonts i poszukaj takiej czcionki, która ci odpowiada. Aby ułatwić sobie wyszukiwanie, możesz skorzystać z filtrów, które znajdują się po prawej stronie.
  2. Kliknij znaczek plusa obok nazwy czcionki, która ci się podoba.
  3. Kliknij na panel, który pojawi się na dole strony.
  4. Skopiuj kod, który się pojawił i zapisz go dla późniejszego użycia