Ta wikiHow uczy Cię, jak zaprojektować stronę internetową, która wygląda profesjonalnie i dobrze działa. Podczas gdy większość projektu witryny zależy od Ciebie, istnieje kilka krytycznych rzeczy do zrobienia i uniknięcia podczas tworzenia witryny.
Kroki
Część 1 z 2: Jak zaprojektować swoją stronę internetową
Krok 1. Określ, czy chcesz korzystać z kreatora stron internetowych
Strony internetowe tworzone od podstaw wymagają dość szczegółowego zrozumienia kodowania HTML, ale możesz łatwo stworzyć stronę internetową, korzystając z darmowej usługi hostingowej, takiej jak Weebly, Wix, WordPress lub Google Sites. Twórcy stron internetowych wydają się być znacznie łatwiejsi w użyciu dla początkujących projektantów niż HTML.
- Jeśli zdecydujesz się na kodowanie własnej strony internetowej, będziesz musiał nauczyć się zarówno kodowania HTML, jak i CSS.
- Jeśli zainwestowanie czasu i energii w stworzenie witryny nie brzmi zachęcająco, możesz również zatrudnić projektanta witryny, który stworzy dla Ciebie witrynę. Projektanci niezależni mogą kosztować od 30 USD za godzinę do znacznie ponad 100 USD za godzinę.
Krok 2. Zaplanuj swoją witrynę
Zanim jeszcze otworzysz kreatora witryny, powinieneś wiedzieć w przybliżeniu, ile stron ma mieć Twoja witryna, jaka powinna być zawartość każdej z tych stron oraz ogólny układ ważnych stron, takich jak strona główna i „Informacje” strona.
Strony Twojej witryny mogą być łatwiejsze do zwizualizowania, jeśli narysujesz przybliżone zdjęcia każdej z nich, a nie tylko określisz, jaka treść powinna się pojawić
Krok 3. Użyj intuicyjnego projektowania
Chociaż jest coś do powiedzenia na temat nowych pomysłów, podstawowy projekt witryny powinien być zgodny z ustalonymi wytycznymi, takimi jak:
- Opcje nawigacji (np. zakładki dla różnych stron) powinny znajdować się u góry strony.
- Jeśli używasz ikony menu (☰), powinna ona znajdować się w lewym górnym rogu strony.
- Jeśli używasz paska wyszukiwania, powinien on znajdować się w prawym górnym rogu strony.
- Przydatne linki (np. linki do strony „O mnie” lub „Kontakt”) powinny znajdować się na samym dole każdej strony.
Krok 4. Bądź konsekwentny
Niezależnie od wybranej czcionki tekstu, palety kolorów, motywu obrazu i opcji projektowych, upewnij się, że stosujesz tę samą decyzję w całej witrynie. Widok jednej czcionki lub schematu kolorów na stronie „Informacje” może być niezwykle irytujący, podczas gdy na stronie głównej zastosowano zupełnie inną czcionkę.
- Na przykład, jeśli używasz wyłącznie chłodnych kolorów na stronie głównej swojej witryny, nie stosuj jasnych, głośnych kolorów na następnej stronie.
- Należy pamiętać, że używanie głośnych lub zderzających się kolorów, zwłaszcza gdy kolory są wyświetlane w sposób dynamiczny (np. w ruchu), może wywołać epilepsję u niewielkiej liczby użytkowników sieci. Jeśli zdecydujesz się na użycie takich kolorów w swojej witrynie, pamiętaj o dodaniu ostrzeżenia o epilepsji przed odpowiednimi stronami.
Krok 5. Dodaj opcje nawigacji
Umieszczanie bezpośrednich linków do ważnych stron w witrynie u góry strony głównej pomoże osobom odwiedzającym po raz pierwszy do treści, które mają znaczenie. Większość twórców witryn domyślnie dodaje te linki.
Ważne jest, aby upewnić się, że każda strona w witrynie jest dostępna po kliknięciu opcji w witrynie, a nie tylko za pośrednictwem adresu strony
Krok 6. Użyj kolorów, które się uzupełniają
Jak każdy inny rodzaj projektowania, projektowanie stron internetowych opiera się na atrakcyjnych wizualnie kombinacjach kolorów; z tego powodu wybieranie kolorów motywu, które pasują do siebie, ma kluczowe znaczenie.
Czarny, biały i szary to dobra kombinacja, jeśli nie wiesz, od czego zacząć
Krok 7. Rozważ użycie minimalistycznego projektu
Minimalizm zachęca do chłodnych kolorów, prostej grafiki, czarno-białych stron tekstowych i jak najmniejszej ilości ozdób. Ponieważ minimalizm wymaga niewiele wymyślnych elementów, jest to łatwy sposób na sprawienie, aby Twoja strona wyglądała profesjonalnie i atrakcyjnie, nie wymagając wiele pracy.
- Wielu twórców stron internetowych ma „minimalistyczny” motyw, który możesz wybrać podczas konfigurowania witryny.
- Alternatywą dla minimalizmu jest „brutalizm”, który wykorzystuje ostrzejsze linie, jasne kolory, pogrubiony tekst i minimalistyczne obrazy. Brutalizm ma mniej zwolenników niż minimalizm, ale w zależności od zawartości Twojej witryny może lepiej odpowiadać Twoim potrzebom projektowym.
Krok 8. Dokonaj wyjątkowych wyborów
Proste linie i zablokowane elementy sieci to bezpieczne zakłady, ale podjęcie kilku unikalnych decyzji stylistycznych zarówno nada Twojej witrynie osobowość, jak i pomoże jej się wyróżnić.
- Nie bój się łamać trendów, umieszczając elementy witryny asymetrycznie lub używając nakładających się elementów, aby stworzyć warstwowy wygląd.
- Podczas gdy eleganckie, ostre rogi i kwadratowe elementy (znane również jako prezentacja „oparta na kartach”) są mniej korzystne niż zaokrąglone, miękkie elementy.
Część 2 z 2: Jak zmaksymalizować wydajność witryny?
Krok 1. Skorzystaj z opcji optymalizacji mobilnej
Przeglądarki mobilne generują większy ruch w sieci niż przeglądarki komputerowe, co oznacza, że ilość uwagi, jaką zwracasz na wersję mobilną Twojej witryny, powinna przynajmniej odpowiadać rozwojowi witryny na komputery. Większość usług dla twórców witryn automatycznie tworzy mobilną wersję witryny, ale warto pamiętać o następujących informacjach dotyczących witryny mobilnej:
- Upewnij się, że przyciski (np. linki do witryn) są duże i łatwe do dotknięcia.
- Unikaj wdrażania funkcji, których nie można wyświetlić na urządzeniach mobilnych (np. Flash, Java itp.).
- Zastanów się nad stworzeniem aplikacji mobilnej dla Twojej witryny.
Krok 2. Unikaj używania zbyt wielu zdjęć na stronie
Zarówno przeglądarki komputerowe, jak i mobilne mogą mieć problemy z ładowaniem stron, które wyświetlają dużą liczbę zdjęć lub filmów. Chociaż obrazy są ważne w projektowaniu stron internetowych, użycie więcej niż kilku na stronie może powodować niepotrzebnie długi czas ładowania, co uniemożliwi użytkownikom odwiedzanie danej strony.
Ogólnie rzecz biorąc, chcesz, aby strony Twojej witryny ładowały się w mniej niż cztery sekundy
Krok 3. Dodaj stronę „Kontakt”
Zauważysz, że praktycznie wszystkie strony internetowe mają stronę „Skontaktuj się z nami”, która zawiera informacje kontaktowe (np. numer telefonu i adres e-mail); niektóre witryny mają nawet wbudowany formularz zapytania na tej stronie. Dodanie strony „Kontakt” zapewni odwiedzającym witrynę bezpośrednią linię komunikacji z Tobą, dodając w ten sposób rozwiązanie potencjalnych frustracji.
Krok 4. Utwórz niestandardową stronę 404
Gdy ktoś odwiedzi określoną stronę w Twojej witrynie, która nie została skonfigurowana lub nie istnieje, zostanie wyświetlona strona internetowa „Błąd 404”. Większość przeglądarek ma domyślną stronę 404, ale możesz dostosować swoją z poziomu ustawień twórcy witryny; jeśli tak, upewnij się, że podałeś następujące informacje:
- Lekki komunikat o błędzie (np. „Gratulacje – znalazłeś naszą stronę błędu!”)
- Link do strony głównej witryny
- Lista najczęściej przeglądanych linków
- Obraz lub logo dla Twojej witryny
Krok 5. Jeśli to możliwe, użyj paska wyszukiwania
Jeśli Twoja metoda tworzenia witryny obsługuje dodawanie paska wyszukiwania do witryny, zdecydowanie zalecamy to zrobić. Dzięki temu użytkownicy będą mogli szybko przejść do określonej strony lub elementu bez konieczności klikania opcji nawigacji.
Paski wyszukiwania są również przydatne, gdy Twoi odbiorcy chcą wyszukać ogólne hasło bez stosowania metody prób i błędów
Krok 6. Zainwestuj najwięcej czasu na swojej stronie głównej
Gdy ktoś pojawi się na stronie głównej Twojej witryny, powinien natychmiast uzyskać sedno motywu Twojej witryny; oprócz tego wszystkie elementy strony głównej powinny się szybko ładować, w tym opcje nawigacji i wszelkie obrazy. Twoja strona główna powinna mieć następujące aspekty:
- Wezwanie do działania (np. przycisk do kliknięcia lub formularz do wypełnienia)
- Pasek nawigacyjny lub menu
- Zapraszająca grafika (np. jedno pełne zdjęcie, wideo lub mała grupa zdjęć z towarzyszącym tekstem)
- Słowa kluczowe związane z usługą, tematem lub celem Twojej witryny
Krok 7. Przetestuj swoją witrynę w wielu przeglądarkach na wielu platformach
Jest to niezwykle ważne, ponieważ różne przeglądarki mogą w różny sposób obsługiwać różne aspekty Twojej witryny. Zanim zaczniesz promować swoją witrynę, spróbuj odwiedzić ją i korzystać z niej w następujących przeglądarkach na platformach Windows, Mac, iPhone i Android:
- Google Chrome
- Firefox
- Safari (tylko iPhone i Mac)
- Microsoft Edge i Internet Explorer (tylko Windows)
- Wbudowana przeglądarka na kilku różnych telefonach z Androidem (np. Samsung Galaxy, Google Nexus itp.)
Krok 8. Kontynuuj aktualizowanie swojej witryny w miarę starzenia się
Trendy w projektowaniu, linki, zdjęcia, koncepcje i słowa kluczowe zmieniają się w miarę upływu czasu, więc aby być na bieżąco, musisz nadal wprowadzać zmiany w swojej witrynie. Będzie to wymagało sprawdzania wydajności swojej witryny obok innych podobnych witryn co najmniej raz na trzy miesiące (najlepiej częściej).
Podstawowa pomoc HTML
Przykładowa strona internetowa z HTML
Wsparcie wikiHow i odblokuj wszystkie próbki.
Ściągawka HTML
Wsparcie wikiHow i odblokuj wszystkie próbki.
Przykładowa prosta strona internetowa
Wsparcie wikiHow i odblokuj wszystkie próbki.
Porady
- Dostępność strony internetowej to kolejny ważny aspekt tworzenia stron internetowych. Obejmuje to między innymi napisy dla odbiorców z uszkodzonym słuchem, audiodeskrypcje dla niewidomych gości i ostrzeżenia o nadwrażliwości na światło, jeśli Twoja witryna wykorzystuje efekty potencjalnie wywołujące napady padaczkowe.
- Większość twórców stron internetowych ma zestaw szablonów, których można użyć do utrwalenia układu i projektu witryny przed dodaniem preferowanych elementów.
Ostrzeżenia
- Większość twórców witryn jest bezpłatna; jeśli jednak chcesz korzystać z własnej domeny (np. „www.twojanazwa.com” zamiast „www.twojanazwa.wordpress.com”), będziesz musiał uiścić opłatę miesięczną lub roczną.
- Unikaj plagiatu i przestrzegaj wszystkich praw autorskich: nie dodawaj przypadkowych obrazów z sieci, a nawet elementów strukturalnych bez pozwolenia.
