Jako sprzedawca internetowy, decydujący się na stworzenie własnego sklepu internetowego, udajesz się do agencji projektowania, aby przygotowała ona dla Ciebie ofertę oraz wycenę projektu i wdrożenia Twojej nowej strony internetowej. Porównując oferty na rynku e-commerce ciężko jest wybrać konkretną firmę. Jest tak głównie dlatego, że sprzedawcy nie posiadają wyspecjalizowanej wiedzy, która pozwalałaby im zweryfikować kompetencję wybranej agencji projektowania stron WWW.

W tym artykule chciałbym przybliżyć Ci - krok po kroku, jak powstaje profesjonalna strona internetowa wraz z elementami, które jej towarzyszą. Przedstawię kolejne etapy, wiedzę, materiały, a także narzędzia, z których jako firma, zajmująca się graficznym tworzeniem stron „www” i kodowaniem stron internetowych, korzystamy w trakcie projektowania i wykonywania strony internetowej twojego sklepu Online.

Profesjonalna strona to taka, która jest wykonana od podstaw (zaprojektowana i zakodowana), spełnia wyznaczone cele oraz oferuje najwyższy standard użyteczności. Fachowo stworzona strona sklepu internetowego to taka, po której łatwo i przyjemnie poruszają się jej użytkownicy.

    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 internetowej 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 pozwolą przygotować najlepszy produkt finalny - prężnie działającą stronę internetową. Potrzebujesz sklepu z perspektywami rozwoju, z pominięciem kluczowych błędów? Te często pojawiają się na stronach internetowych, stworzonych przez amatorów.

    Aby więc wykonać stronę potrzebujemy:

      1. Wiedzy i umiejętności

      Potrzebujemy wykwalifikowanego, profesjonalnego zespołu ludzi. W Netgrafie 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 też posiada świetny gust. Wyczucie estetyki i umiejętność postawienia się na miejscu użytkownika nowopowstałej strony sklepu internetowego są kluczowymi elementami pozwalającymi odpowiednio zaplanować układ graficzny strony i wygląd pierwszych projektów. Wiedza i doświadczenie każdego z naszych specjalistów wykorzystywana jest do stworzenia witryny internetowej w 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. Przy ich pomocy możemy tworzyć ciekawe projekty stron sklepów internetowych dla naszych klientów. Nasze oprogramowania pomagają w komunikacji i sprawiają również, że możemy wdrażać nie tylko coraz ciekawsze realizacje, ale też pozwalają nam na kreowanie dokładnie tego, czego chcemy i czego oczekują od nas nasi klienci. Dzięki stosowanym przez nas zabiegom, projekty graficzne i makiety stron internetowych tworzone przez nas mogą przykuwać oko użytkownika i sukcesywnie zachęcać go do zakupu. Nasze realizacje zadowolą nawet najbardziej wymagających e-Przedsiębiorców.

          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 Twojego sklepu internetowego było wręcz dziecinnie proste. Każdy więc doskonale sobie z tym poradzi w szybki i intuicyjny sposób. Przykładem takiego rozwiązania jest np. system kadrowania zdjęć, dzięki któremu jeżeli na stronie zdjęcie posiada proporcje 2:1, to nasz CMS 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ą osobiście, ż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 graficznych i wdrożeniowych.

                2. Ustalenie zakresu prac i podpisanie umowy

                W momencie, w którym 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ą Cię jako klienta. Wyznaczymy kary za własną nieterminowość, możliwość poprawek, a nawet przygotowanie 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 poprosimy Cię 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 najwyższym stopniu spełniał oczekiwania klienta i aby „wpasował” 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 internetowej swojego sklepu. Brief uzupełnia się przez naszą aplikację, dzięki temu nasi pracownicy mają bieżący wgląd do wytycznych.

                  Od tego momentu nasz projekt manager pomaga w wypełnieniu briefu i koordynuje projekt. Jego praca to dbanie o dobrą komunikację z Tobą oraz dopilnowanie tego, aby projekt całości strony internetowej był wykonany w jak najwyższej jakości i w ustalonym terminie.

                    3. Określenie celów

                    Każda strona internetowa ma jakiś cel, jak również każda zakładka na stronie sklepu internetowego ma spełniać określony cel. Kiedy wiemy dokładnie czego oczekuje od nas klient oraz jakimi materiałami dysponujemy, myślimy o tym dla kogo i w jakim celu tworzymy stronę internetową. Oczywiście myślimy wtedy przede wszystkim o  potencjalnych klientach naszego klienta. Zależy nam, aby strona Twojego sklepu internetowego mogła spełniać trzy główne role – sprzedażową, informacyjną oraz wizerunkową, a najlepiej wszystkie na raz lub w odpowiednich proporcjach zależnych od wyznawczych przez Ciebie celów.

                    Natomiast istotne 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. Stworzenie, chociażby odpowiedniego 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 zleceniodawcy.

                      3.1 Opracowanie koncepcji

                      Mając wyznaczone cele potrzebujemy jeszcze koncepcji. Czyli kreatywnego pomysłu na spójne zaprojektowanie wszystkich graficznych elementów strony. Wszak w naszej branży dobry pomysł to połowa sukcesu. Strona internetowa musi spełniać wskazane założenia, ale jednocześnie powinna być też ciekawa, wzbudzać zaufanie, przyciągać wzrok i zachęcać do klikania. Koncepcja tworzonej strony internetowej musi spełniać 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 estetycznych banerów wiedząc, że klient nie ma możliwości, aby je systematycznie zmieniać i aktualizować. Naszą wstępną koncepcję zawsze przedstawiamy wizualnie w postaci makiet koncepcyjnych.

                        4. Wykonanie makiet (wizualizacja koncepcji strony)

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

                        Za przygotowanie makiet w naszej firmie odpowiadam osobiście. Wykorzystuję przy tym całą swoją wiedzę i doświadczenie tak, aby stworzyć jak najdokładniejszy 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 odbiorców. Do tworzenia makiet wykorzystujemy następujących programów: UXpin i/lub Photoshop.

                          5. Akceptacja makiet

                          Kiedy makiety są już gotowe, przedstawimy Ci je wraz z ich dokładnym omówieniem. Oprogramowanie, z którego korzystamy pozwala na kliknięcie wybranego przez nas miejsca na projekcie strony internetowej 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 i zadowolenia klienta.

                            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 nasza grafik 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ówki, a gotowe logo przekazujemy klientowi w najpopularniejszych formatach.

                            Do przygotowania logotypu używamy następujących narzędzi:

                              7. Projektowanie graficzne

                              Gdy posiadamy już logo oraz zaakceptowane makiety strony 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 sklepu internetowego. 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.

                                8. Akceptacja projektów graficznych

                                Każdy etap pracy zawsze poprzedzony jest akceptacją naszego klienta. Wszystkie projekty graficzne strony internetowej 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 przedstawionym Ci 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 gotowej już stronie. Taka zmiana może być na tyle duża, że będzie musiał przy niej pracować grafik, koder i 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.

                                  9. Kodowanie projektów graficznych do HTML

                                  Kiedy już wszystkie projekty graficzne mamy zaakceptowane nasz koder 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ł możliwie najbardziej optymalny, a strona dostawała jak najwyższe noty w PageSpeed. Dowodem na to jest np. rewelacyjny wynik naszej wersji demonstracyjnej CMS z wynikiem 100/100!

                                  Nasz frontendowiec, aby sprawniej i lepiej wykonywać powierzone mu zadania, wykorzystuje w swojej pracy następujące programy:

                                  • Edytor: Visual Studio Code - edytor od Microsoft. Poprzez możliwość instalacji i dodawania wtyczek możemy ułatwić sobie pracę nad kodem (np. formatowanie kodu, podpowiedzi);
                                  • Framework CSS: Bootstrap - znacząco przyspiesza pracę nad stronami responsywnymi 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 - darmowy 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 internetowa opiera się na naszym autorskim oprogramowaniu. Dzięki temu w prosty 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-młodych.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 pozwoli na przykład po podaniu adresu pokazać go na mapie Google.

                                      Nasz programista w swojej pracy używa przede wszystkim:

                                      • GIT - rozproszony system kontroli wersji,
                                      • PhpStorm - środowisko programistyczne.

                                        12. Wprowadzanie treści i innych materiałów

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

                                          13. Testowanie

                                          Najważniejsze mamy za sobą. Mamy już zaprojektowaną stronę internetową, 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.

                                            14. Szkolenie oraz odbiór strony

                                            Gdy wszystko jest już gotowe, zapraszamy do naszego biura na szkolenie lub przygotowujemy dla Ciebie 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 internetowej.

                                              Netgraf
                                              Opcjonalnie
                                              Zamknij
                                              Opcjonalnie