To chyba jeden z najpopularniejszych typów postów. Dlaczego więc o tym piszę? Głównie dlatego, że każdy podchodzi do tego inaczej.
My w BIG EYE również.

W sieci można znaleźć stawki z ogromną rozbieżnością, od 300/500zł do 10 000zł. Od czego zacząć? Jak się z tym obchodzić, oraz co potrzebne jest nam, jak i klientowi? Poniżej znajdziecie odpowiedzi na wszystkie te pytania, oraz wiele więcej.

 

Zacznijmy od tego, co zawiera wycena i na jakiej podstawie się ją sporządza. Można podzielić przedsięwzięcie na wiele składowych, ale najważniejsze z nich to:

 

Projekt (Badania, UI/UX, Makietowanie, Prototyp, Design)

 

Koszt strony internetowej www

 

 

Żeby rozpocząć pracę nad samym wyglądem strony, przejdźmy najpierw przez ciąg procesów, pozwalających na kreacje użyteczności. Najważniejszym odbiorcą realizacji nie będzie klient lub Wy, a użytkownik. Gdyby nie on, nie byłoby sensu, aby kreować cokolwiek. Niestety wiele osób/firm o tym zapomina.

Research. Magiczne słowo, pod którym dla wielu nie kryje się nic, dla wielu wszystko, a inni wolą je pominąć. To nic strasznego, tym bardziej, że pozwoli Wam to zrozumieć kluczowe kwestie, dla jakich projekt jest tworzony. Zupełnie inna gama użytkowników kwalifikuje się pod branżę modową, zupełnie inna pod budowlaną, a jeszcze inna pod technologiczną. Jakie są różnice między nimi?

Głównie takie, że każda z grup cechuje się innymi preferencjami. Wśród każdych istnieją wypracowane schematy, którymi owe grupy się posługują. Wyobraźcie sobie, jakiego wizerunku oczekuje branża modowa, a jaki technologiczna czy budowlana. To jasne, że stonowany minimalistycznie projekt będzie odpowiedni dla mody, znów branża technologiczna postawi na ciekawe eksperymenty z animacją.

 

UI/UX. Dla tych którzy nie wiedzą jeszcze z czym to się je (choć ciężko to skrócić, bo można o tym pisać książki,  zrobię co mojej mocy) UI to w skrócie interfejs użytkownika. Wprost mówiąc, są to elementy które umieszczacie w projekcie, te użyteczne oczywiście, odpowiadające za funkcjonalności jak nawigacja, CTA, formularze, slidery czy inne komponenty strony pozwalające na jej użytkowanie. UX znów, odpowiada za umiejscowienie tych elementów. Mówi gdzie i dlaczego ten button ma znaleźć się tu i nigdzie indziej, skoro tu, to czy na pewno? UX to odczucia użytkownika, które mają kreować jego zachowanie i poruszanie się po stronie. To właśnie one sprawią, że wykona pewną akcję, do której został skierowany.

 

No dobrze skoro te 2 podstawowe pojęcia mamy za sobą, przejdźmy do Makietowania.

Makietowanie to nic innego jak bardzo prosty szkic elementów i komponentów, ich umiejscowienia i rozmiaru. Nie ma znaczenia czy zrobisz to w formie szkicu na kartce papieru, czy wolisz używać bardziej zaawansowanych narzędzi, ja osobiście preferuję Adobe xD. Pozwala to spojrzeć na cały projekt od podszewki, tym samym nie zajmuje nam głowy design, czy kolorystyka, a właśnie fundamentalne funkcje strony, które ma spełniać.

 

Prototyp. Po etapie Makietowania, Prototyp to inaczej mówiąc funkcjonalna/klikalna makieta. Również dzięki Adobe xD, można sporządzić klikalną wersję projektu, połączyć ekrany, wykonać podstawowe animacje, dzięki czemu sama makieta nabiera nowego wymiaru, bo działa podobnie jak rzeczywista, końcowa strona.

 

Design. Tutaj chyba nie trzeba tłumaczyć czym jest i jak się go wykonuje, ponieważ to zależy od technologii i preferencji projektanta. W tym etapie, ograniczeniem jest tylko wyobraźnia. Dzięki makiecie, mamy już podstawowy widok, teraz trzeba to ubrać w grafikę i voila! Projekt gotowy!

 

Ile to kosztuje?

 

Pakiet usług:
Strona firmowa/wizytówka– od 1,5k do 3k.
Serwis/portal – od 3k do 5k.

 

Oczywiście nie zawsze pełen pakiet jest wymagany, koszty można znacznie obniżyć jeśli projektując tylko sam design. Choć często odradzam takie wyjście.

 

Sam design:
Strona firmowa/wizytówka
– od 1k do 1,5k.
Serwis/portal – od 1,5k do 2,5k.

 

 

Programowanie front-end

 

 

Przy przystąpieniu do programowania sprawa nieco się komplikuje. Kluczowe jest poznanie szczegółowych funkcji projektu. Nie od dziś wiadomo, że każdy z nich jest różny, ale przyjmijmy standardowy stack.

Podstawy, czyli HTML5 i CSS3/Sass przy wsparciu Bootstrapa 4, który znacznie usprawnia pisanie kodu. Pomińmy wszystkie pluginy dla edytorów. Wszystko oczywiście zależy od wprawy, jednak śmiało można rzec, że podstawowy front-end rysuje się następująco.

 

Strona firmowa/wizytówka – ok. 1k
Serwis/portal – od 2,5k do 4k

 

Ok, co dalej? Przecież front-end na tym się nie kończy. Bootstrap 4 nie obejdzie się bez jQuery, mimo że ta biblioteka to monolit, jak na nowoczesny projekt przystało powinno się podejść do całości modularnie, ale jeśli jQuery już mamy, warto ją wykorzystać, aby usprawnić pisanie w języku JavaScript. Do czego ją wykorzystać? Poza instrukcjami warunkowymi, które pomogą nam w wielu sytuacjach i zależnościach, zyskujemy również dostęp do wielu efektów. Od podstawowych, do bardziej zaawansowanych, które możemy sporządzić dzięki .animate(). Tutaj też kłania się zaawansowana znajomość CSS oraz keyframes, które dają nam ogromne możliwości. Możemy też użyć bibliotek jak Three.js dla efektów 3D, technologii AJAX lub wszelkiej maści pluginów, których w sieci jest tyle ilu programistów.

Jeśli znów wolimy podejść modularnie do całego projektu, warto wykorzystać NPM czy Webpack. Wymaga to znajomości tych technologi, ich konfiguracji oraz użycia, ale po krótkiej wprawie, bardzo usprawnia pracę z kodem.

Tym samym bardziej zaawansowane prace Front-endowe można wycenić nastepująco.

 

Strona firmowa/wizytówka – ok. 2k
Serwis/portal – od 3k do 6k

 

 

Programowanie back-end

 

Koszt strony www

 

No tak, żadna (prawie) strona nie obejdzie się bez zaplecza. Za co odpowiada? Najprościej rzecz ujmując za przetwarzanie informacji warstwy front-end i przesyłaniu ich do serwera oraz logikę strony/aplikacji. Co dzięki temu możemy zyskać? Obsługę formularzy, rejestrację użytkowników, panele administracyjne, bazy danych, oraz wiele innych, jednak tutaj skupimy się na podstawowych jej funkcjach.

Dla potrzeby web, najczęściej wybieranym, oraz można powiedzieć, że łatwym w użyciu na tym poziomie potrzeb, jest PHP, aktualna wersja 7. Można użyć bardziej zaawansowanych technologii jak Node.js, Python czy Java, ale po co komplikować sobie zadanie? W programowaniu, często najprostsze rozwiązania bywają najlepsze i tego się trzymajmy.

 

Strona firmowa/wizytówka (obsługa formularzy, newslettery) – ok. 0,8k
Serwis/portal (rejestracje użytkowników, dashboard, filtry, ogłoszenia, sorotwania itp.) – od 7k do 15k

 

Tutaj pojawia się jeszcze inna opcja, a mianowicie WordPress. CMS bardzo wygodny w obsłudze tak dla programistów jaki użytkowników. Wiele z jego działań odbywa się w mocno uproszczony sposób, dodatkowo możliwa jest modyfikacja treści strony/portalu z poziomu administratora systemu CMS. Jak więc sprawa wygląda tutaj?

Nieco inaczej, ponieważ aby cała strona mogła zostać oparta o ten CMS, trzeba wdrożyć wszystkie warstwy, tak front jak i back-end. Stąd dochodzi tutaj również dodatkowa praca w postaci wdrożeń, jednak daje to użytkownikowi wiele więcej możliwości niż strona statyczna, jak dodawanie wtyczek, wcześniej wspomniana edycja treści, od obrazów, przez menu, widgety, tekst, formularze czy działania marketingowe. Jaki jest koszt?

 

Strona firmowa/wizytówka – 1 – 2k
Serwis/portal – od 3k do 5k

 

 

Konfiguracja serwera i hostingu

 

Strona internetowa ile kosztuje

 

Przedostatnim etapem jest konfiguracja serwera. Podpięcie domeny, certyfikaty SSL, przekierowania, to w zasadzie podstawowe działania, z reguły wystarczające.

Strona firmowa/wizytówka/portal/serwis – 0,3k

 

 

Optymalizacja i frazy kluczowe

 

Ile kosztuje pozycjonowanie strona internetowa

 

Każdemu zależy na dobrej pozycji w wyszukiwarkach. Aby umożliwić robotom Google odpowiednie indeksowanie strony, należy najpierw ją zoptymalizować. Mowa tu o minifikacji kodu, zmniejszeniu zapytań, optymalizacji obrazów, właściwej semantyce, walidacji błędów, dodanie sitemap czy zależnościach w .htacces i robots.txt. Dodatkowo warto podpiąć takie skrypty Google Analitics, które pozwolą na śledzenie wyników i pozycji strony w indeksie Google.

Koszt zależny jest od wymagań, główne wskaźniki to PageSpeed i YSlow, które oceniają stronę pod względem szybkości ładowania, ilości zapytań do serwera oraz wiele innych, przypisując im Score na 100pkt. Dobry wynik to min. 90, co oczywiście jest do uzyskania w każdym przypadku.

Druga kwestia to frazy kluczowe, które pozwolą znaleźć stronę w wynikach wyszukiwania. Główne elementy to meta tagi, jak descritpion, title, alt, dzięki którym już można uzyskać zadowalającą pozycję. Temat pozycjonowania jest bardzo obszerny i podlega szczegółowej wycenie, skupimy się tutaj na podstawowych zagadnieniach.

 

Strona firmowa/wizytówka – 0,5 – 1k
Serwis/portal – od 1k do 2k

 

 

Podsumowanie

 

A. Jeśli w zakres zlecenia wchodzą wszystkie składowe opisane wyżej, czyli pakiet na bogato, jak:

  1. Projekt (Badania | UI/UX | Makietowanie | Prototyp | Design)
  2. Programowanie Front-end
  3. Programowanie Back-end
  4. Konfiguracja serwera i hostingu
  5. Optymalizacja

Koszt realizacji strony firmowej/wizytówki rysuje się w okolicach od 5k do 8k, portalu znów to koszt do 12k do 30k

 

B. W przypadku, gdy zlecenie nie obejmuje szerokiego zakresu projektu, a jedynie design, koszt znacząco spada, jego składowe to:

  1. Design
  2. Programowanie Front-end
  3. Programowanie Back-end
  4. Konfiguracja serwera i hostingu
  5. Optymalizacja

A koszt realizacji dla strony firmowej/wizytówki to ok. 3k, portal/serwis  to od 9k do 18k

 

C. Trzeci przypadek tyczy się CMS WordPress, a więc w przypadku opcji

  1. Design
  2. Programowanie Front-end + wdrożenie do WP
  3. Programowanie Back-end + wdrożenie do WP
  4. Konfiguracja serwera i hostingu
  5. Optymalizacja

Tutaj koszt realizacji to kolejno strona firmowa/wizytówka ok. 3,5k oraz serwis/portal od 6k do 10k

 

Każdy z tych elementów oczywiście można wycenić osobno, zupełnie różnie niż opisałem i podejść do tego od całkiem innej strony, ale jak wspomniałem na samym początku, sposobów podejścia jest tyle ile firm, starałem się opisać to tak, jak można najbardziej uniwersalnie 🙂

 

Jeśli masz pytania, zapraszam do komentowania lub kontaktu ze mną, w dziale Współpraca. Mam nadzieję, że pomogłem Wam rozwiązać odwiecznie nurtujący problem kosztu strony www, etapów realizacji i podejścia do wyceny 🙂

 

Wkrótce zapraszam po więcej artykułów!

Dobrze prawi dać mu lajka i udostępnić!