Projekt strony internetowej: kompletny przewodnik

Ujawnienie: Ta treść jest obsługiwana przez czytelników, co oznacza, że ​​jeśli klikniesz niektóre z naszych linków, możemy otrzymać prowizję.

Kiedyś projektowanie stron internetowych było bardzo trudne, ale to już nieprawda.

Lata temu, kiedy po raz pierwszy zacząłem projektować swoje strony internetowe, nie było mnóstwa zasobów. Zasadniczo istniały dwie opcje — naucz się podstaw języków programowania stron internetowych lub zatrudnij projektanta. Pierwszy wybór jest trudny i czasochłonny. Ten ostatni jest drogi.

Po krótkiej próbie zaprojektowania wszystkiego na własną rękę, wydałem ogromne pieniądze na projektanta. To było więcej niż chciałem wydać, ale tak naprawdę nie miałem wielkiego wyboru.

Dziś nowi właściciele stron internetowych mają do dyspozycji więcej zasobów. Możliwe jest zaprojektowanie profesjonalnej strony internetowej bez zatrudniania projektanta lub nauki kodowania.

Niezależnie od tego, czy jesteś kompletnym początkującym, czy po prostu szukasz alternatywnego sposobu projektowania stron internetowych, trafiłeś we właściwe miejsce. W tym przewodniku krok po kroku wyjaśnię, jak zaprojektować witrynę internetową.

Moje ulubione narzędzie do projektowania stron internetowych

Wix to moje ulubione narzędzie do projektowania stron internetowych. Jest to zasadniczo alternatywna metoda całkowitego omijania projektowania stron internetowych.

Jako darmowy kreator stron internetowych, Wix ułatwia każdemu tworzenie i projektowanie strony internetowej od zera — nie jest wymagane żadne doświadczenie, umiejętności programistyczne ani wiedza projektowa.

Powodem, dla którego tak bardzo kocham Wix, jest to, że nie wymaga on żadnego wysiłku. Nawet jak na tak proste narzędzie, ostateczny projekt zawsze wygląda na profesjonalnie wykonany. Ludzie po prostu założą, że zatrudniłeś projektanta – to takie dobre.

Ta bezproblemowość obejmuje ważne rzeczy, z którymi nie chcesz się sam zajmować, takie jak bezpieczeństwo i niezawodność.

Wix zarządza optymalizacją dla obu stron, dzięki czemu Twoja witryna jest zawsze chroniona, a ich serwery są zawsze w stanie dostarczyć Twoją witrynę odwiedzającym.

Co więcej, robią o wiele więcej dzięki automatycznym kopiom zapasowym danych witryn, dzięki którym nigdy nie zaczniesz od zera, jeśli wydarzy się coś strasznego.

Innym powodem, dla którego tak bardzo polecam Wix, jest jego wszechstronność. Może zaspokoić potrzeby projektowe praktycznie każdego rodzaju witryny pod słońcem.

Od prostych blogów po witryny z portfolio, sklepy internetowe, witryny restauracyjne, witryny małych firm i nie tylko, Wix może to wszystko zrobić. Inne kreatory stron internetowych na rynku po prostu nie mają takiej wszechstronności.

Kontynuuj poniżej, a nauczę Cię, jak zaprojektować stronę internetową za darmo przy użyciu Wix.

Pierwszą rzeczą, którą musisz zrobić, to zarejestrować się w Wix. Więc przejdź do Wix.com i utwórz konto. Jest to w 100% darmowe i nie musisz nawet podawać informacji o swojej karcie kredytowej.

Wystarczy kliknąć jeden z wielu przycisków „Rozpocznij” na stronie głównej lub w dowolnym innym miejscu witryny.

W przeciwieństwie do innych platform, proces rejestracji Wix można zakończyć w ciągu kilku sekund. Nie ma żadnych skomplikowanych pól formularzy do wypełnienia. Potrzebują tylko Twojego adresu e-mail i hasła.

Możesz nawet ominąć wpisywanie czegokolwiek i zarejestrować się jednym kliknięciem za pomocą Google lub Facebooka.

Po zarejestrowaniu się, Wix automatycznie przeprowadzi Cię przez proces projektowania witryny.

Krok 2: Wybierz typ swojej witryny

Następnie musisz dowiedzieć się, jaki rodzaj witryny chcesz zaprojektować. Twoja odpowiedź będzie miała znaczący wpływ na Twoje wybory projektowe.

Na przykład osobisty blog i witryna e-commerce będą miały duże różnice w wyborze projektu. Witryna z portfolio służąca do prezentowania fotografii lub niestandardowych dzieł sztuki nie będzie miała takiego samego wyglądu jak witryna lokalnej restauracji.

Wix ułatwia ten krok. Zostaniesz poproszony o wybranie typu witryny z szerokiej gamy potencjalnych opcji.

Na podstawie Twojej odpowiedzi Wix automatycznie zaprezentuje Ci odpowiednie szablony w tej kategorii. Na przykład, jeśli wybierzesz „sklep internetowy”, układ pomieści strony produktów, kategorie produktów i ułatwi zaprojektowanie procesu kasowego.

Po wybraniu typu witryny Wix przedstawia dwie opcje projektu:

• Pozwól Wix ADI stworzyć dla Ciebie stronę internetową.
• Stwórz swoją stronę internetową za pomocą edytora.

Pierwsza opcja jest prosta i doskonała dla osób, którym się spieszy. Po prostu odpowiesz na kilka prostych pytań, a Wix zaprojektuje dla Ciebie witrynę na podstawie Twoich odpowiedzi. To imponujące, jak szybko trwa ten proces.

W mniej niż minutę otrzymasz zupełnie nowy, niestandardowy projekt witryny. Projekt wygląda pięknie i oprócz dostosowywania stron do własnych treści, gotowe.

Na potrzeby tego samouczka będziemy trzymać się drugiej opcji — tworzenia witryny za pomocą edytora Wix. Zapewni to większą swobodę i kontrolę nad każdym aspektem wyborów projektowych.

Krok 3: Wybierz szablon

Zamiast próbować zaprojektować stronę internetową z pustym płótnem, znacznie łatwiej jest zacząć od szablonu.

Poświęć kilka minut na przejrzenie różnych opcji. Jakie style lubisz? Które szablony naśladują wizerunek Twojej marki? Wix ma tysiące szablonów do wyboru. Na początku może to być trochę przytłaczające. Ale zawęź skoncentrowanie się na konkretnym typie witryny.

W tym przykładzie wybieram witrynę „biznesową”. Ale to naprawdę szeroka kategoria. Jeśli spojrzysz w lewą stronę ekranu, możesz bardziej zawęzić swoją uwagę do typów firm.

Wix ma specjalne szablony dla konsultantów, firm z branży nieruchomości, usług profesjonalnych, takich jak finanse i prawo, marketing i wiele innych. Każdy typ strony internetowej ma różne podkategorie z szablonami.

Na przykład, jeśli wybierzesz „sklep internetowy”, zobaczysz szablony odzieży, biżuterii, elektroniki, wystroju domu, kosmetyków, sprzętu sportowego i nie tylko. Jeśli projektujesz witrynę bloga, Wix ma szablony dla blogów osobistych, blogów podróżniczych, blogów modowych, podcastów itp.

Twój szablon stanie się podstawą dla reszty projektu Twojej witryny. Dlatego ważne jest, aby nie spieszyć się i nie spieszyć przez ten krok. Nadal będziesz mógł dostosować różne elementy projektu do swoich upodobań, ale z odpowiednim szablonem jest to o wiele łatwiejsze.

Krok 4: Edytuj swój układ

Odwiedzający witrynę wyrobią sobie opinię o Twojej witrynie w mniej niż sekundę po wylądowaniu na stronie głównej. Dlatego projekt jest tak ważny, a wszystko zaczyna się od odpowiedniego układu.

Szablony Wix zostały już zoptymalizowane pod kątem projektowania przyjaznego dla użytkownika. Ale masz swobodę i elastyczność, aby wprowadzić tutaj pewne zmiany.

W tym przykładzie edytuję szablon „Konsultant biznesowy”. Załóżmy, że chciałem zmienić pozycjonowanie nagłówka na tej stronie głównej. Po prostu kliknę pole w edytorze Wix i przeciągnę je w inne miejsce na stronie.

A może chcę zmienić położenie wezwania do działania „Dowiedz się więcej” na prawej połowie ekranu. Mogę go kliknąć i przeciągnąć w dowolne miejsce.

Na początku zachęcam do przeniesienia kilku rzeczy. To wprowadzi Cię do edytora Wix, dzięki czemu poczujesz się komfortowo. Jeśli ostatecznie nie chcesz wprowadzać żadnych zmian w układzie, zawsze możesz przywrócić oryginalny projekt.

Krok #5: Przygotuj treść

Treść jest ważnym elementem projektu Twojej witryny. Nie można całkowicie sfinalizować projektu bez dokładnego zrozumienia, jakie materiały będą prezentowane na stronie internetowej.

Zbierz obrazy, filmy, GIF-y, logo, slogany, tekst (kopia) i wszystko, co chcesz wyświetlić w swojej witrynie.

Pokażę wam przykład ilustrujący mój punkt widzenia.

Nadal edytuję ten sam szablon konsultanta biznesowego. Jedną z pierwszych rzeczy, które zrobię w tej części strony, jest zamiana obrazu na moje zdjęcie. Ale zanim to zrobię, musiałbym również pomyśleć o odpowiedniej kopii tekstu w lewym dolnym rogu ekranu.

Domyślnie szablon ma tu trochę pustego miejsca, jak podkreśliłem powyżej. Chociaż puste miejsce jest ważną funkcją projektowania stron internetowych, nie podoba mi się, jak jest używane w tym przypadku.

Oto moje opcje:

• Użyj zdjęcia pełnej długości (takiego jak powyżej) i dodaj akapit w pustym miejscu.
• Użyj mniejszego zdjęcia (np. zdjęcia w głowę) i użyj pojedynczego akapitu tekstu.

Oba osiągną mój cel, polegający na wyeliminowaniu pustej części strony. Czy widzisz, jak jeden składnik wpływa na inny? Wszystko to jest związane z projektem i jest o wiele łatwiejsze, jeśli masz przygotowane treści z wyprzedzeniem.

Krok #6: Zdefiniuj swoją strategię brandingową

Zacznij myśleć o tym, jak odwiedzający będą postrzegać Twoją witrynę. Rzeczy takie jak schemat kolorów, czcionki i inne elementy projektu będą miały bezpośredni wpływ na wizerunek Twojej marki.

Kliknij „Menedżer motywów” po lewej stronie edytora Wix. To jest przycisk z literą „A” i czymś, co wygląda jak kropla deszczu lub kropla farby.

Tutaj możesz zmienić kolory motywu witryny. Będziesz mieć również możliwość edytowania domyślnych motywów tekstowych dla nagłówków i akapitów.

W takim przypadku obecny schemat kolorów dobrze sprawdza się w przypadku konsultanta biznesowego. Jest nowoczesny i profesjonalny. Załóżmy jednak, że projektujesz stronę internetową dla dzieci. Możesz mieć trochę więcej zabawy dzięki jasnym kolorom i dużym, odważnym czcionkom.

Jeśli w kroku 5 dodałeś logo swojej firmy i inne materiały, upewnij się, że schemat kolorów dobrze współgra z resztą zawartości.

Krok 7: Dodaj strony docelowe

Twoje strony docelowe będą miały niepowtarzalny wygląd. Chociaż wszystkie powinny przestrzegać tych samych zasad brandingu i tematu strony głównej, wybory projektowe będą miały pewne różnice.

Aby dodać stronę, kliknij górną ikonę po lewej stronie edytora Wix. Następnie kliknij „dodaj stronę”, jak zaznaczyłem poniżej.

Nowe strony będą zasadniczo pustym płótnem, z wyjątkiem nagłówka i stopki. Ale zamiast zaczynać od zera, możesz „dodać pasek” do dowolnej strony w oparciu o zawartość, którą będzie ona zawierać.

Wystarczy kliknąć przycisk „+” w edytorze, aby przejrzeć niektóre opcje.

Pomyśl o tym jako o mini szablonie. Zastosuj te same zasady, których użyłeś w kroku 3, kiedy po raz pierwszy wybierałeś ogólny szablon witryny.

To po prostu łatwiejszy sposób na projektowanie nowych stron docelowych. Wix ma już tak wiele świetnych opcji, że nie warto próbować budować swoich stron od zera.

Krok #8: Skoncentruj się na użyteczności

Czasami podczas procesu projektowania możesz zacząć tracić koncentrację na tym, jak użytkownicy będą angażować się w Twoją witrynę. Nie można jednak pominąć doświadczenia użytkownika (UX).

Istnieją pewne sprawdzone metody projektowania, których oczekują ludzie odwiedzający witrynę internetową. Na przykład oczekują, że menu nawigacyjne będzie znajdować się na górze strony. Oczekują, że stopka będzie zawierać informacje kontaktowe. Oczekują, że logo przeniesie ich z powrotem na stronę główną.

Spójrzmy na coś prostego, na przykład menu nawigacyjne:

W tym przykładzie menu zawiera tylko cztery strony. Możesz być może ujść na sucho z dodaniem jednego lub dwóch więcej. Ale poza tym to za dużo.

Wyobraź sobie, że ta witryna miałaby 10 lub 20 stron w menu. To byłaby katastrofa. Górna część strony byłaby zbyt zagracona, a odwiedzający nigdy nie znaleźliby tego, czego szukają. Ogólnie rzecz biorąc, byłby to zły wybór projektowy.

Pomyśl o użyteczności przy każdym wyborze projektu, od rozmieszczenia CTA po efekty przewijania, białą przestrzeń, architekturę i wszystko pomiędzy.

Nie próbuj wymyślać koła na nowo. Postępuj zgodnie z najlepszymi praktykami projektowania stron internetowych, a UX będzie w porządku.

Krok 9: Zoptymalizuj projekt pod kątem urządzeń mobilnych

Według Statista, mniej więcej połowa całego globalnego ruchu internetowego pochodzi z urządzeń mobilnych. Jest więc szansa, że ​​każdy odwiedzający Twoją witrynę będzie przeglądał ją na smartfonie lub tablecie.

Musisz upewnić się, że projekt Twojej witryny jest przyjazny dla urządzeń mobilnych. W przeciwnym razie użytkownicy będą się odbijać i nigdy nie uzyskasz konwersji mobilnych.

Na szczęście Wix ułatwia ten proces.

Na stronie edytora lub podglądu po prostu kliknij ikonę urządzenia mobilnego, aby przełączyć się z widoku pulpitu swojej witryny.

Wix automatycznie zoptymalizuje Twoją witrynę pod kątem urządzeń mobilnych. Ale nadal dobrym pomysłem jest sprawdzenie wszystkiego samemu, aby zobaczyć, czy chcesz wprowadzić jakieś zmiany. Jeśli zobaczysz coś, co chcesz zmienić, możesz edytować projekt witryny mobilnej bez zmiany wersji na komputery.

Krok 10: Opublikuj swoją witrynę

Po sfinalizowaniu projektu nadszedł czas na udostępnienie witryny w Internecie.

Warto zauważyć, że Twoja witryna nie musi być w 100% ukończona, aby ją opublikować. Zawsze możesz wrócić i dodać strony później. Ale kiedy już masz stronę główną, o stronie, stronę kontaktową i kilka elementów witryny, opublikuj je, aby móc zacząć generować ruch. Tylko upewnij się, że nie publikujesz żadnych niekompletnych stron.

Kliknij niebieski przycisk „Opublikuj” w prawym górnym rogu pulpitu nawigacyjnego Wix, aby kontynuować.

Jak powiedziałem wcześniej, możesz zaprojektować i opublikować witrynę z Wix w 100% za darmo. Ale jest pewien haczyk.

Bezpłatni użytkownicy Wix nie będą mogli dostosowywać swojej domeny. Wszystkie domeny zawierają nazwę Twojego konta Wix, następnie markę Wix, a następnie nazwę Twojej witryny. Jak widać z powyższego przykładu, domeną tutaj będzie:

http://neilpatelsample.wixsite.com/mysite-1

Nie jest to opłacalna opcja dla żadnej witryny internetowej związanej z biznesem. W porządku, jeśli korzystasz z witryny tylko do zabawy z zasadami projektowania stron internetowych. Ale jeśli chcesz mieć legalną witrynę z prawdziwymi użytkownikami, musisz uaktualnić do planu premium Wix.

Teraz będziesz mógł używać niestandardowej nazwy domeny, zakupionej bezpośrednio przez Wix lub od zewnętrznego rejestratora domen. Jeśli nie masz jeszcze domeny, po prostu pobierz ją od Wix. Łatwiej jest zarządzać wszystkim za pośrednictwem jednej platformy.

Wniosek

Projektowanie stron internetowych naprawdę ewoluowało na przestrzeni lat. To, co kiedyś było dużym wyzwaniem lub kosztownym przedsięwzięciem dla nowych właścicieli witryn, teraz może zostać zrealizowane z łatwością.

Twórcy stron internetowych, tacy jak Wix, zasadniczo eliminują potrzebę projektowania stron internetowych od zera.

Użytkownicy nietechniczni i osoby z zerowym doświadczeniem w projektowaniu mogą wybrać szablon i wypełnić swoją witrynę niestandardową treścią. Nie ma potrzeby uczyć się języków programowania internetowego ani zatrudniać projektanta.

Zarejestruj się w Wix, wykonaj krok po kroku opisany powyżej proces, a w ciągu kilku minut otrzymasz profesjonalnie zaprojektowaną stronę internetową. To takie proste!

Zobacz, jak moja agencja może zwiększyć ruch w Twojej witrynie

• SEO – odblokuj ogromne ilości ruchu SEO. Zobacz prawdziwe wyniki.
• Content Marketing – nasz zespół tworzy epickie treści, które będą udostępniane, zdobywają linki i przyciągają ruch.
• Paid Media – skuteczne płatne strategie z wyraźnym ROI.

Zarezerwuj połączenie