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

W tym artykule omówimy jak zaplanować swoją pierwszą stronę internetową. Jest to pierwszy krok jaki należy wykonać, jeszcze przed rozpoczęciem pisania kodu. Odpowiemy razem na pytania: "Jakie informacje moja strona ma prezentować?", "Jakich czcionek i kolorów chcę użyć?" oraz "Co jest celem mojej strony?"


Pierwsza sprawa: planowanie

Zanim zaczniesz cokolwiek robić, musisz mieć jakiś pomysł. Co i jak twoja przyszła strona ma prezentować? Na początek wystarczy ogólny zarys. Zaczniemy od stworzenia prostego nagłówka strony, obrazków i kilku paragrafów tekstu.

Aby rozpocząć, potrzebujesz odpowiedzieć sobie na te pytania:

  1. O czym jest twoja strona? Lubisz może psy, Nowy York albo Pacmana?
  2. Jakie informacje chcesz na niej przedstawić? Napisz tytuł, kilka paragrafów i zastanów się nad obrazkami, które chcesz pokazać.
  3. Jak ma wyglądać twoja strona? W prostych, ogólnych zdaniach. Jaki kolor ma mieć tło? Jaki rodzaj czcionki będzie odpowiedni: formalna, komiksowa, wytłuszczona i rzucająca się w oczy, a może subtelna?

Notka: Złożony projekt wymaga szczegółowych wytycznych co do użytych kolorów, czcionek, odleglości między elementami na stronie i tak dalej. Czasem jest to nazywane wytycznymi projektowymi (ang. design guide lub brand book). Przykład takich wytycznych możesz zobaczyć na Firefox OS Guidelines.


Szkic twojego projektu

Następnie weź ołówek i zrób szkic tego, jak z grubsza chcesz aby wyglądała twoja strona. To twoja pierwsza strona, więc nie będzie dużo do rysowania, ale już teraz powinieneś sobie wyrobić ten nawyk. To naprawdę pomocne — nie musisz być Van Goghiem!

Notka: Nawet przy dużych, złożonych witrynach, projektanci zaczynają od zgrubnego szkicu na papierze, a dopiero potem tworzą cyfrową makietę, używając edytora graficznego lub technologii webowych.

Zespoły tworzące strony internetowe często posiadają projektanta grafiki i projektanta user experience (UX). Projektanci grafiki tworzą wizualną szatę witryny, a projektanci UX zajmują się bardziej abstrakcyjnymi rzeczami, typu: jak witryna będzie odbierana oraz jak użytkownicy będą wchodzić z nią w interakcje


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