Główna zawartość
Kurs: Programowanie > Rozdział 2
Lekcja 9: Dalsza naukaProjekt strony internetowej
Pokazaliśmy Ci jak tworzyć strony internetowe, ale nie skupialiśmy się na tym, aby wyglądały przesadnie dobrze. Oczywiście, piękno jest subiektywne i to od ciebie (i twoich użytkowników) będzie zależeć, czy strona "wygląda dobrze", ale możemy dać ci kilka rad i wskazówek.
Oprócz dobrego wyglądu, najprawdopodobniej zależy Ci na tym, aby strona wyglądała unikalnie, aby wyróżniała się dla użytkowników.
To często najtrudniejsza część - stworzenie dobrze wyglądającej strony i odpowiednio wyróżniającej się. Strona może się bardzo wyróżniać jeśli dodasz paski zebry i 64 pikselowa czcionka, ale czy powinieneś? Prawdopodobnie nie. :)
Wybieranie dobrej czcionki
Domyślnie do wyświetlania stron przeglądarki używają czcionek "szeryfowych" które sprawiają że strona wygląda bardziej formalnie. Możesz jednak zdecydować się na czcionki bezszeryfowe, lub konkretną, popularną czcionkę, jak Garamond lub Helevetica.
Aby strony miała wyjątkowy wygląd, możesz użyć niestandardowej czcionki. Na przykład, Khan Academy korzysta z Lato na wszystkich stronach, to dobra czcionka sans-serif:
Gdy używasz czcionki internetowej, nakazujesz przeglądarce pobrać czcionkę na komputer użytkownika i przypisanie w CSS. To dodatkowe dane do pobrania przez przeglądarkę, więc nie powinieneś dołączać zbyt wielu. Najlepiej dołączaj tylko te, z których zamierzasz korzystać. Dobrym źródłem czcionek jest Google Web Fonts, Sprawdź tą przykładową stronę na Khan Academy, która korzysta z 2 czcionek Google Web Font.
Za każdym razem, gdy korzystasz z czcionek powinieneś uważać na przeładowanie. Ogólnie rzecz biorąc, nie powinieneś używać więcej niż 2-3 czcionek na stronie, a czcionki powinny ładnie ze sobą współgrać. Tutaj pomocna strona, która pokazuje przykłady czcionek Google Web Fonts, które dobrze ze sobą wyglądają.
Wybieranie odpowiednich kolorów
Gdy projektujesz stronę internetową, chcesz użyć palety kolorów - zbioru kolorów, które razem będą dobrze komponować się ze sobą i będą używalne w wielu częściach strony. Mogą opierać się o logo twojej firmy, mogą odnosić się do stylu strony lub mogą po prostu wyglądać dobrze.
Potrzebujesz pomocy z wybraniem palety? Jeśli znasz kilka kolorów podstawowych dla twojej palety wybierz się na Paletton, narzędzie, które pozwala Ci zwizualizować wiele różnych rodzajów palet: monochromatyczne, triady, kolory sąsiednie i tetrady.
Jeśli zaczynasz od nowa, możesz przeglądnąć palety na COLOURLovers, Społeczność dla ludzi kochających kolory, palety i pomysły. Poniżej paleta nazwana "Wielka złota rybka":
Gdy już wybierzesz paletę kolorów, teraz trudniejsza część: dowiedzieć się jakie kolory zastosować w odpowiednich częściach strony. Jaki kolor powinien mieć nagłówek? Linki? Tekst? Tło? Dlatego moją ulubioną funkcjonalnością na Paletton jest przykład strony internetowej z wykorzystaniem naszej palety:
Gdy już zdecydujesz jak twoja paleta przełoży się na CSS, weź pod uwagę kilka rzeczy:
- Jeśli zmienisz styl linków za bardzo, użytkownicy mogą nie dostrzec, że to linki.
- Kolor pierwszego planu/tła tekstu powinien kontrastować tak, aby użytkownicy nie musieli się wysilać. Sprawdź kolory w walidatorze kontrastu.
- Wielu ludzi jest chorych na daltonizm. Niektóre mieszanki kolorów będą dla nich niekontrastowe. Sprawdź swoją mieszankę w tym symulatorze dla daltonistów.
Jeśli nie jesteś pewny jak korzystać z palety kolorów, wyślij ją do kilku znajomych i spytaj o szczerą opinię. Czy mogą wszystko przeczytać? Czy wiedzą w co można kliknąć? Czy któryś kolor im się nie podoba? Które kolory są dla nich najlepsze?
Wykorzystanie pustej przestrzeni
Spytałem się kiedyś znajomego o to, kto jest teraz projektantem w Google i jaki jest sekret jego świetnego designu.
Jego odpowiedź? "Whitespace!"
Whitespace odnosi się do wolnego miejsca pomiędzy elementami, w CSS pochodzi z reguły z właściwości takich jak padding, margin i line-height.
Mój kolega ma rację - whitespace, czyli znaki niedrukowalne mogą mieć duży wpływ na to, jak dobrze Twoja strona wygląda oraz jak bardzo jest czytelna. Znajomy projektant spędza czasem długie godziny nad znakami niedrukowalnymi, bo wie jak bardzo jest to ważne.
Ekstremalny przykład, porównaniu naszego kursowego panelu bocznego zawierającego oraz niezawierającego znaków niedrukowalnych:
Co to oznacza dla ciebie? Bardzo trudno jest dawać sztywne i szybkie porady na temat formatowania na stronie, ale musisz o tym pamiętać. Gdy chcesz umieścić na stronie dwa elementy, zastanów się ile pustej przestrzeni pozostawisz pomiędzy nimi. Każdy element ma tło lub obramowanie, weź pod uwagę ile dopełnienia mają. Dla Twoich paragrafów i list, weź pod uwagę czy może wysokość linii poprawi czytelność strony.
Korzystanie z szablonów i frameworków
Możesz być przytłoczony po przeczytaniu wszystkich tych wskazówek, zwłaszcza, jeśli nie uważasz się za osobę uzdolnioną w designie. Nie przejmuj się, nie musisz być ekspertem designu, aby stworzyć dobrze wyglądającą stronę internetową. Zamiast tego zacznij od przykładu lub frameworka i wykorzystaj ich wkład, który włożyli stworzenie przystępnego designu.
Szablon składa się z kodu HTML oraz CSS który od razu jest gotową stroną, często z przykładową zawartością. Szablony możesz znaleść na OpenDesigns.org lub poprzez wyszukanie hasła "darmowe szablony stron internetowych" (warto upewnić się czy dany szablon w rzeczywistości jest darmowy!). Po pobraniu szablonu, możesz zastąpić istniejącą zawartość swoją własną oraz rozpocząć modyfikowanie kodu aby sprostał Twoim oczekiwaniom.
Framework CSS jest zbiorem zasad CSS, które dadzą Ci świetny start w stworzeniu smukłej strony internetowej. Istnieje wiele popularnych frameworków CSS, które pomogą ci stworzyć ładną stronę - na przykład Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat i wiele więcej. Możesz obejrzeć przykłady Twitter Bootstrap and ZURB foundation bezpośrednio na Khan Academy.
Gdy ściągniesz framework CSS, zajrzyj do dokumentacji, aby znaleźć przykłady (często również szablony!) i dowiedzieć się, które klasy CSS pozwolą ci osiągnąć zamierzony efekt.
Gdy korzystasz z przykładów czy frameworków, ryzykujesz stworzeniem strony podobnej do innych stron internetowych. Taka strona może się nie wyróżniać tak bardzo jak użytkownik mógłby chcieć. Aby tego uniknąć dodaj swoje logo i zmień kilka kluczowych elementów: na przykład czcionka lub kolor tła.
Chcesz dołączyć do dyskusji?
powie mi ktoś jak zrobić aby na stronie były konta użytkowników?(4 głosy)
Cóż, konta to dosyć zaawansowana część programowania stron internetowych. Na razie tworzymy podstawowe strony.(7 głosów)
Ile zajmuje stworzeni strony od podstaw(1 głos)
Pytanie jest zbyt ogóle. Zależy od rodzaju strony, narzędzi i poziomu umiejętności. Przy użyciu dostępnych aktualnie narzędzi można stworzyć zaawansowany portal w jeden dzień. Poza tym wiele stron nie trzeba w ogóle programować. Można korzystać z gotowych systemów jak Wordpress.(5 głosów)