Jako sprzedawca internetowy, decydujący się na stworzenie własnej strony internetowej, udajemy się do agencji interaktywnej, aby przygotowała nam ona ofertę oraz wycenę naszej nowej strony. Porównując oferty ciężko jest wybrać konkretną firmę. Jest tak głównie dlatego, że sprzedawcy nie posiadają odpowiedniej wiedzy, która pozwalałaby im zweryfikować kompetencję wybranej agencji interaktywnej.

W tym artykule chciałbym Państwu przybliżyć krok po kroku, jak powstaje dobra strona internetowa wraz z elementami, które jej towarzyszą Przedstawię Państwu etapy, naszą wiedzę, materiały, a także narzędzia z których korzystamy w trakcie projektowania i wykonywania profesjonalnej strony internetowej.

Projektowanie stron internetowych Know How

Profesjonalna strona to taka strona, która jest wykonana od podstaw (zaprojektowana i zakodowana), spełniająca wyznaczone
cele oraz z najwyższym standardem użyteczności. Profesjonalna strona internetowa to właśnie taka strona, po której łatwo i
przyjemnie nawiguje się jej użytkownikom.

Na co zazwyczaj klienci zwracają uwagę przy projektowaniu strony internetowej

Proces powstawania strony internetowej od zera jest długi i skomplikowany. Do wykonania świetnej strony nie wystarczy już jedynie sam komputer. Niezbędna jest do tego odpowiednia wiedza, zespół specjalistów, narzędzia w postaci odpowiedniego oprogramowania oraz doświadczenie, które pozwala przygotować najlepszy produkt finalny z pominięciem kluczowych błędów, jakie często pojawiają się na amatorskich stronach.

Aby więc wykonać stronę potrzebujemy:

1. Wiedzy i umiejętności

A więc przede wszystkim zespół ludzi. W naszej firmie pracują marketingowcy, projekt menadżerzy, specjaliści od użyteczności i UX, graficy, frontendowcy (koderzy), programiści, specjaliści SEO/SEM, testerzy, a także administratorzy sieci oraz pozostała część zespołu, która nie tylko zna się na swojej pracy, ale i posiada świetny gust. Wyczucie estetyki i umiejętność postawienia się na miejscu użytkownika są kluczowymi elementami pozwalającymi odpowiednio zaplanować układ i wygląd pierwszych projektów strony. Wiedza i doświadczenie każdego z naszych specjalistów wykorzystywana jest do stworzenia witryny internetowej jak najwyższej jakości.

Dobrze dobrany zespół to jeden z filarów drogi do sukcesu

2. Oprogramowania

Istnieje szereg programów i aplikacji, które pomagają nam w naszej pracy. Sprawiają one, że produkt finalny, strona internetowa staje się wydajniejsza i prostsza. Pomagają w komunikacji i sprawiają również, że możemy wdrażać coraz ciekawsze realizacje, a przede wszystkim pozwalają nam na kreowanie dokładnie tego, czego chcemy. (ok)

3. Systemu do zarządzania treścią

Obecnym standardem jest m.in. możliwość samodzielnej edycji zawartości strony internetowej. Nasz CMS jest tak zaprojektowany, aby dowolna aktualizacja, dodanie nowych treści na stronie było wręcz dziecięco proste. Każdy więc doskonale sobie z tym poradzi w szybki i przyjemny sposób. Przykładem takiego rozwiązania jest np. system kadrowania zdjęć, dzięki któremu np. jeżeli na stronie zdjęcie posiada proporcje 2:1 to nasz CMS samodzielnie i automatycznie, zawsze wykadruje je w odpowiedni sposób, tak żeby pasowało idealnie.

Jakie są etapy projektowania strony internetowej?

1. Zapytanie ofertowe

Pierwszym etapem jest zwrócenie się do nas z zapytaniem o ofertę realizacji strony internetowej, a my chcąc jak najdokładniej przedstawić koszt i czas realizacji, przeanalizujemy Twoje zapytanie i oddzwonimy lub spotykamy się z Tobą, żeby jak najdokładniej poznać Twoje oczekiwania i zakres pracy jaki przyjdzie nam wykonać.

Na tej podstawie dokonujemy kalkulacji kosztów i szacujemy jaki czas będzie potrzebny do wykonania danego zakresu prac.

2. Ustalenie zakresu prac i podpisanie umowy

W momencie, kiedy sprecyzujemy wszystkie nasze ustalenia, spisujemy je w formie umowy. Ważną częścią umowy jest załącznik, w którym szczegółowo opisany jest dokładny zakres prac. Dzięki temu wzajemnie mamy pewność, że nie zapomnieliśmy o żadnej istotnej kwestii. Jest to również zabezpieczeniem klienta, który dzięki temu ma pewność, że wszystkie cele z zakresu zostaną uwzględnione w produkcie finalnym.

Dlatego w naszej umowie, standardowo znajdziesz również zapiski, które dodatkowo ochronią Ciebie jako klienta tj. wyznaczymy kary za nieterminowość, możliwość poprawek oraz przygotowania nawet dodatkowego, kolejnego projektu graficznego.

W umowie zawieramy również informację o przeniesieniu majątkowych praw autorskich po skończonej realizacji oraz 12 miesięczną gwarancję na stronę.

2.1. Wypełnienie briefu

W tym samym czasie lub zaraz po podpisaniu umowy prosimy o uzupełnienie prostego briefu kreatywnego. Dzięki niemu chcemy poznać preferencje naszych klientów, co im się podoba, a co nie. Tę wiedzę wykorzystamy, aby przedstawiony projekt strony w jak najlepszym stopniu spełniał oczekiwania klienta i aby „wstrzelić” się w jego gust.

W tym miejscu potrzebujemy również treści i materiałów, które klienci posiadają i chcą umieścić na stronie. Brief uzupełnia się przez naszą aplikację, dzięki temu nasi pracownicy mają cały czas wgląd do wytycznych.

Od tego momentu, Karol, nasz projekt manager pomaga np. w wypełnieniu briefu i koordynuje projekt. Jego praca to dbanie o dobrą komunikację z klientem oraz dopilnowanie tego, aby projekt był wykonany w jak najlepszej jakości i na czas

3. Określenie celów

Każda strona ma jakiś cel, zasadniczo każda zakładka na stronie ma spełniać określony cel. Teraz, kiedy wiemy czego oczekuje od nas klient oraz jakimi materiałami dysponujemy, myślimy o tym dla kogo i w jakim celu tworzymy stronę. Oczywiście myślimy wtedy przede wszystkim o klientach naszego klienta. Aby więc strona mogła spełniać głównie trzy role – sprzedażową, informacyjną oraz wizerunkową, a najlepiej wszystkie na raz lub w odpowiednich proporcjach zależnych od wyznaczonego celu.

Natomiast istotnym jest to, że każda branża posiada różne cechy i specyfikę. Inaczej sprzedawać będziemy usługi kosmetyczne, a zupełnie inaczej wyglądać będzie sprzedaż drzwi z montażem. Elementy zawarte na stronie muszą wspierać realizację wyznaczonych celów. Zostaną więc odpowiednio zaprojektowane również dla wskazanej branży i oferty.

To samo dotyczy poszczególnych podstron. Nawet tak standardowa i mało istotna (w rozumieniu projektowym) zakładka może posiadać różne cele, a stworzenie chociażby dobrego formularza kontaktowego nie jest wcale takie proste, jak może się to wydawać na pierwszy rzut oka.

W większości przypadków proces projektowy poprzedzony jest szczegółową analizą i audytem konkurencji, jak również aktualnej sytuacji i wizerunku firmy zamawiającego.

3.1 Opracowanie koncepcji

Mając wyznaczone cele potrzebujemy jeszcze koncepcji. Czyli kreatywnego pomysłu na spójne zaprojektowanie wszystkich elementów strony. Wszak w naszej branży dobry pomysł to połowa sukcesu. Strona internetowa musi spełniać wskazane cele ale jednocześnie powinna być też ciekawa, wzbudzać zaufanie, przyciągać wzrok i zachęcać do klikania. Koncepcja strony musi nie tylko spełniać wyznaczone cele ale również założenia i możliwości zamawiającego. Nie zaproponujemy stworzenia modułu dla bloga na stronie internetowej wiedząc, że klient nie ma czasu na tworzenie jego treści. Nie stworzymy wizualizacji, w której występować będzie duża liczba ciekawych banerów wiedząc, że klient nie ma możliwości, aby je systematycznie zmieniać i aktualizować.

Naszą wstępną koncepcję zawsze przedstawiamy przedstawiamy wizualnie w postaci makiet koncepcyjnych.

4. Wykonanie makiet (wizualizacja koncepcji strony)

Makiety koncepcyjne to zwizualizowany pomysł na stronę. Można powiedzieć, że jest to szkic strony, przy czym jest on dużo bardziej dokładny ponieważ zawiera precyzyjne rozmieszczenie elementów na stronie takie jak ich wymiary, treści, hasła itp.

Za przygotowanie makiet w naszej firmie odpowiadam ja, osobiście. Wykorzystuję przy tym całą swoją wiedzę i doświadczenie tak, aby stworzyć jak najlepszy wzorzec. Rozmieszczam informacje w taki sposób, aby użytkownicy jak najszybciej znaleźli to czego szukają. Tworzymy strony użyteczne, czyli takie, w których rozwiązania zaprojektowane są specjalnie dla ich użytkowników.

Do tworzenia makiet używamy następujących programów: UXpin i/lub Photoshop.

5. Akceptacja makiet

Kiedy makiety są już gotowe, przedstawiamy je klientowi wraz z ich dokładnym omówieniem. Oprogramowanie z którego korzystamy pozwala na kliknięcie w wybranym miejscu projektu strony i na odpowiednie jego opisanie. Tę samą funkcję posiada osoba oceniająca stronę. W prosty sposób może dodać uwagi z dokładnym ich wskazaniem w odpowiednim miejscu makiety.

W razie uwag nanosimy poprawki na makiety i pracujemy do momentu całkowitej ich akceptacji

6. Projektowanie logotypu

Logotyp to fundament wizualny firmy, to on wyznacza kolorystykę na stronie oraz w zależności od jego formy, jej charakter wizualizacji. Po przesłanym briefie, Kasia [zdjęcie kasi] - nasza graficzka przygotowuje wstępne szkice logotypu. Wszystkie nasze logotypy najpierw wykonujemy na kartce ołówkiem. Wszystkie elementy są więc unikalne, włączając w to czcionkę.

Po akceptacji logotypu możemy również przygotować papier firmowy lub wizytówek, a gotowe logo przekazujemy klientowi w najpopularniejszych formatach.

Do przygotowania logotypu używamy następujących narzędzi:
- Kartka i ołówek ;)
- Tablet graficzny
- Adobe Ilustrator

7. Projektowanie graficzne

Gdy posiadamy już logo oraz zaakceptowane makiety strony, Marcin - nasz grafik, przystępuje do jej projektowania. Dzięki temu, że mamy już wykonane makiety rozkładu elementów, może on poświęcić cały swój czas i energię na estetyczną, kreatywną wizualizację strony. Nie musi zastanawiać się co i jak ma zrobić, bo to już zostało wykonane we wcześniejszym etapie koncepcyjnym.

Dodatkowo, dzięki temu iż znamy już rozmieszczenie elementów i zawartość strony, czas realizacji samego projektu jest znacznie szybszy. Dzięki temu unikamy poprawek dotyczących właśnie rozmieszczenia najważniejszych informacji i układu elementów strony..

Projekty stron internetowych wykonujemy na oprogramowaniu Adobe Photoshop. Posiadamy również szerokie zasoby w stocku zdjęciowym fotolia.

8. Akceptacja projektów graficznych

Każdy etap pracy zawsze poprzedzony jest akceptacją naszego klienta. Wszystkie projekty graficzne strony muszą zostać zaakceptowane zanim przejdziemy do jej kodowania.

Projekty zawsze przygotowujemy 1:1 i w rozdzielczości full HD. Strona internetowa będzie więc dokładnie taka jak w projekcie. Poprawki, które robione są w programie graficznym zajmują dużo mniej czasu, niż poprawki, które musiałby wykonać koder na często na gotowej już stronie. Taka zmiana może być na tyle duża, że będzie musiał przy niej pracować grafik, koder i jeszcze programista. Dzięki odpowiedniej ścieżce zarządzania projektem unikamy podobnych poprawek. Każdy etap realizowany jest więc bardzo skrupulatnie.

Gdy mamy zaakceptowane wszystkie projekty, przechodzimy do kolejnego etapu - kodowania strony.(ok)

9. Kodowanie projektów graficznych do HTML

Kiedy już wszystkie projekty graficzne mamy zaakceptowane, nasz koder - Łukasz, tnie je do HTML, czyli tłumacząc w prosty sposób, zmienia grafikę na to co widzimy w przeglądarce internetowej - gotową stronę www, dodaje wszystkie efekty, animacje i style.

Zawsze staramy się aby nasz kod HTML był jak najbardziej optymalny, a strona dostawała jak najlepsze noty w Google PageSpeed. Dowodem na to jest np. rewelacyjny wynik naszej wersji demonstracyjnej CMS z wynikiem 100/100.

Łukasz, aby sprawniej i lepiej pracować, wykorzystuje w swojej pracy następujące programy:
- Edytor: Visual Studio Code - świetny edytor od Microsoft Poprzez możliwość instalacji i dodawania wtyczek możemy ułatwić sobie pracę nad kodem (np. formatowanie kodyu, podpowiedzi)
- Framework CSS: Bootstrap - znacząco przyspiesza pracę nad stronami repsonsywnymi poprzez system grid
- Język SASS - znacząco przyspiesza pracę nad tworzeniem styli dla stron
- GULP: narzędzie do automatyzacji pracy (np. automatyczne kompilowanie SASS do CSS)
- Repozytorium GIT - np. GITLAB - dzięki niemu możemy kontrolować wersje stron / aplikacji nad którymi pracujemy i bezpiecznie je przechowywać
- Przeglądarka FTP: WinSCP - darmowa program, dzięki któremu możemy w łatwy i przejrzysty sposób przeglądać foldery na serwerze.

10. Podpinanie kodu HTML do CMS

Każda stworzona przez nas strona opiera się na naszym autorskim oprogramowaniu. Dzięki temu w łatwy i przyjemny sposób zmienisz na niej np. numer telefonu w kontakcie, podmienisz zdjęcie czy dodasz kolejną nową podstronę.

Aby to było możliwe, należy „podpiąć” kod HTML pod system CMS umieszczając odpowiednie zmienne i różnego rodzaju kod w miejscach przeznaczonych do zmian, właśnie po to, aby np. nowy wprowadzony tekst, wyświetlał się tam gdzie powinien.

W zależności od stopnia skomplikowania strony i możliwych do edycji elementów, podpięcie wykonuje koder lub jeden z naszych czterech programistów.

11. Prace programistyczne

Jeżeli dana strona internetowa posiada indywidualne rozwiązania takie jak np. strona www.osiedle-mlodych.waw.pl gdzie przygotowaliśmy specjalny moduł do dodawania nowych realizacji.

Wtedy takie nowe funkcje i elementy musi zaprogramować programista. Musi on napisać specjalny program, który np. pozwoli po podaniu adresu pokazać go na mapie Google.

Przy stronach internetowych zazwyczaj pracuje nasz programista - Piotr.

Piotr w swojej pracy używa przedewszystkim
GIT - rozproszony system kontroli wersji.
PhpStorm - środowisko programistyczne.

12. Wprowadzenie treści i innych materiałówe

Najważniejsze mamy za sobą. Mamy już zaprojektowaną stronę, jest ona pociętą i podpiętą pod CMS, a zatem teraz, do strony dodajemy wszystkie treści i materiały. Konfigurujemy inne elementy takie jak np. formularz kontaktowy, aby strona była gotowa pod klucz.

13. Testowanie

Zbliżamy się do oddania strony zamawiającemu. Jeszcze tylko Karol dokładnie przetestuje stronę i to czy wszystko dobrze na niej działa wg. wyznaczonego zakresu i sprawdzi czy poprawnie wyświetla się ona w różnych przeglądarkach internetowych na urządzeniach mobilnych.y. Konfigurujemy inne elementy takie jak np. formularz kontaktowy, aby strona była gotowa pod klucz.

14. Szkolenie oraz odbiór strony

Gdy wszystko jest już gotowe, zapraszamy do naszego biura na szkolenie lub przygotowujemy specjalny webinar. Oczywiście, po skończonej realizacji jesteśmy cały czas do Twojej dyspozycji i udzielamy 12 miesięcznej gwarancji na odpowiednie działanie strony.

Oceń ten artykuł:
Dziękujemy za ocenę!
Ocena:
5
/
5

NASTĘPNY WPIS Raczek case study
POPRZEDNI WPIS Osiedle Młodych case study