8 przykazań procesu projektowania stron internetowych (dla początkujących i bez kodu)
Opublikowany: 2021-11-01
Dowiedz się, jak stworzyć udaną witrynę internetową, postępując zgodnie z ustrukturyzowanym procesem projektowania witryny.
Nasza hipoteza jest taka, że już znalazłeś nazwę domeny i dostawcę hostingu.
Jeśli jeszcze nie wybrałeś swojego hosta, naprawdę polecamy naszego partnera Cloudways .
W poniższym przykładzie kroki są przedstawione w przypadku, gdy tworzysz stronę internetową dla siebie. Jeśli witryna jest przeznaczona dla klienta, mogą pojawić się nowe kroki w zakresie planowania projektu, ustalenia terminów, umowy i nie tylko. Ale w istocie nadal będziesz musiał trzymać się kroków przedstawionych poniżej.
Oto kroki:
- Identyfikacja zakresu : jakie potrzeby ma spełniać strona internetowa? Z kim rozmawia strona internetowa? Jakie są jego cele i motywatory? Które firmy mają taki sam zakres i grupę docelową jak Ty?
- Zdefiniowanie mapy witryny : jakie strony internetowe i funkcje pomagają firmie i odbiorcom w osiąganiu ich celów?
- Tworzenie treści : przygotowanie kopii na strony serwisu;
- Kreowanie marki wizualnej : przygotowanie palety kolorów, czcionek i grafik do wykorzystania w projekcie strony internetowej, które ostatecznie ukształtują Twoją tożsamość wizualną;
- Szkielet: szkicowanie układu stron internetowych;
- Projektowanie stron internetowych : tworzenie rzeczywistej strony internetowej, pamiętaj o ograniczeniach narzędzi, z których korzystasz;
- Testowanie : upewnienie się, że wszystko działa, od linków po formularze i przyciski. Przetestuj witrynę na różnych przeglądarkach i urządzeniach, aby upewnić się, że działa poprawnie;
- Uruchomienie: zrób trochę hałasu przed transmisją na żywo dzięki starannie zaplanowanej strategii komunikacji.
Weźmy je jeden po drugim.
Etapy procesu projektowania strony internetowej
1. Identyfikacja zakresu
Na tym etapie Ty i Twój zespół musicie znaleźć odpowiedzi na niektóre z poniższych pytań:
- Dla kogo jest strona?
Przyciągająca wzrok strona internetowa może mieć swoje zalety, ale jeśli chcesz, aby odwiedzający Twoją stronę poświęcili swoje pieniądze lub czas, oznacza to, że musisz kopać więcej, aby przekonać ich, że zaangażowanie jest tego warte. Aby być przekonującym, musisz zrozumieć swoją grupę docelową, zrozumieć jej potrzeby, wewnętrzne i zewnętrzne motywacje.
To kopanie oznacza również, że musisz stworzyć produkt, który jest użyteczny i zaspokaja czyjeś potrzeby.
Załóżmy na przykład, że mam hobby polegające na robieniu papierowych kompozycji kwiatowych i chcę je rozwinąć i przekształcić w biznes. Czy ktoś papierowe kwiaty? Gdzie mogę znaleźć te osoby?
Cóż, myślę, że planiści ślubów i przyszłe panny młode mogą chcieć takiej opcji.
Ale muszę iść jeszcze dalej. Czy każda panna młoda chciałaby moje papierowe kwiaty, czy tylko typ panny młodej?
Oznacza to, że będziesz musiał przeprowadzić pewne badania i sprawdzić konkurencję. Czy są inni handlarze papierowymi kwiatami? Konkurujesz także ze starymi dobrymi kwiaciarniami. Jaka byłaby wtedy twoja wartość dodana lub wyjątkowa propozycja wartości?
- Czego użytkownicy Twojej witryny mogą się spodziewać w Twojej witrynie?
Wracając do naszego przykładu, prawdopodobnie Twoi goście chcieliby zobaczyć różne produkty, kolory, informacje o wysyłce (mogą potrzebować dodatkowej uwagi, ponieważ papierowe kwiaty są kruche) itp. A co z niektórymi wspominającymi, że papier pochodzi z recyklingu ? Może Twoi klienci są bardzo świadomi swojego wpływu na środowisko i dbają o takie szczegóły
Czy ktoś też może wypożyczyć kwiaty?
A co, jeśli dołączysz kilka referencji? Może zaprojektowałeś papierowe kompozycje kwiatowe na wesela znajomych.
Widzisz, dokąd zmierzam? Musisz przeprowadzić badania, zanim przejdziesz do projektowania witryny.
- Jak wyglądają konwersje?
Czy mówimy o rejestracji na kurs, zakupie produktu, subskrypcji newslettera?
W przypadku poniedziałku możesz łatwo obliczyć ich konwersje ze strony głównej. 
Główna konwersja jest widoczna po wezwaniu do działania „Rozpocznij”, które znajduje się tuż nad zakładką, pośrodku.
Kolejną mikrokonwersją jest rejestracja na konferencję, co widać po komunikacie w lewym górnym rogu.
Kolejną mikrokonwersją jest „Sprzedaż kontaktowa”.
A co z Twoją witryną, czy istnieje główna konwersja? Czy są jakieś drugorzędne?
- Jak wygląda podróż klienta?
Mapa podróży klienta to wizualna reprezentacja ścieżki, jaką odwiedzający przechodzi przez Twoją witrynę od wejścia, aż do osiągnięcia pożądanego celu i opuszczenia.
Customer journey map powinna zawierać takie informacje, jak odwiedzane strony i w jakiej kolejności, kroki potrzebne do osiągnięcia celów przez odwiedzającego witrynę, punkty interakcji między Twoją firmą a odwiedzającymi witrynę (formularze, czat itp.), potencjalne punkty tarcia.
Podróż klienta nie jest ustalona. Zaczynasz od założenia, a po drodze dostosowujesz. Możesz użyć narzędzi, takich jak Google Analytics, aby analizować zachowanie witryny i dokonywać optymalizacji na podstawie rzeczywistych spostrzeżeń.
2. Definiowanie mapy witryny internetowej 
Źródło
Teraz, gdy podróż klienta jest jasna, czas stworzyć mapę witryny. Mapa witryny witryny służy do ustalenia architektury informacji witryny i wyjaśnia relacje między różnymi stronami.
Możesz tworzyć mapy witryn w narzędziach od Excela po Figma.
3. Tworzenie treści 
Skoro struktura serwisu jest już ustalona, czas na tworzenie treści dla poszczególnych stron.
Oto kilka najlepszych praktyk dotyczących copywritingu:
- Używaj słów i pojęć znanych Twoim idealnym użytkownikom;
- Nie idź z puchem i żargonem;
- Staraj się komunikować tak, jak podczas normalnego spotkania twarzą w twarz. W ten sposób wywołasz poczucie znajomości;
- Pisz w czasie teraźniejszym i unikaj strony biernej;
- Zawsze sprawdzaj swoją czytelność. W tym celu możesz użyć narzędzi takich jak Readable .
- Przetestuj swoje nagłówki z przyjaciółmi, nieznajomymi, kolegami. Jak ujął to David Ogilvy:
„Średnio 5 razy więcej osób czyta nagłówek, niż czyta kopię treści. Kiedy napisałeś swój nagłówek, wydałeś osiemdziesiąt centów ze swojego dolara”.
Oznacza to, że nagłówki w witrynie są bardzo ważne.
Postaraj się zoptymalizować treść pod kątem określonych słów kluczowych odpowiednich dla odbiorców (SEO). Możesz skorzystać z narzędzi takich jak Google trends (bezpłatny), Ubersuggest (bezpłatny) lub Ahrefs (płatny).
- Skorzystaj z frameworka AIDA copywriting.
A – Uwaga : twórz treści, które przykuwają uwagę, wzbudzają ciekawość i przekonują odbiorców, że powinni dowiedzieć się więcej o Twojej marce.
I – Zainteresowanie : daj odwiedzającym powód, aby pozostać zaangażowanym. Kluczem tutaj jest sprawienie, aby problem był osobisty, tak aby rozmawiać tylko z potencjalnym klientem i nikim innym.
D – Desire : tutaj pokazujesz odwiedzającym Twoją stronę główną, w jaki sposób Twoja oferta zapewnia rozwiązanie ich problemu/bólu. Tutaj możesz zacząć wyjaśniać cechy swojego produktu, koncentrując się na tym, jak te funkcje mogą poprawić ich życie.
A – Działanie : teraz nadszedł czas, aby przekonać potencjalnych klientów do działania: kup, zasubskrybuj, pobierz gratis, rozpocznij okres próbny itp.
4. Tworzenie wizualnej marki
Ten krok nie musi być zawsze twoim czwartym krokiem. Możesz zacząć z tym jeszcze wcześniej.
Identyfikacja wizualna odnosi się do sposobu, w jaki kształtujesz postrzeganie swojej marki.
To cały proces sam w sobie.
Tutaj będziesz musiał:
- Określ, jak powinna wyglądać Twoja grafika . Wykorzystasz kształty, grafikę 3D, ilustracje?
Źródło
- Zdefiniuj typografię swojej witryny ;
Źródło
- Wybierz paletę kolorów . Z palety kolorów możesz przejść do przewodnika po stylu, w którym możesz określić kolory łączy, nagłówków, przycisków, tła itp. do tego celu możesz użyć narzędzi, takich jak koło kolorów Adobe .
Źródło
- Wybierz obrazy , które opowiadają historię Twojej marki;
Źródło: https://convertsquad.com/blog/
- Zaprojektuj swoje logo
Źródło
- Przygotuj aktywa fizyczne (opakowanie produktów itp.).
Źródło
Większość powyższych elementów można wykorzystać do stworzenia moodboardu. Kiedy zbierzesz swoje czcionki, grafikę, kolory w moodboardzie, będziesz w stanie lepiej zrozumieć ogólną wizję nastroju na stronie. Jaki będzie twój ogólny ton i głos: jasny czy ciemny? Formalne czy zabawne? 
Źródło
5. Szkielet 
Źródło
Modele krawędziowe to szkice strony internetowej lub aplikacji. Możesz je narysować ręcznie, stworzyć w Google Docs, Sketch lub Figma , w zależności od złożoności Twojej witryny. Model szkieletowy służy do układania treści i funkcji na stronie. Powinno to informować projektanta, gdzie powinien umieścić wideo, obrazy, nagłówki, bloki treści, przyciski itp. Przed przystąpieniem do projektowania dobrze jest użyć modeli szkieletowych, ponieważ pozwalają one na większą elastyczność. Łatwiej jest zmienić strukturę makiety niż gotowej strony internetowej.
6. Projekt strony internetowej 
Źródło
Teraz rozmawiamy o biznesie!
Mamy już treść, makiety, elementy wizualne, teraz czas zabrać się do pracy.
Jak wspomniano w tytule, nie musisz być projektantem stron internetowych ani maniakiem kodu, aby stworzyć stronę internetową. Istnieje wiele narzędzi, które pomogą Ci zaprojektować stronę internetową bez kodu. Nazywają się one Kreatorami Stron.
Większość z nich pozwala dostosować każdy cal projektu i sprawić, by był responsywny.
Wewnątrz WordPressa możesz na przykład skorzystać z naszego własnego kreatora Colibri lub Elementora. Poza WordPressem bardzo popularne są Wix i Squarespace. Narzędzia te mogą dostarczyć szablony, które możesz wzbogacić, dodając własne sekcje, wizualizacje i zawartość.
Teraz, jeśli Twój projekt wymaga pewnych animacji, efektów, może być konieczne dodanie kodu.
7. Testowanie
Ok, załóżmy, że Twoje treści i wizualizacje są gotowe. Twoja praca nie jest jeszcze gotowa. Czas upewnić się, że wszystko działa: nie masz żadnych linków prowadzących donikąd (czyli uszkodzonych linków lub błędów 404), że wszystkie przyciski i formularze działają, że strona wygląda dobrze na większości przeglądarek i urządzeń.
Teraz, przed startem, można było trochę przetestować, jak Twoja strona jest postrzegana przez osoby z zewnątrz. W ten sposób unikniesz przyłapania się na własnych uprzedzeniach. W tym celu możesz przeprowadzić proste badanie użytkowników: 5-sekundowy test . Jest to metoda, która pomaga mierzyć pierwsze wrażenie, jakie użytkownicy uzyskują w ciągu pierwszych pięciu sekund od wyświetlenia strony głównej, na przykład
8. Uruchom
Teraz, po uruchomieniu, wystarczy nacisnąć przycisk publikowania i gotowe. Nie, musisz stworzyć trochę szumu, uruchomić kampanie PR, zrobić okrzyk w mediach społecznościowych, aby ludzie wiedzieli, że jesteś poza domem!
I to jest opakowanie, ludzie. Teraz masz właściwe kroki w procesie projektowania stron internetowych.
Miłego budowania stron internetowych!
Jeśli podobał Ci się ten artykuł i chcesz dowiedzieć się więcej o tym, jak zaprojektować witrynę WordPress , zasubskrybuj kanał Colibri na Youtube i śledź nas na Twitterze i Facebooku!