kreatywno┼Ť─ç innowacyjno┼Ť─ç
pomys┼éowo┼Ť─ç koncept

Etapy tworzenia strony www

CHCESZ BY─ć NA BIE┼╗─äCO?
ZAPISZ SI─ś DO NEWSLETTERA
Marcin Osak AUTOR: Marcin Osak

Jakie s─ů etapy tworzenia strony www?

M├│wi si─Ö, ┼╝e wsp├│┼éczesny biznes nie mo┼╝e obej┼Ť─ç si─Ö bez strony internetowej. Jednak przy tak ogromnej konkurencji w sieci nie wystarczy ju┼╝ tylko pospolity projekt. Potrzebne s─ů rozwi─ůzania szyte na miar─Ö. To troch─Ö tak jak z dobrym garniturem u krawca. W pierwszej kolejno┼Ťci opisujemy nasze potrzeby, zastanawiamy si─Ö, na jakie okazje b─Ödziemy wk┼éada─ç garnitur. Potem nast─Öpuje wyb├│r materia┼é├│w i ┼Ťci─ůgni─Öcie naszych wymiar├│w. Musimy wi─Öc odpowiednio przygotowa─ç si─Ö do realizacji tego zlecenia. Jest w tym wiele analogii do tworzenia stron www. Jak przygotowa─ç si─Ö do realizacji projektu z agencj─ů interaktywn─ů? Odpowied┼║ na to pytanie znajdziesz w niniejszym artykule.

Etap 1. Okre┼Ťlenie potrzeb strony www

Etapy tworzenia strony www

Ka┼╝da strona internetowa tworzona jest w jakim┼Ť celu. Mo┼╝e to by─ç sprzeda┼╝, zwi─Ökszenie ┼Ťwiadomo┼Ťci marki, pozyskanie tzw. „lead├│w” lub po prostu przedstawienie pe┼énej oferty us┼éug. Okre┼Ťlenie konkretnego celu jest priorytetem i absolutnym punktem wyj┼Ťcia przy ka┼╝dej realizacji strony www. To pierwszy etap realizacji strony www.

Nawet naj┼éadniejsza strona internetowa b─Ödzie bezu┼╝yteczna, je┼Ťli zapomnisz o u┼╝ytkownikach i ich potrzebach. Wyobra┼║ sobie, ┼╝e witryna jest drog─ů, na kt├│rej ko┼äcu czeka na Ciebie imponuj─ůca nagroda w postaci wi─Ökszej ilo┼Ťci zapyta┼ä ofertowych do Twojej firmy. Co nale┼╝y zrobi─ç, aby osi─ůgn─ů─ç ten cel? Wystarczy odpowiedni dob├│r element├│w na stronie, kt├│re wyzwol─ů w u┼╝ytkowniku ch─Ö─ç podj─Öcia okre┼Ťlonego przez nas dzia┼éania.

W pierwszej kolejno┼Ťci okre┼Ťl cele, jakie powinny przy┼Ťwieca─ç stronie internetowej. Czy chcesz pozyskiwa─ç kontakty do potencjalnych klient├│w? Mo┼╝e pozyskujesz klient├│w z innych ┼║r├│de┼é i wystarczy, ┼╝e odpowiednio zakomunikujesz warto┼Ťci swojej marki? Rozpisz wszystkie potrzeby na kartce i wybierz ten najwa┼╝niejsze dla Twojego projektu. Mo┼╝e si─Ö okaza─ç, ┼╝e wcale nie potrzebujesz rozbudowanej strony i wystarczy strona typu wizyt├│wka. Na papierze dostrze┼╝esz wi─Öcej, ni┼╝ mo┼╝e si─Ö wydawa─ç.

Etap 2. Brief

Brief to podstawowy dokument do komunikacji pomi─Ödzy firm─ů a agencj─ů interaktywn─ů. Dobrze przygotowany brief b─Ödzie pomocnym narz─Ödziem dla Ciebie, jak i projektanta. Tak wiemy, nikt nie lubi wype┼énia─ç dokument├│w, a ju┼╝ na pewno nie przedsi─Öbiorca. By─ç mo┼╝e, wielokrotnie rozmawia┼ée┼Ť ju┼╝ z wybranym wykonawc─ů, ale co┼Ť mog┼éo umkn─ů─ç lub zosta─ç niedostatecznie jasno wyartyku┼éowane. Wszyscy jeste┼Ťmy lud┼║mi i pomimo wsp├│lnego j─Özyka, inaczej si─Ö komunikujemy. Dlatego te┼╝ wymy┼Ťlono brief.

Brief to zwyk┼éa ankieta. Mo┼╝e by─ç w formie online lub w formie dokumentu tekstowego do wype┼énienia. Opiszesz w nim oczekiwane narz─Ödzia strony, nakre┼Ťlisz spis zak┼éadek menu i ich zawarto┼Ť─ç. W briefie podasz przyk┼éady stron, kt├│re Ci si─Ö podobaj─ů oraz to, czego Twoim zdaniem wykonawca powinien unika─ç. Ka┼╝dy biznes ma swoje niuanse, kt├│re projektantowi strony nie musz─ů by─ç znane.

Pomy┼Ťl o briefie jako o mapie, kt├│r─ů tworzysz. Mapie, kt├│rej skarbem jest Twoja satysfakcja z wykonanego zlecenia. Zar├│wno Tobie, jak i wykonawcy zale┼╝y, aby do niego dotrze─ç. Im wi─Öcej klarownych informacji si─Ö w nim znajdzie, tym lepszy b─Ödzie efekt.

Etap 3. Formalno┼Ťci (umowa i zaliczka)

Zak┼éadamy, ┼╝e wiemy, jakie s─ů nasze oczekiwania. Otrzymali┼Ťmy ofert─Ö i wybrali┼Ťmy wykonawc─Ö, kt├│remu chcemy powierzy─ç nasz projekt. Mamy r├│wnie┼╝ tre┼Ťciwie wype┼éniony brief. Przypiecz─Ötowaniem wsp├│┼épracy b─Ödzie umowa, kt├│ra zabezpieczy interesy obu stron. Umowa jest podstaw─ů ka┼╝dej dobrej wsp├│┼épracy. Pomimo tego, ┼╝e potrzebna jest na czas wojny, r├│wnie┼╝ w czasie pokoju b─Ödzie niezast─ůpiona.

Dobra umowa na wykonanie strony internetowej powinna okre┼Ťla─ç szczeg├│┼éowo funkcjonalno┼Ť─ç strony. Opisze zakres prac wykonawcy, harmonogram realizacji zlecenia czy d┼éugo┼Ť─ç i zakres gwarancji. Znajd─ů si─Ö w niej r├│wnie┼╝ zapisy dotycz─ůce obowi─ůzk├│w zamawiaj─ůcego i harmonogram p┼éatno┼Ťci. Nie ma uniwersalnego wzoru umowy na wykonanie strony internetowej. Ka┼╝da agencja interaktywna posiada sw├│j szablon.

Nale┼╝y wspomnie─ç r├│wnie┼╝ o zaliczce. Mo┼╝e ona by─ç tak┼╝e w formie zadatku. Rzadko kt├│ra agencja interaktywna pobiera 100% warto┼Ťci wynagrodzenia przed rozpocz─Öciem prac. Ma┼éo kt├│ry Zamawiaj─ůcy zgodzi┼éby si─Ö te┼╝ na pe┼én─ů p┼éatno┼Ť─ç. Dobr─ů praktyk─ů s─ů zaliczki w wysoko┼Ťci 25%-50% warto┼Ťci zlecenia. Zaliczka pozwoli wykonawcy op┼éaci─ç podstawowe koszty realizacji strony WWW. Zamawiaj─ůcy poka┼╝e w ten spos├│b swoj─ů wyp┼éacalno┼Ť─ç i potwierdzi ch─Ö─ç z┼éo┼╝enia zlecenia. Jest jeszcze jedna zaleta zaliczek. W ten spos├│b ┼éatwiej b─Ödzie klientowi prze┼ékn─ů─ç faktur─Ö ko┼äcow─ů. Zostanie ona pomniejszona o wp┼éaty pocz─ůtkowe ­čÖé

Etap 4. Pozostałe materiały do stworzenia strony

Kolejny etap strony WWW to zgromadzenie materia┼é├│w, kt├│re dostarczy─ç mo┼╝e tylko klient. Zaczniemy od fotografii. Podstawowym narz─Ödziem pracy grafik├│w s─ů banki zdj─Ö─ç. Mo┼╝na tam zakupi─ç fotografie tematyczne, kt├│re zostan─ů wykorzystane do zaprojektowania szaty graficznej. Nic nie zast─ůpi autentycznych fotografii. Mog─ů to by─ç zdj─Öcia siedziby, zespo┼éu, linii produkcyjnej czy samych produkt├│w. Dlatego warto zawczasu wytypowa─ç i zakontraktowa─ç lokalnego fotografa.

Kolejna kwestia to tre┼Ťci na stron─Ö internetow─ů. W dobie system├│w CMS bardzo cz─Östo ten aspekt jest bagatelizowany. Wykonawcy s┼éysz─ů „to si─Ö uzupe┼éni”. Szata graficzna strony musi korespondowa─ç z tekstami. Jest to szczeg├│lnie istotne przy stronach typu „landing page”. Je┼╝eli projektant ma mie─ç materia┼é do zaprojektowania grafiki, musi posiada─ç pe┼éne tre┼Ťci ju┼╝ na samym pocz─ůtku. Nie musz─ů to by─ç teksty na ca┼é─ů witryn─Ö. Wystarcz─ů tre┼Ťci na stron─Ö g┼é├│wn─ů. Niech grafik nie zastanawia si─Ö co wstawi─ç w danym miejscu, tylko jak to zaprezentowa─ç. Pomocy w zakresie tre┼Ťci na stron─Ö internetow─ů mo┼╝na poszuka─ç u profesjonalnego copywritera.

Na ostatni─ů cze┼Ť─ç materia┼é├│w sk┼éadaj─ů si─Ö dane dost─Öpowe do hostingu. Klient, posiadaj─ůc stron─Ö internetow─ů, cz─Östo op┼éaca faktury w terminie i wszystko dzia┼éa nieprzerwanie. Gdy przychodzi do etapu instalacji gotowej strony, nikt nie wie jak dosta─ç si─Ö do us┼éug hostingowych. Zaczyna si─Ö gor─ůczkowe tropienie os├│b, kt├│re rejestrowa┼éy domen─Ö czy odpowiadaj─ů za serwer. Gorzej, gdy okazuje si─Ö, ┼╝e s─ů to byli pracownicy firmy i nie ma z nimi kontaktu. Warto wi─Öc zawczasu zgromadzi─ç wszystkie dane. Domena internetowa to przecie┼╝ jeden z najwa┼╝niejszych zasob├│w niematerialnych firmy.

Etap 5. Projektowanie strony oraz poprawki

Poprawki projektowania

Teraz czas na szycie naszego garnituru, czyli tworzenie projektu graficznego. Proces tw├│rczy zazwyczaj rozpoczyna si─Ö od szkic├│w i burzy m├│zg├│w w zespole. W ten spos├│b powstaje makieta funkcjonalna ka┼╝dej zak┼éadki. Tak przygotowany schemat mo┼╝e by─ç skonsultowany z klientem lub tylko wewn─ůtrz zespo┼éu.

Nast─Öpnie przychodzi czas na zmaterializowanie pomys┼é├│w. Na tym etapie pole do popisu ma grafik, kt├│ry pracuje nad warstw─ů wizualn─ů strony. Najwa┼╝niejszym miejscem ka┼╝dej strony www jest strona g┼é├│wna i to ona jest projektowana w pierwszej kolejno┼Ťci. Po wykonaniu projektu graficznego strony g┼é├│wnej nast─Öpuje jego prezentacja klientowi.

Klient opiniuje projekt i przekazuje ewentualne uwagi dotycz─ůce sugerowanych zmian do wdro┼╝enia. Wskazuje, nad kt├│rymi elementami nale┼╝y jeszcze popracowa─ç. Zmiany wdra┼╝ane s─ů na zasadzie „projekt – poprawki – prezentacja”. Tak─ů form─Ö nazywamy sesj─ů lub tur─ů poprawek. W ten spos├│b szlifujemy projekt do uzyskania satysfakcjonuj─ůcego efektu. Po akceptacji strony g┼é├│wnej grafik projektuje i szlifuje uk┼éady pozosta┼éych podstron, a┼╝ do zamkni─Öcia ca┼éej warstwy wizualnej projektu.

Etap 6. Kodowanie strony www

Im wi─Öksza budowla, tym trwalsze powinny by─ç fundamenty. W przypadku budowania stron za fasad─Ö odpowiedzialny jest grafik, ale to programista „wylewa” fundamenty. Kod to co┼Ť, czego nie wida─ç na pierwszy rzut oka. Odpowiednio napisany kod sprawi, ┼╝e strona internetowa b─Ödzie szybka w obs┼éudze i poprawnie interpretowana przez przegl─ůdarki internetowe.

Programowanie strony to etap cz─Östo du┼╝o bardziej czasoch┼éonny ni┼╝ jej projektowanie. Nie ma co si─Ö dziwi─ç. Ka┼╝dy kolor, kr├│j czcionki czy animacja, sk┼éadaj─ů si─Ö z linijek kodu, kt├│re nale┼╝y napisa─ç. Jak wiele kodu posiada pojedyncza strona www, mo┼╝na si─Ö przekona─ç klikaj─ůc w przegl─ůdarce CTRL+U. Podejrzymy wtedy kod danej podstrony, kt├│r─ů aktualnie przegl─ůdamy. 

Etap 7. Testy i poprawki strony

B┼é─Ödy zawsze si─Ö zdarzaj─ů. Jest to w ko┼äcu oprogramowanie szyte na miar─Ö. Wystarczy liter├│wka w kodzie, aby funkcja nie dzia┼éa┼éa zgodnie z za┼éo┼╝eniem. Ka┼╝da strona internetowa przed wdro┼╝eniem zostaje odpowiednio przetestowana. Odpowiada za to ca┼éy zesp├│┼é. Grafik zauwa┼╝y b┼é─Ödy w wyr├│wnaniu, programista b┼é─Ödy w walidacji kodu, a menad┼╝er projektu wy┼éapie b┼é─Ödy ortograficzne w tek┼Ťcie. Im wi─Öcej os├│b przetestuje stron─Ö internetow─ů, tym wi─Öksza szansa na wy┼éapanie b┼é─Öd├│w r├│┼╝nego rodzaju.

Etap 8. Instalacja strony www

stona www uszyta na miare firmy

Nasz garnitur jest ju┼╝ gotowy. Ostatnim krokiem do tego, aby nasz projekt zobaczy┼é ca┼éy ┼Ťwiat, jest instalacja. Na tym etapie witryna umieszczana jest na docelowym serwerze. Po opublikowaniu jest ona tak┼╝e zg┼éaszana do wyszukiwarki internetowej. Cz─Östo r├│wnie┼╝ do pracy zabieraj─ů si─Ö pozycjonerzy, kt├│rych zadaniem jest skuteczne i trwa┼ée pozycjonowanie strony WWW. Uruchamiane s─ů kampanie link├│w sponsorowanych Google Ads. Wszystko po to, aby nasz projekt trafi┼é do jak najwi─Ökszej liczby odbiorc├│w.

Bardzo wa┼╝na jest te┼╝ skonfigurowanie strony z takimi narz─Ödziami jak Google Tag Manager czy Google Analytics, kt├│re pozwala monitorowa─ç ruch na stronie. Dzi─Öki temu b─Ödziemy r├│wnie┼╝ w stanie okre┼Ťli─ç efektowno┼Ť─ç poszczeg├│lnych dzia┼éa┼ä marketingowych.

Etap 9. Szkolenia i pomoc techniczna

S─ů to opcjonalne us┼éugi. Wiele agencji interaktywnych, po zako┼äczeniu projektu, obejmuje swoich klient├│w wsparciem technicznym i ochron─ů gwarancyjn─ů. Je┼╝eli co┼Ť zacznie dzia┼éa─ç inaczej, ni┼╝ to by┼éo za┼éo┼╝one, nale┼╝y zdiagnozowa─ç przyczyn─Ö i j─ů wyeliminowa─ç.

D┼éugo┼Ť─ç gwarancji i pomocy technicznej jest r├│┼╝ny. Agencja interaktywna Avangardo udziela a┼╝ 2 lat wsparcia w cenie ka┼╝dego projektu oraz dodatkow─ů us┼éug─Ö p├│┼érocznego wsparcia PREMIUM. Jest to wystarczaj─ůcy okres do tego, aby w toku eksploatacji strony, znale┼║─ç wszystkie jej mankamenty. W ko┼äcu dobry garnitur ┼Ťwiadczy nie tylko o osobie, kt├│ra go nosi, ale te┼╝ o osobie, kt├│ra go uszy┼éa.

Powr├│t do listy blogowej
Newsletter Newsletter Newsletter Newsletter Newsletter Newsletter Newsletter Newsletter