Projektowanie stron www to proces, praca która w perspektywie czasu może przynieść wymierne zyski. Nie deleguj jej poprzez abdykację. Poświęć temu procesowi chwilę czasu a zobaczysz, że osiągniesz dzięki niej więcej, niż się spodziewałeś.
Etapy projektowania stron www
Projektowanie strony www wielu osobom kojarzy się z pracą grafika, który przedstawi klientowi makietę strony, którą później zamieni w funkcjonującą stronę www. Często spotkać się można z ofertami firm tworzących strony internetowe, w których oferowane jest stworzenie strony w trzech wersjach, Ty jako klient masz wybrać jedną spośród nich, tę która najbardziej Ci się podoba. Na takiej podstawie powstaje dobrze wyglądająca strona internetowa , do której trzeba dorzucić treść i gotowe.
Dobrze zaprojektowana strona internetowa ma nie tylko wyglądać. Po pierwsze ma za zadanie spełniać stawiane jej wymagania projektowe. Wymagania te należy przedstawić zarówno programiście jak i grafikowi, którzy to mają za zadanie stworzyć produkt wnoszący pewną wartość do Twojej firmy.
Projektowanie stron www – etap 1:
Po pierwsze trzeba określić cel jaki strona ma spełniać. Może to być pozyskanie danych potencjalnych klientów czy przedstawienie oferty. Po wtóre należy określić to w jaki sposób technicznie chcemy ten cel osiągnąć. Czy ma to być pozyskiwanie adresów email czy numerów telefonów. Może ma to być przedstawienie pełnej oferty usług bądź prowadzenie dziennika zrealizowanych projektów.
Projektowanie stron www – etap 2:
Kiedy już wiemy co i jak mamy osiągnąć, należy zastanowić się nad tym jakiego sprzętu musimy użyć. Żeby zrealizować projekt. Może hosting stron internetowych okaże się wystarczający a może wymagane będzie użycie serwera w chmurze.
Projektowanie stron www – etap 3:
Kiedy już wiemy co chcemy osiągnąć, jak chcemy to osiągnąć i wiemy jakie mamy ograniczenia techniczne, należy przejść do projektowania części graficznej. Tak, dopiero po ustaleniu wszystkich powyższych a nie na samym początku jak to zazwyczaj ma miejsce.
Projektowanie stron www – etap 4:
Równolegle do grafika mogą zacząć się prace programisty, który wie co należy zrobić bo zostało to zaprojektowanie już na etapie projektu funkcjonalności i infrastruktury. Pracę programisty i grafika łączy się i otrzymuje gotowy projekt. Nie jest to jednak ostatni z etapów.
Projektowanie stron www – etap 5:
Kiedy już produkt będzie gotowy należy dokładnie sprawdzić czy spełnia on przedstawione mu wymagania. Czy infrastruktura działa jak należy, czy wszystkie funkcjonalności działają i czy projekt jako całość spełnia podstawowe wymagania jakie muszą spełniać dobrze napisane strony. Internetowe.
Projektowanie stron www – etap 6:
Kiedy faza testów przebiegnie pomyślnie następuje wdrożenie gotowego produktu. Jednak nadal nie jest to koniec procesu projektowania strony. Kiedy strona zaczęła działać, trzeba monitorować zachowanie użytkowników odwiedzających stronę i korygować ja tak, żeby w jak najwyższym stopniu spełniać założone cele biznesowe.
Określenie celów biznesowych w projekcie strony www
Projektowanie strony www należy zacząć od zastanowienia się w jakim celu ona w ogóle powstaje. Zastanów się co ma ona wnieść do Twojego biznesu. Czy w ogóle jest potrzebna. Jak ma udoskonalić działanie Twojej firmy.
Strona internetowa to podstawowe narzędzie do promocji Twojej firmy w internecie. Warto zadbać o to, żeby fundament działalności internetowej był wykonany tak, żeby łatwo było budować na nim dalsze elementy.
Zastanów się nad tym co chcesz osiągnąć poprzez stronę www. Czy ma to być wzrost sprzedaży. Może edukacja klientów, Może chcesz pozyskać dane kontaktowe. To co ma osiągnąć projektowana strona www zależy od Twoich wymagań.
To bardzo ważny etap projektowania. Jest pierwszy i od niego zależy to jak będzie wyglądał każdy kolejny etap. Zastanów się dobrze nad celem jaki chcesz osiągnąć.
Tworzenie strony internetowej po to żeby ją mieć to strata czasu i pieniędzy. Jeśli nie określisz celów biznesowych to nie będziesz w stanie określić tego czy strona działa tak jak trzeba bo nie będziesz wiedział jakie metryki należy badać.
Pamiętaj o tym, że każdy kolejny etap zależy od poprzedniego a co za tym idzie jeśli w dalszych etapach stwierdzisz, że założenie biznesowe trzeba zmienić to będziesz musiał także zmienić każdy kolejny krok. Poświęć chwilę na planowanie.
Określenie funkcjonalności na podstawie celów biznesowych
Kiedy już określisz cel następuje etap przełożenia celów na rzeczywiste funkcje Twojej strony www. Przykładowo jeśli Twoim celem jest pozyskanie adresu email od osoby odwiedzającej stronę to funkcjonalnością, która ten cel spełnia może być wyskakujące okienko zachęcające do zapisu na newsletter.
Etap ten najlepiej realizować razem z grafikiem i programistą. Zaoszczędzi Ci to czasu na tłomaczenie następnie Twoich pomysłów osobom, które będą je realizować. Innym powodem dla którego warto określać funkcjonalności z zespołem jest fakt, że zarówno programista jak i grafik pomogą Ci w znalezieniu najlepszych rozwiązań spełniających cele z poprzedniego etapu. Jeśli współpracujesz z doświadczonym zespołem możesz się spodziewać tego, że nie popełnisz błędów na tym etapie bo doświadczeni pomocnicy wyłapią je już na tym etapie.
Ważne jest to, żeby zarówno graficy jak i programiści znali dobrze projekt funkcjonalności. Zaoszczędzi to czasu później przy etapach ich pracy kiedy to wizja jednego i drugiego co do finalnego produktu może się różnić i w efekcie czego wystąpią opóźnienia.
W praktyce programista i grafik może być jedną osobą. Może też tak się zdarzyć, że obie te osoby reprezentowane będą przez managera projektu. To, czy będziesz rozmawiał bezpośrednio z grafikiem i programistą czy z ich reprezentantem jest mniej ważne niż to, żeby projekt był współtworzony z firmą, która go wykona a nie istniał wyłącznie w Twojej głowie.
Dobra komunikacja to podstawa udanej współpracy. Zaoszczędzi to czasu i nerwów, które mogą się pojawić kiedy otrzymasz produkt, który nie będzie spełniał Twoich wymagań funkcjonalnych tylko takich jakie zrozumiał zespół tworzący projekt strony www dla Ciebie.
Projekt infrastruktury na podstawie wymagań
Kiedy programista otrzyma wytyczne co do funkcjonalności, może na ich podstawie zaprojektować infrastrukturę potrzebną do utrzymania Twojej strony. Możesz zastanawiać się nad tym po co ten etap jeśli do utrzymania strony www potrzebuję domenę i hosting. Nie ma tu niczego do planowania.
Podchodząc poważnie do projektu należy zastanowić się nad tym jaki ruch na stronie przewidujemy. Czy będzie do 100 wejść dziennie czy 100 000. W pierwszym przypadku każdy z dostępnych na rynku hostingów powinien dać sobie radę z takim ruchem. W przypadku drugim należy dobrze przemyśleć to, jak ma wyglądać infrastruktura. Jak zapewnić funkcjonowanie strony przy dużym ruchu. Jak zoptymalizować koszty przy zmiennym natężeniu ruchu.
Jeśli w projekcie funkcjonalności zdecydowałeś o zastosowaniu niestandardowych rozwiązań trzeba się również liczyć z tym, że standardowy hosting to za mało. Będziesz potrzebował infrastruktury, która pozwoli na zainstalowanie dodatkowego wymaganego oprogramowania. Na zwykłym hostingu używasz tego co dostaniesz. Możesz poprosić administratora o zainstalowanie dodatkowego oprogramowania ale nie masz pewności, czy twoja prośba będzie rozpatrzona pozytywnie.
Jeśli budujesz na przykład serwis internetowy z najnowszymi wiadomościami bądź oprócz strony dla firmy budujesz również narzędzie do kontaktów z klientem, które będzie kluczowe dla działania firmy to musisz rozważyć to, czy możesz pozwolić sobie na przerwy w działaniu strony. Może okazać się, że potrzebujesz rozwiązania w chmurze, które zapewnia stały dostęp. Nie możesz pozwolić sobie na godzinną przerwę w działaniu w środku dnia.
Jeśli infrastruktura będzie nie przemyślana, twoja strona www będzie zyskiwała na popularności a infrastruktura będzie coraz gorzej radziła sobie z obsługą to może poskutkować to tym, że klienci przestaną w ogóle używać powolnego serwisu i zapomną o Tobie.
Projekt graficzny strony www
Projekt graficzny serwisu www można podzielić na dwa etapy. Pierwszy z nich to makieta serwisu a drugi to kompletny projekt graficzny.
Makieta serwisu ma na celu przedstawienie układu strony. Pokazania togo w jaki sposób przedstawione będą na niej poszczególne funkcjonalności. Gdzie umieszczone będą przyciski powodujące określone akcje.Co i gdzie użytkownik będzie miał nacisnąć, przesunąć bądź wypełnić, żeby wykonać zadaną akcję.
Projekt interfejsu graficznego ma na celu uniknięcie sytuacji kiedy projekt funkcjonalności zakłada wiele przydatnych i innowacyjnych funkcji, które przez niezaplanowanie interfejsu są niedostępne dla użytkowników, nikt nie może ich znaleźć na stronie.
Projekt grafiki można zacząć dopiero kiedy makieta całego serwisu jest gotowa, kiedy grafik zna już wszystkie funkcjonalności i kiedy gotowe są teksty na stronę. Tak, treść strony musi być przygotowana przed projektem graficznym. Jeśli pozwolimy grafikowi wykonać swoją pracę i założymy, że teksty napisze się później to możemy w rezultacie otrzymać piękny projekt graficzny, który na przykład przewiduje ofertę składającą się z sześciu elementów. Nasza oferta może zawierać tylko trzy a strona wygląda kiepsko z trzema.
Strona internetowa po pierwsze ma za zadanie w czytelnej formie przedstawić informacje grupie docelowej. Nie można jednak dopuścić do tego, żeby strona wyglądała kiepsko. Zaowocuje to tym, że użytkownicy będą ją opuszczać po kilku sekundach.
Należy pamiętać również o tym, żeby nie podchodzić do projektu strony zbyt emocjonalnie. Nie projektować jej dla siebie. Stronę internetową projektuje się tak, żeby spełniała cel biznesowy i była dostosowana do grupy docelowej.
-> Jeśli szukasz grafika polecam Firmę Moduł 🙂
Praca nad grafiką
Kiedy gotowy jest już projekt graficzny strony www należy przełożyć go na statyczną stronę. Co to znaczy? Z grafiki komputerowej należy zrobić dokument html, który można wrzucić na serwer www.
Projekt graficzny strony to jedno ale zrobienie z niego rzeczywistej strony to kompletnie odmienna sprawa. Projekt graficzny to przedstawienie tego, jak ma wyglądać strona. Nie nadaje się to jednak jeszcze do wrzucenia do internetu. Na podstawie projektu trzeba przygotować szablon strony.
W poprzednim kroku praca polegała na zaprojektowaniu wyglądu. W tym kroku należy zapewnić to, żeby strona działała na wszystkich dostępnych urządzeniach podłączonych do internetu. Trzeba przygotować dokument w oparciu o który programista stworzy działającą stronę www.
Etap ten w zależności od umiejętności wykonywany jest przez grafika bądź programistę. Wymaga znajomości technologii internetowych takich jak HTML, CSS i czasami JS. To na jego bazie programista wdroży funkcjonalności.
Praca programisty
Praca programisty i grafika może przebiegać współbieżnie ale tylko wtedy gdy podczas pracy nad projektem strony www nie ominęliśmy etapu projektowania funkcjonalności.
Programista na podstawie spisu funkcjonalności wydziela zadania do zrobienia i realizuje je, zaczynając od tych, które w ogóle nie wymagają projektu graficznego. Są to zadania takie jak projekt bazy danych, połączenia z serwisami www, z których pobierane będą treści na stronę czy obsługa formularzy.
Następnie zajmuje się częścią, która związana jest z projektem graficznym ale nie jest to powiązanie ścisłe. Jeśli mamy na stronie elementy, które wymagają animacji czyli na przykład przesuwająca się na stronie galeria zdjęć to programista może zająć się pisaniem samej animacji, którą później połączy z grafiką.
Podczas pisania kodu ważne jest to, żeby pisać testy jednostkowe. To kod, który testuje silnik strony. Sprawdza czy wszystkie elementy działające na serwerze spełniają zadane im oczekiwania. To bardzo ważny krok w szczególności kiedy projektowana strona www będzie w przyszłości się rozwijać. Posiadanie testów zwiększa bezpieczeństwo tego, że przyszłe zmiany nie uszkodzą istniejących już rozwiązań. Gdyby tak się stało programista dowie się o tym poprzez sprawdzenie czy napisany przez niego kod nadal pasuje do napisanych wcześniej testów.
Na końcu łączy się projekt graficzny strony www razem z silnikiem strony napisanym przez programistę otrzymując gotowy produkt.
Nie jest to jednak jeszcze moment kiedy przedstawia się gotowe rozwiązanie właścicielowi produktu. Niezbędny jest kolejny krok.
-> Sprawdź nasze usługi tworzenia stron www
Testy integracyjne
W tym kroku tester otrzymuje listę wszystkich funkcjonalności serwisu i sprawdza je krok po kroku.
Należy przetestować stronę przy użyciu komputera, tabletu i telefonu w celu zapewnienia najwyższej jakości. Tester jest w stanie wykryć błędy w projekcie, które wymagają pracy zarówno programisty jak i grafika.
Zapewnienie działania na wszystkich urządzeniach wymaga dokładnego przeglądnięcia wszystkich podstron składających się na serwis internetowy.
Podczas pracy nad serwisem internetowym można również wprowadzić tak zwane testy automatyczne, Są to skrypty napisane przez programistę, które otwierają przeglądarkę internetową, odwiedzają stronę internetową i klikają we wszystkie dostępne przyciski sprawdzając czy strona zachowuje się tak jak założono. Tak samo jak testy jednostkowe jest to sposób na uniknięcie błędów przy rozwijaniu serwisu.
Testy integracyjne mają również za zadanie sprawdzenie czy ewentualne połączenia z serwisami zewnętrznymi działają poprawnie. Kiedy nasza strona zawiera na przykład kalkulator do obliczania rat kredytowych to niezbędne jest połączenie z serwisem bankowym w celu otrzymania danych. Tester podczas sprawdzania działania strony stara się takie połączenie popsuć. Jeśli mu się nie uda, znaczy to, że projekt jest gotowy do wdrożenia.
Wdrożenie
W tym etapie klient dostaje gotowy produkt. Od tej pory strona zaczyna istnieć w internecie. W zależności od wybranej infrastruktury, kod wgrywa się na jeden bądź wiele serwerów i cały serwis zaczyna być dostępny dla użytkowników.
Należy również pamiętać o poinformowaniu google i bing o istnieniu strony. Robi się to przez narzędzia dla webmasterów obu wyszukiwarek. Najlepszym rozwiązaniem jest wygenerowanie mapy strony w postaci pliku xml i dostarczenia go obu wyszukiwarkom. Plik taki powinien być generowany automatycznie, tak żeby wszystkie zmiany w treści strony bądź dodane podstrony były automatycznie widziane przez google i bing.
Jeśli Twoja firma ma profile w portalach z wizytówkami firm bądź prowadzisz strony na portalach społecznościowych, koniecznie uaktualnij je o adres nowo powstałej strony. Nie zapomnij także o promocji off line czyli dodaj adres strony na materiałach reklamowych.
Monitorowanie po wdrożeniu
Praca nad stroną www nie kończy się po wdrożeniu. Nie chodzi tu o dodawanie treści do strony. Tak jak w etapie projektu grafiki wspomniałem, projekt strony www nie powinien być tworzony wedle Twoich preferencji czy preferencji grafika tylko tak, żeby był dostosowany do grupy docelowej. Należy badać zachowanie ludzi na stronie i dostosowywać ją tak, żeby spełniała cel biznesowy.
Jeśli Twoim celem było pozyskiwanie numerów telefonów prospektów poprzez wyskakujące okienko to powinieneś mierzyć ile osób takie dane podaje. Ile osób wychodzi ze strony zanim takie okienko zobaczy. Jakie części strony najczęściej są oglądane przez ludzi zaraz przed opuszczeniem strony.
Kiedy już poznasz słabe strony projektu strony www, zmieniaj go. Modyfikuj stronę tak, żeby maksymalizować konwersję celu. Nie bój się tego, że zmiana koloru przycisku zaburzyła Twoją wizję. Jeśli po tej zmianie otrzymujesz więcej numerów telefonów to osiągnąłeś sukces.
Podsumowanie
Projektowanie stron www to proces, w który powinieneś się zaangażować. Wszystkie z powyższych etapów są równie ważne i żadnego z nich nie powinno się pominąć jeśli chce się osiągnąć sukces. Jeśli poświęcisz trochę czasu na starcie strony a w szczególności określisz cel biznesowy to zaowocuje to tym, że będziesz wiedział, że inwestycja w stronę internetową opłaca i zwraca się.
Pamiętaj, że zmiana w każdym z etapów wymaga zmian we wszystkich etapach po nim.Dlatego tak ważne jest dokładne zastanowienie się nad celem biznesowym przy projekcie strony www.