Udany projekt web design wymaga dużo pracy przed wpisaniem linii kodu. Zanim zaczniesz projektować lub budować witrynę, musisz wiedzieć, co musi osiągnąć, kim są interesariusze i co musisz zrobić, aby odnieść sukces.

Dzisiaj chcę zachęcić Was do poświęcenia trochę czasu na przygotowanie się przed rozpoczęciem kodowania nowego projektu. W tym poście przyjrzymy się niektórym zadaniom, które musisz wziąć pod uwagę, zanim zaczniesz projektować i budować witrynę, niezależnie od tego, czy jest to witryna dla klienta, pracodawcy, czy nawet Ciebie.

Przejdziemy przez:

  • Jak stworzyć zespół.
  • Planowanie i komunikacja (w tym zatwierdzenie projektu)
  • Tworzenie środowiska programistycznego i ewentualnie strony teaserowej lub strony, z uwzględnieniem SEO
  • Identyfikacja celów i odbiorców witryny
  • Planowanie i tworzenie/pozyskiwanie treści w celu osiągnięcia tych celów
  • Zaprojektowanie interfejsu, który pasuje do Twoich celów i działa dla Twoich odbiorców
  • Projektowanie wizualne i branding

Bez dokładnego rozważenia tego wszystkiego przed rozpoczęciem, Twój projekt nie osiągnie swojego potencjału. Więc postępuj zgodnie z tym przewodnikiem, a Twoja strona będzie bardziej skuteczna niż gdybyś po prostu orał dalej.

Budowanie zwycięskiego zespołu

Żaden projekt nie byłby sukcesem bez ludzi, którzy by nad nim pracowali. Możesz mieć szczęście, że jedziesz lub pracujesz jako część zespołu, lub możesz pracować sam. Jeśli pracujesz sam nad projektem klienta, nadal jesteś w zespole – twój Klient jest częścią zespołu i musisz uzyskać jego wkład (a to nie tylko oznacza zatrudnienie Ciebie i opłacenie rachunku!).

Twój zespół może ewoluować w miarę postępów w projekcie, a dodatkowi członkowie zespołu przychodzą i odchodzą, gdy pojawiają się określone wymagania.

Zanim zaczniesz, musisz zidentyfikować kluczowe osoby, których potrzebujesz jako część zespołu, w tym osoby wykonujące pracę, a także inne zainteresowane strony zainteresowane witryną. Ważne jest, aby zidentyfikować wszystkich interesariuszy przed rozpoczęciem lub rzeczy mogą pójść źle. Kiedyś pracowałem nad projektem klienta, który był zatwierdzany przez kierownika projektu na każdym etapie, ale kiedy przyszedł do uruchomienia, Dyrektor zarządzający wyciągnął wtyczkę. Gdybym wiedział, że kierownik projektu nie ma pełnej władzy, byłbym w stanie lepiej komunikować się z dyrektorem zarządzającym i uniknąć nieudanego rezultatu.

WPMU DEV team
Możesz nie mieć najbardziej doświadczonego zespołu WordPress na świecie pracującego nad Twoim projektem, ale jeśli użyjesz naszych motywów i wtyczek, będzie tak, jakbyś miał

Być może nie wiesz, kogo Twój zespół powinien teraz uwzględnić, ale po ustaleniu celów i planu projektu może być konieczne zrekrutowanie większej liczby osób, w tym projektantów, programistów, specjalistów UX, marketerów i/lub twórców treści.

Pomyśl o ludziach, którzy będą pracować nad Twoją witryną po uruchomieniu. Mogą nie być zaangażowani w tworzenie witryny, ale ponieważ będą nią zarządzać po zakończeniu kodowania, ich wkład jest ważny. Muszą być wygodne w użyciu WordPress do zarządzania i aktualizacji witryny w czasie, w tym wszelkich dostosowań, które wprowadzasz na ekranach administratora lub niestandardowych treści, takich jak niestandardowe typy postów. Uwzględnij je we wszelkich decyzjach dotyczących dostosowywania WordPress w stosownych przypadkach i upewnij się, że interfejs użytkownika działa dla nich.

Określenie Celów Projektu

Większość klientów, którzy przychodzą do mnie po stronę internetową, nie włożyła ogromnej ilości myśli w to, co ich strona internetowa faktycznie musi osiągnąć. Po prostu wiedzą, że strona internetowa jest czymś, czego potrzebują i chcą, żebym to dla nich zrobił.

Ale bez określonego zestawu celów strona internetowa nie jest dobrą inwestycją czasu lub pieniędzy. Poświęć czas na samym początku, aby określić, co strona musi osiągnąć. Zadaj klientowi, menedżerowi lub sobie kilka pytań:

  • Kto jest grupą docelową tej strony?
  • Co mają robić na stronie?
  • Co chcą robić na stronie? (to nie zawsze jest to samo, co będziesz chciał, aby zrobili!)
  • W jaki sposób pomoże to osiągnąć szersze cele organizacyjne?
  • Jak to pasuje do innych działań zarówno online, jak i offline, takich jak media społecznościowe, reklama, marketing i inna komunikacja?

Posiadanie jasnego zestawu celów nie jest tylko dla witryn zaprojektowanych do zarabiania pieniędzy. Każda strona internetowa jest tworzona z jakiegoś powodu i jeśli twoja ma wspierać społeczność, komunikować się z publicznością lub cokolwiek innego, pomaga, jeśli wiesz, co próbujesz osiągnąć.

Czasami przekonasz się, że różni interesariusze mają różne cele. Spróbuj pogodzić je w miarę możliwości i uzgodnić, jakie są nadrzędne cele przed rozpoczęciem. Jeśli uważasz, że konkurencyjne priorytety mogą powodować problemy podczas budowania witryny, uzyskaj jak najwięcej na piśmie z góry.

Planowanie i komunikacja projektu

Teraz, gdy wiesz, co twój projekt musi osiągnąć, nadszedł czas, aby komunikować się z ludźmi i zacząć planować.

Rzeczy, które musisz zaplanować, obejmują:

  • Co trzeba robić, kiedy i przez kogo
  • Wszelkie dodatkowe osoby, które musisz dołączyć do zespołu
  • Kto jest odpowiedzialny za zatwierdzenie projektu i na jakich etapach
  • Ile będzie kosztował projekt (jeśli dotyczy)
  • Jak zostanie dokonana płatność (jeśli dotyczy) i co się stanie, jeśli nie jest
  • Co się stanie, jeśli zakres lub szczegóły projektu ulegną zmianie w trakcie realizacji projektu, w tym plany awaryjne
  • Co klient musi zrobić, aby projekt odniósł sukces i kiedy
  • Co stanie się po zbudowaniu strony – kto będzie ją aktualizował i zarządzał oraz jak będzie pasować do innych działań, takich jak marketing w mediach społecznościowych
  • Jakie szkolenia będą potrzebne dla klienta lub kierownika budowy, aby pomóc mu zarządzać witryną po uruchomieniu
  • Jakie zaangażowanie będziesz mieć W przeglądanie witryny po uruchomieniu, kiedy i jak to się stanie

Elementy te najprawdopodobniej zostaną podzielone na trzy dokumenty: umowę, specyfikację projektu i plan projektu. Uważam, że pomocne jest oddzielenie tych trzech rzeczy, ale łatwiej będzie połączyć specyfikację projektu i plan. Zawierać podsumowanie najwyższego poziomu specyfikacji projektu w umowie, aby uniknąć wszelkich problemów umownych po drodze.

Musisz przekazać wszystkie te rzeczy odpowiednim osobom, z awarią komunikacji, która może wyglądać tak:

  • Klient / kierownik projektu: koszty, proces zatwierdzania, zaangażowanie w projekt, plany awaryjne,plany po uruchomieniu.
  • Twórcy treści i menedżerowie witryn: co będzie zawierać witryna, kto będzie ją dodawać oraz jak będzie aktualizowana i zarządzana po uruchomieniu. Może być konieczne upewnienie się, że ta grupa przechodzi szkolenie, jeśli nie jest zaznajomiona z WordPress.
  • Zespół ds. projektowania i rozwoju strony: cele i terminy projektu, konkretne zadania i terminy, nieprzewidziane okoliczności i to, co muszą zrobić, jeśli wszystko nie pójdzie zgodnie z planem.

Środowisko Programistyczne

Zanim zaczniesz projektować i rozwijać witrynę, musisz skonfigurować środowisko programistyczne, które działa dla Twojego zespołu (i dla Klienta, jeśli będzie w to zaangażowany). Rozważ:

  • Środowisko, które uzgodniłeś z klientem lub kierownikiem projektu dla aktywnej witryny (np. samodzielny WordPress lub Multisite)
  • Niezależnie od tego, czy będziesz pracować z hostingiem klienta, czy z własnym
  • Czy zespół jest współlokowany
  • Narzędzia do projektowania i rozwoju, z którymi twój zespół ma doświadczenie
  • Wszelkie nowe narzędzia projektowe i / lub programistyczne, które pomogą w tym projekcie i których Twój zespół będzie musiał się nauczyć
  • Względy bezpieczeństwa.

Jeśli pracujesz z zespołem zdalnym, potrzebujesz środowiska programistycznego, do którego każdy może mieć dostęp w czasie rzeczywistym i używać go, aby być na bieżąco z postępami. Polecam użycie narzędzia kontroli wersji, takiego jak GitHub, do zarządzania tworzonym kodem i synchronizacji wszystkiego.

Jeśli twój zespół jest współlokowany, możesz pracować na jednej stronie programistycznej przechowywanej na tym samym serwerze, chociaż możesz nie zdecydować się (przynajmniej na początku), jeśli poszczególni członkowie zespołu pracują nad różnymi częściami projektu. Upewnij się, że jakiekolwiek narzędzie, którego używasz, uniemożliwia ludziom edytowanie plików, nad którymi pracuje już inna osoba. GitHub nadal będzie pomocny we współlokowanym środowisku, ponieważ pomoże Ci śledzić kod w miarę jego rozwoju i powrócić do wcześniejszej wersji, jeśli zajdzie taka potrzeba.

Będziesz także musiał określić, kto będzie odpowiedzialny za które części bazy kodu, aby upewnić się, że nie ma powielania wysiłków, a jeśli zespół nie współpracował wcześniej, może być konieczne uzgodnienie praktyk kodowania (które będą oczywiście obejmować standardy W3C i standardy kodowania WordPress).

Holding Site lub Teaser Page

Jeśli budujesz zupełnie nową witrynę, a nie zastępujesz lub nie przebudowujesz istniejącej witryny, podczas tworzenia nowej witryny może być konieczne utworzenie witryny przytrzymującej lub strony zwiastunowej.

Z punktu widzenia SEO posiadanie aktywnej nazwy domeny przed uruchomieniem i posiadanie co najmniej niewielkiej ilości odpowiednich treści ma sens. Strona zwiastunowa zachęci również ludzi do powrotu, gdy strona będzie gotowa, a Ty możesz być w tym tak kreatywny, jak chcesz!

Teaser strony nie muszą być nudne – mogą stworzyć poczucie tajemnicy lub opowiedzieć historię. Istnieje wiele motywów i wtyczek, które mogą pomóc ci zbudować stronę zwiastunową, w tym naszą Z Góry.

Upfront theme builder
Upfront to świetne narzędzie do tworzenia strony coming soon

Planowanie Treści

Kuszące jest zanurzenie się prosto w projekt wizualny lub kod. Rzeczywiście, często zwraca się do mnie potencjalny klient, mówiąc “Chcę stronę, która wygląda tak” z linkiem do strony konkurenta.

Ale po uzgodnieniu celów następnym krokiem jest określenie, co Twoja witryna będzie musiała uwzględnić, aby osiągnąć te cele. Innymi słowy, treść.

Treść to nie tylko strony i tekst: może obejmować interakcje, media i procesy. Jeśli Twoja witryna jest przeznaczona do sprzedaży produktów, twój główny typ treści prawdopodobnie będzie odnosił się do tych produktów i będzie zawierał opisy, obrazy, filmy, recenzje i inne. Jeśli Twoja witryna jest witryną z wiadomościami, większość treści będą artykuły, zdjęcia i filmy. Jeśli celem twojej witryny jest pomoc społeczności w interakcji ze sobą, Twoją treścią będą Strony i elementy strony, które to umożliwiają.

Praca, którą wykonałeś przy określaniu swoich celów, pomoże Ci określić, jakich treści potrzebujesz. Twoje treści będą zależeć nie tylko od twoich celów, ale także od charakteru odbiorców: czynniki takie jak wiek, nawyki przeglądania, oczekiwania i poziom umiejętności (w tym wszelkie szczególne problemy z dostępnością) będą miały wpływ na to, jakie treści dodajesz i jak są prezentowane.

Planowanie struktury i interfejsu użytkownika

Gdy już wiesz, jakie będą Twoje treści, następnym krokiem jest określenie, w jaki sposób należy je uporządkować. Będzie to częściowo oparte na logicznej strukturze, a także (co ważne) na tym, co działa dla użytkowników i ułatwia ludziom poruszanie się po stronie.

Przed rozpoczęciem tworzenia treści lub tworzenia stron określ strukturę witryny i jej dopasowanie do używanego systemu zarządzania treścią (na przykład, jeśli chcesz utworzyć wiele typów treści lub szablonów). Pomyśl o doświadczeniu użytkownika i o tym, w jaki sposób interfejs użytkownika (UI) pomoże ludziom znaleźć treści i skutecznie poruszać się po twojej witrynie. Ponownie, świadomość natury odbiorców poinformuje o tym, ponieważ różni odbiorcy mogą mieć różne oczekiwania wobec interfejsu użytkownika lub łatwiej poruszać się po mniej tradycyjnych strukturach i interfejsach. Jeśli twoja struktura i interfejs nie są w 100% łatwe i logiczne do naśladowania, musi to być dobry powód i poparte testami użytkowników.

Możesz eksperymentować z tym w pewnym stopniu. Na przykład nawigację w witrynie można łatwo zmienić za pomocą interfejsu menu WordPress lub widżetów. Słuchaj użytkowników testowych i zmieniaj rzeczy, jeśli nie działają.

WordPress menus admin screen
Użyj ekranu administratora menu lub modułu dostosowania, aby dostosować strukturę witryny zgodnie z opiniami użytkowników

Testy użytkowników na wczesnym etapie rozwoju pomogą Ci sprawdzić, czy Twoja treść i struktura są przyjazne dla użytkownika i pomagają użytkownikom osiągnąć ich cele w witrynie (a Ty lub twój Klient osiągniesz swoje).

Branding i Design

Wreszcie dochodzimy do kroku, który tak często jest stawiany na pierwszym miejscu przez osoby planujące swoją stronę internetową. Widzą kilka witryn, które lubią, myślą, że lubię jedną z nich” i zatrudniają projektanta stron internetowych.

Ale twierdzę, że projekt wizualny jest tak naprawdę ostatnim etapem przed rozpoczęciem kodowania, z trzech powodów:

  • Wcześniejsze kroki poinformują projekt i uczynią go bardziej skutecznym
  • Jeśli korzystasz z nowoczesnych technik programistycznych, prawdopodobnie będziesz projektować w przeglądarce
  • Jeśli korzystasz z mobilnego podejścia (które polecam), projekt będzie podyktowany UX i treścią, a nie wypełnianiem hektarów miejsca na ekranie pulpitu

Oto, w jaki sposób kroki, które już wykonałeś, pomogą Ci zaprojektować wizualnie i uczynić go bardziej skutecznym:

  • Znajomość celów pomoże Ci stworzyć projekt, który pozwoli Twojej witrynie osiągnąć te cele i będzie spójny z innymi działaniami online
  • Znajomość klienta pozwoli Ci lepiej zrozumieć jego markę, dzięki czemu Twój projekt będzie bardziej spójny z tym
  • Znajomość odbiorców pomoże Ci określić ich oczekiwania wobec twojego projektu i to, co udowodniono, że działa dla tego typu odbiorców
  • Komunikacja z zainteresowanymi stronami i zespołem pomoże ludziom zrozumieć, w jaki sposób projekt pasuje do szerszych celów i sprawi, że strona będzie bardziej efektywna
  • Wiedza o zawartości witryny pomaga zaprojektować układ, który sprawia, że zawartość świeci (na przykład witryna tekstowa będzie wymagała zupełnie innego projektu niż witryna złożona z filmów lub interakcji)
  • Uzgodniona struktura pomoże Ci dowiedzieć się, jakie sekcje będzie miała witryna i gdzie konkretne projekty będą miały zastosowanie do różnych typów stron lub elementów
  • Planowanie interfejsu użytkownika oznacza, że ogólny projekt zapewni najlepsze wrażenia użytkownika i pomoże użytkownikom w jak najlepszym korzystaniu z witryny

Mocno wierzę, że projektowanie stron internetowych nie polega na tworzeniu czegoś, co wygląda ładnie: chodzi o stworzenie projektu, który jest skuteczny w zapewnianiu wspaniałego doświadczenia użytkownika, komunikowaniu Twojej marki odwiedzającym i pomaganiu Twojej witrynie osiągnąć jej cele. Dobrze wyglądający projekt może być częścią tego, ale nie powinien być celem samym w sobie.

Oprócz zalet wykonania wszystkich tych innych kroków przed rozpoczęciem projektowania witryny, fakt, że prawdopodobnie będziesz projektować w przeglądarce, oznacza również, że najlepiej pozostawić to na późnym etapie planowania witryny. Możesz nie używać kodu, który trafi do Twojej gotowej witryny, ale będziesz używał jakiejś formy kodu. Kiedyś stworzyć działający prototyp witryny w statycznym HTML i CSS, a następnie przekonwertować go na motyw po tym, jak klient go zatwierdził: ale w dzisiejszych czasach szybciej odkrywam motyw prototypowy na początek. To może zaoszczędzić dużo czasu i jeśli jesteś przyzwyczajony do pracy z WordPress, prawdopodobnie znajdziesz go szybciej w pierwszej kolejności. Ale w tym miejscu będziesz musiał powtórzyć pracę, jeśli potrzebne są zmiany, więc warto być tak dobrze przygotowanym, jak to możliwe.

Jeśli wcześniej nie próbowałeś projektować w przeglądarce i nadal używasz szkieletów i plików PSD, warto poznać korzyści płynące z przejścia na używanie kodu w procesie projektowania.

Największą korzyścią dla mnie jest responsywny design, który tak naprawdę sprawił, że projektowanie w przeglądarce wystartowało. Nie możesz już przewidzieć, jaki rozmiar ekranu będzie wyświetlać nawet spora mniejszość użytkowników, więc tworzenie statycznej makiety ekranu o określonej szerokości nie będzie odzwierciedlać doświadczenia większości odwiedzających.

WordPress theme directory - responsive themes
Katalog motywów zawierał setki darmowych responsywnych motywów, które mogą spełnić twoje potrzeby projektowe

Poza tym odkryłem, że projektowanie w przeglądarce ma również ogromne korzyści w zakresie reakcji klienta. W czasach, kiedy dostarczałem klientom statyczną makietę, zawsze (i mam na myśli zawsze) poprosił o zmiany w tym projekcie. Gdy przeszliśmy do fazy alfa rozwoju witryny, na ogół poprosili o więcej zmian w projekcie, często odwracając to, o co prosili na etapie makiety. Innymi słowy, gdybym pokazał im projekt w działającym prototypie ich witryny, te dwa zestawy zmian nie byłyby potrzebne.

Klienci kochają to, gdy mogą zobaczyć i wejść w interakcję z działającym prototypem swojej witryny. Daje im to znacznie lepsze wyczucie tego, co ostatecznie otrzymają, niż cokolwiek na papierze. Są znacznie mniej skłonni do żądań zmian. Oszczędza mi to dużo pracy i poprawia relacje z klientami na tym kluczowym etapie projektu. Jeśli jeszcze tego nie wypróbowałeś, polecam!

Nareszcie: Starting to Code

Teraz dokładnie wiesz, co Twoja strona musi osiągnąć, kim są jej odbiorcy i jak ją zbudujesz. Być może już zacząłeś kodować, jeśli projektowałeś w przeglądarce.

Coda
Po zakończeniu planowania możesz uruchomić edytor kodu

Teraz jest czas, aby rozpocząć poważną działalność kodowania witryny. Po wykonaniu wszystkich powyższych kroków kodowanie będzie szybsze i łatwiejsze, a uzyskanie akceptacji klienta na każdym etapie będzie łatwiejsze.

Planowanie i przygotowanie to sukces

Tworzenie strony internetowej nie jest czymś, co można po prostu zanurzyć. Ponieważ konkurencja o uwagę użytkowników staje się coraz bardziej ostra, ważne jest, aby każda witryna, którą budujesz, czy to dla siebie, pracodawcy, czy klienta, była tak skuteczna, jak to możliwe, w przyciąganiu odbiorców i zachęcaniu ich do zrobienia czegoś, gdy znajdą się na twojej stronie.

Jeśli wykonasz powyższe kroki, będziesz miał solidny proces planowania do naśladowania przed napisaniem linii kodu, co sprawi, że kodowanie będzie łatwiejsze i bardziej wydajne, ponieważ będziesz miał mniej przeróbek. Sprawi również, że produkt końcowy będzie bardziej efektywny i łatwiejszy w utrzymaniu i rozwoju po uruchomieniu.

Czego nigdy nie przegapisz przed rozpoczęciem tworzenia strony internetowej? Dajcie nam znać w komentarzach poniżej!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…